Merge upstream primer view_components v0.51.6

Syncs the fork with primer/view_components up to upstream commit
6733f3c (parent of Release Tracking primer#4098), the last release in
this batch reaching v0.51.6.

Notable upstream changes pulled in:
- classnames.js Set export (primer#4096): static/classnames.{js,cjs,d.ts}
  plus the package.json exports subpath and files entries.
- perf(css): removed universal `*` subjects and expanded merged
  `:is()` selector lists (primer#4095).

Conflicts resolved keeping the fork's identity, scope and its higher
dependency versions; upstream's new exports/files additions and the
static class-name output were merged in and regenerated cleanly.

Author: myabc

.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.

.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 \

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 */