@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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

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

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

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

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--accent",
     ".Label--info",
+    ".Label--accent",
     ".Label--success",
-    ".Label--attention",
     ".Label--warning",
+    ".Label--attention",
     ".Label--severe",
     ".Label--danger",
     ".Label--open",

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

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

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

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

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