openproject-primer_view_components 0.89.2 → 0.91.0

data/app/components/primer/beta/blankslate.css

@@ -1 +1 @@
-.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);position:relative;padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);text-align:center}.blankslate p{font-size:var(--text-body-size-large);color:var(--fgColor-muted);max-width:56rem;margin:auto}.blankslate code{padding:var(--base-size-2) var(--base-size-4) var(--base-size-4);font-size:var(--text-body-size-medium);background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium)}.blankslate img{width:56px;height:56px}.blankslate-icon{margin-right:var(--control-small-gap);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);color:var(--fgColor-muted)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{margin-bottom:var(--base-size-4);font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);text-wrap:balance}.blankslate-description{text-wrap:balance}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{max-width:485px;margin:0 auto}.blankslate-large img{width:80px;height:80px}.blankslate-large h3{margin:var(--stack-gap-normal) 0;font-size:24px}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);position:relative;padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);text-align:center}.blankslate p{color:var(--fgColor-muted);max-width:56rem;margin:auto}.blankslate code,.blankslate p{font-size:var(--text-body-size-medium)}.blankslate code{padding:var(--base-size-2) var(--base-size-4) var(--base-size-4);background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium)}.blankslate img{width:56px;height:56px}.blankslate-icon{margin-right:var(--control-small-gap);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);color:var(--fgColor-muted)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{margin-bottom:var(--base-size-4);font-size:var(--text-title-size-small);font-weight:var(--text-title-weight-medium);text-wrap:balance}.blankslate-description{text-wrap:balance}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{max-width:485px;margin:0 auto}.blankslate-large img{width:80px;height:80px}.blankslate-large h3{margin:var(--stack-gap-normal) 0;font-size:24px}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}

