@mixtint/primer-view-components 0.78.0 → 0.84.5

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

@@ -1,33 +1,30 @@
+/* stylelint-disable selector-max-specificity */
+/* The selector-max-specificity rule is disabled here because the nested selectors
+ in AvatarStack require high specificity to properly override default styles and 
+ achieve the intended visual stacking. */
 /* AvatarStack */
-
 /* Stacked avatars can be used to show who is participating in thread when
 ** there is limited space available. */
-
 .AvatarStack {
   position: relative;
   min-width: 26px;
   height: 20px;
 }
-
 .AvatarStack .AvatarStack-body {
     position: absolute;
   }
-
 .AvatarStack.AvatarStack--two {
     min-width: 36px;
   }
-
 .AvatarStack.AvatarStack--three-plus {
     min-width: 46px;
   }
-
 .AvatarStack-body {
   display: flex;
   background: var(--bgColor-default);
   /* stylelint-disable-next-line primer/borders */
   border-radius: 100px;
 }
-
 .AvatarStack-body .avatar {
     position: relative;
     z-index: 2;
@@ -41,47 +38,49 @@
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
   }
-
 :is(.AvatarStack-body .avatar):first-child {
       z-index: 3;
     }
-
 :is(.AvatarStack-body .avatar):last-child {
       z-index: 1;
     }
-
 /* stylelint-disable-next-line selector-max-type */
-
 :is(.AvatarStack-body .avatar) img {
       border-radius: var(--borderRadius-small);
     }
-
 /* Account for 4+ avatars */
-
 :is(.AvatarStack-body .avatar):nth-child(n + 4) {
       display: none;
       opacity: 0;
     }
-
-.AvatarStack-body:hover .avatar {
+/* stylelint-disable-next-line selector-max-type */
+.AvatarStack-body span:nth-child(n + 4) .avatar {
+    display: none;
+    opacity: 0;
+  }
+:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar {
       margin-right: var(--base-size-4);
     }
-
-.AvatarStack-body:hover .avatar:nth-child(n + 4) {
+:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n + 4) {
+      display: flex;
+      opacity: 1;
+    }
+/* stylelint-disable-next-line selector-max-type */
+:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n + 4) .avatar {
       display: flex;
       opacity: 1;
     }
-
-.AvatarStack-body:hover .avatar-more {
+:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more {
       display: none !important;
     }
-
+.AvatarStack-body[data-disable-expand] {
+    position: relative;
+  }
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
   background: var(--bgColor-muted);
 }
-
 .avatar.avatar-more::before,.avatar.avatar-more::after {
     position: absolute;
     display: block;
@@ -91,42 +90,33 @@
     border-radius: 2px;
     outline: var(--borderWidth-thin) solid var(--bgColor-default);
   }
-
 .avatar.avatar-more::before {
     width: 17px;
     background: var(--avatarStack-fade-bgColor-muted);
   }
-
 .avatar.avatar-more::after {
     width: 14px;
     background: var(--avatarStack-fade-bgColor-default);
   }
-
 /* Right aligned variation */
-
 .AvatarStack--right .AvatarStack-body {
     right: 0;
     flex-direction: row-reverse;
   }
