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

package/app/components/primer/beta/flash.css

@@ -1,152 +1 @@
-/* stylelint-disable primer/spacing */
-
-/* flash */
-
-/* Default flash */
-
-.flash:not(.Banner) {
-  position: relative;
-  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
-
-  /* Default color */
-  color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
-  border-color: var(--borderColor-accent-muted);
-  border-style: solid;
-  border-width: var(--borderWidth-thin);
-  border-radius: var(--borderRadius-medium);
-}
-
-.flash:not(.Banner) .octicon {
-    margin-right: var(--base-size-12);
-    color: var(--fgColor-accent);
-  }
-
-/* stylelint-disable-next-line selector-max-type */
-
-.flash:not(.Banner) p:last-child {
-    margin-bottom: 0;
-  }
-
-/* Contain the flash messages */
-
-.flash-messages {
-  margin-bottom: var(--stack-gap-spacious);
-}
-
-/* Close button */
-
-.flash-close:not(.Banner-close) {
-  float: right;
-  margin-top: calc(var(--base-size-4) * -1);
-  text-align: center;
-  cursor: pointer;
-
-  /* Undo `<button>` styles */
-  background: none;
-  border: 0;
-  appearance: none;
-}
-
-.flash-close:not(.Banner-close):hover {
-    opacity: 0.7;
-  }
-
-.flash-close:not(.Banner-close):active {
-    opacity: 0.5;
-  }
-
-.flash-close:not(.Banner-close) .octicon {
-    margin-right: 0;
-  }
-
-/* Action button */
-
-.flash-action:not(.Banner-actions) {
-  float: right;
-  margin-top: -3px;
-  margin-left: var(--stack-gap-spacious);
-  background-clip: padding-box;
-}
-
-.flash-action.btn:not(.Banner-actions) .octicon {
-    margin-right: var(--control-small-gap);
-    color: var(--fgColor-muted);
-  }
-
-.flash-action.btn-primary:not(.Banner-actions) {
-    background-clip: border-box;
-  }
-
-.flash-action.btn-primary:not(.Banner-actions) .octicon {
-      color: inherit;
-    }
-
-/* Color variations */
-
-.flash-warn:not(.Banner) {
-  color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
-  border-color: var(--borderColor-attention-muted);
-}
-
-.flash-warn:not(.Banner) .octicon {
-    color: var(--fgColor-attention);
-  }
-
-.flash-error:not(.Banner) {
-  color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
-  border-color: var(--borderColor-danger-muted);
-}
-
-.flash-error:not(.Banner) .octicon {
-    color: var(--fgColor-danger);
-  }
-
-.flash-success:not(.Banner) {
-  color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
-  border-color: var(--borderColor-success-muted);
-}
-
-.flash-success:not(.Banner) .octicon {
-    color: var(--fgColor-success);
-  }
-
-/* Layout variations */
-
-.flash-full:not(.Banner) {
-  margin-top: calc(var(--borderWidth-thin) * -1);
-  border-width: var(--borderWidth-thin) 0;
-  border-radius: 0;
-}
-
-/* A banner rendered at the top of the page. */
-
-.flash-banner {
-  position: fixed;
-  top: 0;
-  z-index: 90;
-  width: 100%;
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
-  border-radius: 0;
-}
-
-/* Makes sure the background is opaque to cover any content underneath */
-
-.flash-full,
-.flash-banner {
-  background-color: var(--bgColor-default);
-}
-
-/* FIXME deprecate this */
-
-.warning {
-  padding: 0.5em;
-  margin-bottom: 0.8em;
-  font-weight: var(--base-text-weight-semibold);
-  background-color: var(--bgColor-attention-muted);
-}
+.flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border-color:var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin);color:var(--fgColor-default);padding:var(--base-size-20) var(--control-medium-paddingInline-spacious);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent);margin-right:var(--base-size-12)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious)}.flash-close:not(.Banner-close){appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted);margin-right:var(--control-small-gap)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention)}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger)}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin) 0;margin-top:calc(var(--borderWidth-thin)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default)}.warning{background-color:var(--bgColor-attention-muted);font-weight:var(--base-text-weight-semibold);margin-bottom:.8em;padding:.5em}

package/app/components/primer/beta/label.css