data/app/components/primer/beta/blankslate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAEtD,iBAAkB,CAElB,oFAAqF,CACrF,iBAwBF,CArBE,cACE,qCAAsC,CACtC,0BAA2B,CAC3B,eAAgB,CAChB,WACF,CAGA,iBACE,gEAAiE,CACjE,sCAAuC,CACvC,iCAAkC,CAClC,6DAA8D,CAC9D,wCACF,CAGA,gBACE,UAAW,CACX,WACF,CAGF,iBAEE,qCAAsC,CAEtC,wCAAyC,CAEzC,oCAAqC,CACrC,0BACF,CAEA,kBAEE,qCACF,CAEA,oBACE,gCAAiC,CACjC,uCAAwC,CACxC,2CAA4C,CAC5C,iBACF,CAEA,wBACE,iBACF,CAEA,mBAEE,kCAWF,CATE,iCAEE,oCACF,CAEA,gCAEE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBACE,eAAgB,CAChB,aACF,CAME,sBACE,UAAW,CACX,WACF,CAGA,qBAEE,gCAAiC,CAIjC,cACF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,oDAAqD,CACrD,qDACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,iBAEE,wCACF,CAEA,oBACE,sCACF,CAGA,cACE,sCACF,CAEA,mBAEE,qCAWF,CATE,iCAEE,kCACF,CAEA,gCAEE,gDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n    color: var(--fgColor-muted);\n    max-width: 56rem;\n    margin: auto;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: var(--control-small-gap);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-condensed);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-medium);\n  font-weight: var(--text-title-weight-medium);\n  text-wrap: balance;\n}\n\n.blankslate-description {\n  text-wrap: balance;\n}\n\n.blankslate-action {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    /* stylelint-disable-next-line primer/spacing */\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n\n/* At the time these styles were written,\n   `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n  .blankslate {\n    --blankslate-outer-padding-block: var(--base-size-20);\n    --blankslate-outer-padding-inline: var(--base-size-20);\n  }\n\n  .blankslate-spacious {\n    --blankslate-outer-padding-block: var(--base-size-44);\n    --blankslate-outer-padding-inline: var(--base-size-28);\n  }\n\n  .blankslate-icon {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-bottom: var(--stack-gap-condensed);\n  }\n\n  .blankslate-heading {\n    font-size: var(--text-title-size-small);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  .blankslate p {\n    font-size: var(--text-body-size-medium);\n  }\n\n  .blankslate-action {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: var(--stack-gap-condensed);\n\n    &:first-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-top: var(--stack-gap-normal);\n    }\n\n    &:last-of-type {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(var(--stack-gap-condensed) / 2);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,oDAAqD,CACrD,qDAAsD,CAEtD,iBAAkB,CAElB,oFAAqF,CACrF,iBAwBF,CArBE,cAEE,0BAA2B,CAC3B,eAAgB,CAChB,WACF,CAGA,+BAPE,sCAaF,CANA,iBACE,gEAAiE,CAEjE,iCAAkC,CAClC,6DAA8D,CAC9D,wCACF,CAGA,gBACE,UAAW,CACX,WACF,CAGF,iBACE,qCAAsC,CACtC,wCAAyC,CACzC,oCAAqC,CACrC,0BACF,CAEA,kBACE,qCACF,CAEA,oBACE,gCAAiC,CACjC,sCAAuC,CACvC,2CAA4C,CAC5C,iBACF,CAEA,wBACE,iBACF,CAEA,mBACE,kCASF,CAPE,iCACE,oCACF,CAEA,gCACE,wCACF,CAGF,mBACE,uEACF,CAEA,qBACE,oDAAqD,CACrD,qDACF,CAEA,mBACE,eAAgB,CAChB,aACF,CAME,sBACE,UAAW,CACX,WACF,CAGA,qBACE,gCAAiC,CAIjC,cACF,CAGA,oBACE,qCACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n  container-type: inline-size;\n  width: 100%;\n}\n\n.blankslate {\n  --blankslate-outer-padding-block: var(--base-size-32);\n  --blankslate-outer-padding-inline: var(--base-size-32);\n\n  position: relative;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n  text-align: center;\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-medium);\n    color: var(--fgColor-muted);\n    max-width: 56rem;\n    margin: auto;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & code {\n    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n  font-size: var(--text-title-size-small);\n  font-weight: var(--text-title-weight-medium);\n  text-wrap: balance;\n}\n\n.blankslate-description {\n  text-wrap: balance;\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  --blankslate-outer-padding-block: var(--base-size-80);\n  --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  /* stylelint-disable-next-line selector-max-type */\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    /* stylelint-disable-next-line primer/typography */\n    font-size: 24px;\n  }\n\n  /* stylelint-disable-next-line selector-max-type */\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}

data/app/components/primer/beta/blankslate.pcss

@@ -16,7 +16,7 @@
 
   /* stylelint-disable-next-line selector-max-type */
   & p {
-    font-size: var(--text-body-size-large);
+    font-size: var(--text-body-size-medium);
     color: var(--fgColor-muted);
     max-width: 56rem;
     margin: auto;
@@ -39,23 +39,19 @@
 }
 
 .blankslate-icon {
-  /* stylelint-disable-next-line primer/spacing */
   margin-right: var(--control-small-gap);
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-condensed);
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--control-small-gap);
   color: var(--fgColor-muted);
 }
 
 .blankslate-image {
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
 }
 
 .blankslate-heading {
   margin-bottom: var(--base-size-4);
-  font-size: var(--text-title-size-medium);
+  font-size: var(--text-title-size-small);
   font-weight: var(--text-title-weight-medium);
   text-wrap: balance;
 }
@@ -65,16 +61,13 @@
 }
 
 .blankslate-action {
-  /* stylelint-disable-next-line primer/spacing */
   margin-top: var(--stack-gap-normal);
 
   &:first-of-type {
-    /* stylelint-disable-next-line primer/spacing */
     margin-top: var(--stack-gap-spacious);
   }
 
   &:last-of-type {
-    /* stylelint-disable-next-line primer/spacing */
     margin-bottom: var(--stack-gap-condensed);
   }
 }
