@primer/brand-css 0.77.1-rc.bd5b9efe → 0.78.0-rc.85e39cb4

package/components/ActionMenu/ActionMenu.css

@@ -37,36 +37,40 @@
   background-color: var(--brand-color-canvas-default);
 }
 
-.ActionMenu__innerButton--split-button:first-child,
-.ActionMenu__innerButton--split-button:first-child:hover {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary,
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover {
   position: relative;
   z-index: 1;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.ActionMenu__innerButton--split-button:first-child::before,
-.ActionMenu__innerButton--split-button:hover:first-child::before {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before,
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover::before {
   content: '';
   position: absolute;
   top: calc(var(--base-size-2) / -2);
   right: calc(var(--base-size-2) * -1);
   width: var(--brand-borderWidth-thin);
   height: calc(100% + var(--base-size-2));
-  background-color: var(--brand-color-border-muted);
+  background-color: var(--brand-ActionMenu-color-splitButton-divider-default);
 }
 
-.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button::before {
+.ActionMenu__innerButton--primary.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {
+  background-color: var(--brand-ActionMenu-color-splitButton-divider-primary);
+}
+
+.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {
   top: calc(var(--base-size-2) * -1);
   height: calc(100% + var(--base-size-4));
 }
 
-.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button:active:first-child::before {
+.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:active::before {
   width: 0;
 }
 
 .ActionMenu__innerButton--medium.ActionMenu__innerButton--split-button,
-.ActionMenu__innerButton--split-button:last-child {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
 }
 
@@ -74,7 +78,7 @@
   vertical-align: middle !important;
 }
 
-.ActionMenu__innerButton--split-button:last-child {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   position: relative;

package/components/Button/Button.css

@@ -57,7 +57,7 @@
 .Button__icon-visual {
   display: flex;
   align-self: center;
-  height: var(--base-size-16);
+  height: var(--brand-Button-icon-size-medium);
   width: auto;
   fill: currentcolor;
 }
@@ -85,11 +85,11 @@
   border-width: var(--brand-borderWidth-thin);
 }
 
-.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: var(--brand-button-primary-bgColor-hover);
 }
 
-.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--primary[aria-expanded='true'] {
   background: var(--brand-button-primary-bgColor-active);
   border-color: var(--brand-button-primary-borderColor-active);
@@ -105,12 +105,8 @@
   background-color: var(--brand-button-primary-bgColor-disabled);
 }
 
-.Button--primary:disabled .Button-arrow--disabled,
-.Button--primary[aria-disabled='true'] .Button-arrow--disabled,
-.Button--primary.Button--disabled .Button-arrow--disabled,
-.Button--primary:disabled .Button__icon-visual--disabled,
-.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--primary.Button--disabled .Button__icon-visual--disabled,
+.Button--primary:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-primary.Button-label--disabled {
   color: var(--brand-button-primary-fgColor-disabled);
 }
@@ -124,12 +120,12 @@
   backdrop-filter: blur(var(--base-size-20));
 }
 
-.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--secondary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: var(--brand-button-secondary-bgColor-hover);
   border-color: var(--brand-button-secondary-borderColor-hover);
 }
 
-.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--secondary:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--secondary[aria-expanded='true'] {
   background-color: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
@@ -139,12 +135,8 @@
   border-color: var(--brand-button-secondary-fgColor-disabled);
 }
 
-.Button--secondary:disabled .Button-arrow--disabled,
-.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,
-.Button--secondary.Button--disabled .Button-arrow--disabled,
-.Button--secondary:disabled .Button__icon-visual--disabled,
-.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--secondary.Button--disabled .Button__icon-visual--disabled,
+.Button--secondary:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-secondary.Button-label--disabled {
   color: var(--brand-button-secondary-fgColor-disabled);
 }
@@ -159,12 +151,12 @@
   backdrop-filter: blur(var(--base-size-20));
 }
 
-.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--subtle:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: var(--brand-button-subtle-bgColor-hover);
   border-color: var(--brand-button-subtle-borderColor-hover);
 }
 
