@mixtint/primer-view-components 0.89.2 → 0.90.1

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 {

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

@@ -7,26 +7,32 @@
     ".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--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",
     ".Popover-message--top-right",
     ".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-right::before",
+    ".Popover-message--top-right::after",
     ".Popover-message--top-left",
     ".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::before",
+    ".Popover-message--top-left::after",
+    ".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",
     ".Popover-message--large",
     ".Popover-message > .btn-octicon"
   ]

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

@@ -5,7 +5,6 @@
 .state, /* TODO: Deprecate */
 .State {
   display: inline-block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-4) var(--control-medium-paddingInline-normal);
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-medium);

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

@@ -2,9 +2,7 @@
 
 .Subhead {
   display: flex;
-  /* stylelint-disable-next-line primer/spacing */
   padding-bottom: var(--stack-padding-condensed);
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
@@ -12,13 +10,11 @@
 }
 
 /* Modifier class to give a lot of breathing room between sections of content. */
-
 .Subhead--spacious {
   margin-top: var(--base-size-40);
 }
 
 /* <h2> sized heading with normal font weight */
-
 .Subhead-heading {
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
@@ -35,14 +31,12 @@
 }
 
 /* Make the text bold and red for dangerous content */
-
 .Subhead-heading--danger {
   font-weight: var(--base-text-weight-semibold);
   color: var(--fgColor-danger);
 }
 
 /* One-liner of supporting text */
-
 .Subhead-description {
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
@@ -51,14 +45,12 @@
 }
 
 /* Add 1 or 2 buttons to the right of the heading */
-
 .Subhead-actions {
   margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
   align-self: center;
   justify-content: flex-end;
   order: 1;
 }
-
 .Subhead-actions + .Subhead-description {
     margin-top: var(--base-size-4);
   }

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

@@ -3,9 +3,7 @@
 .TimelineItem {
   position: relative;
   display: flex;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--stack-padding-normal) 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--stack-gap-normal);
 
   /* The Timeline */
@@ -35,7 +33,6 @@
   display: flex;
   width: var(--control-medium-size);
   height: var(--control-medium-size);
-  /* stylelint-disable-next-line primer/spacing */
   margin-right: var(--controlStack-medium-gap-condensed);
   /* stylelint-disable-next-line primer/spacing */
   margin-left: calc(var(--control-medium-size) / -2 + 1px);
@@ -76,7 +73,6 @@
   z-index: 1;
   height: var(--stack-gap-spacious);
   margin: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--stack-gap-normal) * -1);
   /* stylelint-disable-next-line primer/spacing */
   margin-left: -56px;
@@ -93,7 +89,6 @@
 }
 
 .TimelineItem--condensed:last-child {
-    /* stylelint-disable-next-line primer/spacing */
     padding-bottom: var(--stack-gap-normal);
   }
 

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

@@ -15,7 +15,6 @@
   }
 
 :is(.Truncate > .Truncate-text) + .Truncate-text {
-      /* stylelint-disable-next-line primer/spacing */
       margin-left: var(--control-small-gap);
     }
 

package/app/components/primer/open_project/avatar_stack.css

@@ -1,28 +1,38 @@
 /* stylelint-disable selector-max-type, selector-max-specificity */
 /* Type selectors are required for the avatar-fallback custom element wrapper.
    Specificity overrides are needed to properly style nested avatar stacking. */
+
 /* OpenProject AvatarStack - styles for avatar-fallback wrapper elements */
+
 /* Make avatar-fallback invisible to layout - inner img acts as direct child */
+
 .AvatarStack-body avatar-fallback {
     display: contents;
   }
+
 /*
    * Z-index stacking for avatars inside avatar-fallback wrappers.
    * The base CSS uses .avatar:first-child/:last-child but those selectors
    * don't match when .avatar is inside avatar-fallback (not a direct child).
    */
+
 .AvatarStack-body avatar-fallback:first-child .avatar {
     z-index: 3;
   }
+
 .AvatarStack-body avatar-fallback:nth-child(2) .avatar {
     z-index: 2;
   }
+
 /* Hide 4th+ wrapped avatars */
+
 .AvatarStack-body avatar-fallback:nth-child(n + 4) {
     display: none;
     opacity: 0;
   }