@@ -104,7 +97,6 @@
 
   /* stylelint-disable-next-line selector-max-type */
   & h3 {
-    /* stylelint-disable-next-line primer/spacing */
     margin: var(--stack-gap-normal) 0;
 
     /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
@@ -123,46 +115,3 @@
 .blankslate-clean-background {
   border: 0;
 }
-
-/* At the time these styles were written,
-   `34rem` was our "small" breakpoint width */
-@container (max-width: 34rem) {
-  .blankslate {
-    --blankslate-outer-padding-block: var(--base-size-20);
-    --blankslate-outer-padding-inline: var(--base-size-20);
-  }
-
-  .blankslate-spacious {
-    --blankslate-outer-padding-block: var(--base-size-44);
-    --blankslate-outer-padding-inline: var(--base-size-28);
-  }
-
-  .blankslate-icon {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-bottom: var(--stack-gap-condensed);
-  }
-
-  .blankslate-heading {
-    font-size: var(--text-title-size-small);
-  }
-
-  /* stylelint-disable-next-line selector-max-type */
-  .blankslate p {
-    font-size: var(--text-body-size-medium);
-  }
-
-  .blankslate-action {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-top: var(--stack-gap-condensed);
-
-    &:first-of-type {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-top: var(--stack-gap-normal);
-    }
-
-    &:last-of-type {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-bottom: calc(var(--stack-gap-condensed) / 2);
-    }
-  }
-}

data/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{display:inline-block;height:.8em;margin:0 .15em 0 .5em;content:"";border-right:.1em solid var(--borderColor-neutral-emphasis);transform:rotate(15deg) translateY(.0625em)}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);-webkit-text-decoration:none!important;text-decoration:none!important;cursor:default!important}
+.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{display:inline-block;height:.8em;margin:0 .15em 0 .5em;content:"";border-right:.1em solid var(--borderColor-neutral-emphasis);transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);-webkit-text-decoration:none!important;text-decoration:none!important;cursor:default!important}

data/app/components/primer/beta/breadcrumbs.css.json

@@ -3,7 +3,8 @@
   "selectors": [
     ".breadcrumb-item",
     ".breadcrumb-item:after",
-    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after",
+    ".breadcrumb-item-selected:after",
+    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
     ".breadcrumb-item-selected a"
   ]
 }

data/app/components/primer/beta/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,uBACE,oBAAqB,CACrB,WAAa,CAEb,qBAAwB,CACxB,UAAW,CAEX,2DAA6D,CAC7D,2CACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAC7B,sCAAgC,CAAhC,8BAAgC,CAChC,wBACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.15em 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,uBACE,oBAAqB,CACrB,WAAa,CAEb,qBAAwB,CACxB,UAAW,CAEX,2DAA6D,CAC7D,2CACF,CAMF,+FAEE,YACF,CAGA,4BACE,4BAA6B,CAC7B,sCAAgC,CAAhC,8BAAgC,CAChC,wBACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.15em 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n}\n\n/* Expanded per-class so each selector buckets by its own class during style\n** recalc, instead of compiling to a merged `:is(...)` that Blink cannot\n** fast-reject. */\n.breadcrumb-item-selected::after,\n.breadcrumb-item[aria-current]:not([aria-current='false'])::after {\n  content: none;\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}"]}

data/app/components/primer/beta/breadcrumbs.pcss

@@ -15,11 +15,12 @@
   }
 }
 