-.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--subtle:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--subtle[aria-expanded='true'] {
   background-color: var(--brand-button-subtle-bgColor-active);
   border-color: var(--brand-button-subtle-borderColor-active);
@@ -174,12 +166,8 @@
   color: var(--brand-button-subtle-fgColor-rest);
 }
 
-.Button--subtle:disabled .Button-arrow--disabled,
-.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,
-.Button--subtle.Button--disabled .Button-arrow--disabled,
-.Button--subtle:disabled .Button__icon-visual--disabled,
-.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--subtle.Button--disabled .Button__icon-visual--disabled,
+.Button--subtle:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-subtle.Button-label--disabled {
   color: var(--brand-button-subtle-fgColor-disabled);
 }
@@ -187,24 +175,32 @@
 /* size */
 
 .Button--size-small {
-  min-height: var(--brand-control-small-size);
+  min-height: var(--brand-Button-control-size-small);
   padding-inline: var(--brand-control-small-paddingInline-normal);
 }
 
 .Button--size-medium {
-  min-height: var(--brand-control-medium-size);
+  min-height: var(--brand-Button-control-size-medium);
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);
 }
 
 .Button--size-large {
-  min-height: var(--brand-control-large-size);
+  min-height: var(--brand-Button-control-size-large);
   padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);
 }
 
