@primer/brand-css 0.72.0-rc.f273f08b → 0.72.0

package/components/Avatar/Avatar.css

@@ -14,6 +14,7 @@
 }
 
 .Avatar__image {
+  display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;

package/components/BreakoutBanner/BreakoutBanner.css

@@ -62,6 +62,10 @@
   margin-block-end: var(--base-size-48);
 }
 
+.BreakoutBanner-leadingVisual :is(img, picture) {
+  display: block;
+}
+
 /* Regular */
 @media screen and (min-width: 48rem) {
   .BreakoutBanner {

package/components/CTABanner/CTABanner.css

@@ -105,6 +105,10 @@
   margin: 0 auto;
 }
 
+.CTABanner-content :is(img, picture) {
+  display: block;
+}
+
 .CTABanner--variant-minimal .CTABanner-content {
   --CTABanner-content-gap: 0;
 }

package/components/EyebrowBanner/EyebrowBanner.css

@@ -41,6 +41,11 @@
   max-height: var(--base-size-44);
 }
 
+.EyebrowBanner__leadingVisual img,
+.EyebrowBanner__leadingVisual picture {
+  display: block;
+}
+
 .EyebrowBanner__trailingVisual {
   display: flex;
 }

package/components/Hero/Hero.css

@@ -83,7 +83,7 @@
   padding: var(--base-size-32) var(--base-size-32) 0;
 }
 
-.Hero-imageContainer--inline-bg-padded {
+.Hero-imageContainer--inline-padding-all {
   padding: var(--base-size-32);
   background-color: var(--brand-color-canvas-subtle);
 }
@@ -101,11 +101,14 @@
 }
 
 .Hero-imageContainer--inline-bordered {
-  background-color: var(--brand-color-canvas-subtle);
   display: flex;
   align-items: stretch;
 }
 