-.breadcrumb-item-selected,
-.breadcrumb-item[aria-current]:not([aria-current='false']) {
-  &::after {
-    content: none;
-  }
+/* Expanded per-class so each selector buckets by its own class during style
+** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
+** fast-reject. */
+.breadcrumb-item-selected::after,
+.breadcrumb-item[aria-current]:not([aria-current='false'])::after {
+  content: none;
 }
 
 /* stylelint-disable-next-line selector-max-type */

data/app/components/primer/beta/button.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n/* stylelint-disable primer/spacing */\n\n/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  display: inline-flex;\n  min-width: max-content;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  color: var(--button-default-fgColor-rest);\n  text-align: center;\n  cursor: pointer;\n  flex-direction: row;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  &.Button--iconOnly {\n    color: var(--fgColor-muted);\n  }\n}\n\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  line-height: var(--text-body-lineHeight-medium);\n  white-space: nowrap;\n  grid-area: text;\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  min-width: var(--control-small-size);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  font-size: var(--text-body-size-small);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* allow button label text to wrap */\n\n.Button--labelWrap {\n  min-width: fit-content;\n  height: unset;\n  min-height: var(--control-medium-size);\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n  }\n\n  & .Button-label {\n    white-space: unset;\n  }\n\n  &.Button--small {\n    height: unset;\n    min-height: var(--control-small-size);\n\n    & .Button-content {\n      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n    }\n  }\n\n  &.Button--large {\n    height: unset;\n    min-height: var(--control-large-size);\n    padding-inline: var(--control-large-paddingInline-spacious);\n\n    & .Button-content {\n      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n    }\n  }\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &.Button--iconOnly {\n    color: var(--button-primary-iconColor-rest);\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    fill: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-invisible-fgColor-rest);\n\n  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  display: inline-block;\n  min-width: fit-content;\n  height: unset;\n  padding: 0;\n  font-size: inherit;\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  border: none;\n\n  &:hover:not(:disabled, .Button--inactive) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    fill: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  & .Button-label {\n      white-space: unset;\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &.Button--iconOnly {\n    color: var(--button-danger-iconColor-rest);\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  width: var(--control-medium-size);\n  padding: unset;\n  place-content: center;\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n  color: var(--button-inactive-fgColor);\n  cursor: default;\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  display: inline-flex;\n  min-width: max-content;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  color: var(--button-default-fgColor-rest);\n  text-align: center;\n  cursor: pointer;\n  flex-direction: row;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  &.Button--iconOnly {\n    color: var(--fgColor-muted);\n  }\n}\n\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  line-height: var(--text-body-lineHeight-medium);\n  white-space: nowrap;\n  grid-area: text;\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n  fill: currentcolor;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  min-width: var(--control-small-size);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  font-size: var(--text-body-size-small);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* allow button label text to wrap */\n\n.Button--labelWrap {\n  min-width: fit-content;\n  height: unset;\n  min-height: var(--control-medium-size);\n\n  & .Button-content {\n    flex: 1 1 auto;\n    align-self: stretch;\n    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n  }\n\n  & .Button-label {\n    white-space: unset;\n  }\n\n  &.Button--small {\n    height: unset;\n    min-height: var(--control-small-size);\n\n    & .Button-content {\n      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n    }\n  }\n\n  &.Button--large {\n    height: unset;\n    min-height: var(--control-large-size);\n    padding-inline: var(--control-large-paddingInline-spacious);\n\n    & .Button-content {\n      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n    }\n  }\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n  &.Button--iconOnly {\n    color: var(--button-primary-iconColor-rest);\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    fill: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-invisible-fgColor-rest);\n\n  &.Button--iconOnly {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  display: inline-block;\n  min-width: fit-content;\n  height: unset;\n  padding: 0;\n  font-size: inherit;\n  color: var(--fgColor-link);\n  fill: var(--fgColor-link);\n  border: none;\n\n  &:hover:not(:disabled, .Button--inactive) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    fill: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  & .Button-label {\n      white-space: unset;\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &.Button--iconOnly {\n    color: var(--button-danger-iconColor-rest);\n  }\n\n  &:hover:not(:disabled, .Button--inactive) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  width: var(--control-medium-size);\n  padding: unset;\n  place-content: center;\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n  color: var(--button-inactive-fgColor);\n  cursor: default;\n  background-color: var(--button-inactive-bgColor);\n  border: 0;\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}

data/app/components/primer/beta/button.pcss

@@ -1,6 +1,5 @@
 /* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
-/* stylelint-disable primer/spacing */
 
 /* CSS for Button  */
 

data/app/components/primer/beta/popover.css

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;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))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.Popover-message:after{top:-14px;margin-left:-8px;border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{top:auto;border-bottom-color:#0000}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{bottom:-16px;border-top-color:var(--borderColor-default)}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{bottom:-14px;border-top-color:var(--overlay-bgColor)}.Popover-message--bottom-right,.Popover-message--top-right{right:-9px;margin-right:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{right:var(--base-size-20);margin-right:1px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24);margin-left:1px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{top:50%;left:auto;margin-left:0;border-bottom-color:#0000}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{right:-16px;border-left-color:var(--borderColor-default)}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{right:-14px;border-left-color:var(--overlay-bgColor)}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{left:-16px;border-right-color:var(--borderColor-default)}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{left:-14px;margin-bottom:1px;border-right-color:var(--overlay-bgColor)}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{position:fixed;top:auto!important;right:0!important;bottom:0!important;left:0!important}.Popover-message{top:auto;right:auto;bottom:auto;left:auto;width:auto!important;margin:var(--stack-gap-condensed)}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{position:relative;width:232px;margin-right:auto;margin-left:auto;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))!important}.Popover-message:after,.Popover-message:before{position:absolute;left:50%;display:inline-block;content:""}.Popover-message:before{top:-16px;margin-left:-9px;border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.Popover-message:after{top:-14px;margin-left:-8px;border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{top:auto;border-bottom-color:#0000}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{bottom:-16px;border-top-color:var(--borderColor-default)}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{bottom:-14px;border-top-color:var(--overlay-bgColor)}.Popover-message--bottom-right,.Popover-message--top-right{right:-9px;margin-right:0}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:var(--base-size-20)}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:var(--base-size-20);margin-right:1px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:var(--base-size-24);margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:var(--base-size-24);margin-left:1px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{top:50%;left:auto;margin-left:0;border-bottom-color:#0000}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{right:-16px;border-left-color:var(--borderColor-default)}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{right:-14px;border-left-color:var(--overlay-bgColor)}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{left:-16px;border-right-color:var(--borderColor-default)}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{left:-14px;margin-bottom:1px;border-right-color:var(--overlay-bgColor)}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:var(--base-size-24)}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:var(--base-size-16)}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{position:fixed;top:auto!important;right:0!important;bottom:0!important;left:0!important}.Popover-message{top:auto;right:auto;bottom:auto;left:auto;width:auto!important;margin:var(--stack-gap-condensed)}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}

data/app/components/primer/beta/popover.css.json

@@ -7,26 +7,32 @@
     ".Popover-message:before",
     ".Popover-message--no-caret:after",
     ".Popover-message--no-caret:before",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before",
+    ".Popover-message--bottom-left:after",
+    ".Popover-message--bottom-left:before",
+    ".Popover-message--bottom-right:after",
+    ".Popover-message--bottom-right:before",
+    ".Popover-message--bottom:after",
+    ".Popover-message--bottom:before",
     ".Popover-message--bottom-right",
     ".Popover-message--top-right",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right):after",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right):before",
+    ".Popover-message--top-right:after",
+    ".Popover-message--top-right:before",
     ".Popover-message--bottom-left",
     ".Popover-message--top-left",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left):after",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before",
-    ":is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after",
-    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before",
-    ":is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right-top,.Popover-message--left-top):after",
-    ":is(.Popover-message--right-top,.Popover-message--left-top):before",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom):after",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom):before",
+    ".Popover-message--top-left:after",
+    ".Popover-message--top-left:before",
+    ".Popover-message--left-bottom:after",
+    ".Popover-message--left-bottom:before",
+    ".Popover-message--left-top:after",
+    ".Popover-message--left-top:before",
+    ".Popover-message--left:after",
+    ".Popover-message--left:before",
+    ".Popover-message--right-bottom:after",
+    ".Popover-message--right-bottom:before",
+    ".Popover-message--right-top:after",
+    ".Popover-message--right-top:before",
+    ".Popover-message--right:after",
+    ".Popover-message--right:before",
     ".Popover-message--large",
     ".Popover-message>.btn-octicon"
   ]