-
-:is(.AvatarStack--right .AvatarStack-body):hover .avatar {
+:is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar {
       margin-right: 0;
       margin-left: var(--base-size-4);
     }
-
 .AvatarStack--right .avatar.avatar-more {
     background: var(--avatarStack-fade-bgColor-default);
   }
-
 :is(.AvatarStack--right .avatar.avatar-more)::before {
       width: 5px;
     }
-
 :is(.AvatarStack--right .avatar.avatar-more)::after {
       width: 2px;
       background: var(--bgColor-muted);
     }
-
 .AvatarStack--right .avatar {
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */

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

@@ -11,14 +11,17 @@
     ":is(.AvatarStack-body .avatar):last-child",
     ":is(.AvatarStack-body .avatar) img",
     ":is(.AvatarStack-body .avatar):nth-child(n + 4)",
-    ".AvatarStack-body:hover .avatar",
-    ".AvatarStack-body:hover .avatar:nth-child(n + 4)",
-    ".AvatarStack-body:hover .avatar-more",
+    ".AvatarStack-body span:nth-child(n + 4) .avatar",
+    ":is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar",
+    ":is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n + 4)",
+    ":is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n + 4) .avatar",
+    ":is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more",
+    ".AvatarStack-body[data-disable-expand]",
     ".avatar.avatar-more",
     ".avatar.avatar-more::before",
     ".avatar.avatar-more::after",
     ".AvatarStack--right .AvatarStack-body",
-    ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
+    ":is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar",
     ".AvatarStack--right .avatar.avatar-more",
     ":is(.AvatarStack--right .avatar.avatar-more)::before",
     ":is(.AvatarStack--right .avatar.avatar-more)::after",

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

@@ -20,6 +20,8 @@
 .blankslate p {
     font-size: var(--text-body-size-large);
     color: var(--fgColor-muted);
+    max-width: 56rem;
+    margin: auto;
   }
 
 /* stylelint-disable-next-line selector-max-type */
@@ -58,6 +60,11 @@
   margin-bottom: var(--base-size-4);
   font-size: var(--text-title-size-medium);
   font-weight: var(--text-title-weight-medium);
+  text-wrap: balance;
+}
+
+.blankslate-description {
+  text-wrap: balance;
 }
 
 .blankslate-action {

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

@@ -9,6 +9,7 @@
     ".blankslate-icon",
     ".blankslate-image",
     ".blankslate-heading",
+    ".blankslate-description",
     ".blankslate-action",
     ".blankslate-action:first-of-type",
     ".blankslate-action:last-of-type",

package/app/components/primer/beta/details_toggle_element.js

@@ -60,6 +60,6 @@ __decorate([
     target
 ], DetailsToggleElement.prototype, "summaryTarget", void 0);
 DetailsToggleElement = __decorate([
-    controller
+    controller('details-toggle')
 ], DetailsToggleElement);
 window.DetailsToggleElement = DetailsToggleElement;

package/app/components/primer/beta/nav_list.js

@@ -187,6 +187,6 @@ __decorate([
     target
 ], NavListElement.prototype, "topLevelList", void 0);
 NavListElement = __decorate([
-    controller
+    controller('nav-list')
 ], NavListElement);
 export { NavListElement };

package/app/components/primer/beta/nav_list_group_element.js

@@ -105,7 +105,7 @@ __decorate([
     targets
 ], NavListGroupElement.prototype, "focusMarkers", void 0);
 NavListGroupElement = __decorate([
-    controller
+    controller('nav-list-group')
 ], NavListGroupElement);
 export { NavListGroupElement };
 window.NavListGroupElement = NavListGroupElement;

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

@@ -10,7 +10,7 @@
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-medium);
   /* stylelint-disable-next-line primer/typography */
-  line-height: var(--control-medium-lineBoxHeight);
+  line-height: var(--base-size-20);
   text-align: center;
   white-space: nowrap;
   /* stylelint-disable-next-line primer/borders */
@@ -21,7 +21,6 @@
 .State,
 .State--draft {
   color: var(--fgColor-onEmphasis);
-  /* stylelint-disable-next-line primer/colors */
   background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));
   border: var(--borderWidth-thin) solid transparent;
   box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));

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

@@ -58,7 +58,8 @@
 .TimelineItem-body {
   min-width: 0;
   max-width: 100%;
-  margin-top: var(--base-size-4);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: calc(var(--base-size-4) + 1px);
   color: var(--fgColor-muted);
   flex: auto;
 }

package/app/components/primer/dialog_helper.js

@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
+function setScrollGutter(doc) {
+    if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
+        return;
+    doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -20,25 +25,35 @@ function dialogInvokerButtonHandler(event) {
     if (dialogId) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
+            setScrollGutter(dialog.ownerDocument);
             dialog.showModal();
             // A buttons default behaviour in some browsers it to send a pointer event
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-            // any popover that is currently open, regardless of whether or not another top layer element,
-            // such as a <dialog> is nested inside.
-            // See https://github.com/whatwg/html/issues/9998.
-            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+            // there are two related issues:
+            //
+            // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+            //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+            //    See https://github.com/whatwg/html/issues/9998,
+            //    fixed by https://github.com/whatwg/html/pull/10116.
+            //
+            // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+            //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+            //    when tabbing past the last focusable element. Converting the popover to "manual"
+            //    prevents this interference.
+            //
+            // In both cases, the fix is the same: convert ancestor auto popovers to manual.
             let node = button;
             let fixed = false;
             while (node) {
-                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
+                    // Changing popover from "auto" to "manual" closes the popover,
+                    // so we need to re-show it regardless of whether it was previously open.
                     node.showPopover();
                     fixed = true;
                 }
@@ -83,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
         const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
         document.addEventListener('click', dialogInvokerButtonHandler, true);
         document.addEventListener('click', this, { signal });
-        this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -123,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
+        setScrollGutter(this.dialog.ownerDocument);
         this.dialog.showModal();
     }
 };

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

