@mixtint/primer-view-components 0.89.1 → 0.90.1

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

@@ -1,12 +1,14 @@
 /* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
-/* stylelint-disable primer/spacing */
+
 /* CSS for Button  */
+
 /* temporary, pre primitives release */
 :root {
   --duration-fast: 80ms;
   --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
 }
+
 /* base button */
 .Button {
   position: relative;
@@ -61,10 +63,12 @@
 .Button.Button--iconOnly {
     color: var(--fgColor-muted);
   }
+
 :is(a.Button,summary.Button):hover {
     -webkit-text-decoration: none;
     text-decoration: none;
   }
+
 /* wrap grid content to allow trailingAction to lock-right */
 .Button-content {
   flex: 1 0 auto;
@@ -79,11 +83,14 @@
 .Button-content > :not(:last-child) {
     margin-right: var(--control-medium-gap);
   }
+
 /* center child elements for fullWidth */
 .Button-content--alignStart {
   justify-content: start;
 }
+
 /* button child elements */
+
 /* align svg */
 .Button-visual {
   display: flex;
@@ -93,24 +100,31 @@
     color: inherit;
     background-color: var(--buttonCounter-default-bgColor-rest);
   }
+
 .Button-label {
   line-height: var(--text-body-lineHeight-medium);
   white-space: nowrap;
   grid-area: text;
 }
+
 .Button-leadingVisual {
   grid-area: leadingVisual;
 }
+
 .Button-leadingVisual svg {
   fill: currentcolor;
 }
+
 .Button-trailingVisual {
   grid-area: trailingVisual;
 }
+
 .Button-trailingAction {
   margin-right: calc(var(--base-size-4) * -1);
 }
+
 /* sizes */
+
 .Button--small {
   min-width: var(--control-small-size);
   height: var(--control-small-size);
@@ -118,56 +132,72 @@
   font-size: var(--text-body-size-small);
   gap: var(--control-small-gap);
 }
+
 .Button--small .Button-label {
     line-height: var(--text-body-lineHeight-small);
   }
+
 :is(.Button--small .Button-content) > :not(:last-child) {
       margin-right: var(--control-small-gap);
     }
+
 .Button--large {
   height: var(--control-large-size);
   padding: 0 var(--control-large-paddingInline-spacious);
   gap: var(--control-large-gap);
 }
+
 .Button--large .Button-label {
     line-height: var(--text-body-lineHeight-large);
   }
+
 :is(.Button--large .Button-content) > :not(:last-child) {
       margin-right: var(--control-large-gap);
     }
+
 .Button--fullWidth {
   width: 100%;
 }
+
 /* allow button label text to wrap */
+
 .Button--labelWrap {
   min-width: fit-content;
   height: unset;
   min-height: var(--control-medium-size);
 }
+
 .Button--labelWrap .Button-content {
     flex: 1 1 auto;
     align-self: stretch;
     padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));
   }
+
 .Button--labelWrap .Button-label {
     white-space: unset;
   }
+
 .Button--labelWrap.Button--small {
     height: unset;
     min-height: var(--control-small-size);
   }
+
 .Button--labelWrap.Button--small .Button-content {
       padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));
     }
+
 .Button--labelWrap.Button--large {
     height: unset;
     min-height: var(--control-large-size);
     padding-inline: var(--control-large-paddingInline-spacious);
   }
+
 .Button--labelWrap.Button--large .Button-content {
       padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));
     }
+
 /* variants */
+
 /* primary */
 .Button--primary {
   color: var(--button-primary-fgColor-rest);
@@ -215,6 +245,7 @@
     color: inherit;
     background-color: var(--buttonCounter-primary-bgColor-rest);
   }
+
 /* default (secondary) */
 .Button--secondary {
   color: var(--button-default-fgColor-rest);
@@ -241,34 +272,44 @@
     background-color: var(--button-default-bgColor-disabled);
     border-color: var(--button-default-borderColor-disabled);
   }
+
 .Button--invisible {
   color: var(--button-invisible-fgColor-rest);
 }
