Sync Primer view_components upstream through v0.51.6

.changeset/classnames-export.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Add `static/classnames.js`, which default-exports a `Set` of every unique CSS class name in the library for consumers and tooling. It is available via the `@openproject/primer-view-components/classnames` import subpath.

.changeset/fast-pumas-juggle.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Improve CSS style-recalc performance by removing selectors with universal subjects and expanding merged `:is()` selector lists so the browser can fast-reject them. Affects `autocomplete-item`, `Popover-message--*`, `breadcrumb-item`, and `FormControl-checkbox-wrap`/`FormControl-radio-wrap` styles.

.claude/skills/syncing-primer-fork/SKILL.md

@@ -151,6 +151,20 @@ the fork's Dependabot. Leave everything non-urgent to the weekly Dependabot cycl
 These are dependency bumps, so no changeset (matches the `skip changeset` label the
 fork's Dependabot uses).
 
+### 5. If asked to push and open a PR
+
+The SHA is meaningless to a reviewer — title the PR with the upstream package
+version the batch reaches instead, read from `package.json` **at TARGET**
+(TARGET sits right before the *next* version-bump, so its `version` field is
+the last upstream release this batch actually includes):
+
+```bash
+git show <TARGET>:package.json | grep '"version"'
+```
+
+e.g. TARGET's version `0.51.6` → title `Sync Primer view_components upstream through v0.51.6`,
+not `...through 6733f3c0`. The SHA can still go in the PR body for traceability.
+
 ## Quick Reference
 
 ```bash
@@ -197,6 +211,8 @@ script/setup && git add -A && git commit
   <path>` and resolve it by hand.
 - **Inventing a PR/release flow.** The job ends at the local merge commit on
   `bump/primer-upstream`; release is a separate changeset-driven process.
+- **Titling the PR with the merge SHA.** A hex SHA tells a reviewer nothing.
+  Use the upstream package version at TARGET instead (see step 5).
 
 ## Keeping the two forks aligned
 

.devcontainer/Dockerfile

@@ -6,6 +6,8 @@ ARG INSTALL_NODE="true"
 ARG NODE_VERSION="lts/*"
 
 # OS packages required to run the application
+# Remove Yarn apt source to avoid GPG key verification failures during apt-get update
+RUN rm -f /etc/apt/sources.list.d/yarn.list
 RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     && apt-get -y install --no-install-recommends \
       fonts-liberation \

Gemfile.lock

@@ -158,21 +158,21 @@ GEM
     msgpack (1.8.0)
     mutex_m (0.3.0)
     nio4r (2.7.5)
-    nokogiri (1.19.2-aarch64-linux-gnu)
+    nokogiri (1.19.4-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-aarch64-linux-musl)
+    nokogiri (1.19.4-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm-linux-gnu)
+    nokogiri (1.19.4-arm-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm-linux-musl)
+    nokogiri (1.19.4-arm-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm64-darwin)
+    nokogiri (1.19.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-darwin)
+    nokogiri (1.19.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.19.4-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-musl)
+    nokogiri (1.19.4-x86_64-linux-musl)
       racc (~> 1.4)
     openproject-octicons (19.34.0)
     parallel (1.28.0)

app/components/primer/alpha/auto_complete.pcss

@@ -92,15 +92,13 @@
   background-color: var(--overlay-bgColor);
   border: 0;
 
+  /* `color` is inherited, so setting it on the item recolors descendants
+  ** without a universal `… *` descendant rule (which forces a slow
+  ** style-recalc match attempt against every element on the page). */
   &:hover {
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 
   &.selected,
@@ -109,10 +107,5 @@
     color: var(--fgColor-onEmphasis);
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
-    & * {
-      color: inherit !important;
-    }
   }
 }

app/components/primer/alpha/text_field.pcss

@@ -78,6 +78,7 @@
 }
 
 /* shared among all form control components (input, select, textarea, checkbox, radio) */
+/* stylelint-disable nesting-selector-no-missing-scoping-root */
 @define-mixin Field {
   color: var(--fgColor-default);
   background-color: var(--bgColor-default);
@@ -118,6 +119,7 @@
     @mixin focusBoxShadowInset;
   }
 }
+/* stylelint-enable nesting-selector-no-missing-scoping-root */
 
 /* TextInput structure
 ** ===================
@@ -673,18 +675,21 @@
   grid-template-columns: min-content auto;
   gap: var(--base-size-8);
 
-  & .FormControl-checkbox-labelWrap,
-  & .FormControl-radio-labelWrap {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base-size-4);
-  }
-
   & .FormControl-label {
     cursor: pointer;
   }
 }
 
+/* Expanded per-class so the subject buckets by a single class during style
+** recalc, instead of compiling to a merged `:is(...)` subject that Blink
+** cannot fast-reject. */
+.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
+.FormControl-radio-wrap .FormControl-radio-labelWrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+
 .FormControl-radio-group-wrap {
   & fieldset {
     padding: 0;

app/components/primer/beta/breadcrumbs.pcss

@@ -15,11 +15,12 @@
   }
 }
 
-.breadcrumb-item-selected,
-.breadcrumb-item[aria-current]:not([aria-current='false']) {
-  &::after {
-    content: none;
-  }
+/* Expanded per-class so each selector buckets by its own class during style
+** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
+** fast-reject. */
+.breadcrumb-item-selected::after,
+.breadcrumb-item[aria-current]:not([aria-current='false'])::after {
+  content: none;
 }
 
 /* stylelint-disable-next-line selector-max-type */