npm - @carbon/ibm-products - Versions diffs - 2.79.0 → 2.80.0-rc.0 - Mend

@carbon/ibm-products 2.79.0 → 2.80.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/css/index-full-carbon.css CHANGED Viewed

@@ -3928,16 +3928,19 @@ p.c4p--about-modal__copyright-text:first-child {
  */
 .c4p--tearsheet__next .c4p--tearsheet__next__container {
   align-self: flex-end;
+  border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   block-size: 100%;
   inset-block-start: auto;
-  max-block-size: calc(100% - 3rem);
-  transform: translate3d(0, min(95vh, 500px), 0);
+  max-block-size: calc(100% - var(--tearsheet-vertical-gap, 3rem));
 }
 @media (max-width: 41.98rem) {
-  .c4p--tearsheet__next .c4p--tearsheet__next__container {
+  .c4p--tearsheet__next:not(.c4p--tearsheet__next--stack-activated.is-visible) .c4p--tearsheet__next__container {
     max-block-size: none;
   }
 }
+.c4p--tearsheet__next:not(.is-visible).c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container {
+  transform: translate3d(0, min(95vh, 500px), 0);
+}
 .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__container {
   border: 1px solid transparent;
   /* override carbon ai removing background gradient */
@@ -3945,8 +3948,13 @@ p.c4p--about-modal__copyright-text:first-child {
   border-block-end: 0;
   box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
 }
+.c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next--has-ai-label .c4p--tearsheet__next__main-content {
+  position: relative;
+  background: linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) border-box;
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
+}
 .c4p--tearsheet__next.c4p--tearsheet__next.c4p--tearsheet__next .c4p--tearsheet__next__container {
-  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
+  transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-block-size 240ms cubic-bezier(0, 0, 0.3, 1);
 }
 @media (min-width: 42rem) {
   .c4p--tearsheet__next.c4p--tearsheet__next--wide .c4p--tearsheet__next__container {
@@ -3984,7 +3992,7 @@ p.c4p--about-modal__copyright-text:first-child {
   display: grid;
   flex-basis: unset;
   gap: 1rem;
-  grid-template-columns: auto minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
+  grid-template-columns: minmax(auto, 40rem) minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
   inline-size: calc(100% - var(--tearsheet-header-action-offset));
 }
 @media (max-width: 41.98rem) {
@@ -4002,6 +4010,7 @@ p.c4p--about-modal__copyright-text:first-child {
   font-weight: var(--cds-label-01-font-weight, 400);
   line-height: var(--cds-label-01-line-height, 1.33333);
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  color: var(--cds-text-secondary, #525252);
   margin-block-end: 0.25rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-title {
@@ -4026,17 +4035,10 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__header-title svg {
   flex-shrink: 0;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon {
-  flex-direction: row;
-}
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__leading-icon svg {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-start {
   margin-inline-end: 1rem;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-.c4p--tearsheet__next .c4p--tearsheet__next__header-title.c4p--tearsheet__next__trailing-icon svg {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-title .c4p--tearsheet__next__title-end {
   margin-inline-start: 1rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-description {
@@ -4048,9 +4050,6 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__header--no-close-icon {
   display: none;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header-content {
-  max-inline-size: 40rem;
-}
 .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar {
   position: relative;
   display: flex;
@@ -4062,8 +4061,8 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
   position: absolute;
-  inset-inline-end: -2rem;
-  margin-inline-end: 1px;
+  inset-block-end: 0.125rem;
+  inset-inline-end: calc(-2rem + 0.125rem);
 }
 @media (max-width: 41.98rem) {
   .c4p--tearsheet__next .c4p--tearsheet__next__navigation-bar .c4p--tearsheet__next__scroller-container {
@@ -4090,8 +4089,14 @@ p.c4p--about-modal__copyright-text:first-child {
   inline-size: 100%;
   margin-block-start: -14px;
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *:not([hidden]) + *:not([hidden]) {
-  padding-inline-start: 0.5rem;
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *.c4p--tearsheet__next__header-action-item:not([data-hidden=true]) {
+  margin-inline-end: 0.5rem; /* space between visible items */
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions {
+  /* Remove margin on the last visible item */
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > *.c4p--tearsheet__next__header-action-item:not([data-hidden=true]):nth-last-child(2) {
+  margin-inline-end: 0;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__content__header-actions > * {
   flex-shrink: 0;
@@ -4102,43 +4107,121 @@ p.c4p--about-modal__copyright-text:first-child {
     margin-inline-end: 0;
   }
 }
-.c4p--tearsheet__next .c4p--tearsheet__next__header {
-  opacity: 1;
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
+  padding-inline: 1rem;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header.c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions {
+  display: none;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions {
+  justify-content: flex-start;
+  margin-inline-end: 0;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body {
+  grid-template-columns: 1fr 0;
+}
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
+  padding-inline: 1rem;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
-.cds--modal-close-button),
-.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) {
+.cds--modal-close-button,
+.excludeFromCollapse) {
   overflow: hidden;
   max-block-size: 50vh;
   opacity: 1;
-  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+  transition: max-block-size 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1), margin 240ms cubic-bezier(0, 0, 0.3, 1), padding 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-actions,
+.c4p--tearsheet__next .c4p--tearsheet__next__header .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content *:not(.c4p--tearsheet__next__content__title-wrapper,
+.c4p--tearsheet__next__header-label) {
+  opacity: 1;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed {
+  padding-block-start: 0.75rem;
+  transition: padding 240ms cubic-bezier(0, 0, 0.3, 1);
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
 .excludeFromCollapse),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions > *:not(.c4p--tearsheet__next__content__header-actions),
-.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper),
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed > *:not(.c4p--tearsheet__next__navigation-bar,
 .c4p--tearsheet__next__header-content-wrapper,
 .cds--modal-close-button,
-.excludeFromCollapse) * {
+.excludeFromCollapse) *,
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper .c4p--tearsheet__next__header-content > *:not(.c4p--tearsheet__next__content__title-wrapper) * {
   overflow: hidden;
   padding: 0;
   margin: 0;
   max-block-size: 0;
-  min-block-size: 0;
   opacity: 0;
-  transition: all 240ms ease;
-  visibility: hidden;
+  pointer-events: none;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
+  font-size: var(--cds-label-02-font-size, 0.875rem);
+  font-weight: var(--cds-label-02-font-weight, 400);
+  line-height: var(--cds-label-02-line-height, 1.28572);
+  letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
+  align-items: center;
+  margin-block-start: 0.25rem;
+  transition: all 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title > span {
+  display: flex;
+  align-items: center;
+  block-size: 1.5rem;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content {
+  align-self: center;
+  margin-block-end: 0;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__header-actions {
+  margin-block-start: -0.125rem;
+}
+@media (max-width: 41.98rem) {
+  .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions {
+    display: none;
+  }
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper,
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content,
 .c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__content__title-wrapper,
-.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions .c4p--tearsheet__next__header-title {
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-actions,
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-title {
   margin-block: 0;
-  transition: all 240ms ease;
+  transition: margin-block 240ms ease;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__header-content-wrapper {
+  min-block-size: 2.5rem;
+  padding-block-end: 0.75rem;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__header-collapsed .c4p--tearsheet__next__navigation-bar::before {
+  position: absolute;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.12);
+  block-size: 1px;
+  content: "";
+  inline-size: 100vw;
+  inset-block-start: -0.25rem;
+  inset-inline-start: 50%;
+  pointer-events: none;
+  transform: translateX(-50%);
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__body-layout {
   display: grid;
@@ -4157,6 +4240,7 @@ p.c4p--about-modal__copyright-text:first-child {
   /* Assign components to their named grid areas */
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__influencer {
+  border-inline-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   grid-area: influencer;
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__body {
@@ -4182,19 +4266,21 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
 .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
   overflow: auto;
+}
+.c4p--tearsheet__next .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+.c4p--tearsheet__next .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
   padding-inline: 2rem;
 }
 @media (max-width: 41.98rem) {
-  .c4p--tearsheet__next .c4p--tearsheet__next__influencer,
-  .c4p--tearsheet__next .c4p--tearsheet__next__main-content,
-  .c4p--tearsheet__next .c4p--tearsheet__next__summary-content {
+  .c4p--tearsheet__next .c4p--tearsheet__next__influencer:not(.c4p--tearsheet__next__flush),
+  .c4p--tearsheet__next .c4p--tearsheet__next__main-content:not(.c4p--tearsheet__next__flush),
+  .c4p--tearsheet__next .c4p--tearsheet__next__summary-content:not(.c4p--tearsheet__next__flush) {
     padding-inline: 1rem;
   }
 }
 .c4p--tearsheet__next .c4p--tearsheet__next__main-content {
   position: relative;
-  background: linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-background, var(--cds-ai-popover-background, #ffffff))) border-box;
-  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
 }
 .c4p--tearsheet__next .c4p--side-panel {
   position: absolute;
@@ -4207,31 +4293,29 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet__next .c4p--side-panel .c4p--side-panel__header {
   min-block-size: 0;
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header {
-  padding-inline: 1rem;
-}
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-content-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__header-title {
-  font-size: var(--cds-heading-03-font-size, 1.25rem);
-  font-weight: var(--cds-heading-03-font-weight, 400);
-  line-height: var(--cds-heading-03-line-height, 1.4);
-  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible {
+  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-alpha: 0.5;
+  z-index: calc(9000 - var(--stack-depth, 0));
+  background-color: initial;
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__content__header-actions {
-  justify-content: flex-start;
-  margin-inline-end: 0;
+.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible::before {
+  position: absolute;
+  display: block;
+  background: var(--overlay-color);
+  content: "";
+  inset: 0;
+  opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);
+  transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__body {
-  grid-template-columns: 1fr 0;
+@media (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible::before {
+    transition: none;
+  }
 }
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__influencer,
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__main-content,
-.c4p--tearsheet__next--narrow .c4p--tearsheet__next__summary-content {
-  padding-inline: 1rem;
+.c4p--tearsheet__next.c4p--tearsheet__next--stack-activated.is-visible.is-visible .c4p--tearsheet__next__container {
+  max-block-size: calc(100% - var(--tearsheet-vertical-gap, 3rem) + var(--block-size-change));
+  transform: scaleX(var(--scale-factor));
 }
 .c4p--tearsheet.c4p--tearsheet {
@@ -4252,6 +4336,9 @@ p.c4p--about-modal__copyright-text:first-child {
     transition: none;
   }
 }
+.c4p--tearsheet.c4p--tearsheet:not(.is-visible).c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
+  transform: translate3d(0, min(95vh, 500px), 0);
+}
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
   /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
   background: initial;
@@ -4293,7 +4380,6 @@ p.c4p--about-modal__copyright-text:first-child {
   block-size: 100%;
   inset-block-start: auto;
   max-block-size: calc(100% - 3rem);
-  transform: translate3d(0, min(95vh, 500px), 0);
 }
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-ai-label .c4p--tearsheet__container {
   border: 1px solid transparent;
@@ -21582,7 +21668,7 @@ li.cds--accordion__item--disabled:last-of-type {
   filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
 }
-.cds--popover--border .cds--popover > .cds--popover-content {
+.cds--popover--border > .cds--popover > .cds--popover-content {
   outline: 1px solid var(--cds-popover-border-color, var(--cds-border-subtle));
   outline-offset: -1px;
 }
@@ -21646,7 +21732,7 @@ li.cds--accordion__item--disabled:last-of-type {
   display: block;
 }
-.cds--popover--background-token__background .cds--popover-content {
+.cds--popover--background-token__background > .cds--popover > .cds--popover-content {
   background-color: var(--cds-background, #ffffff);
 }
@@ -21682,7 +21768,7 @@ li.cds--accordion__item--disabled:last-of-type {
   content: "";
 }
-.cds--popover--background-token__background .cds--popover-caret::after {
+.cds--popover--background-token__background > .cds--popover > .cds--popover-caret::after {
   background-color: var(--cds-background, #ffffff);
 }
@@ -23143,7 +23229,6 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--ai-label__text,
 .cds--slug__text {
   position: relative;
-  z-index: 1;
 }
 .cds--ai-label .cds--ai-label__button--inline,
@@ -27783,7 +27868,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 .cds--list-box__field .cds--text-input {
-  padding-inline-end: 5rem;
+  padding-inline-end: 4.375rem;
 }
 .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input,
@@ -28337,12 +28422,12 @@ fieldset[disabled] .cds--form__helper-text {
   transform: translateY(-50%);
 }
+.cds--list-box__wrapper--decorator:has(.cds--list-box__invalid-icon) .cds--list-box__inner-wrapper--decorator > *::before,
+.cds--list-box__wrapper--slug:has(.cds--list-box__invalid-icon) .cds--ai-label::before,
+.cds--list-box__wrapper--slug:has(.cds--list-box__invalid-icon) .cds--slug::before,
 .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::after,
-.cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::before,
 .cds--list-box__wrapper--slug .cds--ai-label::after,
-.cds--list-box__wrapper--slug .cds--ai-label::before,
-.cds--list-box__wrapper--slug .cds--slug::after,
-.cds--list-box__wrapper--slug .cds--slug::before {
+.cds--list-box__wrapper--slug .cds--slug::after {
   position: absolute;
   background-color: var(--cds-border-subtle-01, #c6c6c6);
   block-size: 1rem;
@@ -28357,14 +28442,23 @@ fieldset[disabled] .cds--form__helper-text {
   inset-inline-start: -0.5625rem;
 }
+.cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::before,
+.cds--list-box__wrapper--slug .cds--ai-label::before,
+.cds--list-box__wrapper--slug .cds--slug::before,
+.cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::before,
+.cds--list-box__wrapper--slug .cds--ai-label--revert::before,
+.cds--list-box__wrapper--slug .cds--slug--revert::before,
 .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator > *::after,
 .cds--list-box__wrapper--slug .cds--ai-label::after,
 .cds--list-box__wrapper--slug .cds--slug::after {
   display: block;
-  inset-block-start: 0;
+  inset-block-start: 0.0625rem;
   inset-inline-end: -0.5625rem;
 }
+.cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::before,
+.cds--list-box__wrapper--slug .cds--ai-label--revert::before,
+.cds--list-box__wrapper--slug .cds--slug--revert::before,
 .cds--list-box__wrapper--decorator .cds--list-box__inner-wrapper--decorator .cds--ai-label--revert::after,
 .cds--list-box__wrapper--slug .cds--ai-label--revert::after,
 .cds--list-box__wrapper--slug .cds--slug--revert::after {
@@ -28393,7 +28487,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box__wrapper--decorator .cds--text-input:not(.cds--text-input--empty),
 .cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
-  padding-inline-end: 6rem;
+  padding-inline-end: 6.5625rem;
 }
 .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
@@ -28411,7 +28505,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box__wrapper--decorator .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
 .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input:not(.cds--text-input--empty),
 .cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
-  padding-inline-end: 8.8125rem;
+  padding-inline-end: 8.5625rem;
 }
 .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -28420,7 +28514,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty + .cds--list-box__invalid-icon,
 .cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__invalid-icon,
 .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__invalid-icon.cds--list-box__invalid-icon--warning {
-  inset-inline-end: 5.1875rem;
+  inset-inline-end: 5.0625rem;
 }
 .cds--list-box__wrapper--decorator .cds--list-box--invalid[data-invalid] > *::before,
@@ -28443,10 +28537,19 @@ fieldset[disabled] .cds--form__helper-text {
   inset-inline-end: calc(4rem + 18px);
 }
+.cds--list-box__wrapper--decorator .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > * {
+  inset-inline-end: calc(4rem + 18px);
+}
 .cds--list-box__wrapper--decorator .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
 .cds--list-box__wrapper--decorator .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
 .cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon,
 .cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) .cds--list-box__invalid-icon {
+  inset-inline-end: 7.125rem;
+}
+.cds--list-box__wrapper--decorator .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > *,
+.cds--list-box__wrapper--decorator .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--list-box__inner-wrapper--decorator > * {
   inset-inline-end: 7.25rem;
 }
@@ -28595,6 +28698,14 @@ fieldset[disabled] .cds--form__helper-text {
   visibility: hidden;
 }
+.cds--menu--border {
+  outline: 1px solid var(--cds-border-subtle);
+}
+.cds--menu--background-token__background {
+  background-color: var(--cds-background, #ffffff);
+}
 .cds--menu--with-icons {
   min-inline-size: 12rem;
 }
@@ -38374,7 +38485,6 @@ optgroup.cds--select-optgroup:disabled,
   position: fixed;
   display: grid;
   background-color: var(--cds-layer);
-  block-size: 100%;
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr auto;
   inline-size: 100%;
@@ -38387,7 +38497,6 @@ optgroup.cds--select-optgroup:disabled,
 @media (min-width: 42rem) {
   .cds--modal-container {
     position: relative;
-    block-size: auto;
     inline-size: 84%;
     max-block-size: 90%;
   }
@@ -40006,6 +40115,7 @@ optgroup.cds--select-optgroup:disabled,
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   display: flex;
+  overflow: initial;
   align-items: center;
   justify-content: space-between;
   background-color: var(--cds-layer);
@@ -40014,12 +40124,8 @@ optgroup.cds--select-optgroup:disabled,
   container-type: inline-size;
   inline-size: calc(100% - 1px);
   min-block-size: 2.5rem;
-  overflow-x: auto;
 }
 @container pagination (min-width: 42rem) {
-  .cds--pagination {
-    overflow: initial;
-  }
   .cds--pagination .cds--pagination__control-buttons {
     display: flex;
   }