@@ -1,109 +1 @@
-/* Labels */
-
-/* Provide a wrapper to ensure labels stick together */
-
-.labels {
-  position: relative;
-}
-
-/* Default 20px */
-
-.label, /* TODO: Deprecate */
-.Label {
-  display: inline-block;
-  padding: 0 var(--base-size-6);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 18px;
-  white-space: nowrap;
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
-  border-radius: var(--borderRadius-full);
-}
-
-:is(.label,.Label):hover {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-  }
-
-/* Large 24px */
-
-.Label--large {
-  padding: 0 var(--base-size-8);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 22px;
-}
-
-/* Inline */
-
-/* Doesn't increase height of parent element
-** Can be used with different font-sizes */
-
-.Label--inline {
-  display: inline;
-  /* stylelint-disable-next-line primer/spacing */
-  padding: 0.12em 0.5em;
-  /* stylelint-disable-next-line primer/typography */
-  font-size: 85%;
-}
-
-/* Contrast */
-
-.Label--primary {
-  color: var(--fgColor-default);
-  border-color: var(--borderColor-neutral-emphasis);
-}
-
-.Label--secondary {
-  color: var(--fgColor-muted);
-  border-color: var(--borderColor-default);
-}
-
-/* Colors */
-
-.Label--info, /* TODO: deprecate */
-.Label--accent {
-  color: var(--fgColor-accent);
-  border-color: var(--borderColor-accent-emphasis);
-}
-
-.Label--success {
-  color: var(--fgColor-success);
-  border-color: var(--borderColor-success-emphasis);
-}
-
-.Label--warning, /* TODO: deprecate */
-.Label--attention {
-  color: var(--fgColor-attention);
-  border-color: var(--borderColor-attention-emphasis);
-}
-
-.Label--severe {
-  color: var(--fgColor-severe);
-  border-color: var(--borderColor-severe-emphasis);
-}
-
-.Label--danger {
-  color: var(--fgColor-danger);
-  border-color: var(--borderColor-danger-emphasis);
-}
-
-.Label--open {
-  color: var(--fgColor-open);
-  border-color: var(--borderColor-open-emphasis);
-}
-
-.Label--closed {
-  color: var(--fgColor-closed);
-  border-color: var(--borderColor-closed-emphasis);
-}
-
-.Label--done {
-  color: var(--fgColor-done);
-  border-color: var(--borderColor-done-emphasis);
-}
-
-.Label--sponsors {
-  color: var(--fgColor-sponsors);
-  border-color: var(--borderColor-sponsors-emphasis);
-}
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-full);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:18px;padding:0 var(--base-size-6);white-space:nowrap}:is(.label,.Label):hover{-webkit-text-decoration:none;text-decoration:none}.Label--large{line-height:22px;padding:0 var(--base-size-8)}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis);color:var(--fgColor-default)}.Label--secondary{border-color:var(--borderColor-default);color:var(--fgColor-muted)}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis);color:var(--fgColor-accent)}.Label--success{border-color:var(--borderColor-success-emphasis);color:var(--fgColor-success)}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis);color:var(--fgColor-attention)}.Label--severe{border-color:var(--borderColor-severe-emphasis);color:var(--fgColor-severe)}.Label--danger{border-color:var(--borderColor-danger-emphasis);color:var(--fgColor-danger)}.Label--open{border-color:var(--borderColor-open-emphasis);color:var(--fgColor-open)}.Label--closed{border-color:var(--borderColor-closed-emphasis);color:var(--fgColor-closed)}.Label--done{border-color:var(--borderColor-done-emphasis);color:var(--fgColor-done)}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis);color:var(--fgColor-sponsors)}

package/app/components/primer/beta/label.css.json

@@ -2,18 +2,18 @@
   "name": "beta/label",
   "selectors": [
     ".labels",
-    ".label",
     ".Label",
+    ".label",
     ":is(.label,.Label):hover",
     ".Label--large",
     ".Label--inline",
     ".Label--primary",
     ".Label--secondary",
-    ".Label--info",
     ".Label--accent",
+    ".Label--info",
     ".Label--success",
-    ".Label--warning",
     ".Label--attention",
+    ".Label--warning",
     ".Label--severe",
     ".Label--danger",
     ".Label--open",

package/app/components/primer/beta/link.css

@@ -1,79 +1 @@
-/* Links */
-
-.Link {
-  color: var(--fgColor-accent);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.Link:hover {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-.Link:focus {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-  }
-
-.Link:focus,.Link:focus-visible {
-    outline-offset: 0;
-  }
-
-.Link--underline {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.Link--primary {
-  color: var(--fgColor-default) !important;
-}
-
-.Link--primary:hover {
-    color: var(--fgColor-accent) !important;
-  }
-
-.Link--secondary {
-  color: var(--fgColor-muted) !important;
-}
-
-.Link--secondary:hover {
-    color: var(--fgColor-accent) !important;
-  }
-
-.Link--muted {
-  color: var(--fgColor-muted) !important;
-}
-
-.Link--muted:hover {
-    color: var(--fgColor-accent) !important;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-  }
-
-/* Set the link color only on hover
-   Useful when you want only part of a link to turn blue on hover */
-
-.Link--onHover:hover {
-    color: var(--fgColor-accent) !important;
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-/* When using a color utility class inside of a link class
-   color should change with link on hover. */
-
-:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg'] {
-    color: inherit !important;
-  }
-
-.Link-content {
-  display: inline-flex;
-  align-items: center;
-  /* stylelint-disable-next-line primer/typography */
-  line-height: normal;
-  gap: var(--base-size-4);
-  text-decoration: inherit;
-}
+.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]{color:inherit!important}.Link-content{align-items:center;display:inline-flex;gap:var(--base-size-4);line-height:normal;text-decoration:inherit}

package/app/components/primer/beta/link.css.json

@@ -13,7 +13,7 @@
     ".Link--muted",
     ".Link--muted:hover",
     ".Link--onHover:hover",
-    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg']",
+    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]",
     ".Link-content"
   ]
 }

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