-.Button--size-large .Button__icon-visual,
-.Button--size-large .Button-arrow {
-  height: var(--base-size-20);
-  width: var(--base-size-20);
+/* Keep visual sizing overridable by composed controls such as IconButton. */
+.Button--size-small :where(.Button__icon-visual) {
+  height: var(--brand-Button-icon-size-small);
+}
+
+.Button--size-medium :where(.Button__icon-visual) {
+  height: var(--brand-Button-icon-size-medium);
+}
+
+.Button--size-large :where(.Button__icon-visual, .Button-arrow) {
+  height: var(--brand-Button-icon-size-large);
+  width: var(--brand-Button-icon-size-large);
 }
 
 .Button--label-medium {

package/components/ButtonGroup/ButtonGroup.css

@@ -8,3 +8,36 @@
 .ButtonGroup > * {
   flex-grow: 1;
 }
+
+.ButtonGroup--variant-joined {
+  gap: 0;
+  flex-wrap: nowrap;
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item {
+  position: relative;
+  display: flex;
+  flex-grow: 0;
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item:not(:first-child) {
+  margin-inline-start: calc(var(--brand-borderWidth-thin) * -1);
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item:focus-within {
+  z-index: 1;
+}
+
+.ButtonGroup__joinedButton.ButtonGroup__joinedButton {
+  border-radius: 0;
+}
+
+.ButtonGroup__item:first-child .ButtonGroup__joinedButton {
+  border-start-start-radius: var(--brand-borderRadius-medium);
+  border-end-start-radius: var(--brand-borderRadius-medium);
+}
+
+.ButtonGroup__item:last-child .ButtonGroup__joinedButton {
+  border-start-end-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+}

package/components/IconButton/IconButton.css

@@ -0,0 +1,142 @@
+.IconButton {
+  flex: none;
+  gap: 0;
+  padding: 0;
+}
+
+.IconButton.IconButton {
+  min-width: var(--brand-IconButton-control-size-medium);
+  width: var(--brand-IconButton-control-size-medium);
+  height: var(--brand-IconButton-control-size-medium);
+}
+
+.IconButton--small.IconButton--small {
+  min-width: var(--brand-IconButton-control-size-small);
+  width: var(--brand-IconButton-control-size-small);
+  height: var(--brand-IconButton-control-size-small);
+}
+
+.IconButton--large.IconButton--large {
+  min-width: var(--brand-IconButton-control-size-large);
+  width: var(--brand-IconButton-control-size-large);
+  height: var(--brand-IconButton-control-size-large);
+}
+
+.IconButton--rounded.IconButton--rounded {
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']) {
+  color: var(--brand-IconButton-danger-fgColor-rest);
+  background-color: var(--brand-IconButton-danger-bgColor-rest);
+  border-color: var(--brand-IconButton-danger-borderColor-rest);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not(
+    [disabled],
+    [aria-disabled='true'],
+    [aria-expanded='true']
+  ):hover {
+  color: var(--brand-IconButton-danger-fgColor-hover);
+  background-color: var(--brand-IconButton-danger-bgColor-hover);
+  border-color: var(--brand-IconButton-danger-borderColor-hover);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']):active,
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true'])[aria-expanded='true'] {
+  color: var(--brand-IconButton-danger-fgColor-active);
+  background-color: var(--brand-IconButton-danger-bgColor-active);
+  border-color: var(--brand-IconButton-danger-borderColor-active);
+}
+
+.IconButton--variant-invisible.IconButton--variant-invisible:where(:not(:hover, :active, [aria-expanded='true'])) {
+  background-color: var(--brand-IconButton-invisible-bgColor-rest);
+  border-color: var(--brand-IconButton-invisible-borderColor-rest);
+  backdrop-filter: none;
+}
+
+.IconButton--inactive.IconButton--inactive,
+.IconButton--inactive.IconButton--inactive:hover,
+.IconButton--inactive.IconButton--inactive:active {
+  color: var(--brand-IconButton-inactive-fgColor);
+  cursor: auto;
+  background-color: var(--brand-IconButton-inactive-bgColor);
+  border-color: var(--brand-IconButton-inactive-borderColor);
+  backdrop-filter: none;
+}
+
+.IconButton--inactive .IconButton__icon {
+  color: inherit;
+}
+
+.IconButton--small .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-small);
+  height: var(--brand-IconButton-icon-size-small);
+}
+
+.IconButton--medium .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-medium);
+  height: var(--brand-IconButton-icon-size-medium);
+}
+
+.IconButton--large .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-large);
+  height: var(--brand-IconButton-icon-size-large);
+}
+
+.IconButton__loadingIndicator.IconButton__loadingIndicator {
+  display: block;
+  box-sizing: border-box;
+  width: var(--brand-IconButton-icon-size-medium);
+  height: var(--brand-IconButton-icon-size-medium);
+  border: var(--brand-borderWidth-thin) solid currentcolor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: IconButton-spin var(--brand-IconButton-loadingIndicator-animationDuration-default) linear infinite;
+}
+
+.IconButton--small .IconButton__loadingIndicator {
+  width: var(--brand-IconButton-icon-size-small);
+  height: var(--brand-IconButton-icon-size-small);
+}
+
+.IconButton--large .IconButton__loadingIndicator {
+  width: var(--brand-IconButton-icon-size-large);
+  height: var(--brand-IconButton-icon-size-large);
+}
+
+.IconButton__loadingAnnouncement {
+  position: absolute;
+  width: var(--base-size-1);
+  height: var(--base-size-1);
+  padding: 0;
+  margin: calc(var(--base-size-1) * -1);
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes IconButton-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (forced-colors: active) {
+  .IconButton--inactive {
+    color: GrayText;
+    border-color: GrayText;
+  }
+
+  .IconButton__loadingIndicator {
+    border-color: ButtonText;
+    border-inline-end-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IconButton__loadingIndicator {
+    animation-duration: var(--brand-IconButton-loadingIndicator-animationDuration-reducedMotion);
+  }
+}

package/components/SubNav/SubNav.css

@@ -97,9 +97,50 @@
   display: none;
 }
 
+.SubNav__overflow-container {
+  display: none;
+}
+
+.SubNav__overflow-menu {
+  position: absolute;
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  width: -moz-max-content;
+  width: max-content;
+  min-width: var(--brand-SubNav-width-overflowMenuMin);
+  max-width: calc(100vw - var(--brand-SubNav-width-overflowMenuInset));
+  max-height: calc(100dvh - var(--brand-SubNav-height-overflowMenuInset));
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+  box-shadow: none;
+  transform: translateY(calc(0px - var(--brand-SubNav-offset-overflowMenu)));
+  animation: fade-in var(--brand-animation-duration-faster) var(--brand-animation-easing-default);
+}
+
+.SubNav__overflow-menu::backdrop {
+  background-color: transparent;
+}
+
+.SubNav__overflow-menu-list {
+  display: grid;
+  gap: var(--brand-borderWidth-thin);
+  list-style: none;
+  margin: 0;
+  padding: var(--base-size-8);
+  width: 100%;
+}
+
 /*
-   * Anchor Nav Submenu
-   */
+ * Anchor Nav Submenu
+ */
 
 .SubNav__anchor-menu-outer-container {
   position: sticky;
@@ -588,6 +629,7 @@
   .SubNav__header-container {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
   }
 
   .SubNav__links-overlay {
@@ -595,10 +637,76 @@
     display: flex;
     gap: var(--base-size-2);
     z-index: 92;
-    flex-grow: 1;
+    flex: 1 1 0;
+    min-width: 0;
+    align-self: stretch;
     padding-inline-start: var(--base-size-24);
   }
 
+  .SubNav__links-overlay > li {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .SubNav__link--in-overlay {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .SubNav__link-item--overflowed {
+    position: absolute;
+    width: -moz-max-content;
+    width: max-content;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .SubNav__overflow-container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .SubNav__overflow-container--visible {
+    position: relative;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .SubNav__overflow-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--base-size-4);
+    padding: var(--base-size-4) var(--base-size-12);
+    color: var(--brand-SubNav-color-link-rest);
+    background: var(--brand-SubNav-overflowMenu-toggle-bgColor-rest);
+    border: 0;
+    border-radius: var(--brand-borderRadius-full);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .SubNav__overflow-toggle:hover {
+    background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-hover);
+  }
+
+  .SubNav__overflow-toggle[aria-expanded='true'],
+  .SubNav__overflow-toggle--active {
+    background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-active);
+  }
+
+  .SubNav__overflow-toggle .SubNav__link-label {
+    color: inherit;
+  }
+
+  .SubNav__overflow-toggle:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+    outline-offset: var(--base-size-2);
+  }
+
   .SubNav__link {
     text-decoration: none !important; /* dotcom override */
     transition: color 0.2s var(--brand-animation-easing-glide);
@@ -762,18 +870,63 @@
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-32);
   }
-}
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
+  .SubNav__overflow-menu .SubNav__link {
+    display: block;
+    width: 100%;
+    min-height: var(--brand-SubNav-height-overflowMenuItemMin);
+    padding: var(--base-size-8) var(--base-size-12);
+    color: var(--brand-SubNav-overflowMenu-fgColor-rest);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    border-radius: var(--brand-borderRadius-medium);
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
   }
