@primer/brand-css 0.74.0 → 0.75.0-rc.89e3cadf

package/components/TextCursorAnimation/TextCursorAnimation.css

@@ -3,37 +3,80 @@
   align-items: center;
 }
 
-.TextCursorAnimation-inner {
+.TextCursorAnimation__inner {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
-.TextCursorAnimation-text {
+.TextCursorAnimation__text {
   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 {
+.TextCursorAnimation__sizingContainer {
+  display: inline-grid;
+  clip-path: inset(50%);
+}
+
+.TextCursorAnimation__sizingText {
+  grid-area: 1 / 1;
+}
+
+.TextCursorAnimation__content {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--base-size-8) + var(--base-size-2));
+}
+
+.TextCursorAnimation__content--animated {
   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-TextCursorAnimation-cursor-color) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)
-  );
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .TextCursorAnimation-cursor {
-    display: none;
+.TextCursorAnimation__cursor {
+  width: calc(var(--base-size-8) + var(--base-size-2) / 2);
+  height: calc(var(--base-size-12) + var(--base-size-2));
+  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);
+}
+
+.TextCursorAnimation__cursor--initial {
+  background-color: var(--brand-TextCursorAnimation-cursor-color);
+}
+
+.TextCursorAnimation__cursor--animated {
+  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)
+    250ms 3 forwards;
+}
+
+.TextCursorAnimation__cursor--correction {
+  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);
+}
+
+.TextCursorAnimation__cursor--final,
+.TextCursorAnimation__cursor--complete {
+  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);
+}
+
+@keyframes TextCursorAnimation-cursor-blink {
+  0%,
+  79% {
+    opacity: 1;
   }
 
-  .TextCursorAnimation-text {
-    clip-path: none;
+  80%,
+  99% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .TextCursorAnimation__cursor {
+    animation: none;
   }
 }

package/components/river/RiverAccordion/RiverAccordion.css

@@ -66,11 +66,7 @@
   }
 }
 
-.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {
-  border-radius: var(--brand-borderRadius-medium);
-}
-
-.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+.RiverAccordion--active-item-has-background .RiverAccordion__visualsContainer {
   margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));
   margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));
 }
@@ -86,7 +82,7 @@
   }
 }
 
-.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+.RiverAccordion--active-item-has-background .RiverAccordion__visualsWrapper {
   border-radius: 0;
 }
 
@@ -101,7 +97,7 @@
 .RiverAccordion__visualsWrapper {
   width: 100%;
   overflow: hidden;
-  border-radius: var(--brand-borderRadius-xlarge);
+  border-radius: var(--base-size-6);
   display: grid;
   grid-template-columns: subgrid;
   grid-template-rows: subgrid;
@@ -125,22 +121,18 @@
   width: 100%;
   height: auto;
   overflow: hidden;
-  border-radius: var(--brand-borderRadius-xlarge);
+  border-radius: var(--base-size-6);
   -o-object-fit: contain;
      object-fit: contain;
 }
 
-.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {
-  border-radius: var(--brand-borderRadius-medium);
-}
-
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual img,
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual video {
   display: block;
   width: 100%;
   height: auto;
-  border-radius: inherit;
+  border-radius: var(--base-size-6);
   -o-object-fit: contain;
      object-fit: contain;
 }
@@ -149,8 +141,8 @@
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {
   display: block;
   width: 100%;
-  height: 100%;
-  border-radius: inherit;
+  height: auto;
+  border-radius: var(--base-size-6);
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -169,26 +161,26 @@
   justify-content: center;
   max-width: 100%;
   height: auto;
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--base-size-6);
 }
 
 .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
 .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
 .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
   max-width: 100%;
-  height: 100%;
-  border-radius: var(--brand-borderRadius-large);
+  height: auto;
+  border-radius: var(--base-size-6);
 }
 
 @media screen and (min-width: 63.25rem) {
-  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {
+  .RiverAccordion--active-item-has-background {
     padding: 0;
     gap: 0;
     align-items: stretch;
     grid-template-columns: 1fr 1fr;
   }
 
-  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {
+  .RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -196,21 +188,19 @@
       var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);
   }
 
-  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)
-    .RiverAccordion__accordionContainer {
+  .RiverAccordion__align-start.RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {
     padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
   }
 
-  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)
-    .RiverAccordion__accordionContainer {
+  .RiverAccordion__align-end.RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {
     padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
   }
 
-  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+  .RiverAccordion--active-item-has-background .RiverAccordion__visualsContainer {
     margin: 0;
   }
 
-  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+  .RiverAccordion--active-item-has-background .RiverAccordion__visualsWrapper {
     height: 100%;
   }
 
@@ -224,7 +214,7 @@
   .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
   .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
   .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
-    border-radius: var(--brand-borderRadius-large);
+    border-radius: var(--base-size-6);
   }
 }
 
@@ -291,6 +281,30 @@
   margin: calc(var(--base-size-4) * -1);
 }
 
+.RiverAccordion__trigger--has-leading-visual {
+  gap: var(--base-size-20);
+  justify-content: flex-start;
+}
+
+.RiverAccordion__leadingVisual {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: var(--base-size-20);
+  justify-content: center;
+  width: var(--base-size-20);
+}
+
+.RiverAccordion__leadingVisual > * {
+  height: 100%;
+  width: 100%;
+}
+
+.RiverAccordion__headingText {
+  flex: 1;
+  min-width: 0;
+}
+
 .RiverAccordion__item--open .RiverAccordion__trigger {
   cursor: initial;
 }
@@ -327,6 +341,10 @@
   gap: var(--base-size-20);
 }
 
+.RiverAccordion__item:has(.RiverAccordion__leadingVisual) .RiverAccordion__content {
+  padding-inline-start: calc(var(--base-size-20) + var(--base-size-20));
+}
+
 .RiverAccordion__icon {
   flex-shrink: 0;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.74.0",
+  "version": "0.75.0-rc.89e3cadf",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",
@@ -30,10 +30,10 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@types/node": "24.12.0",
-    "autoprefixer": "10.4.27",
-    "postcss": "8.5.10",
-    "tsx": "^4.21.0",
+    "@types/node": "24.13.3",
+    "autoprefixer": "10.5.4",
+    "postcss": "8.5.26",
+    "tsx": "^4.23.13",
     "typescript": "5.9.3"
   },
   "engines": {