data/app/components/primer/beta/popover.css.map

@@ -1 +1 @@
-{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBACE,iBAAkB,CAClB,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CACjB,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EA2BF,CAxBE,+CAEE,iBAAkB,CAClB,QAAS,CACT,oBAAqB,CACrB,UACF,CAEA,wBACE,SAAU,CACV,gBAAiB,CAGjB,sBAA+C,CAA/C,kDACF,CAEA,uBACE,SAAU,CACV,gBAAiB,CAIjB,sBAA2C,CAA3C,8CACF,CAKA,mEAEE,YACF,CAOA,mMAEE,QAAS,CACT,yBACF,CAEA,kGACE,YAAa,CACb,2CACF,CAEA,iGACE,YAAa,CAEb,uCACF,CAIF,2DAEE,UAAW,CACX,cAgBF,CAdE,6IAEE,SAAU,CACV,aACF,CAEA,uEACE,yBACF,CAEA,sEACE,yBAA0B,CAC1B,gBACF,CAIF,yDAEE,SAAU,CACV,aAYF,CAVE,yIAEE,wBAAyB,CACzB,aACF,CAEA,oEACE,wBAAyB,CACzB,eACF,CAUA,6VAEE,OAAQ,CACR,SAAU,CACV,aAAc,CACd,yBACF,CAEA,+KACE,eACF,CAEA,8KACE,eACF,CAOA,+FACE,WAAY,CACZ,4CACF,CAEA,8FACE,WAAY,CAEZ,wCACF,CAOA,4FACE,UAAW,CACX,6CACF,CAEA,2FACE,UAAW,CACX,iBAAkB,CAElB,yCACF,CAMA,qIAEE,uBACF,CAMA,iJAEE,QACF,CAEA,yEACE,0BACF,CAEA,wEACE,0BAA2B,CAC3B,iBACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SACE,cAAe,CACf,kBAAoB,CACpB,iBAAmB,CACnB,kBAAoB,CACpB,gBACF,CAEA,iBACE,QAAS,CACT,UAAW,CACX,WAAY,CACZ,SAAU,CACV,oBAAsB,CACtB,iCACF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* adding !important to override utility classes used in dotcom */\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\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\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n  &::before,\n  &::after {\n    top: auto;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    bottom: -16px;\n    border-top-color: var(--borderColor-default);\n  }\n\n  &::after {\n    bottom: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-top-color: var(--overlay-bgColor);\n  }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n\n  &::before,\n  &::after {\n    left: auto;\n    margin-left: 0;\n  }\n\n  &::before {\n    right: var(--base-size-20);\n  }\n\n  &::after {\n    right: var(--base-size-20);\n    margin-right: 1px;\n  }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n\n  &::before,\n  &::after {\n    left: var(--base-size-24);\n    margin-left: 0;\n  }\n\n  &::after {\n    left: var(--base-size-24);\n    margin-left: 1px;\n  }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: 50%;\n    left: auto;\n    margin-left: 0;\n    border-bottom-color: transparent;\n  }\n\n  &::before {\n    margin-top: -9px;\n  }\n\n  &::after {\n    margin-top: -8px;\n  }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n  &::before {\n    right: -16px;\n    border-left-color: var(--borderColor-default);\n  }\n\n  &::after {\n    right: -14px;\n    /* stylelint-disable-next-line primer/colors */\n    border-left-color: var(--overlay-bgColor);\n  }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n  &::before {\n    left: -16px;\n    border-right-color: var(--borderColor-default);\n  }\n\n  &::after {\n    left: -14px;\n    margin-bottom: 1px;\n    /* stylelint-disable-next-line primer/colors */\n    border-right-color: var(--overlay-bgColor);\n  }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n  &::before,\n  &::after {\n    top: var(--base-size-24);\n  }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n  &::before,\n  &::after {\n    top: auto;\n  }\n\n  &::before {\n    bottom: var(--base-size-16);\n  }\n\n  &::after {\n    bottom: var(--base-size-16);\n    margin-bottom: 1px;\n  }\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}
+{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBACE,iBAAkB,CAClB,WAAY,CACZ,iBAAkB,CAClB,gBAAiB,CACjB,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAIzC,4EA2BF,CAxBE,+CAEE,iBAAkB,CAClB,QAAS,CACT,oBAAqB,CACrB,UACF,CAEA,wBACE,SAAU,CACV,gBAAiB,CAGjB,sBAA+C,CAA/C,kDACF,CAEA,uBACE,SAAU,CACV,gBAAiB,CAIjB,sBAA2C,CAA3C,8CACF,CAKA,mEAEE,YACF,CAUF,mNAME,QAAS,CACT,yBACF,CAEA,2GAGE,YAAa,CACb,2CACF,CAEA,wGAGE,YAAa,CAEb,uCACF,CAGA,2DAEE,UAAW,CACX,cACF,CAEA,gJAIE,SAAU,CACV,aACF,CAEA,yEAEE,yBACF,CAEA,uEAEE,yBAA0B,CAC1B,gBACF,CAGA,yDAEE,SAAU,CACV,aACF,CAEA,4IAIE,wBAAyB,CACzB,aACF,CAEA,qEAEE,wBAAyB,CACzB,eACF,CAGA,oZAYE,OAAQ,CACR,SAAU,CACV,aAAc,CACd,yBACF,CAEA,6MAME,eACF,CAEA,uMAME,eACF,CAGA,wGAGE,WAAY,CACZ,4CACF,CAEA,qGAGE,WAAY,CAEZ,wCACF,CAGA,qGAGE,UAAW,CACX,6CACF,CAEA,kGAGE,UAAW,CACX,iBAAkB,CAElB,yCACF,CAGA,wIAIE,uBACF,CAGA,oJAIE,QACF,CAEA,2EAEE,0BACF,CAEA,yEAEE,0BAA2B,CAC3B,iBACF,CAEA,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SACE,cAAe,CACf,kBAAoB,CACpB,iBAAmB,CACnB,kBAAoB,CACpB,gBACF,CAEA,iBACE,QAAS,CACT,UAAW,CACX,WAAY,CACZ,SAAU,CACV,oBAAsB,CACtB,iCACF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n  position: absolute;\n  z-index: 100;\n}\n\n.Popover-message {\n  position: relative;\n  width: 232px;\n  margin-right: auto;\n  margin-left: auto;\n  background-color: var(--overlay-bgColor);\n  border: var(--borderWidth-thin) solid var(--borderColor-default);\n  border-radius: var(--borderRadius-medium);\n\n  /* adding !important to override utility classes used in dotcom */\n  /* stylelint-disable-next-line primer/box-shadow -- intentional legacy shadow var with fallback, kept for dotcom compatibility */\n  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n  /* Carets */\n  &::before,\n  &::after {\n    position: absolute;\n    left: 50%;\n    display: inline-block;\n    content: '';\n  }\n\n  &::before {\n    top: -16px;\n    margin-left: -9px;\n    /* stylelint-disable-next-line primer/borders */\n    border: 8px solid transparent;\n    border-bottom-color: var(--borderColor-default);\n  }\n\n  &::after {\n    top: -14px;\n    margin-left: -8px;\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\n/* No caret */\n.Popover-message--no-caret {\n  &::before,\n  &::after {\n    display: none;\n  }\n}\n\n/* The caret variants below are authored as expanded per-class selectors\n** (rather than nesting `&::before`/`&::after` under a selector list) so each\n** rule's subject buckets by its own class during style recalc. The merged\n** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink\n** and shows up as pure slow-path selector matching. */\n\n/* Bottom-oriented carets */\n.Popover-message--bottom::before,\n.Popover-message--bottom::after,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-right::after,\n.Popover-message--bottom-left::before,\n.Popover-message--bottom-left::after {\n  top: auto;\n  border-bottom-color: transparent;\n}\n\n.Popover-message--bottom::before,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-left::before {\n  bottom: -16px;\n  border-top-color: var(--borderColor-default);\n}\n\n.Popover-message--bottom::after,\n.Popover-message--bottom-right::after,\n.Popover-message--bottom-left::after {\n  bottom: -14px;\n  /* stylelint-disable-next-line primer/colors */\n  border-top-color: var(--overlay-bgColor);\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n  right: -9px;\n  margin-right: 0;\n}\n\n.Popover-message--top-right::before,\n.Popover-message--top-right::after,\n.Popover-message--bottom-right::before,\n.Popover-message--bottom-right::after {\n  left: auto;\n  margin-left: 0;\n}\n\n.Popover-message--top-right::before,\n.Popover-message--bottom-right::before {\n  right: var(--base-size-20);\n}\n\n.Popover-message--top-right::after,\n.Popover-message--bottom-right::after {\n  right: var(--base-size-20);\n  margin-right: 1px;\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n  left: -9px;\n  margin-left: 0;\n}\n\n.Popover-message--top-left::before,\n.Popover-message--top-left::after,\n.Popover-message--bottom-left::before,\n.Popover-message--bottom-left::after {\n  left: var(--base-size-24);\n  margin-left: 0;\n}\n\n.Popover-message--top-left::after,\n.Popover-message--bottom-left::after {\n  left: var(--base-size-24);\n  margin-left: 1px;\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right::before,\n.Popover-message--right::after,\n.Popover-message--right-top::before,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::before,\n.Popover-message--right-bottom::after,\n.Popover-message--left::before,\n.Popover-message--left::after,\n.Popover-message--left-top::before,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::before,\n.Popover-message--left-bottom::after {\n  top: 50%;\n  left: auto;\n  margin-left: 0;\n  border-bottom-color: transparent;\n}\n\n.Popover-message--right::before,\n.Popover-message--right-top::before,\n.Popover-message--right-bottom::before,\n.Popover-message--left::before,\n.Popover-message--left-top::before,\n.Popover-message--left-bottom::before {\n  margin-top: -9px;\n}\n\n.Popover-message--right::after,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::after,\n.Popover-message--left::after,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::after {\n  margin-top: -8px;\n}\n\n/* Right-oriented carets */\n.Popover-message--right::before,\n.Popover-message--right-top::before,\n.Popover-message--right-bottom::before {\n  right: -16px;\n  border-left-color: var(--borderColor-default);\n}\n\n.Popover-message--right::after,\n.Popover-message--right-top::after,\n.Popover-message--right-bottom::after {\n  right: -14px;\n  /* stylelint-disable-next-line primer/colors */\n  border-left-color: var(--overlay-bgColor);\n}\n\n/* Left-oriented carets */\n.Popover-message--left::before,\n.Popover-message--left-top::before,\n.Popover-message--left-bottom::before {\n  left: -16px;\n  border-right-color: var(--borderColor-default);\n}\n\n.Popover-message--left::after,\n.Popover-message--left-top::after,\n.Popover-message--left-bottom::after {\n  left: -14px;\n  margin-bottom: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  border-right-color: var(--overlay-bgColor);\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top::before,\n.Popover-message--right-top::after,\n.Popover-message--left-top::before,\n.Popover-message--left-top::after {\n  top: var(--base-size-24);\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom::before,\n.Popover-message--right-bottom::after,\n.Popover-message--left-bottom::before,\n.Popover-message--left-bottom::after {\n  top: auto;\n}\n\n.Popover-message--right-bottom::before,\n.Popover-message--left-bottom::before {\n  bottom: var(--base-size-16);\n}\n\n.Popover-message--right-bottom::after,\n.Popover-message--left-bottom::after {\n  bottom: var(--base-size-16);\n  margin-bottom: 1px;\n}\n\n@media (min-width: 544px) {\n  .Popover-message--large {\n    min-width: 320px;\n  }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n  .Popover {\n    position: fixed;\n    top: auto !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    left: 0 !important;\n  }\n\n  .Popover-message {\n    top: auto;\n    right: auto;\n    bottom: auto;\n    left: auto;\n    width: auto !important;\n    margin: var(--stack-gap-condensed);\n  }\n\n  /* Increase tap area for touch input */\n  .Popover-message > .btn-octicon {\n    padding: var(--control-medium-paddingInline-normal) !important;\n  }\n\n  /* Remove caret */\n  .Popover-message::after,\n  .Popover-message::before {\n    display: none;\n  }\n}\n"]}