+.Hero-imageContainer--inline-bordered:not(.Hero-imageContainer--inline-padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 @media screen and (min-width: 63.25rem) {
   .Hero-imageContainer--inline-bordered {
     min-height: calc(600px - var(--base-size-24));
@@ -115,7 +118,7 @@
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero-imageContainer--inline-bg-padded {
+  .Hero-imageContainer--inline-padding-all {
     padding: var(--base-size-64);
   }
 }
@@ -133,10 +136,14 @@
   overflow: hidden;
 }
 
-.Hero--variant-gridline .Hero-media--pos-block-end {
+.Hero--variant-gridline .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
 }
 
+.Hero-media--pos-block-end.Hero-media--padding-all {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 /* Applied directly to video/iframe elements for block-end position */
 .Hero-media-item--block-end {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
@@ -144,10 +151,13 @@
 
 .Hero--variant-gridline .Hero-imageWrapper {
   border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  background-color: var(--brand-color-canvas-subtle);
   width: 100%;
 }
 
+.Hero--variant-gridline .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 .Hero--variant-gridline .Hero-imageWrapper-inner {
   width: 100%;
   max-width: 1280px;
@@ -161,24 +171,24 @@
   }
 }
 
-.Hero--variant-gridline .Hero-imageWrapper-inner--padded {
+.Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {
   padding: var(--base-size-32);
 }
 
-.Hero-media--pos-block-end-padded {
-  border-radius: var(--brand-borderRadius-medium);
-}
-
 @media screen and (min-width: 63.25rem) {
   .Hero--variant-gridline .Hero-imageWrapper-inner {
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero--variant-gridline .Hero-imageWrapper-inner--padded {
+  .Hero--variant-gridline .Hero-imageWrapper-inner--padding-all {
     padding: var(--base-size-64);
   }
 }
 
+.Hero--variant-gridline .Hero-imageWrapper-inner--padding-none {
+  padding: 0;
+}
+
 /* GridLine variant with inline (side-by-side) layout */
 .Hero-grid--bordered-inline {
   width: 100%;
@@ -219,7 +229,7 @@
 /* Media styling for gridline inline positions */
 
 /* Edge-to-edge inline media (no padding) - remove border radius */
-.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {
+.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--padding-all) {
   border-radius: 0;
 }
 
@@ -229,7 +239,7 @@
 }
 
 /* Padded inline media - constrain size and center */
-.Hero--variant-gridline .Hero-media--pos-inline-padded {
+.Hero--variant-gridline .Hero-media--pos-inline.Hero-media--padding-all {
   max-width: 100%;
   height: auto;
   align-self: center;
@@ -292,6 +302,10 @@
   gap: var(--base-size-8) var(--base-size-16);
 }
 
+.Hero .Hero-actions > * {
+  flex-grow: 0;
+}
+
 .Hero--variant-gridline-expressive .Hero-actions {
   align-items: stretch;
   gap: var(--base-size-8) var(--base-size-12);
@@ -301,6 +315,10 @@
   margin-block-start: var(--base-size-32);
 }
 
+.Hero-trailing :is(img, picture) {
+  display: block;
+}
+
 .Hero-eyebrow {
   margin-block-end: var(--base-size-32);
 }
@@ -440,10 +458,13 @@
 /* Media wrapper styles for gridline-expressive (same as gridline) */
 .Hero--variant-gridline-expressive .Hero-imageWrapper {
   border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  background-color: var(--brand-color-canvas-subtle);
   width: 100%;
 }
 
+.Hero--variant-gridline-expressive .Hero-imageWrapper:not(.Hero-imageWrapper--padding-none) {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
 .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {
   width: 100%;
   max-width: 1280px;
@@ -457,7 +478,7 @@
   }
 }
 
-.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {
   padding: var(--base-size-32);
 }
 
@@ -466,11 +487,15 @@
     padding: var(--base-size-64) var(--base-size-64) 0;
   }
 
-  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-all {
     padding: var(--base-size-64);
   }
 }
 
+.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padding-none {
+  padding: 0;
+}
+
 /* Shared media styles for gridline-expressive */
 .Hero--variant-gridline-expressive .Hero-media {
   max-width: 1176px;
@@ -479,7 +504,13 @@
   overflow: hidden;
 }
 
-.Hero--variant-gridline-expressive .Hero-media--pos-block-end,
-.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {
+.Hero--variant-gridline-expressive
+  .Hero-media--pos-block-end:not(.Hero-media--padding-all):not(.Hero-media--padding-none) {
   border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
 }
+
+.Hero--variant-gridline .Hero-media--padding-none,
+.Hero--variant-gridline-expressive .Hero-media--padding-none {
+  border-radius: 0;
+  max-width: 100%;
+}

package/components/LogoSuite/LogoSuite.css

@@ -71,6 +71,10 @@
   height: var(--base-size-32);
 }
 
+.LogoSuite__logobar img {
+  display: block;
+}
+
 .LogoSuite__logobar--variant-muted svg,
 .LogoSuite__logobar--variant-muted path {
   fill: var(--brand-LogoSuite-color-logo-muted);

package/components/MinimalFooter/MinimalFooter.css

@@ -77,6 +77,7 @@
 }
 
 .Footer__social-icon {
+  display: block;
   width: 24px;
   height: auto;
 }

package/components/PricingOptions/PricingOptions.css

@@ -410,6 +410,10 @@
   grid-row: leadingComponent;
 }
 
+.PricingOptions__leading-component :is(img, picture) {
+  display: block;
+}
+
 .PricingOptions__label {
   color: var(--brand-color-text-default);
   font-family: var(--brand-fontStack-monospace);

package/components/SectionIntro/SectionIntro.css

@@ -6,6 +6,10 @@
   padding-block: var(--base-size-24);
 }
 
+.SectionIntro :is(img, picture) {
+  display: block;
+}
+
 .SectionIntro-heading--muted {
   color: var(--brand-color-text-muted);
 }

package/components/Statistic/Statistic.css

@@ -1,6 +1,10 @@
 /**
  * Variants
  */
+.Statistic :is(img, picture) {
+  display: block;
+}
+
 .Statistic--variant-boxed {
   background-color: var(--brand-color-canvas-subtle);
   border-radius: var(--brand-borderRadius-large);

package/components/Testimonial/Testimonial.css

@@ -136,6 +136,10 @@
   margin-top: var(--base-size-24);
 }
 
+.Testimonial-logo-image {
+  display: block;
+}
+
 .Testimonial--size-large .Testimonial__media {
   margin-top: var(--base-size-64);
 }

package/components/river/RiverAccordion/RiverAccordion.css

@@ -9,7 +9,7 @@
   position: relative;
 }
 
-@media (min-width: 48rem) {
+@media screen and (min-width: 63.25rem) {
   .RiverAccordion {
     --gap-width: var(--brand-Grid-spacing-column-gap);
     --column-and-gap-width: calc((100% + var(--gap-width)) / 12);
@@ -40,7 +40,7 @@
   padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);
 }
 
-@media (min-width: 48rem) {
+@media screen and (min-width: 63.25rem) {
   .RiverAccordion--variant-gridline {
     --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
     --half-column: calc(50% - var(--gap-width) / 2);
@@ -75,6 +75,17 @@
   margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));
 }
 
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .RiverAccordion {
+    max-width: 618px;
+    margin-inline: auto;
+  }
+
+  .RiverAccordion--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
 .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
   border-radius: 0;
 }
@@ -169,7 +180,7 @@
   border-radius: var(--brand-borderRadius-large);
 }
 
-@media (min-width: 48rem) {
+@media screen and (min-width: 63.25rem) {
   .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {
     padding: 0;
     gap: 0;
@@ -253,6 +264,12 @@
   border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
 }
 
+@media screen and (max-width: 63.24rem) {
+  .RiverAccordion--variant-gridline .RiverAccordion__item:last-child {
+    border-bottom: none;
+  }
+}
+
 .RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {
   color: var(--brand-color-text-muted);
 }

package/components/river/RiverBreakoutTabs/RiverBreakoutTabs.css

@@ -37,15 +37,6 @@
   border-radius: var(--brand-borderRadius-small);
 }
 
-/* River removes the gridline top spacing when a subtle visual is present
-   (.RiverBreakout--variant-gridline:has(.River__visual--has-background)), bleeding the subtle
-   background up to the top gridline. Restore the top spacing so a non-full-bleed background is
-   inset from the top like the sides — only backgroundVisualFullBleed should reach the
-   top gridline. */
-.RiverBreakoutTabs:has(:global([class*='River__visual--has-background'])) {
-  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
-}
-
 .RiverBreakoutTabs__accordionSharedVisuals {
   position: relative;
   margin-block-end: var(--base-size-16);

package/components/river/RiverStoryScroll/RiverStoryScroll.css

@@ -42,6 +42,7 @@
 }
 
 .RiverStoryScroll__image {
+  display: block;
   margin-left: auto;
   margin-right: auto;
   width: auto;

package/components/river/river-shared.css

@@ -34,6 +34,10 @@
   order: 2;
 }
 
+.River__visual :is(img, picture) {
+  display: block;
+}
+
 .River__visual--fill-media img,
 .River__visual--fill-media picture,
 .River__visual--fill-media video {
@@ -57,7 +61,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--brand-color-canvas-subtle);
-  padding: var(--base-size-32);
+  padding: var(--brand-River-variant-gridline-visual-padding);
   border-radius: 0;
   margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));
 }