+
 .Button--invisible.Button--iconOnly {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
+
 .Button--invisible:hover:not(:disabled,.Button--inactive) {
     background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
   }
+
 .Button--invisible[aria-pressed='true'],.Button--invisible:active:not(:disabled) {
     background-color: var(--button-invisible-bgColor-active);
   }
+
 .Button--invisible:disabled,.Button--invisible[aria-disabled='true'] {
     color: var(--button-invisible-fgColor-disabled);
     fill: var(--button-invisible-fgColor-disabled);
     background-color: var(--button-invisible-bgColor-disabled);
     border-color: var(--button-invisible-borderColor-disabled);
   }
+
 /* if button has no visuals, use link blue for text */
+
 .Button--invisible.Button--invisible-noVisuals .Button-label {
     color: var(--button-invisible-fgColor-rest);
   }
+
 .Button--invisible .Button-visual {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
+
 :is(.Button--invisible .Button-visual) .Counter {
       color: var(--fgColor-default);
     }
+
 .Button--link {
   display: inline-block;
   min-width: fit-content;
@@ -279,22 +320,27 @@
   fill: var(--fgColor-link);
   border: none;
 }
+
 .Button--link:hover:not(:disabled,.Button--inactive) {
     -webkit-text-decoration: underline;
     text-decoration: underline;
   }
+
 .Button--link:focus-visible,.Button--link:focus {
     outline-offset: 2px;
   }
+
 .Button--link:disabled,.Button--link[aria-disabled='true'] {
     color: var(--control-fgColor-disabled);
     fill: var(--control-fgColor-disabled);
     background-color: transparent;
     border-color: transparent;
   }
+
 .Button--link .Button-label {
       white-space: unset;
   }
+
 /* danger */
 .Button--danger {
   color: var(--button-danger-fgColor-rest);
@@ -338,18 +384,22 @@
     color: var(--buttonCounter-danger-fgColor-rest);
     background-color: var(--buttonCounter-danger-bgColor-rest);
   }
+
 .Button--iconOnly {
   display: inline-grid;
   width: var(--control-medium-size);
   padding: unset;
   place-content: center;
 }
+
 .Button--iconOnly.Button--small {
     width: var(--control-small-size);
   }
+
 .Button--iconOnly.Button--large {
     width: var(--control-large-size);
   }
+
 /* `disabled` takes precedence over `inactive` */
 .Button--inactive:not([aria-disabled='true'], :disabled) {
   color: var(--button-inactive-fgColor);

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

@@ -3,7 +3,6 @@
 /* flash */
 
 /* Default flash */
-
 .flash:not(.Banner) {
   position: relative;
   padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
@@ -16,26 +15,21 @@
   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);
@@ -47,37 +41,30 @@
   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;
     }
@@ -123,7 +110,6 @@
 }
 
 /* A banner rendered at the top of the page. */
-
 .flash-banner {
   position: fixed;
   top: 0;
@@ -136,14 +122,12 @@
 }
 
 /* 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;

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

@@ -1,7 +1,6 @@
 /* Labels */
 
 /* Provide a wrapper to ensure labels stick together */
-
 .labels {
   position: relative;
 }
@@ -38,7 +37,6 @@
 
 /* Doesn't increase height of parent element
 ** Can be used with different font-sizes */
-
 .Label--inline {
   display: inline;
   /* stylelint-disable-next-line primer/spacing */

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

@@ -54,7 +54,6 @@
 
 /* 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;
@@ -64,7 +63,6 @@
 
 /* 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;
   }

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

@@ -17,6 +17,7 @@
   border-radius: var(--borderRadius-medium);
 
   /* adding !important to override utility classes used in dotcom */
+  /* stylelint-disable-next-line primer/box-shadow -- intentional legacy shadow var with fallback, kept for dotcom compatibility */
   box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
 
   /* Carets */
@@ -47,133 +48,185 @@
   }
 
 /* No caret */
-
 .Popover-message--no-caret::before,.Popover-message--no-caret::after {
     display: none;
   }
 
-/* Bottom-oriented carets */
+/* The caret variants below are authored as expanded per-class selectors
+** (rather than nesting `&::before`/`&::after` under a selector list) so each
+** rule's subject buckets by its own class during style recalc. The merged
+** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink
+** and shows up as pure slow-path selector matching. */
 
-: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;
-  }
+/* Bottom-oriented carets */
+.Popover-message--bottom::before,
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::before,
+.Popover-message--bottom-right::after,
+.Popover-message--bottom-left::before,
+.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);
-  }
+.Popover-message--bottom::before,
+.Popover-message--bottom-right::before,
+.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);
-  }
+.Popover-message--bottom::after,
+.Popover-message--bottom-right::after,
+.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;
-  }
+.Popover-message--top-right::before,
+.Popover-message--top-right::after,
+.Popover-message--bottom-right::before,
+.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);
-  }
+.Popover-message--top-right::before,
+.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--top-right::after,
+.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;
-  }
+.Popover-message--top-left::before,
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::before,
+.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;
-  }
+.Popover-message--top-left::after,
+.Popover-message--bottom-left::after {
+  left: var(--base-size-24);
+  margin-left: 1px;
+}
 
 /* Right- and Left-oriented carets */
+.Popover-message--right::before,
+.Popover-message--right::after,
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left::before,
+.Popover-message--left::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::before,
+.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,: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;
-  }
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.Popover-message--right-bottom::before,
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.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;
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after,
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.Popover-message--left-bottom::after {
+  margin-top: -8px;
+}
 
 /* Right-oriented carets */
+.Popover-message--right::before,
+.Popover-message--right-top::before,
+.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)::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);
-  }
+.Popover-message--right::after,
+.Popover-message--right-top::after,
+.Popover-message--right-bottom::after {
+  right: -14px;
+  /* stylelint-disable-next-line primer/colors */
+  border-left-color: var(--overlay-bgColor);
+}
 
 /* Left-oriented carets */
+.Popover-message--left::before,
+.Popover-message--left-top::before,
+.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)::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);
-  }
+.Popover-message--left::after,
+.Popover-message--left-top::after,
+.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);
-  }
+.Popover-message--right-top::before,
+.Popover-message--right-top::after,
+.Popover-message--left-top::before,
+.Popover-message--left-top::after {
+  top: var(--base-size-24);
+}
 
 /* Right and Left: Bottom-oriented carets */
+.Popover-message--right-bottom::before,
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::before,
+.Popover-message--left-bottom::after {
+  top: auto;
+}
 
-: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);
-  }
+.Popover-message--right-bottom::before,
+.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;
-  }
+.Popover-message--right-bottom::after,
+.Popover-message--left-bottom::after {
+  bottom: var(--base-size-16);
+  margin-bottom: 1px;
+}
 
 @media (min-width: 544px) {
   .Popover-message--large {