+
 /* Show all on hover/focus */
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) avatar-fallback:nth-child(n + 4) {
       display: contents;
       opacity: 1;

package/app/components/primer/open_project/border_box/collapsible_header.css

@@ -1,5 +1,7 @@
 /* CSS for BorderBox::CollapsibleHeader  */
 
+/* stylelint-disable selector-nested-pattern -- component nests descendant class selectors (and `.X > &`) inside container queries, not &-prefixed selectors */
+
 .CollapsibleHeader {
   display: block;
   container-name: collapsible-header-container;
@@ -58,7 +60,7 @@
 
 .CollapsibleHeader--multi-line .CollapsibleHeader-description {
     overflow: visible;
-    text-overflow: initial;
+    text-overflow: clip;
     white-space: normal;
     width: 100%;
   }

package/app/components/primer/open_project/border_grid.css

@@ -3,26 +3,28 @@
 .BorderGrid {
     display: table;
     width: 100%;
-    margin-top: -16px;
-    margin-bottom: -16px;
+    margin-top: calc(-1 * var(--base-size-16));
+    margin-bottom: calc(-1 * var(--base-size-16));
     table-layout: fixed;
+    /* stylelint-disable-next-line primer/borders -- table border-collapse keyword, not a border size */
     border-collapse: collapse;
+    /* stylelint-disable-next-line primer/borders -- table border-style keyword, not a border size */
     border-style: hidden
 }
 
 .BorderGrid .BorderGrid-cell {
-    padding-top: 16px;
-    padding-bottom: 16px
+    padding-top: var(--base-size-16);
+    padding-bottom: var(--base-size-16)
 }
 
 .BorderGrid--spacious {
-    margin-top: -24px;
-    margin-bottom: -24px
+    margin-top: calc(-1 * var(--base-size-24));
+    margin-bottom: calc(-1 * var(--base-size-24))
 }
 
 .BorderGrid--spacious .BorderGrid-cell {
-    padding-top: 24px;
-    padding-bottom: 24px
+    padding-top: var(--base-size-24);
+    padding-bottom: var(--base-size-24)
 }
 
 .BorderGrid-row {
@@ -31,5 +33,5 @@
 
 .BorderGrid-cell {
     display: table-cell;
-    border: 1px solid var(--borderColor-muted)
+    border: var(--borderWidth-thin) solid var(--borderColor-muted)
 }

package/app/components/primer/open_project/collapsible.d.ts

@@ -5,7 +5,7 @@ export declare abstract class CollapsibleElement extends HTMLElement {
     collapsibleElements: HTMLElement[];
     collapsed: boolean;
     toggleViaKeyboard(event: KeyboardEvent): void;
-    toggle(): void;
+    toggle(event?: Event): void;
     attributeChangedCallback(name: string): void;
     hideAll(): void;
     expandAll(): void;

package/app/components/primer/open_project/collapsible.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { attr, target, targets } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/expose-class-on-global
 export class CollapsibleElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -13,11 +12,16 @@ export class CollapsibleElement extends HTMLElement {
     }
     toggleViaKeyboard(event) {
         if (event.code === 'Enter' || event.code === 'Space') {
-            event.preventDefault();
-            this.toggle();
+            this.toggle(event);
         }
     }
-    toggle() {
+    toggle(event) {
+        if (event &&
+            event.target instanceof Element &&
+            !event.target.closest('[data-collapsible-toggle]') &&
+            event.target.closest('a, button'))
+            return;
+        event?.preventDefault();
         this.collapsed = !this.collapsed;
     }
     attributeChangedCallback(name) {

package/app/components/primer/open_project/filterable_tree_view.css

@@ -10,7 +10,6 @@
  */
 
 /* stylelint-disable-next-line selector-max-type */
-
 filterable-tree-view {
   display: flex;
   flex-direction: column;
@@ -30,30 +29,26 @@ filterable-tree-view {
 }
 
 /* Highlight style for CSS Custom Highlight API */
-
 ::highlight(primer-filterable-tree-view-search-results) {
+  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
   background-color: var(--display-yellow-scale-2);
 }
 
 /* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
-
 /* stylelint-disable-next-line selector-max-type */
-
 filterable-tree-view mark {
+  /* stylelint-disable-next-line primer/no-display-colors, primer/colors -- intentional yellow search-match highlight; no Primer semantic token exists for this */
   background-color: var(--display-yellow-scale-2);
   color: inherit;
 }
 
 /* Loading skeleton */
-
 .FilterableTreeViewLoadingSkeleton {
   display: none;
 }
 
 /* stylelint-disable selector-no-qualifying-type */
-
 /* stylelint-disable selector-max-type */
-
 filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
   display: block;
 }

package/app/components/primer/open_project/page_header.css

@@ -41,13 +41,13 @@
 }
 
 /* One-liner of supporting text */
-
 .PageHeader-description {
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
   flex: 1 auto;
 }
 
+/* stylelint-disable-next-line selector-max-type -- description holds rich text; links can only be targeted by the `a` type selector */
 .PageHeader-description--underlined-links a {
   /* Ensure the accessibility is met, given that the description is written in light grey */
   -webkit-text-decoration: underline;
@@ -74,7 +74,6 @@
 }
 
 /* OpenProject legacy form markup inside header actions: match Primer / dark theme */
-
 .PageHeader-actions .form--label {
   color: var(--fgColor-muted);
   min-width: 0;
@@ -120,7 +119,6 @@
 }
 
 /* Hide the context bar on desktop when no breadcrumb is visible */
-
 @media screen and (min-width: 543.98px) {
   .PageHeader--noBreadcrumb .PageHeader-contextBar {
     display: none;
@@ -128,11 +126,10 @@
 }
 
 /* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
-
 .PageHeader--noBreadcrumb .PageHeader-titleBar {
+    /* stylelint-disable-next-line primer/typography -- control size var intentionally matches the toggle-menu button height for vertical alignment */
     line-height: var(--control-small-size);
   }
-
 .PageHeader--noBreadcrumb .PageHeader-actions {
     height: var(--control-small-size);
   }