@@ -1,215 +1 @@
-/* stylelint-disable primer/spacing */
-
-/* Popover */
-
-.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);
-
-  /* adding !important to override utility classes used in dotcom */
-  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
-
-  /* Carets */
-}
-
-.Popover-message::before,.Popover-message::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-.Popover-message::before {
-    top: -16px;
-    margin-left: -9px;
-    /* stylelint-disable-next-line primer/borders */
-    border: 8px solid transparent;
-    border-bottom-color: var(--borderColor-default);
-  }
-
-.Popover-message::after {
-    top: -14px;
-    margin-left: -8px;
-    /* stylelint-disable-next-line primer/borders */
-    border: 7px solid transparent;
-    /* stylelint-disable-next-line primer/colors */
-    border-bottom-color: var(--overlay-bgColor);
-  }
-
-/* No caret */
-
-.Popover-message--no-caret::before,.Popover-message--no-caret::after {
-    display: none;
-  }
-
-/* Bottom-oriented carets */
-
-:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::before,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::after {
-    top: auto;
-    border-bottom-color: transparent;
-  }
-
-: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;
-    /* stylelint-disable-next-line primer/colors */
-    border-top-color: var(--overlay-bgColor);
-  }
-
-/* Top and Bottom: Right-oriented carets */
-
-.Popover-message--top-right,
-.Popover-message--bottom-right {
-  right: -9px;
-  margin-right: 0;
-}
-
-:is(.Popover-message--top-right,.Popover-message--bottom-right)::before,:is(.Popover-message--top-right,.Popover-message--bottom-right)::after {
-    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;
-  }
-
-/* Top and Bottom: Left-oriented carets */
-
-.Popover-message--top-left,
-.Popover-message--bottom-left {
-  left: -9px;
-  margin-left: 0;
-}
-
-:is(.Popover-message--top-left,.Popover-message--bottom-left)::before,:is(.Popover-message--top-left,.Popover-message--bottom-left)::after {
-    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;
-  }
-
-/* Right- and Left-oriented carets */
-
-: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,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after {
-    top: 50%;
-    left: auto;
-    margin-left: 0;
-    border-bottom-color: transparent;
-  }
-
-: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;
-  }
-
-/* Right-oriented carets */
-
-: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;
-    /* stylelint-disable-next-line primer/colors */
-    border-left-color: var(--overlay-bgColor);
-  }
-
-/* Left-oriented carets */
-
-: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;
-    /* stylelint-disable-next-line primer/colors */
-    border-right-color: var(--overlay-bgColor);
-  }
-
-/* Right and Left: Top-oriented carets */
-
-:is(.Popover-message--right-top,.Popover-message--left-top)::before,:is(.Popover-message--right-top,.Popover-message--left-top)::after {
-    top: var(--base-size-24);
-  }
-
-/* Right and Left: Bottom-oriented carets */
-
-:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before,:is(.Popover-message--right-bottom,.Popover-message--left-bottom)::after {
-    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;
-  }
-}
-
-/* Responsive Popover
-** For < md it will show full-width anchored to the bottom */
-
-@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);
-  }
-
-  /* Increase tap area for touch input */
-  .Popover-message > .btn-octicon {
-    padding: var(--control-medium-paddingInline-normal) !important;
-  }
-
-  /* Remove caret */
-  .Popover-message::after,
-  .Popover-message::before {
-    display: none;
-  }
-}
+.Popover{position:absolute;z-index:100}.Popover-message{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;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.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{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}: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{margin-right:1px;right:var(--base-size-20)}.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{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}: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{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px;margin-bottom:1px}: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{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}

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

@@ -3,31 +3,31 @@
   "selectors": [
     ".Popover",
     ".Popover-message",
-    ".Popover-message::before",
-    ".Popover-message::after",
-    ".Popover-message--no-caret::before",
-    ".Popover-message--no-caret::after",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::before",
-    ":is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left)::after",
-    ".Popover-message--top-right",
+    ".Popover-message:after",
+    ".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-right",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right)::before",
-    ":is(.Popover-message--top-right,.Popover-message--bottom-right)::after",
-    ".Popover-message--top-left",
+    ".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--bottom-left",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left)::before",
-    ":is(.Popover-message--top-left,.Popover-message--bottom-left)::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,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom)::after",
-    ":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)::before",
-    ":is(.Popover-message--right-top,.Popover-message--left-top)::after",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom)::before",
-    ":is(.Popover-message--right-bottom,.Popover-message--left-bottom)::after",
+    ".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--large",
-    ".Popover-message > .btn-octicon"
+    ".Popover-message>.btn-octicon"
   ]
 }