-  100% {
+
+  .SubNav__overflow-menu .SubNav__link .SubNav__link-label {
+    color: inherit;
+    font-weight: var(--base-text-weight-normal);
+    line-height: var(--brand-text-lineHeight-200);
+  }
+
+  .SubNav__overflow-menu .SubNav__link:hover,
+  .SubNav__overflow-menu .SubNav__link:focus,
+  .SubNav__overflow-menu .SubNav__link:focus-visible,
+  .SubNav__overflow-menu .SubNav__link[aria-current]:not([aria-current='false']) {
+    color: var(--brand-SubNav-overflowMenu-fgColor-hover);
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-hover);
+  }
+
+  .SubNav__overflow-menu .SubNav__link:focus-visible {
+    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);
+    outline: none;
+  }
+
+  .SubNav__overflow-menu .SubNav__link--has-sub-menu {
+    display: block;
+    background: transparent;
+    padding: 0;
+  }
+
+  .SubNav__overflow-menu .SubNav__link--has-sub-menu::after {
+    content: none;
+  }
+
+  .SubNav__overflow-menu .SubNav__sub-menu--dropdown {
+    position: static;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--base-size-16);
+    border: 0;
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
+    visibility: visible;
     opacity: 1;
+    transform: none;
   }
 }
 
-@keyframes fade-in-down {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }

