From c5414745a1e449ba23076188307499fb2df5343e Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Thu, 26 Feb 2026 12:57:43 +0100
Subject: [PATCH 1/2] perf(Banner): replace :has(.BannerActions) with
 data-has-actions attribute

---
 packages/react/src/Banner/Banner.module.css | 8 ++++----
 packages/react/src/Banner/Banner.tsx        | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css
index 07b04346567..8d0fa0b6970 100644
--- a/packages/react/src/Banner/Banner.module.css
+++ b/packages/react/src/Banner/Banner.module.css
@@ -119,7 +119,7 @@
   margin-block: var(--base-size-8);
 }
 
-.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {
+.Banner[data-title-hidden]:not([data-has-actions]) .BannerContent {
   margin-block: var(--base-size-6);
 }
 
@@ -153,7 +153,7 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {
+.Banner[data-title-hidden]:not([data-has-actions]) .BannerIcon svg {
   height: var(--base-size-16);
 }
 
@@ -166,7 +166,7 @@
   margin-inline-start: var(--base-size-4);
 }
 
-:where(.Banner):has(.BannerActions) .BannerDismiss {
+:where(.Banner)[data-has-actions] .BannerDismiss {
   margin-block: var(--base-size-2);
 }
 
@@ -211,7 +211,7 @@
     display: grid;
   }
 
-  .BannerContainer:has(.BannerActionsContainer) {
+  :where(.Banner)[data-has-actions] .BannerContainer {
     grid-template-rows: auto auto;
   }
 
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 6168adac9bb..3b5a2eecaaf 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -162,6 +162,7 @@ export const Banner = React.forwardRef<HTMLElement, BannerProps>(function Banner
         aria-label={labelledBy ? undefined : label}
         className={clsx(className, classes.Banner)}
         data-dismissible={onDismiss ? '' : undefined}
+        data-has-actions={hasActions ? '' : undefined}
         data-title-hidden={hideTitle ? '' : undefined}
         data-variant={variant}
         data-actions-layout={actionsLayout}

From 20e461aa668e887762f54e015cd5bdaa98092437 Mon Sep 17 00:00:00 2001
From: hectahertz <hectahertz@gmail.com>
Date: Thu, 26 Feb 2026 12:57:54 +0100
Subject: [PATCH 2/2] chore: changeset

---
 .changeset/perf-banner-css-has-selector.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/perf-banner-css-has-selector.md

diff --git a/.changeset/perf-banner-css-has-selector.md b/.changeset/perf-banner-css-has-selector.md
new file mode 100644
index 00000000000..935ffe23f7e
--- /dev/null
+++ b/.changeset/perf-banner-css-has-selector.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+perf(Banner): replace `:has(.BannerActions)` with `[data-has-actions]` attribute selector