@@ -0,0 +1,28 @@
+/**
+ * AvatarFallbackElement implements "fallback first" loading pattern:
+ * 1. Fallback SVG is rendered immediately as <img> src
+ * 2. Real avatar URL is test-loaded in background using new Image()
+ * 3. On success, swaps to real image; on failure, fallback stays visible
+ *
+ * This approach prevents flicker by never showing a broken image state.
+ * Inspired by OpenProject's Angular PrincipalRendererService.
+ *
+ * Note: We read attributes directly via getAttribute() instead of using @attr
+ * due to a Catalyst bug where @attr accessors aren't properly initialized
+ * when elements have pre-existing attribute values.
+ */
+export declare class AvatarFallbackElement extends HTMLElement {
+    private img;
+    private testImage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Test-loads the real avatar URL in background.
+     * On success, swaps the visible img to the real URL.
+     * On failure, does nothing - fallback stays visible.
+     */
+    private testLoadImage;
+    private applyColor;
+    private valueHash;
+    private updateSvgColor;
+}

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

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller } from '@github/catalyst';
+/**
+ * AvatarFallbackElement implements "fallback first" loading pattern:
+ * 1. Fallback SVG is rendered immediately as <img> src
+ * 2. Real avatar URL is test-loaded in background using new Image()
+ * 3. On success, swaps to real image; on failure, fallback stays visible
+ *
+ * This approach prevents flicker by never showing a broken image state.
+ * Inspired by OpenProject's Angular PrincipalRendererService.
+ *
+ * Note: We read attributes directly via getAttribute() instead of using @attr
+ * due to a Catalyst bug where @attr accessors aren't properly initialized
+ * when elements have pre-existing attribute values.
+ */
+let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.img = null;
+        this.testImage = null;
+    }
+    connectedCallback() {
+        this.img = this.querySelector('img') ?? null;
+        if (!this.img)
+            return;
+        const uniqueId = this.getAttribute('data-unique-id') || '';
+        const altText = this.getAttribute('data-alt-text') || '';
+        const avatarSrc = this.getAttribute('data-avatar-src') || '';
+        // Apply hashed color to fallback SVG immediately
+        this.applyColor(this.img, uniqueId, altText);
+        // Test-load real avatar URL in background
+        if (avatarSrc) {
+            this.testLoadImage(avatarSrc);
+        }
+    }
+    disconnectedCallback() {
+        // Clean up test image and its event handler to prevent memory leaks
+        if (this.testImage) {
+            this.testImage.onload = null;
+            this.testImage = null;
+        }
+        this.img = null;
+    }
+    /**
+     * Test-loads the real avatar URL in background.
+     * On success, swaps the visible img to the real URL.
+     * On failure, does nothing - fallback stays visible.
+     */
+    testLoadImage(url) {
+        this.testImage = new Image();
+        this.testImage.onload = () => {
+            // Success - swap to real image
+            if (this.img) {
+                this.img.src = url;
+            }
+        };
+        // On error: do nothing, fallback stays visible (no flicker)
+        this.testImage.src = url;
+    }
+    applyColor(img, uniqueId, altText) {
+        // If either uniqueId or altText is missing, skip color customization so the SVG
+        // keeps its default gray fill defined in the source and no color override is applied.
+        if (!uniqueId || !altText)
+            return;
+        const text = `${uniqueId}${altText}`;
+        const hue = this.valueHash(text);
+        const color = `hsl(${hue}, 50%, 30%)`;
+        this.updateSvgColor(img, color);
+    }
+    /*
+     * Mimics OP Core's string hash function to ensure consistent color generation
+     * @see https://github.com/opf/openproject/blob/1b6eb3f9e45c3bdb05ce49d2cbe92995b87b4df5/frontend/src/app/shared/components/colors/colors.service.ts#L19-L26
+     */
+    valueHash(value) {
+        let hash = 0;
+        for (let i = 0; i < value.length; i++) {
+            hash = value.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return hash % 360;
+    }
+    updateSvgColor(img, color) {
+        const dataUri = img.src;
+        if (!dataUri.startsWith('data:image/svg+xml;base64,'))
+            return;
+        const base64 = dataUri.replace('data:image/svg+xml;base64,', '');
+        try {
+            const svg = atob(base64);
+            const updatedSvg = svg.replace(/fill="hsl\([^"]+\)"/, `fill="${color}"`);
+            img.src = `data:image/svg+xml;base64,${btoa(updatedSvg)}`;
+        }
+        catch {
+            // If the SVG data is malformed or not valid base64, skip updating the color
+            // to avoid breaking the component.
+        }
+    }
+};
+AvatarFallbackElement = __decorate([
+    controller
+], AvatarFallbackElement);
+export { AvatarFallbackElement };

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