package/components/SubdomainNavBar/SubdomainNavBar.css

@@ -12,10 +12,11 @@
 .SubdomainNavBar::after {
   content: '';
   position: absolute;
+  z-index: 3;
   inset-inline: 0;
   inset-block-start: 100%;
   height: var(--brand-borderWidth-thin);
-  background-color: var(--brand-color-text-emphasized);
+  background-color: var(--brand-SubdomainNavBar-border-nav-default);
   pointer-events: none;
 }
 
@@ -124,7 +125,7 @@
 .SubdomainNavBar-title {
   line-height: var(--base-size-32);
   text-decoration: none;
-  padding-right: var(--base-size-16);
+  padding-inline-end: var(--base-size-16);
   white-space: nowrap;
 }
 
@@ -234,6 +235,7 @@
     background-color: var(--brand-color-canvas-default);
     width: 100%;
     max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));
+    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
     animation: fade-in-down 500ms;
     animation-timing-function: var(--brand-animation-easing-default);
   }
@@ -320,9 +322,6 @@
   color: var(--brand-color-text-default);
   font-family: var(--brand-heading-fontFamily);
   font-weight: var(--base-text-weight-normal);
-  font-size: var(--base-size-20);
-  line-height: var(--base-size-20);
-  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);
   text-decoration: none;
 }
 
@@ -341,85 +340,42 @@
 }
 
 @media screen and (max-width: 767px) {
-  .SubdomainNavBar-link:first-of-type {
-    padding-top: var(--base-size-24);
-  }
-
   .SubdomainNavBar-link--title {
     font-weight: var(--base-text-weight-medium);
   }
 }
 
 @media screen and (min-width: 48rem) {
-  .SubdomainNavBar-link {
-    font-family: var(--brand-heading-fontFamily);
-    font-weight: var(--base-text-weight-normal);
-    font-size: var(--base-size-16);
-    line-height: var(--base-size-16);
-    padding: var(--base-size-16) var(--base-size-16);
-  }
-
-  .SubdomainNavBar-link-text::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 0;
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
     width: 100%;
-    height: 2px;
-    background-color: var(--brand-SubdomainNavBar-border-nav-default);
-    opacity: 0;
-    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);
-    transform: scale(0);
-    transform-origin: center;
-  }
-
-  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,
-  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {
-    opacity: 1;
-    transform: scale(0.75);
-  }
-
-  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {
-    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);
-    transform: scale(0.75);
-  }
-
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
+    min-height: var(--base-size-40);
+    padding: var(--base-size-8) var(--base-size-12);
+    color: var(--brand-color-text-muted);
+    background-color: var(--brand-color-canvas-default);
+    border-radius: var(--brand-borderRadius-medium);
+    font-size: var(--brand-text-size-100);
+    line-height: var(--brand-text-lineHeight-200);
     transition: background-color var(--brand-animation-easing-default) 250ms;
-    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);
-    color: var(--brand-SubdomainNavBar-fg-overflow-default);
   }
 
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {
-    display: none;
-  }
-
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {
-    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
+    color: var(--brand-color-text-default);
+    background-color: var(--brand-color-canvas-subtle);
   }
 
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
-    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
+    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);
     outline: none;
   }
 }
 
-@media screen and (min-width: 63.25rem) {
-  .SubdomainNavBar-link {
-    padding: var(--base-size-16) var(--base-size-24);
-  }
-}
-
 .SubdomainNavBar-more-link {
   display: none;
 }
 
-.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,
-.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {
-  display: none;
-}
-
 @media screen and (min-width: 48rem) {
   .SubdomainNavBar-more-link {
     cursor: pointer;
@@ -434,25 +390,30 @@
   }
 }
 
