primer_view_components 0.33.0 → 0.35.0

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

@@ -9,13 +9,16 @@
   /* stylelint-disable-next-line primer/typography */
   font-size: 1rem;
   font-weight: var(--base-text-weight-semibold);
+  /* stylelint-disable-next-line primer/typography */
   line-height: 1;
+  /* stylelint-disable-next-line primer/colors */
   color: var(--bgColor-default);
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+  /* stylelint-disable-next-line primer/colors */
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -34,7 +37,7 @@
     content: '';
 
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.2s;
@@ -43,6 +46,7 @@
 
   &:hover {
     text-decoration: none;
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
@@ -88,6 +92,7 @@
 .btn-muted-mktg {
   color: var(--fgColor-default) !important;
   background: none !important;
+  /* stylelint-disable-next-line primer/box-shadow */
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
   &::before {
@@ -95,6 +100,7 @@
   }
 
   &:hover {
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
@@ -119,6 +125,7 @@
   }
 
   &:hover {
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 }
@@ -128,11 +135,11 @@
   color: #fff;
 
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
+  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
 
   &::before {
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
+    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
 
   /* fallback :focus state */

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

@@ -1 +1 @@
-body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
+@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}

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

@@ -1,7 +1,8 @@
 {
   "name": "alpha/dialog",
   "selectors": [
-    "body.has-modal",
+    "body:has(:modal)",
+    "body:has(dialog:modal.Overlay--disableScroll)",
     "dialog.Overlay:not([open])",
     ".Overlay--hidden",
     ".Overlay--visibilityHidden",

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

@@ -1 +1 @@
-{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n  overflow: hidden !important;\n  padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n  display: none;\n}\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n  [popover]:not(.\\:popover-open) {\n    display: none;\n  }\n}\n\n.Overlay {\n  display: flex;\n  inset: 0;\n  position: static;\n  margin: auto;\n  padding: 0;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  color: var(--fgColor-default);\n  border: 0;\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  &.Overlay--placement-left, &.Overlay--placement-right {\n    height: 100%;\n    max-height: unset;\n    position: fixed;\n  }\n\n  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n\n  &.Overlay--placement-left {\n    inset: 0 auto 0 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    animation-name: Overlay--motion-slideInRight;\n  }\n\n  &.Overlay--placement-right {\n    inset: 0 0 0 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n}\n\n.Overlay:modal {\n  position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--fgColor-default);\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--stack-padding-condensed);\n    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n    & + .Overlay-body {\n      padding-top: var(--stack-padding-normal);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--stack-gap-condensed);\n\n        & .Overlay-title {\n          font-size: var(--text-title-size-medium);\n        }\n\n        & .Overlay-description {\n          font-size: var(--text-body-size-medium);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed);\n    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--stack-gap-condensed);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n        var(--stack-gap-condensed);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--control-small-gap);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--text-body-size-medium);\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--text-body-size-small);\n        font-weight: var(--base-text-weight-normal);\n        color: var(--fgColor-muted);\n      }\n    }\n  }\n}\n\n.Overlay-headerFilter {\n  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--stack-padding-normal);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--text-body-size-medium);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--stack-padding-condensed);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--stack-padding-normal);\n    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--stack-gap-condensed);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: 0;\n  color: var(--fgColor-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--button-default-bgColor-hover);\n    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--borderWidth-thin) solid transparent;\n  }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n  width: 100%;\n  max-width: 100vw;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: unset !important;\n  flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n    height: 100%;\n    max-height: 100vh;\n    position: fixed;\n  }\n\n  .Overlay.Overlay--placement-left-whenNarrow {\n    inset: 0 auto 0 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  .Overlay.Overlay--placement-right-whenNarrow {\n    inset: 0 0 0 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  .Overlay.Overlay--placement-bottom-whenNarrow {\n    width: 100%;\n    max-width: 100vw;\n    inset: auto 0 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    animation-name: Overlay--motion-slideUp;\n  }\n\n  .Overlay--full-whenNarrow {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n"]}
+{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n  initial-value: 0;\n  inherits: false;\n  syntax: \"<length>\";\n}\n\nbody:has(:modal) {\n  padding-right: var(--dialog-scrollgutter) !important;\n}\n\nbody:has(dialog:modal.Overlay--disableScroll) {\n  overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n  display: none;\n}\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n  [popover]:not(.\\:popover-open) {\n    display: none;\n  }\n}\n\n.Overlay {\n  position: static;\n  display: flex;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  padding: 0;\n  margin: auto;\n  color: var(--fgColor-default);\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  border: 0;\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n  inset: 0;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  &.Overlay--placement-left, &.Overlay--placement-right {\n    position: fixed;\n    height: 100%;\n    max-height: unset;\n  }\n\n  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n\n  &.Overlay--placement-left {\n    inset: 0 auto 0 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    animation-name: Overlay--motion-slideInRight;\n  }\n\n  &.Overlay--placement-right {\n    inset: 0 0 0 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n}\n\n.Overlay:modal {\n  position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  color: var(--fgColor-default);\n  flex-direction: column;\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--stack-padding-condensed);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n    & + .Overlay-body {\n      padding-top: var(--stack-padding-normal);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--stack-gap-condensed);\n\n        & .Overlay-title {\n          font-size: var(--text-title-size-medium);\n        }\n\n        & .Overlay-description {\n          font-size: var(--text-body-size-medium);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--stack-gap-condensed);\n    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--stack-gap-condensed);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n        var(--stack-gap-condensed);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--control-small-gap);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--text-body-size-medium);\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--text-body-size-small);\n        font-weight: var(--base-text-weight-normal);\n        color: var(--fgColor-muted);\n      }\n    }\n  }\n}\n\n.Overlay-headerFilter {\n  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--stack-padding-normal);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--text-body-size-medium);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--stack-padding-condensed);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--stack-padding-normal);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--stack-gap-condensed);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--stack-gap-condensed);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: 0;\n  color: var(--fgColor-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--button-default-bgColor-hover);\n    /* stylelint-disable-next-line primer/colors */\n    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--borderWidth-thin) solid transparent;\n  }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n  width: 100%;\n  max-width: 100vw;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: unset !important;\n  flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n    position: fixed;\n    height: 100%;\n    max-height: 100vh;\n  }\n\n  .Overlay.Overlay--placement-left-whenNarrow {\n    inset: 0 auto 0 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  .Overlay.Overlay--placement-right-whenNarrow {\n    inset: 0 0 0 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    animation-name: Overlay--motion-slideInLeft;\n  }\n\n  .Overlay.Overlay--placement-bottom-whenNarrow {\n    width: 100%;\n    max-width: 100vw;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n    animation-name: Overlay--motion-slideUp;\n    inset: auto 0 0;\n  }\n\n  .Overlay--full-whenNarrow {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n"]}

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

@@ -1,11 +1,34 @@
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable primer/responsive-widths */
+/* stylelint-disable primer/spacing */
+/* stylelint-disable selector-no-qualifying-type */
+/* stylelint-disable selector-max-type */
+
 /* Overlay */
 
-/* TODO: One day this can be :has(:modal), when it is better supported */
-body.has-modal {
-  overflow: hidden !important;
+/* The --dialog-scrollgutter property is used only on the body element to
+ * simulate scrollbar-gutter:stable. This property is not and should not
+ * be used elsewhere in the DOM. There is a performance penalty to
+ * setting inherited properties which can cause a large style recalc to
+ * occur, so it benefits us to prevent inheritance for this property.
+ * See https://web.dev/blog/at-property-performance
+ */
+@property --dialog-scrollgutter {
+  initial-value: 0;
+  inherits: false;
+  syntax: "<length>";
+}
+
+body:has(:modal) {
   padding-right: var(--dialog-scrollgutter) !important;
 }
 
+body:has(dialog:modal.Overlay--disableScroll) {
+  overflow: hidden !important;
+}
+
 dialog.Overlay:not([open]) {
   display: none;
 }
@@ -32,22 +55,22 @@ dialog.Overlay:not([open]) {
 }
 
 .Overlay {
-  display: flex;
-  inset: 0;
   position: static;
-  margin: auto;
-  padding: 0;
+  display: flex;
   width: min(var(--overlay-width), 100vw - 2rem);
   min-width: 192px;
   max-height: min(calc(100vh - 2rem), var(--overlay-height));
+  padding: 0;
+  margin: auto;
+  color: var(--fgColor-default);
   white-space: normal;
   flex-direction: column;
   background-color: var(--overlay-bgColor);
-  color: var(--fgColor-default);
   border: 0;
   border-radius: var(--borderRadius-large);
   box-shadow: var(--shadow-floating-small);
   opacity: 1;
+  inset: 0;
 
   &.Overlay--size-auto {
     min-width: 192px;
@@ -101,9 +124,9 @@ dialog.Overlay:not([open]) {
   }
 
   &.Overlay--placement-left, &.Overlay--placement-right {
+    position: fixed;
     height: 100%;
     max-height: unset;
-    position: fixed;
   }
 
   &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {
@@ -201,11 +224,12 @@ dialog.Overlay:not([open]) {
 .Overlay-header {
   z-index: 1;
   display: flex;
-  flex-direction: column;
   color: var(--fgColor-default);
+  flex-direction: column;
 
   &.Overlay-header--divided {
     padding-bottom: var(--stack-padding-condensed);
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
 
     & + .Overlay-body {
@@ -299,6 +323,7 @@ dialog.Overlay:not([open]) {
 
   &.Overlay-footer--divided {
     padding-top: var(--stack-padding-normal);
+    /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
   }
 
@@ -340,6 +365,7 @@ dialog.Overlay:not([open]) {
   &:hover,
   &:focus {
     background-color: var(--button-default-bgColor-hover);
+    /* stylelint-disable-next-line primer/colors */
     border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
   }
 
@@ -368,9 +394,9 @@ dialog.Overlay:not([open]) {
 /* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
   .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
+    position: fixed;
     height: 100%;
     max-height: 100vh;
-    position: fixed;
   }
 
   .Overlay.Overlay--placement-left-whenNarrow {
@@ -390,10 +416,10 @@ dialog.Overlay:not([open]) {
   .Overlay.Overlay--placement-bottom-whenNarrow {
     width: 100%;
     max-width: 100vw;
-    inset: auto 0 0;
-    border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
     animation-name: Overlay--motion-slideUp;
+    inset: auto 0 0;
   }
 
   .Overlay--full-whenNarrow {

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

@@ -104,6 +104,7 @@ module Primer
       # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
       # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
       # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
+      # @param disable_scroll [Boolean] When true, disables scrolling the page when the dialog is open.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         title:,
@@ -113,6 +114,7 @@ module Primer
         position_narrow: DEFAULT_POSITION_NARROW,
         visually_hide_title: false,
         id: self.class.generate_id,
+        disable_scroll: true,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -124,6 +126,7 @@ module Primer
         @position = position
         @position_narrow = position_narrow
         @visually_hide_title = visually_hide_title
+        @disable_scroll = disable_scroll
 
         @system_arguments[:tag] = "dialog"
         @system_arguments[:id] = @id
@@ -143,7 +146,8 @@ module Primer
           "Overlay--motion-scaleFade",
           POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
           POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
-          system_arguments[:classes]
+          system_arguments[:classes],
+          "Overlay--disableScroll" => @disable_scroll
         )
       end
 

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

@@ -1 +1 @@
-.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
+.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:var(--base-size-12)}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:var(--base-size-12)}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}

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

@@ -1 +1 @@
-{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,kEAAoE,CAXpE,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,gDAAiD,CADjD,6CAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,kDACF,CAGA,qBAEE,sBAA2C,CAA3C,8CACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAKE,4BAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,sKACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,mEAAoE,CAHpE,aAAc,CACd,QAAS,CACT,mCAEF,CAEA,iBAGE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,wCAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,yCAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,+CAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2CAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  padding-top: var(--control-small-paddingBlock);\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: 2px;\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    border: 7px solid transparent;\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  margin: var(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: 8px;\n\n  &::before {\n    top: 10px;\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: 8px;\n\n  &::before {\n    top: 10px;\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: 11px;\n    left: -14px;\n    border-color: transparent;\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 3px;\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    bottom: -8px;\n    left: 9px;\n    border-top: 8px solid var(--borderColor-default);\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    bottom: -7px;\n    left: 10px;\n    border-top: 7px solid var(--overlay-bgColor);\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    top: -16px;\n    right: 9px;\n    left: auto;\n  }\n\n  &::after {\n    top: -14px;\n    right: 10px;\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    top: -16px;\n    left: 9px;\n  }\n\n  &::after {\n    top: -14px;\n    left: 10px;\n  }\n}\n"]}
+{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAaE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,kEAAoE,CAbpE,MAAO,CAQP,eAAgB,CADhB,6BAA8B,CAD9B,gDAAiD,CAFjD,6CAA8C,CAN9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAwCF,CA1BE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAGE,sBAA+C,CAA/C,kDACF,CAGA,qBAIE,sBAA2C,CAA3C,8CACF,CAGA,kBACE,eACF,CAGF,2BACE,UAQF,CANE,0CAGE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAKE,4BAA6B,CAJ7B,aAAc,CAGd,eAAgB,CADhB,sKAAuK,CAGvK,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAKE,mEAAoE,CAJpE,aAAc,CACd,QAAS,CAET,mCAEF,CAEA,iBAIE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,+BAAgC,CADhC,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAuBF,CAnBE,wBAME,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CAFZ,QAMF,CAEA,uBAKE,kBAAyB,CAEzB,wCAAyC,CAHzC,SAAU,CADV,WAAY,CAFZ,uBAOF,CAGF,iBAEE,SAAU,CAGV,8BAA+B,CAD/B,YAAa,CAHb,KAAM,CAEN,UAqBF,CAjBE,wBAKE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CAFX,QAKF,CAEA,uBAIE,kBAAyB,CAEzB,yCAA0C,CAH1C,UAAW,CAFX,uBAMF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,gCAAiC,CAHjC,QAqCF,CAhCE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAQE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,+CAAgD,CAHhD,WAAY,CACZ,uBAQF,CAEA,wBASE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,2CAA4C,CAJ5C,WAAY,CAEZ,SAQF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAeF,CAbE,wBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAiBF,CAdE,yBAIE,SAAU,CADV,wBAAyB,CADzB,SAGF,CAEA,wBAKE,SAAU,CADV,UAAW,CAFX,SAIF,CAIA,yBAGE,uBAAwB,CADxB,SAEF,CAEA,wBAIE,SAAU,CAFV,SAGF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown-caret {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  vertical-align: middle;\n  content: '';\n  border-style: solid;\n  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100;\n  width: 160px;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-top: var(--control-small-paddingBlock);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-bottom: var(--control-small-paddingBlock);\n  margin-top: var(--base-size-2);\n  list-style: none;\n  background-color: var(--overlay-bgColor);\n  background-clip: padding-box;\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: inline-block;\n    content: '';\n  }\n\n  /* caret border */\n  &::before {\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  /* caret background (should match dropdown background) */\n  &::after {\n    /* stylelint-disable-next-line primer/borders */\n    border: 7px solid transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-bottom-color: var(--overlay-bgColor);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & > ul {\n    list-style: none;\n  }\n}\n\n.dropdown-menu-no-overflow {\n  width: auto;\n\n  & .dropdown-item {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n    overflow: visible;\n    text-overflow: inherit;\n  }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  overflow: hidden;\n  color: var(--fgColor-default);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--fgColor-onEmphasis);\n    text-decoration: none;\n    background-color: var(--bgColor-accent-emphasis);\n\n    & > .octicon {\n      color: inherit;\n      opacity: 1;\n    }\n\n    & [class*='color-fg-'] {\n      color: inherit !important;\n    }\n\n    & > .Label {\n      color: inherit !important;\n      border-color: currentcolor;\n    }\n  }\n\n  &.btn-link {\n    width: 100%;\n    text-align: left;\n  }\n}\n\n.dropdown-signout {\n  width: 100%;\n  text-align: left;\n  background: none;\n  border: 0;\n}\n\n.dropdown-divider {\n  display: block;\n  height: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--stack-gap-condensed) 0;\n  border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n  display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n  top: 0;\n  right: 100%;\n  left: auto;\n  width: auto;\n  margin-top: 0;\n  margin-right: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: -16px;\n    left: auto;\n    border-color: transparent;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: var(--base-size-12);\n    /* stylelint-disable-next-line primer/spacing */\n    right: -14px;\n    left: auto;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-e {\n  top: 0;\n  left: 100%;\n  width: auto;\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: 10px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: -16px;\n    border-color: transparent;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: var(--base-size-12);\n    /* stylelint-disable-next-line primer/spacing */\n    left: -14px;\n    border-color: transparent;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n.dropdown-menu-ne {\n  top: auto;\n  bottom: 100%;\n  left: 0;\n  margin-bottom: var(--base-size-4);\n\n  &::before,\n  &::after {\n    top: auto;\n    right: auto;\n  }\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -8px;\n    left: var(--base-size-8);\n    /* stylelint-disable-next-line primer/borders */\n    border-top: 8px solid var(--borderColor-default);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 8px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 8px solid transparent;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: -7px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: 10px;\n    /* stylelint-disable-next-line primer/borders, primer/colors */\n    border-top: 7px solid var(--overlay-bgColor);\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 7px solid transparent;\n    border-bottom: 0;\n    /* stylelint-disable-next-line primer/borders */\n    border-left: 7px solid transparent;\n  }\n}\n\n.dropdown-menu-s {\n  right: 50%;\n  left: auto;\n  transform: translateX(50%);\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n.dropdown-menu-sw {\n  right: 0;\n  left: auto;\n\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    right: var(--base-size-8);\n    left: auto;\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    right: 10px;\n    left: auto;\n  }\n}\n\n.dropdown-menu-se {\n  &::before {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -16px;\n    left: var(--base-size-8);\n  }\n\n  &::after {\n    /* stylelint-disable-next-line primer/spacing */\n    top: -14px;\n    /* stylelint-disable-next-line primer/spacing */\n    left: 10px;\n  }\n}\n"]}

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

@@ -26,9 +26,11 @@
   left: 0;
   z-index: 100;
   width: 160px;
+  /* stylelint-disable-next-line primer/spacing */
   padding-top: var(--control-small-paddingBlock);
+  /* stylelint-disable-next-line primer/spacing */
   padding-bottom: var(--control-small-paddingBlock);
-  margin-top: 2px;
+  margin-top: var(--base-size-2);
   list-style: none;
   background-color: var(--overlay-bgColor);
   background-clip: padding-box;
@@ -45,16 +47,20 @@
 
   /* caret border */
   &::before {
+    /* stylelint-disable-next-line primer/borders */
     border: 8px solid transparent;
     border-bottom-color: var(--borderColor-default);
   }
 
   /* caret background (should match dropdown background) */
   &::after {
+    /* stylelint-disable-next-line primer/borders */
     border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-bottom-color: var(--overlay-bgColor);
   }
 
+  /* stylelint-disable-next-line selector-max-type */
   & > ul {
     list-style: none;
   }
@@ -64,6 +70,7 @@
   width: auto;
 
   & .dropdown-item {
+    /* stylelint-disable-next-line primer/spacing */
     padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
     overflow: visible;
     text-overflow: inherit;
@@ -73,8 +80,8 @@
 /* Dropdown items (can be links or buttons) */
 .dropdown-item {
   display: block;
-  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)
-    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
+  /* stylelint-disable-next-line primer/spacing */
+  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   overflow: hidden;
   color: var(--fgColor-default);
   text-overflow: ellipsis;
@@ -116,11 +123,13 @@
 .dropdown-divider {
   display: block;
   height: 0;
+  /* stylelint-disable-next-line primer/spacing */
   margin: var(--stack-gap-condensed) 0;
   border-top: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .dropdown-header {
+  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-small);
   color: var(--fgColor-muted);
@@ -141,10 +150,12 @@
   left: auto;
   width: auto;
   margin-top: 0;
-  margin-right: 8px;
+  margin-right: var(--base-size-8);
 
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     top: 10px;
+    /* stylelint-disable-next-line primer/spacing */
     right: -16px;
     left: auto;
     border-color: transparent;
@@ -152,10 +163,12 @@
   }
 
   &::after {
-    top: 11px;
+    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
     right: -14px;
     left: auto;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-left-color: var(--overlay-bgColor);
   }
 }
@@ -165,19 +178,23 @@
   left: 100%;
   width: auto;
   margin-top: 0;
-  margin-left: 8px;
+  margin-left: var(--base-size-8);
 
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     top: 10px;
+    /* stylelint-disable-next-line primer/spacing */
     left: -16px;
     border-color: transparent;
     border-right-color: var(--borderColor-default);
   }
 
   &::after {
-    top: 11px;
+    top: var(--base-size-12);
+    /* stylelint-disable-next-line primer/spacing */
     left: -14px;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
 }
@@ -186,7 +203,7 @@
   top: auto;
   bottom: 100%;
   left: 0;
-  margin-bottom: 3px;
+  margin-bottom: var(--base-size-4);
 
   &::before,
   &::after {
@@ -195,20 +212,29 @@
   }
 
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     bottom: -8px;
-    left: 9px;
+    left: var(--base-size-8);
+    /* stylelint-disable-next-line primer/borders */
     border-top: 8px solid var(--borderColor-default);
+    /* stylelint-disable-next-line primer/borders */
     border-right: 8px solid transparent;
     border-bottom: 0;
+    /* stylelint-disable-next-line primer/borders */
     border-left: 8px solid transparent;
   }
 
   &::after {
+    /* stylelint-disable-next-line primer/spacing */
     bottom: -7px;
+    /* stylelint-disable-next-line primer/spacing */
     left: 10px;
+    /* stylelint-disable-next-line primer/borders, primer/colors */
     border-top: 7px solid var(--overlay-bgColor);
+    /* stylelint-disable-next-line primer/borders */
     border-right: 7px solid transparent;
     border-bottom: 0;
+    /* stylelint-disable-next-line primer/borders */
     border-left: 7px solid transparent;
   }
 }
@@ -219,12 +245,14 @@
   transform: translateX(50%);
 
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     top: -16px;
     right: 50%;
     transform: translateX(50%);
   }
 
   &::after {
+    /* stylelint-disable-next-line primer/spacing */
     top: -14px;
     right: 50%;
     transform: translateX(50%);
@@ -236,13 +264,16 @@
   left: auto;
 
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     top: -16px;
-    right: 9px;
+    right: var(--base-size-8);
     left: auto;
   }
 
   &::after {
+    /* stylelint-disable-next-line primer/spacing */
     top: -14px;
+    /* stylelint-disable-next-line primer/spacing */
     right: 10px;
     left: auto;
   }
@@ -250,12 +281,15 @@
 
 .dropdown-menu-se {
   &::before {
+    /* stylelint-disable-next-line primer/spacing */
     top: -16px;
-    left: 9px;
+    left: var(--base-size-8);
   }
 
   &::after {
+    /* stylelint-disable-next-line primer/spacing */
     top: -14px;
+    /* stylelint-disable-next-line primer/spacing */
     left: 10px;
   }
 }