@@ -0,0 +1,29 @@
+/* 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/avatar_stack.css.json

@@ -0,0 +1,10 @@
+{
+  "name": "open_project/avatar_stack",
+  "selectors": [
+    ".AvatarStack-body avatar-fallback",
+    ".AvatarStack-body avatar-fallback:first-child .avatar",
+    ".AvatarStack-body avatar-fallback:nth-child(2) .avatar",
+    ".AvatarStack-body avatar-fallback:nth-child(n + 4)",
+    ":is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) avatar-fallback:nth-child(n + 4)"
+  ]
+}

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

@@ -1,21 +1,83 @@
 /* CSS for BorderBox::CollapsibleHeader  */
 
 .CollapsibleHeader {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
+  display: block;
+  container-name: collapsible-header-container;
+  container-type: inline-size;
 }
 
 .Box:has(.CollapsibleHeader--collapsed) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-width: var(--borderWidth-thicker);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-width: var(--borderWidth-thicker);
 }
 
-.Box:has(.CollapsibleHeader--collapsed) .Box-row,.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer {
-        display: none;
-    }
+.Box:has(.CollapsibleHeader--collapsed) .Box-list,.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer {
+    display: none;
+  }
 
-.CollapsibleHeader--triggerArea {
+.CollapsibleHeader-triggerArea {
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  column-gap: var(--stack-gap-normal);
+  row-gap: var(--base-size-4);
+  overflow: hidden;
+}
+
+.CollapsibleHeader > .CollapsibleHeader-triggerArea {
+    flex: 1;
+  }
+
+@container collapsible-header-container (width < 544px) {
+  .CollapsibleHeader-triggerArea {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {
+    display: none;
+  }
+
+  .CollapsibleHeader-description {
     width: 100%;
+  }
+}
+
+.CollapsibleHeader--multi-line .CollapsibleHeader-triggerArea {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+.CollapsibleHeader--multi-line.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {
+    display: none;
+  }
+
+.CollapsibleHeader--multi-line .CollapsibleHeader-description {
+    overflow: visible;
+    text-overflow: initial;
+    white-space: normal;
+    width: 100%;
+  }
+
+.CollapsibleHeader-title-line {
+  flex-basis: 66%;
+  display: flex;
+  align-items: center;
+  gap: var(--stack-gap-condensed);
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.CollapsibleHeader-description {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-user-select: text;
+          user-select: text;
 }

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

@@ -3,9 +3,16 @@
   "selectors": [
     ".CollapsibleHeader",
     ".Box:has(.CollapsibleHeader--collapsed)",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-row",
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-list",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
-    ".CollapsibleHeader--triggerArea"
+    ".CollapsibleHeader-triggerArea",
+    ".CollapsibleHeader > .CollapsibleHeader-triggerArea",
+    ".CollapsibleHeader[data-collapsed] .CollapsibleHeader-description",
+    ".CollapsibleHeader-description",
+    ".CollapsibleHeader--multi-line .CollapsibleHeader-triggerArea",
+    ".CollapsibleHeader--multi-line.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description",
+    ".CollapsibleHeader--multi-line .CollapsibleHeader-description",
+    ".CollapsibleHeader-title-line"
   ]
 }

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

@@ -0,0 +1,42 @@
+.InlineMessage {
+  display: grid;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--inline-message-fontSize);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--inline-message-lineHeight);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--inline-message-fgColor);
+  column-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+
+.InlineMessage[data-size='small'] {
+    --inline-message-fontSize: var(--text-body-size-small);
+    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+.InlineMessage[data-size='medium'] {
+    --inline-message-fontSize: var(--text-body-size-medium);
+    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+.InlineMessage[data-variant='warning'] {
+    --inline-message-fgColor: var(--fgColor-attention);
+  }
+
+.InlineMessage[data-variant='critical'] {
+    --inline-message-fgColor: var(--fgColor-danger);
+  }
+
+.InlineMessage[data-variant='success'] {
+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+.InlineMessage[data-variant='unavailable'] {
+    --inline-message-fgColor: var(--fgColor-muted);
+  }
+
+.InlineMessageIcon {
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
+}