-.SubdomainNavBar-overflow-menu {
+.SubdomainNavBar .SubdomainNavBar-overflow-menu {
   position: absolute;
   z-index: 100;
   right: auto;
   background-color: var(--brand-color-canvas-default);
-  border-radius: var(--brand-borderRadius-large);
-  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+  animation: fade-in-down-overflow var(--brand-animation-duration-faster);
   animation-timing-function: var(--brand-animation-easing-default);
-  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
+  min-width: calc(var(--base-size-128) + var(--base-size-32));
+  transform: translateY(calc(0px - var(--base-size-4)));
   overflow: hidden;
 }
 
-.SubdomainNavBar-overflow-menu-list {
+.SubdomainNavBar .SubdomainNavBar-overflow-menu-list {
   display: grid;
+  gap: var(--brand-borderWidth-thin);
   list-style-type: none;
-  padding: 0;
+  padding: var(--base-size-8);
   margin: 0;
-  width: -moz-max-content;
-  width: max-content;
+  width: 100%;
 }
 
 /*
@@ -810,7 +771,9 @@
 
   .SubdomainNavBar--variant-default .SubdomainNavBar-menu-wrapper {
     inset-inline-start: auto;
-    min-width: calc(var(--base-size-128) * 3);
+    inset-inline-end: 0;
+    width: max(100%, calc(var(--base-size-128) * 3));
+    min-width: 0;
   }
 
   .SubdomainNavBar-menu-wrapper--close {
@@ -1183,6 +1146,18 @@
     border-inline-end: 0;
   }
 
+  .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {
+    padding-inline-end: 0;
+  }
+
+  .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {
+    margin-inline-end: 0;
+  }
+
+  .SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-item {
+    padding-inline: var(--base-size-24);
+  }
+
   .SubdomainNavBar .SubdomainNavBar-logo-mark {
     justify-content: center;
   }
@@ -1300,47 +1275,6 @@
     outline-offset: var(--base-size-2);
   }
 
-  .SubdomainNavBar .SubdomainNavBar-link-text::after {
-    display: none;
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu {
-    animation: fade-in-down-overflow var(--brand-animation-duration-faster);
-    animation-timing-function: var(--brand-animation-easing-default);
-    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-start-radius: var(--brand-borderRadius-medium);
-    border-end-end-radius: var(--brand-borderRadius-medium);
-    box-shadow: none;
-    min-width: calc(var(--base-size-128) + var(--base-size-32));
-    transform: translateY(calc(0px - var(--base-size-4)));
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {
-    gap: var(--brand-borderWidth-thin);
-    padding: var(--base-size-8);
-    width: 100%;
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
-    width: 100%;
-    min-height: var(--base-size-40);
-    padding: var(--base-size-8) var(--base-size-12);
-    color: var(--brand-color-text-muted);
-    background-color: var(--brand-color-canvas-default);
-    border-radius: var(--brand-borderRadius-medium);
-    font-size: var(--brand-text-size-100);
-    line-height: var(--brand-text-lineHeight-200);
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
-    color: var(--brand-color-text-default);
-    background-color: var(--brand-color-canvas-subtle);
-  }
-
   @media (prefers-reduced-motion: no-preference) {
     .SubdomainNavBar
       .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)
@@ -1466,6 +1400,7 @@
     width: 100%;
     block-size: 100%;
     padding-inline: var(--base-size-16);
+    border-radius: 0;
   }
 }
 
@@ -1832,17 +1767,6 @@
   }
 }
 
-@keyframes enlarge-shadow {
-  0% {
-    scale: 0.98;
-    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);
-  }
-  100% {
-    scale: 1;
-    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
-  }
-}
-
 @keyframes fade-in-down-staggered {
   0% {
     opacity: 0;

package/components/Tooltip/Tooltip.css

@@ -65,7 +65,9 @@
 }
 
 /* Directional styles */
-.Tooltip[data-direction='n'] {
+.Tooltip[data-direction='n'],
+.Tooltip[data-direction='ne'],
+.Tooltip[data-direction='nw'] {
   -o-border-image: conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
     calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;
      border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
@@ -81,7 +83,9 @@
   );
 }
 
-.Tooltip[data-direction='s'] {
+.Tooltip[data-direction='s'],
+.Tooltip[data-direction='se'],
+.Tooltip[data-direction='sw'] {
   -o-border-image: conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(
       var(--p) - var(--b) / 2
     ) / var(--h) 0 0 0;
@@ -131,11 +135,25 @@
   );
 }
 
-.Tooltip[data-direction='n']::after {
+.Tooltip[data-direction='ne'],
+.Tooltip[data-direction='se'] {
+  --p: 25%;
+}
+
+.Tooltip[data-direction='nw'],
+.Tooltip[data-direction='sw'] {
+  --p: 75%;
+}
+
+.Tooltip[data-direction='n']::after,
+.Tooltip[data-direction='ne']::after,
+.Tooltip[data-direction='nw']::after {
   top: 100%;
 }
 
-.Tooltip[data-direction='s']::after {
+.Tooltip[data-direction='s']::after,
+.Tooltip[data-direction='se']::after,
+.Tooltip[data-direction='sw']::after {
   bottom: 100%;
 }
 

package/components/forms/TextInput/TextInput.css

@@ -38,6 +38,16 @@
  * Sizes
  */
 
+.TextInput-wrapper--small {
+  height: var(--brand-control-small-size);
+}
+
+.TextInput--small {
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  padding: var(--brand-control-small-paddingBlock) var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-wrapper--medium {
   height: var(--brand-control-medium-size);
 }
@@ -131,6 +141,12 @@
 /*
  * TextInput visuals
  */
+.TextInput--has-leading-visual--small {
+  padding-inline-start: calc(
+    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)
+  );
+}
+
 .TextInput--has-leading-visual--medium {
   padding-inline-start: calc(
     var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
@@ -143,6 +159,12 @@
   );
 }
 
+.TextInput--has-trailing-visual--small {
+  padding-inline-end: calc(
+    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)
+  );
+}
+
 .TextInput--has-trailing-visual--medium {
   padding-inline-end: calc(
     var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
@@ -177,6 +199,14 @@
   right: var(--brand-control-medium-paddingInline-condensed);
 }
 
+.TextInput-leading-visual--small {
+  left: var(--brand-control-small-paddingInline-condensed);
+}
+
+.TextInput-trailing-visual--small {
+  right: var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-leading-visual--large {
   left: var(--brand-control-large-paddingInline-condensed);
 }
@@ -190,6 +220,11 @@
   height: var(--base-size-16);
 }
 
+.TextInput-leading-visual-icon--small {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
 .TextInput-leading-visual-icon--large {
   width: var(--base-size-20);
   height: var(--base-size-20);
@@ -237,6 +272,11 @@
   padding-inline: var(--brand-control-medium-paddingInline-condensed);
 }
 
+.TextInput-leading-text-inner--small,
+.TextInput-trailing-text-inner--small {
+  padding-inline: var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-leading-text-inner--large,
 .TextInput-trailing-text-inner--large {
   padding-inline: var(--brand-control-large-paddingInline-condensed);

package/components/river/RiverBreakoutTabs/RiverBreakoutTabs.css

@@ -80,6 +80,21 @@
   padding-block-end: 0;
 }
 
+.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisual:has(> [data-video-player-container]) {
+  border-radius: 0;
+}
+
+.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__visual--rounded > [data-video-player-container] {
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.RiverBreakoutTabs--has-background-visual.RiverBreakoutTabs--image-position-block-end
+  .RiverBreakoutTabs__visual--rounded
+  > [data-video-player-container] {
+  border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;
+}
+
 /* for backgroundVisualFullBleed — extend the backdrop to the gridline edges */
 .RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {
   overflow: visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.77.1-rc.bd5b9efe",
+  "version": "0.78.0-rc.85e39cb4",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",