@primer/brand-css 0.63.0 → 0.64.0

package/components/Box/Box.css

@@ -2694,7 +2694,19 @@
 }
 
 /*
-* 13. Border Width
+* 13. Border Style (must come before width so width can override)
+*/
+.Box-borderStyle--solid {
+  border-style: solid;
+  border-width: 0; /* Reset all sides so individual side props work correctly */
+}
+
+.Box-borderStyle--none {
+  border-style: none;
+}
+
+/*
+* 14. Border Width
 */
 .Box-borderWidth--thin {
   border-width: var(--brand-borderWidth-thin);
@@ -2709,63 +2721,274 @@
 }
 
 .Box-borderBlockStartWidth--thin {
-  border-width: 0;
   border-block-start-width: var(--brand-borderWidth-thin);
 }
 
 .Box-borderBlockStartWidth--thick {
-  border-width: 0;
   border-block-start-width: var(--brand-borderWidth-thick);
 }
 
 .Box-borderBlockStartWidth--thicker {
-  border-width: 0;
   border-block-start-width: var(--brand-borderWidth-thicker);
 }
 
 .Box-borderInlineEndWidth--thin {
-  border-width: 0;
-  border-right-width: var(--brand-borderWidth-thin);
+  border-inline-end-width: var(--brand-borderWidth-thin);
 }
 
 .Box-borderInlineEndWidth--thick {
-  border-width: 0;
-  border-right-width: var(--brand-borderWidth-thick);
+  border-inline-end-width: var(--brand-borderWidth-thick);
 }
 
 .Box-borderInlineEndWidth--thicker {
-  border-width: 0;
-  border-right-width: var(--brand-borderWidth-thicker);
+  border-inline-end-width: var(--brand-borderWidth-thicker);
 }
 
 .Box-borderBlockEndWidth--thin {
-  border-width: 0;
-  border-bottom-width: var(--brand-borderWidth-thin);
+  border-block-end-width: var(--brand-borderWidth-thin);
 }
 
 .Box-borderBlockEndWidth--thick {
-  border-width: 0;
-  border-bottom-width: var(--brand-borderWidth-thick);
+  border-block-end-width: var(--brand-borderWidth-thick);
 }
 
 .Box-borderBlockEndWidth--thicker {
-  border-width: 0;
-  border-bottom-width: var(--brand-borderWidth-thicker);
+  border-block-end-width: var(--brand-borderWidth-thicker);
 }
 
 .Box-borderInlineStartWidth--thin {
-  border-width: 0;
-  border-left-width: var(--brand-borderWidth-thin);
+  border-inline-start-width: var(--brand-borderWidth-thin);
 }
 
 .Box-borderInlineStartWidth--thick {
-  border-width: 0;
-  border-left-width: var(--brand-borderWidth-thick);
+  border-inline-start-width: var(--brand-borderWidth-thick);
 }
 
 .Box-borderInlineStartWidth--thicker {
+  border-inline-start-width: var(--brand-borderWidth-thicker);
+}
+
+/* Border width: none options */
+.Box-borderWidth--none {
   border-width: 0;
-  border-left-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderBlockStartWidth--none {
+  border-block-start-width: 0;
+}
+
+.Box-borderInlineEndWidth--none {
+  border-inline-end-width: 0;
+}
+
+.Box-borderBlockEndWidth--none {
+  border-block-end-width: 0;
+}
+
+.Box-borderInlineStartWidth--none {
+  border-inline-start-width: 0;
+}
+
+/* Responsive border width: narrow (mobile-first, no media query) */
+.Box-narrow-borderWidth--none {
+  border-width: 0;
+}
+.Box-narrow-borderWidth--thin {
+  border-width: var(--brand-borderWidth-thin);
+}
+.Box-narrow-borderWidth--thick {
+  border-width: var(--brand-borderWidth-thick);
+}
+.Box-narrow-borderWidth--thicker {
+  border-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-narrow-borderBlockStartWidth--none {
+  border-block-start-width: 0;
+}
+.Box-narrow-borderBlockStartWidth--thin {
+  border-block-start-width: var(--brand-borderWidth-thin);
+}
+.Box-narrow-borderBlockStartWidth--thick {
+  border-block-start-width: var(--brand-borderWidth-thick);
+}
+.Box-narrow-borderBlockStartWidth--thicker {
+  border-block-start-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-narrow-borderInlineEndWidth--none {
+  border-inline-end-width: 0;
+}
+.Box-narrow-borderInlineEndWidth--thin {
+  border-inline-end-width: var(--brand-borderWidth-thin);
+}
+.Box-narrow-borderInlineEndWidth--thick {
+  border-inline-end-width: var(--brand-borderWidth-thick);
+}
+.Box-narrow-borderInlineEndWidth--thicker {
+  border-inline-end-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-narrow-borderBlockEndWidth--none {
+  border-block-end-width: 0;
+}
+.Box-narrow-borderBlockEndWidth--thin {
+  border-block-end-width: var(--brand-borderWidth-thin);
+}
+.Box-narrow-borderBlockEndWidth--thick {
+  border-block-end-width: var(--brand-borderWidth-thick);
+}
+.Box-narrow-borderBlockEndWidth--thicker {
+  border-block-end-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-narrow-borderInlineStartWidth--none {
+  border-inline-start-width: 0;
+}
+.Box-narrow-borderInlineStartWidth--thin {
+  border-inline-start-width: var(--brand-borderWidth-thin);
+}
+.Box-narrow-borderInlineStartWidth--thick {
+  border-inline-start-width: var(--brand-borderWidth-thick);
+}
+.Box-narrow-borderInlineStartWidth--thicker {
+  border-inline-start-width: var(--brand-borderWidth-thicker);
+}
+
+/* Responsive border width: regular (tablet+) */
+@media screen and (min-width: 48rem) {
+  .Box-regular-borderWidth--none {
+    border-width: 0;
+  }
+  .Box-regular-borderWidth--thin {
+    border-width: var(--brand-borderWidth-thin);
+  }
+  .Box-regular-borderWidth--thick {
+    border-width: var(--brand-borderWidth-thick);
+  }
+  .Box-regular-borderWidth--thicker {
+    border-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-regular-borderBlockStartWidth--none {
+    border-block-start-width: 0;
+  }
+  .Box-regular-borderBlockStartWidth--thin {
+    border-block-start-width: var(--brand-borderWidth-thin);
+  }
+  .Box-regular-borderBlockStartWidth--thick {
+    border-block-start-width: var(--brand-borderWidth-thick);
+  }
+  .Box-regular-borderBlockStartWidth--thicker {
+    border-block-start-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-regular-borderInlineEndWidth--none {
+    border-inline-end-width: 0;
+  }
+  .Box-regular-borderInlineEndWidth--thin {
+    border-inline-end-width: var(--brand-borderWidth-thin);
+  }
+  .Box-regular-borderInlineEndWidth--thick {
+    border-inline-end-width: var(--brand-borderWidth-thick);
+  }
+  .Box-regular-borderInlineEndWidth--thicker {
+    border-inline-end-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-regular-borderBlockEndWidth--none {
+    border-block-end-width: 0;
+  }
+  .Box-regular-borderBlockEndWidth--thin {
+    border-block-end-width: var(--brand-borderWidth-thin);
+  }
+  .Box-regular-borderBlockEndWidth--thick {
+    border-block-end-width: var(--brand-borderWidth-thick);
+  }
+  .Box-regular-borderBlockEndWidth--thicker {
+    border-block-end-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-regular-borderInlineStartWidth--none {
+    border-inline-start-width: 0;
+  }
+  .Box-regular-borderInlineStartWidth--thin {
+    border-inline-start-width: var(--brand-borderWidth-thin);
+  }
+  .Box-regular-borderInlineStartWidth--thick {
+    border-inline-start-width: var(--brand-borderWidth-thick);
+  }
+  .Box-regular-borderInlineStartWidth--thicker {
+    border-inline-start-width: var(--brand-borderWidth-thicker);
+  }
+}
+
+/* Responsive border width: wide (desktop+) */
+@media screen and (min-width: 64rem) {
+  .Box-wide-borderWidth--none {
+    border-width: 0;
+  }
+  .Box-wide-borderWidth--thin {
+    border-width: var(--brand-borderWidth-thin);
+  }
+  .Box-wide-borderWidth--thick {
+    border-width: var(--brand-borderWidth-thick);
+  }
+  .Box-wide-borderWidth--thicker {
+    border-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-wide-borderBlockStartWidth--none {
+    border-block-start-width: 0;
+  }
+  .Box-wide-borderBlockStartWidth--thin {
+    border-block-start-width: var(--brand-borderWidth-thin);
+  }
+  .Box-wide-borderBlockStartWidth--thick {
+    border-block-start-width: var(--brand-borderWidth-thick);
+  }
+  .Box-wide-borderBlockStartWidth--thicker {
+    border-block-start-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-wide-borderInlineEndWidth--none {
+    border-inline-end-width: 0;
+  }
+  .Box-wide-borderInlineEndWidth--thin {
+    border-inline-end-width: var(--brand-borderWidth-thin);
+  }
+  .Box-wide-borderInlineEndWidth--thick {
+    border-inline-end-width: var(--brand-borderWidth-thick);
+  }
+  .Box-wide-borderInlineEndWidth--thicker {
+    border-inline-end-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-wide-borderBlockEndWidth--none {
+    border-block-end-width: 0;
+  }
+  .Box-wide-borderBlockEndWidth--thin {
+    border-block-end-width: var(--brand-borderWidth-thin);
+  }
+  .Box-wide-borderBlockEndWidth--thick {
+    border-block-end-width: var(--brand-borderWidth-thick);
+  }
+  .Box-wide-borderBlockEndWidth--thicker {
+    border-block-end-width: var(--brand-borderWidth-thicker);
+  }
+
+  .Box-wide-borderInlineStartWidth--none {
+    border-inline-start-width: 0;
+  }
+  .Box-wide-borderInlineStartWidth--thin {
+    border-inline-start-width: var(--brand-borderWidth-thin);
+  }
+  .Box-wide-borderInlineStartWidth--thick {
+    border-inline-start-width: var(--brand-borderWidth-thick);
+  }
+  .Box-wide-borderInlineStartWidth--thicker {
+    border-inline-start-width: var(--brand-borderWidth-thicker);
+  }
 }
 
 /*
@@ -2782,14 +3005,3 @@
 .Box-borderColor--subtle {
   border-color: var(--brand-color-border-subtle);
 }
-
-/*
-* 15. Border Style
-*/
-.Box-borderStyle--solid {
-  border-style: solid;
-}
-
-.Box-borderStyle--none {
-  border-style: none;
-}

package/components/Card/Card.css

@@ -42,6 +42,32 @@
   justify-items: center;
 }
 
+/** Block end image position option */
+.Card--imagePos-block-end {
+  grid-template-areas:
+    'icon icon'
+    'label label'
+    'heading heading'
+    'description description'
+    'action action'
+    'image image';
+}
+
+.Card--align-center .Card--imagePos-block-end {
+  grid-template-areas:
+    'icon'
+    'label'
+    'heading'
+    'description'
+    'action'
+    'image';
+}
+
+.Card--imagePos-block-end .Card__image {
+  margin-bottom: 0;
+  margin-top: var(--base-size-28);
+}
+
 .Card--maxWidth {
   max-width: var(--brand-Card-maxWidth);
 }
@@ -54,6 +80,10 @@
   padding: 0;
 }
 
+.Card--align-center .Card--variant-minimal {
+  padding: 0;
+}
+
 .Card--variant-default,
 .Card--variant-torchlight.Card--colorMode-light {
   background-color: var(--brand-Card-background-default);

package/components/Hero/Hero.css

@@ -1,9 +1,12 @@
 .Hero {
-  padding: var(--brand-Hero-narrow-padding);
   display: flex;
   flex-direction: column;
 }
 
+.Hero--variant-default {
+  padding: var(--brand-Hero-narrow-padding);
+}
+
 .Hero--align-start {
   align-items: flex-start;
   text-align: left;
@@ -19,12 +22,31 @@
   --brand-Grid-spacing-margin: 0;
 }
 
+.Hero-grid--contained {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding: var(--base-size-32);
+  background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed */
+}
+
+/* Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width.  */
+@container (min-width: 1280px) {
+  .Hero-grid--contained {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
 .Hero-grid--block-end,
 .Hero-grid--inline-end {
   --brand-Grid-spacing-row: var(--base-size-40);
 }
 
-@media screen and (min-width: 48rem) {
+@media screen and (min-width: 63.25rem) {
+  .Hero-grid--contained {
+    padding: var(--base-size-64);
+  }
+
   .Hero-grid--block-end {
     --brand-Grid-spacing-row: var(--base-size-80);
   }
@@ -41,18 +63,192 @@
 }
 
 .Hero-image {
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--brand-borderRadius-medium);
+  width: 100%;
+}
+
+.Hero-mediaContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex: 1;
+}
+
+.Hero-imageContainer--bg-subtle {
+  background-color: var(--brand-color-canvas-subtle);
+  padding: var(--base-size-32) var(--base-size-32) 0;
+}
+
+.Hero-imageContainer--inline-bg-padded {
+  padding: var(--base-size-32);
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.Hero-imageWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.Hero-imageWrapper--bg-subtle {
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  background-color: var(--brand-color-canvas-subtle);
+  padding: var(--base-size-32) var(--base-size-32) 0;
+}
+
+.Hero-imageContainer--inline-bordered {
+  background-color: var(--brand-color-canvas-subtle);
+  display: flex;
+  align-items: stretch;
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Hero-imageContainer--inline-bordered {
+    min-height: calc(600px - var(--base-size-24));
+  }
+
+  .Hero-imageWrapper--bg-subtle {
+    padding: var(--base-size-64) var(--base-size-64) 0;
+  }
+
+  .Hero-imageContainer--inline-bg-padded {
+    padding: var(--base-size-64);
+  }
+}
+
+.Hero--variant-gridline {
+  container-type: inline-size;
+  width: 100%;
+}
+
+/* Shared media styles for images and videos */
+.Hero--variant-gridline .Hero-media {
+  max-width: 1176px;
+  margin-inline: auto;
+  display: block;
+  overflow: hidden;
+}
+
+.Hero--variant-gridline .Hero-media--pos-block-end {
+  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
+}
+
+/* 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;
+}
+
+.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-inner {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding: var(--base-size-32) var(--base-size-32) 0;
+}
+
+@container (min-width: 1280px) {
+  .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+.Hero--variant-gridline .Hero-imageWrapper-inner--padded {
+  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 {
+    padding: var(--base-size-64);
+  }
+}
+
+/* GridLine variant with inline (side-by-side) layout */
+.Hero-grid--bordered-inline {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Hero-grid--bordered-inline {
+    min-height: 440px;
+  }
+}
+
+@container (min-width: 1280px) {
+  .Hero-grid--bordered-inline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+.Hero--variant-gridline.Hero--image-pos-inline {
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+/* Text column styling for gridline inline positions */
+.Hero-contentColumn--bordered-inline {
+  padding: var(--base-size-32);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Hero-contentColumn--bordered-inline {
+    padding: var(--base-size-64);
+  }
+}
+
+/* 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) {
+  border-radius: 0;
+}
+
+/* Applied directly to video/iframe elements for inline position */
+.Hero-media-item--inline {
+  border-radius: 0;
+}
+
+/* Padded inline media - constrain size and center */
+.Hero--variant-gridline .Hero-media--pos-inline-padded {
+  max-width: 100%;
+  height: auto;
+  align-self: center;
+}
+
+/* Image column styling now handled by .Hero-imageContainer--inline-bordered */
+
+.Hero-video {
   width: 100%;
 }
 
-.Hero-video video,
-.Hero-video iframe {
+/* Base styles for video/iframe media elements */
+.Hero-media-item {
   width: 100%;
   border-radius: var(--brand-borderRadius-large);
 }
 
 .Hero-label {
+  text-transform: uppercase;
+  letter-spacing: 1px;
   margin-block-end: var(--base-size-24);
+  display: flex;
+  align-items: center;
 }
 
 .Hero-heading {
@@ -64,11 +260,20 @@
   max-width: unset;
 }
 
+.Hero-text-column--inline-gridline {
+  height: 100%;
+}
+
 .Hero-description {
   margin: var(--base-size-24) 0 0;
   max-width: 600px;
 }
 
+.Hero--variant-inline-gridline .Hero-description {
+  padding-block-start: var(--base-size-24);
+  margin-block-start: auto;
+}
+
 .Hero-actions {
   margin-block-start: var(--base-size-32);
   display: flex;
@@ -77,6 +282,11 @@
   gap: var(--base-size-8) var(--base-size-16);
 }
 
+.Hero--variant-gridline-expressive .Hero-actions {
+  align-items: stretch;
+  gap: var(--base-size-8) var(--base-size-12);
+}
+
 .Hero-trailing {
   margin-block-start: var(--base-size-32);
 }
@@ -87,7 +297,177 @@
 
 /* Small breakpoint and up */
 @media screen and (min-width: 34rem) {
-  .Hero {
+  .Hero--variant-default {
     padding: var(--brand-Hero-regular-padding);
   }
 }
+
+.Hero-video-poster-button {
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: block;
+  height: 100%;
+  position: relative;
+  line-height: 0;
+  font-size: 0;
+  width: 100%;
+}
+
+.Hero-video-poster-image {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.Hero-video-poster-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--base-size-96);
+  height: var(--base-size-96);
+  z-index: 1;
+  color: var(--base-color-scale-white-0);
+}
+
+.Hero-video-poster-header {
+  position: absolute;
+  inset: 0 0 auto;
+  padding: var(--base-size-16) var(--base-size-24);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-16);
+  height: var(--base-size-80);
+}
+
+.Hero-video-header-poster-icon,
+.Hero-video-poster-text {
+  color: var(--base-color-scale-white-0);
+}
+
+/* ========================================
+   Gridline-Expressive Variant
+   ======================================== */
+
+.Hero--variant-gridline-expressive {
+  container-type: inline-size;
+  width: 100%;
+}
+
+/* Grid container for expressive variant */
+.Hero-grid--expressive {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  gap: 0;
+  --brand-Grid-spacing-row: 0;
+}
+
+@container (min-width: 1280px) {
+  .Hero-grid--expressive {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+/* Header column (eyebrow, heading) */
+.Hero-expressive-header-column {
+  padding: var(--base-size-32);
+  padding-block-end: var(--base-size-24);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  display: flex;
+  align-items: center;
+}
+
+/* Body column (description, actions, trailing) */
+.Hero-expressive-body-column {
+  padding: var(--base-size-32);
+  padding-block-start: var(--base-size-24);
+}
+
+.Hero--variant-gridline-expressive .Hero-description {
+  margin-block-start: 0;
+}
+
+.Hero--variant-gridline-expressive .Hero-actions {
+  margin-block-start: var(--base-size-24);
+}
+
+.Hero--variant-gridline-expressive .Hero-trailing {
+  margin-block-start: var(--base-size-24);
+}
+
+/* Desktop: Side-by-side layout with vertical divider */
+@media screen and (min-width: 63.25rem) {
+  .Hero-expressive-header-column {
+    padding: var(--base-size-64);
+    padding-inline-end: var(--base-size-64);
+    border-block-end: none;
+    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .Hero-expressive-body-column {
+    padding: var(--base-size-64);
+    padding-inline-start: var(--base-size-64);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .Hero--variant-gridline-expressive .Hero-actions {
+    margin-block-start: var(--base-size-32);
+  }
+
+  .Hero--variant-gridline-expressive .Hero-trailing {
+    margin-block-start: var(--base-size-32);
+  }
+}
+
+/* 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-inner {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+  padding: var(--base-size-32) var(--base-size-32) 0;
+}
+
+@container (min-width: 1280px) {
+  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+  padding: var(--base-size-32);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {
+    padding: var(--base-size-64) var(--base-size-64) 0;
+  }
+
+  .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {
+    padding: var(--base-size-64);
+  }
+}
+
+/* Shared media styles for gridline-expressive */
+.Hero--variant-gridline-expressive .Hero-media {
+  max-width: 1176px;
+  margin-inline: auto;
+  display: block;
+  overflow: hidden;
+}
+
+.Hero--variant-gridline-expressive .Hero-media--pos-block-end,
+.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {
+  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
+}

package/components/TextCursorAnimation/TextCursorAnimation.css

@@ -0,0 +1,40 @@
+.TextCursorAnimation {
+  display: inline-flex;
+  align-items: center;
+}
+
+.TextCursorAnimation-inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.TextCursorAnimation-text {
+  text-transform: uppercase;
+  font-weight: var(--brand-text-weight-500);
+  clip-path: inset(0 calc((1 - var(--brand-TextCursorAnimation-reveal-progress, 1)) * 100%) 0 0);
+  white-space: pre;
+}
+
+.TextCursorAnimation-cursor {
+  position: absolute;
+  left: calc((var(--brand-TextCursorAnimation-reveal-progress, 1) * 100%) + var(--base-size-6));
+  top: calc((1lh - 0.3cap) / 2 - 0.5cap);
+  width: var(--base-size-8);
+  height: 1cap;
+  background-color: color-mix(
+    in srgb,
+    var(--brand-color-canvas-subtle) calc((1 - var(--brand-TextCursorAnimation-cursor-progress, 0)) * 100%),
+    var(--brand-color-accent-primary) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .TextCursorAnimation-cursor {
+    display: none;
+  }
+
+  .TextCursorAnimation-text {
+    clip-path: none;
+  }
+}

package/components/VideoPlayer/VideoPlayer.css

@@ -296,6 +296,7 @@
   background: transparent;
   position: absolute;
   top: 0;
+  left: 0;
   opacity: 0;
 }
 
@@ -327,6 +328,7 @@
   position: absolute;
   height: var(--brand-VideoPlayer-range-height);
   top: 0;
+  left: 0;
 }
 
 .VideoPlayer__rangeProgress::-webkit-progress-bar {

package/components/animation/Animation.css

@@ -191,6 +191,21 @@
   transform: scaleY(1);
 }
 
+/**
+ * Wipe in up
+ */
+.Animation--reveal-in-up {
+  transform: translateY(100%);
+  clip-path: inset(-100% 0 100% 0);
+  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    clip-path var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--reveal-in-up.Animation--active {
+  transform: translateY(0);
+  clip-path: inset(0 0 -0.2em 0); /* includs some offset to account for descenders  */
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Animation,

package/package.json

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