@@ -89,6 +93,15 @@
 }
 
 @media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .River {
+    max-width: 618px;
+    margin-inline: auto;
+  }
+
+  .River--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
   .River--variant-gridline .River__visual--has-background {
     align-items: flex-end;
     padding-block-end: 0;
@@ -107,7 +120,7 @@
 }
 
 .River__call-to-action {
-  margin-top: var(--base-size-20);
+  margin-top: var(--base-size-24);
 }
 
 .River__text strong,
@@ -146,6 +159,11 @@
   line-height: calc(1lh * 1.1);
 }
 
+.River__leadingComponent :is(img, picture),
+.River__trailingComponent :is(img, picture) {
+  display: block;
+}
+
 .River__trailingComponent {
   margin-block-start: var(--brand-River-spacing-inner);
 }
@@ -196,7 +214,6 @@
   }
 
   .River--variant-gridline .River__visual--has-background {
-    padding: var(--base-size-64);
     margin: 0;
   }
 
@@ -369,6 +386,124 @@
   }
 }
 
+/* Explicit visual media layouts override the responsive default without changing it. */
+.River--variant-gridline .River__visual.River__visual--position-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: var(--brand-River-variant-gridline-visual-padding);
+  padding-block-end: 0;
+  padding-inline-end: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline .River__visual.River__visual--padding-all {
+  padding: var(--brand-River-variant-gridline-visual-padding);
+}
+
+.River--variant-gridline .River__visual.River__visual--padding-none {
+  padding: 0;
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual:is(
+    .River__visual--position-center,
+    .River__visual--position-block-end,
+    .River__visual--position-block-end-inline-start,
+    .River__visual--position-block-end-inline-end
+  )
+  :is(img, picture, video, [data-video-player-container]) {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--padding-all
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-center
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+  border-start-end-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+  border-start-start-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--padding-all
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--fill-media.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]) {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.River--variant-gridline
+  .River__visual.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]),
+.River--variant-gridline
+  .River__visual.River__visual--rounded.River__visual--padding-none
+  :is(img, picture, video, [data-video-player-container]) {
+  border-radius: 0;
+}
+
 .RiverBreakout {
   display: flex;
   flex-direction: column;
@@ -557,97 +692,3 @@
     align-self: stretch;
   }
 }
-
-/* Gridline + background: remove outer container top padding (background fills to top edge) */
-.RiverBreakout--variant-gridline:has(.River__visual--has-background) {
-  padding-block-start: 0;
-}
-
-.RiverBreakout .River__visual--has-background {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--brand-color-canvas-subtle);
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.RiverBreakout .River__visual--has-background img,
-.RiverBreakout .River__visual--has-background picture,
-.RiverBreakout .River__visual--has-background video {
-  max-width: 100%;
-  height: auto;
-  width: auto;
-  border-radius: var(--brand-borderRadius-large);
-}
-
-.RiverBreakout .River__visual--has-background [data-video-player-container] {
-  border-radius: var(--brand-borderRadius-large);
-}
-
-.RiverBreakout--variant-gridline .River__visual--has-background {
-  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
-  padding: var(--base-size-32);
-}
-
-@media screen and (max-width: 47.99rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-@media screen and (min-width: 63.25rem) {
-  .RiverBreakout--variant-gridline .River__visual--has-background {
-    align-items: flex-end;
-    padding: var(--base-size-64);
-    padding-block-end: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background img,
-  .RiverBreakout--variant-gridline .River__visual--has-background picture,
-  .RiverBreakout--variant-gridline .River__visual--has-background video {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {
-    border-radius: 0;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.72.0-rc.f273f08b",
+  "version": "0.72.0",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",