@mixtint/primer-view-components 0.89.1 → 0.90.1

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/dialog_helper.js

@@ -15,6 +15,10 @@ function setScrollGutter(doc) {
         return;
     doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
 }
+function updateBodyModalClasses(doc) {
+    doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')));
+    doc.body.classList.toggle('has-modal-disable-scroll', Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')));
+}
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -75,6 +79,7 @@ function dialogInvokerButtonHandler(event) {
                     }
                 }, { once: true });
             }
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -82,6 +87,7 @@ function dialogInvokerButtonHandler(event) {
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement && dialog.open) {
             dialog.close();
+            updateBodyModalClasses(dialog.ownerDocument);
         }
     }
 }
@@ -98,6 +104,7 @@ 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.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog.ownerDocument), { signal });
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
@@ -132,14 +139,16 @@ export class DialogHelperElement extends HTMLElement {
 _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
     if (!this.dialog)
         return;
+    const { ownerDocument } = this.dialog;
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
         // eslint-disable-next-line no-restricted-syntax
         this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
         this.dialog.close();
-        setScrollGutter(this.dialog.ownerDocument);
+        setScrollGutter(ownerDocument);
         this.dialog.showModal();
     }
+    updateBodyModalClasses(ownerDocument);
 };
 if (!window.customElements.get('dialog-helper')) {
     window.DialogHelperElement = DialogHelperElement;

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);
   }

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

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-max-type -- pagination arrows are styled via `.Page[rel] > svg`; the svg icon can only be targeted by its type selector */
+
 .Page {
   min-width: var(--base-size-32);
   height: var(--base-size-32);
@@ -7,7 +9,7 @@
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  border-radius: var(--borderRadius-medium,.375rem);
+  border-radius: var(--borderRadius-medium);
   transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   display: inline-flex;
   align-items: center;
@@ -63,6 +65,7 @@
 
 .Page[aria-current]:focus-visible {
   outline: 2px solid var(--bgColor-accent-emphasis);
+  /* stylelint-disable-next-line primer/box-shadow -- custom focus-ring built from Primer size/color primitives; no single Primer box-shadow token matches */
   box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
 }
 

package/app/components/primer/open_project/side_panel/section.css

@@ -4,11 +4,11 @@
   display: flex;
   align-items: center;
   height: 32px;
-  margin-bottom: 8px;
+  margin-bottom: var(--base-size-8);
 }
 
 .SidePanel-sectionCounter {
-  margin-left: 8px;
+  margin-left: var(--base-size-8);
 }
 
 .SidePanel-sectionAction {
@@ -23,5 +23,5 @@
 }
 
 :is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child) {
-    margin-bottom: 16px;
+    margin-bottom: var(--base-size-16);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.89.1",
+  "version": "0.90.1",
   "publishConfig": {
     "access": "public"
   },
@@ -8,6 +8,23 @@
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
   "types": "app/components/primer/primer.d.ts",
+  "exports": {
+    ".": {
+      "types": "./app/components/primer/primer.d.ts",
+      "import": "./app/components/primer/primer.js",
+      "require": "./app/assets/javascripts/primer_view_components.js"
+    },
+    "./classnames": {
+      "types": "./static/classnames.d.ts",
+      "import": "./static/classnames.js",
+      "require": "./static/classnames.cjs"
+    },
+    "./app/*": {
+      "types": "./app/*.d.ts",
+      "default": "./app/*"
+    },
+    "./*": "./*"
+  },
   "repository": "opf/primer_view_components",
   "keywords": [
     "rails",
@@ -24,6 +41,9 @@
   },
   "files": [
     "static/*.json",
+    "static/classnames.js",
+    "static/classnames.cjs",
+    "static/classnames.d.ts",
     "app/assets/**/*",
     "app/components/primer/**/*.js",
     "app/components/primer/**/*.css",
@@ -53,7 +73,7 @@
     "@github/details-menu-element": "^1.0.13",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.4.1",
-    "@github/relative-time-element": "^5.2.0",
+    "@github/relative-time-element": "^5.3.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
@@ -65,39 +85,39 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
-    "@changesets/cli": "^2.31.0",
+    "@changesets/cli": "^2.31.1",
     "@github/axe-github": "^0.8.1",
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.3",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.61.1",
-    "@primer/css": "22.1.1",
+    "@playwright/test": "^1.62.0",
+    "@primer/css": "22.3.0",
     "@primer/primitives": "^11.9.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-typescript": "^12.3.0",
     "axe-core": "^4.12.1",
     "chokidar-cli": "^3.0.0",
-    "css-what": "^7.0.0",
-    "cssnano": "^7.1.9",
-    "eslint": "^9.39.4",
-    "eslint-plugin-github": "^6.0.0",
+    "css-what": "^8.0.0",
+    "cssnano": "^8.0.2",
+    "eslint": "^9.39.5",
+    "eslint-plugin-github": "^6.1.1",
     "glob": "^11.1.0",
     "markdownlint-cli2": "^0.22.1",
     "mocha": "^11.7.6",
-    "playwright": "^1.61.1",
-    "postcss": "^8.5.16",
+    "playwright": "^1.62.0",
+    "postcss": "^8.5.24",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
     "postcss-preset-env": "^11.3.2",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.6",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.1.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.5",
     "vite-plugin-ruby": "^5.2.2"
   },
   "prettier": "@github/prettier-config",

package/static/arguments.json

@@ -4250,6 +4250,18 @@
         "default": "`:default`",
         "description": "One of `:condensed`, `:default`, or `:spacious`."
       },
+      {
+        "name": "list_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments)"
+      },
+      {
+        "name": "list_id",
+        "type": "String",
+        "default": "N/A",
+        "description": "Deprecated. Use <code>list_arguments: { id: ... }</code> instead."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

package/static/classes.json

@@ -566,6 +566,9 @@
   "Popover-message": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--bottom": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--bottom-left": [
     "Primer::Beta::Popover"
   ],
@@ -575,9 +578,27 @@
   "Popover-message--large": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--left": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--left-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--no-caret": [
     "Primer::Beta::Popover"
   ],
+  "Popover-message--right": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-bottom": [
+    "Primer::Beta::Popover"
+  ],
+  "Popover-message--right-top": [
+    "Primer::Beta::Popover"
+  ],
   "Popover-message--top-left": [
     "Primer::Beta::Popover"
   ],