@carbon/ibm-products 2.21.0 → 2.22.0

package/css/index-full-carbon.css

@@ -2153,6 +2153,10 @@ p.c4p--about-modal__copyright-text:first-child {
   margin-bottom: 0;
 }
 
+/* One or two values
+  * - width (first value)
+  * - min-width (optional second value)
+*/
 @keyframes hide-feedback {
   0% {
     opacity: 1;
@@ -2379,76 +2383,90 @@ p.c4p--about-modal__copyright-text:first-child {
   white-space: nowrap;
 }
 
+.c4p--side-panel--scrolls {
+  overflow: auto;
+  overflow-x: hidden;
+}
+
 .c4p--side-panel__container {
-  --c4p--side-panel--subtitle-opacity: 1;
-  --c4p--side-panel--title-container-height: 0;
-  --c4p--side-panel--title-text-height: 0;
-  --c4p--side-panel--subtitle-container-height: 0;
-  --c4p--side-panel--action-bar-container-height: 0;
-  --c4p--side-panel--divider-opacity: 0;
-  --c4p--side-panel--title-y-position: 0;
-  --c4p--side-panel--content-bottom-padding: 4rem;
-  --c4p--side-panel--collapsed-title-y-position: 1rem;
-  --c4p--side-panel--label-text-height: 0;
-  --c4p--side-panel--title-padding-right: 3rem;
+  --c4p--side-panel--title-stop: 1rem;
+  --c4p--side-panel--scroll-animation-progress: 0;
+  --c4p--side-panel--title-padding-right: 2rem;
+  --c4p--side-panel--actions-height: 4rem;
   position: fixed;
   z-index: 9000;
   top: 3rem;
+  display: grid;
   height: calc(100% - 3rem);
   box-sizing: border-box;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-primary, #161616);
+  grid-template-rows: 1fr auto; /* titles and content */
 }
 .c4p--side-panel__container.c4p--side-panel__container--xs {
+  /* any value is single value list */
   width: 16rem;
   max-width: 100%;
 }
-.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
-.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
+.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
+.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
+  /* any value is single value list */
   width: 16rem;
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container--sm {
+  /* any value is single value list */
   width: 20rem;
   max-width: 100%;
 }
-.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
-.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
+.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
+.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
+  /* any value is single value list */
   width: 20rem;
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container--md {
+  /* any value is single value list */
   width: 30rem;
   max-width: 100%;
 }
-.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
-.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
+.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
+.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
+  /* any value is single value list */
   width: 30rem;
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container--lg {
+  /* any value is single value list */
   width: 40rem;
   max-width: 100%;
 }
-.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
-.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
+.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
+.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
+  /* any value is single value list */
   width: 40rem;
   max-width: 100%;
 }
 .c4p--side-panel__container.c4p--side-panel__container--2xl {
-  width: 75%;
+  /* any value is single value list */
+  width: 40rem;
+  min-width: 75%;
   max-width: 100%;
 }
-.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
-.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
-.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
-  width: 75%;
+.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header.c4p--side-panel__header--no-title-animation,
+.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
+  /* any value is single value list */
+  width: 40rem;
+  min-width: 75%;
   max-width: 100%;
 }
+.c4p--side-panel__container:not(:has(.c4p--side-panel__animated-scroll-wrapper)), .c4p--side-panel__container.c4p--side-panel__container--has-no-animated-scroll-wrapper {
+  /* if the title does not scroll then we have a child scrolling section. */
+  grid-template-rows: auto 1fr auto; /* titles content actions */
+}
+.c4p--side-panel__container.c4p--side-panel__container--condensed-actions {
+  --c4p--side-panel--actions-height: 3rem;
+}
 .c4p--side-panel__container .c4p--side-panel__actions-container {
   width: 100%;
 }
@@ -2460,46 +2478,30 @@ p.c4p--about-modal__copyright-text:first-child {
   left: 0;
   border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0);
 }
-.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container {
-  /* stylelint-disable-next-line max-nesting-depth */
-}
-.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
-  content: none;
-}
-.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar {
-  /* stylelint-disable-next-line max-nesting-depth */
-}
-.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__action-toolbar::before {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: var(--cds-border-subtle-02, #e0e0e0);
-  content: "";
-  opacity: var(--c4p--side-panel--divider-opacity);
-}
-.c4p--side-panel__container.c4p--side-panel__container-without-overlay {
+.c4p--side-panel__container.c4p--side-panel__container--slide-in, .c4p--side-panel__container.c4p--side-panel__container:not(:has(+ .c4p--side-panel__overlay)), .c4p--side-panel__container.c4p--side-panel__container--has-no-overlay {
   box-shadow: 0 0.125rem 0.25rem var(--cds-overlay, rgba(22, 22, 22, 0.5));
 }
-.c4p--side-panel__container .c4p--side-panel__title-container {
+.c4p--side-panel__container .c4p--side-panel__header {
+  --c4p--side-panel--title-padding-bottom: 1rem;
   position: sticky;
   z-index: 4;
-  top: 0;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: calc(-1px * var(--c4p--side-panel--scroll-animation-distance));
   padding: 1rem;
+  padding-bottom: 0;
   background-color: var(--cds-layer-01, #f4f4f4);
   /* stylelint-disable-next-line max-nesting-depth */
 }
-.c4p--side-panel__container .c4p--side-panel__title-container:has(~ .c4p--side-panel__subtitle-text) {
-  padding-bottom: 0.5rem;
+.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__subtitle-text), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-subtitle {
+  --c4p--side-panel--title-padding-bottom: 0.5rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button) {
+.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back {
   padding-top: 2rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container:has(.c4p--side-panel__navigation-back-button.cds--btn--md) {
+.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__navigation-back-button.cds--btn--md), .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-navigation-back.cds--btn--md {
   padding-top: 2.5rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container::before {
+.c4p--side-panel__container .c4p--side-panel__header::before {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -2507,47 +2509,56 @@ p.c4p--about-modal__copyright-text:first-child {
   height: 1px;
   background-color: var(--cds-border-subtle-02, #e0e0e0);
   content: "";
-  opacity: var(--c4p--side-panel--divider-opacity);
+  opacity: var(--c4p--side-panel--scroll-animation-progress);
+  z-index: 9;
+}
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation {
+  position: relative;
+  top: 0;
+}
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--no-title-animation::before {
+  opacity: 1;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion {
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion {
   z-index: 5;
   border-bottom: 1px solid var(--cds-border-subtle-02, #e0e0e0);
   margin-bottom: 1rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion.c4p--side-panel__title-container--no-title-animation {
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--reduced-motion.c4p--side-panel__header--no-title-animation {
   border-bottom: 0;
   margin-bottom: 0;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
-  top: 2rem;
-}
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
-  top: 2.5rem;
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__collapsed-title-text {
+  top: 1rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title {
-  padding: 0;
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step .c4p--side-panel__navigation-back-button.cds--btn--md ~ .c4p--side-panel__collapsed-title-text {
+  top: 1.5rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title.c4p--side-panel__on-detail-step-without-title {
+.c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel--on-detail-step:not(:has(.c4p--side-panel__title-text)) {
   height: calc(2.5rem + 0.25rem);
   padding: 1rem 1rem 0.5rem 1rem;
 }
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-title::before {
+.c4p--side-panel__container .c4p--side-panel__header:not(:has(.c4p--side-panel__title-text))::before, .c4p--side-panel__container .c4p--side-panel__header.c4p--side-panel__header--has-no-title::before {
   background-color: transparent;
 }
-.c4p--side-panel__container.c4p--side-panel__container--has-slug {
-  --c4p--side-panel--title-padding-right: 6rem;
+.c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar), .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar, .c4p--side-panel__container.c4p--side-panel__container--has-slug {
+  --c4p--side-panel--title-padding-right: 4rem;
 }
-.c4p--side-panel__container.c4p--side-panel__container-is-animating {
-  pointer-events: none;
-}
-.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
-  top: 0;
+.c4p--side-panel__container.c4p--side-panel__container:has(.c4p--side-panel__action-toolbar).c4p--side-panel__container--has-slug, .c4p--side-panel__container.c4p--side-panel__container--has-action-toolbar.c4p--side-panel__container--has-slug {
+  --c4p--side-panel--title-padding-right: 5rem;
 }
-.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
-  top: var(--c4p--side-panel--title-text-height);
+.c4p--side-panel__container .c4p--side-panel__animated-scroll-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
-.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
-  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
+.c4p--side-panel__container .c4p--side-panel__title {
+  position: sticky;
+  z-index: 4;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: var(--c4p--side-panel--title-stop);
+  /* border-bottom used instead of padding which wrapped text shows through */
+  border-bottom: var(--c4p--side-panel--title-padding-bottom) solid transparent;
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
 .c4p--side-panel__container .c4p--side-panel__title-text {
   font-size: var(--cds-heading-03-font-size, 1.25rem);
@@ -2560,12 +2571,14 @@ p.c4p--about-modal__copyright-text:first-child {
   padding-right: var(--c4p--side-panel--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  position: inherit;
-  z-index: 4;
-  margin-bottom: calc(-1 * var(--c4p--side-panel--label-text-height));
-  background-color: var(--cds-layer-01, #f4f4f4);
-  opacity: var(--c4p--side-panel--subtitle-opacity);
-  transform: translateY(var(--c4p--side-panel--title-y-position));
+  opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
+}
+.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__title-text {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  transform: translateY(calc(-1 * 1rem * var(--c4p--side-panel--scroll-animation-progress)));
+}
+.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__title-text {
+  position: static;
 }
 .c4p--side-panel__container .c4p--side-panel__label-text {
   font-size: var(--cds-label-01-font-size, 0.75rem);
@@ -2574,9 +2587,8 @@ p.c4p--about-modal__copyright-text:first-child {
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   overflow: hidden;
   padding-right: var(--c4p--side-panel--title-padding-right);
-  opacity: var(--c4p--side-panel--subtitle-opacity);
+  opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
   text-overflow: ellipsis;
-  transform: translateY(var(--c4p--side-panel--title-y-position));
   white-space: nowrap;
 }
 .c4p--side-panel__container .c4p--side-panel__collapsed-title-text {
@@ -2591,9 +2603,13 @@ p.c4p--about-modal__copyright-text:first-child {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   position: absolute;
-  top: 1rem;
-  opacity: var(--c4p--side-panel--divider-opacity);
-  transform: translateY(var(--c4p--side-panel--collapsed-title-y-position));
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: 0;
+  opacity: var(--c4p--side-panel--scroll-animation-progress);
+}
+.c4p--side-panel__container .c4p--side-panel__title--no-label .c4p--side-panel__collapsed-title-text {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  transform: translateY(calc(1rem * (1 - var(--c4p--side-panel--scroll-animation-progress))));
 }
 .c4p--side-panel__container .c4p--side-panel__subtitle-text {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -2601,75 +2617,41 @@ p.c4p--about-modal__copyright-text:first-child {
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   overflow: hidden;
-  padding: 0 3rem 1rem 1rem;
+  padding-right: var(--c4p--side-panel--title-padding-right);
+  padding-bottom: 1rem;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
-  opacity: var(--c4p--side-panel--subtitle-opacity);
+  opacity: calc(1 - var(--c4p--side-panel--scroll-animation-progress));
 }
-.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation {
-  position: fixed;
+.c4p--side-panel__container .c4p--side-panel__header--no-title-animation .c4p--side-panel__subtitle-text {
   z-index: 2;
-  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
   background-color: var(--cds-layer-01, #f4f4f4);
 }
-.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-is-animating {
-  top: var(--c4p--side-panel--title-text-height);
-}
-.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-without-title {
+.c4p--side-panel__container .c4p--side-panel__title-text + .c4p--side-panel__subtitle-text {
   padding-top: 1rem;
-  padding-right: 3rem;
-}
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation.c4p--side-panel__title-container-is-animating {
-  top: 0;
-}
-.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation {
-  position: fixed;
-  height: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--label-text-height));
 }
 .c4p--side-panel__container .c4p--side-panel__inner-content {
-  overflow: auto;
-  height: calc(100vh - 3rem);
-  margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height));
-  overflow-x: hidden;
+  padding: 1rem;
+  padding-top: 0;
 }
-.c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
-  background-image: linear-gradient(0deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(0deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.c4p--side-panel__container .c4p--side-panel__header:has(.c4p--side-panel__action-toolbar) + .c4p--side-panel__inner-content,
+.c4p--side-panel__container .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content {
+  padding-top: 0.5rem;
 }
-.c4p--side-panel__container .c4p--side-panel__inner-content-with-actions {
-  height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
+.c4p--side-panel__container.c4p--side-panel__container--has-slug .c4p--side-panel__inner-content {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
 }
-.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content {
-  height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height)) + -1 * (3rem + 4rem));
+.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__inner-content--static {
   padding-top: 1rem;
 }
-.c4p--side-panel__container .c4p--side-panel__inner-content.c4p--side-panel__static-inner-content-no-actions {
-  height: calc(100vh - (var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + var(--c4p--side-panel--action-bar-container-height) + var(--c4p--side-panel--label-text-height)));
-}
-.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
-  position: fixed;
-  top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height));
-  width: 100%;
-  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
-}
-.c4p--side-panel__container .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation + .c4p--side-panel__body-content {
-  margin-top: calc(var(--c4p--side-panel--title-text-height) + var(--c4p--side-panel--subtitle-container-height) + 3rem);
-}
-.c4p--side-panel__container .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation.c4p--side-panel__subtitle-text-no-animation-no-action-toolbar {
-  border-bottom: 1px solid var(--cds-layer-active-01, #c6c6c6);
-  margin-bottom: 1rem;
-}
 .c4p--side-panel__container .c4p--side-panel__action-toolbar {
   position: sticky;
   z-index: 4;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: var(--c4p--side-panel--title-height);
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0 1rem;
-  margin-bottom: 0.5rem;
   background-color: var(--cds-layer-01, #f4f4f4);
-  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
   margin-right: 0.5rem;
@@ -2701,21 +2683,13 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 .c4p--side-panel__container .c4p--side-panel__slug-and-close {
   position: fixed;
-  z-index: 5;
+  z-index: 10; /* must be higher than title container border bottom */
   top: 0;
   right: 0;
   display: flex;
 }
-.c4p--side-panel__container .c4p--side-panel__body-content {
-  padding: 1rem;
-  padding-top: 0;
-}
-.c4p--side-panel__container.c4p--side-panel__container-is-animating .c4p--side-panel__actions-container.c4p--action-set--2xl {
-  width: 100%;
-  max-width: 100%;
-}
 .c4p--side-panel__container .c4p--side-panel__actions-container {
-  position: fixed;
+  position: sticky;
   bottom: 0;
   border-top: 1px solid var(--cds-border-subtle-02, #e0e0e0);
   background-color: var(--cds-layer-01, #f4f4f4);
@@ -2735,13 +2709,11 @@ p.c4p--about-modal__copyright-text:first-child {
     width: 25%;
   }
 }
-.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button {
-  height: 4rem;
-}
-.c4p--side-panel__container .c4p--side-panel__actions-container.c4p--side-panel__actions-container-condensed .c4p--action-set__action-button {
-  height: 3rem;
+.c4p--side-panel__container .c4p--side-panel__actions-container .c4p--action-set__action-button.c4p--action-set__action-button {
+  height: var(--c4p--side-panel--actions-height);
 }
 .c4p--side-panel__container.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--sm {
+  /* any value is single value list */
   width: 16rem;
   max-width: 100%;
 }
@@ -2856,14 +2828,14 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
-  width: calc(75% - 1rem);
-  padding-right: calc(75% * 0.2 - 1rem);
+  width: calc(40rem 75% - 1rem);
+  padding-right: calc(40rem 75% * 0.2 - 1rem);
   margin-bottom: 0.25rem;
 }
 
 .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
-  width: calc(75% - 1rem);
-  padding-right: calc(75% * 0.2 - 1rem);
+  width: calc(40rem 75% - 1rem);
+  padding-right: calc(40rem 75% * 0.2 - 1rem);
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
   color: var(--cds-text-secondary, #525252);
@@ -3555,7 +3527,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--card .cds--slug {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -3584,7 +3556,7 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--card--has-slug {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   border: 1px solid var(--cds-border-tile);
 }
 
@@ -4192,9 +4164,16 @@ button.c4p--add-select__global-filter-toggle--open {
   }
 }
 .c4p--notifications-panel__container {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -4210,11 +4189,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #a8a8a8;
   --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #393939;
-  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
   --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #8d8d8d;
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
@@ -4276,20 +4255,26 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-skeleton-element: #393939;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-hover-02: transparent;
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-hover-02: transparent;
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -7839,9 +7824,16 @@ button.c4p--add-select__global-filter-toggle--open {
   despite of which carbon theme the user has.
 */
 .c4p--web-terminal {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -7857,11 +7849,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-strong-02: #a8a8a8;
   --cds-border-strong-03: #c6c6c6;
   --cds-border-subtle-00: #525252;
-  --cds-border-subtle-01: #525252;
-  --cds-border-subtle-02: #6f6f6f;
+  --cds-border-subtle-01: #6f6f6f;
+  --cds-border-subtle-02: #8d8d8d;
   --cds-border-subtle-03: #8d8d8d;
-  --cds-border-subtle-selected-01: #6f6f6f;
-  --cds-border-subtle-selected-02: #8d8d8d;
+  --cds-border-subtle-selected-01: #8d8d8d;
+  --cds-border-subtle-selected-02: #a8a8a8;
   --cds-border-subtle-selected-03: #a8a8a8;
   --cds-border-tile-01: #6f6f6f;
   --cds-border-tile-02: #8d8d8d;
@@ -7923,20 +7915,26 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-skeleton-element: #525252;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-hover-02: transparent;
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-hover-02: transparent;
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #465060;
+  --cds-slug-callout-caret-bottom-background: #2d3f5c;
+  --cds-slug-callout-caret-bottom-background-actions: #253042;
+  --cds-slug-callout-caret-center: #456fb5;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -8253,9 +8251,16 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--web-terminal__documentation-overflow {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -8271,11 +8276,11 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #a8a8a8;
   --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #393939;
-  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
   --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #8d8d8d;
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
@@ -8337,20 +8342,26 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-skeleton-element: #393939;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-hover-02: transparent;
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-hover-02: transparent;
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -9555,6 +9566,7 @@ button.c4p--add-select__global-filter-toggle--open {
   position: sticky;
   z-index: 1;
   left: 0;
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
   align-items: center;
@@ -9576,6 +9588,7 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
   position: sticky;
   left: 0;
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
 .c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
   display: flex;
@@ -9652,6 +9665,9 @@ button.c4p--add-select__global-filter-toggle--open {
   height: 100%;
   overflow-x: auto;
 }
+.c4p--datagrid__grid-container .c4p--datagrid-filter-panel + .c4p--datagrid__table-container-inner .cds--data-table-content {
+  height: fit-content;
+}
 .c4p--datagrid__grid-container table.c4p--datagrid__table-simple {
   display: flex;
   overflow: auto;
@@ -9789,7 +9805,7 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--datagrid__resizableColumn:hover {
-  background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
+  background-color: var(--cds-layer-selected-hover);
 }
 .c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
   border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
@@ -10336,6 +10352,7 @@ button.c4p--add-select__global-filter-toggle--open {
   display: flex;
   align-items: center;
   border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
 
 .c4p--datagrid__right-sticky-column-header {
@@ -10351,6 +10368,7 @@ button.c4p--add-select__global-filter-toggle--open {
   display: flex;
   align-items: center;
   border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  background-color: var(--cds-layer-01, #f4f4f4);
 }
 
 .c4p--datagrid__left-sticky-column-header {
@@ -11345,6 +11363,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
   min-width: auto;
 }
 
+.c4p--datagrid .cds--pagination {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
 :root {
   --cds-grid-gutter: 2rem;
   --cds-grid-columns: 4;
@@ -14484,9 +14506,16 @@ a.cds--side-nav__link--current::before {
 /* stylelint-disable function-no-unknown */
 /* stylelint-disable max-nesting-depth */
 .c4p--guidebanner {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -14502,11 +14531,11 @@ a.cds--side-nav__link--current::before {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #a8a8a8;
   --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #393939;
-  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
   --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #8d8d8d;
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
@@ -14568,20 +14597,26 @@ a.cds--side-nav__link--current::before {
   --cds-skeleton-element: #393939;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-hover-02: transparent;
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-hover-02: transparent;
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -15272,9 +15307,16 @@ a.cds--side-nav__link--current::before {
   }
 }
 .c4p--non-linear-reading__dark {
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-ai-gradient-start-02: transparent;
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -15290,11 +15332,11 @@ a.cds--side-nav__link--current::before {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #a8a8a8;
   --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #393939;
-  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
   --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #8d8d8d;
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
@@ -15356,20 +15398,26 @@ a.cds--side-nav__link--current::before {
   --cds-skeleton-element: #393939;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-hover-02: transparent;
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-hover-02: transparent;
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-gradient: #8d8d8d linear-gradient(135deg, #f4f4f4 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-gradient-hover: #a8a8a8 linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
   --cds-slug-hollow-hover: #b5b5b5;
@@ -15745,6 +15793,12 @@ a.cds--side-nav__link--current::before {
   display: none;
 }
 
+.c4p--delimited-list-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 html,
 body,
 div,
@@ -16769,9 +16823,16 @@ em {
 .cds--white {
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-aura-end: rgba(255, 255, 255, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: #d0e2ff;
+  --cds-ai-border-start: #78a9ff;
+  --cds-ai-border-strong: #4589ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(255, 255, 255, 0);
   --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
   --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -16857,16 +16918,22 @@ em {
   --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
-  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
   --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
   --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-caret-bottom: #d0e2ff;
+  --cds-slug-callout-caret-bottom-background: #d5e5ff;
+  --cds-slug-callout-caret-bottom-background-actions: #dae5f8;
+  --cds-slug-callout-caret-center: #a7c7ff;
   --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
   --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
   --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -16963,9 +17030,16 @@ em {
 .cds--g10 {
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-aura-end: rgba(255, 255, 255, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: #d0e2ff;
+  --cds-ai-border-start: #78a9ff;
+  --cds-ai-border-strong: #4589ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(255, 255, 255, 0);
   --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
   --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -17051,16 +17125,22 @@ em {
   --cds-slug-callout-aura-end-hover-01: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-end-hover-02: rgba(255, 255, 255, 0);
   --cds-slug-callout-aura-end-selected: rgba(255, 255, 255, 0);
-  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(255, 255, 255, 0.5);
   --cds-slug-callout-aura-start-hover-02: rgba(208, 226, 255, 0.5);
   --cds-slug-callout-aura-start-selected: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-caret-bottom: #d0e2ff;
+  --cds-slug-callout-caret-bottom-background: #ccdbf8;
+  --cds-slug-callout-caret-bottom-background-actions: #d2dcee;
+  --cds-slug-callout-caret-center: #a7c7ff;
   --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(209, 209, 209, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(209, 209, 209, 0.85);
   --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(224, 224, 224, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 67, 206, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.1);
   --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17157,8 +17237,15 @@ em {
 .cds--g90 {
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -17174,11 +17261,11 @@ em {
   --cds-border-strong-02: #a8a8a8;
   --cds-border-strong-03: #c6c6c6;
   --cds-border-subtle-00: #525252;
-  --cds-border-subtle-01: #525252;
-  --cds-border-subtle-02: #6f6f6f;
+  --cds-border-subtle-01: #6f6f6f;
+  --cds-border-subtle-02: #8d8d8d;
   --cds-border-subtle-03: #8d8d8d;
-  --cds-border-subtle-selected-01: #6f6f6f;
-  --cds-border-subtle-selected-02: #8d8d8d;
+  --cds-border-subtle-selected-01: #8d8d8d;
+  --cds-border-subtle-selected-02: #a8a8a8;
   --cds-border-subtle-selected-03: #a8a8a8;
   --cds-border-tile-01: #6f6f6f;
   --cds-border-tile-02: #8d8d8d;
@@ -17240,18 +17327,24 @@ em {
   --cds-skeleton-element: #525252;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #465060;
+  --cds-slug-callout-caret-bottom-background: #2d3f5c;
+  --cds-slug-callout-caret-bottom-background-actions: #253042;
+  --cds-slug-callout-caret-center: #456fb5;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17347,8 +17440,15 @@ em {
 .cds--g100 {
   background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-aura-end: rgba(0, 0, 0, 0);
+  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
+  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
+  --cds-ai-border-start: #4589ff;
+  --cds-ai-border-strong: #78a9ff;
+  --cds-ai-drop-shadow: rgba(15, 98, 254, 0.32);
   --cds-ai-gradient-end: rgba(38, 38, 38, 0);
   --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-inner-shadow: rgba(69, 137, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -17364,11 +17464,11 @@ em {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #a8a8a8;
   --cds-border-subtle-00: #393939;
-  --cds-border-subtle-01: #393939;
-  --cds-border-subtle-02: #525252;
+  --cds-border-subtle-01: #525252;
+  --cds-border-subtle-02: #6f6f6f;
   --cds-border-subtle-03: #6f6f6f;
-  --cds-border-subtle-selected-01: #525252;
-  --cds-border-subtle-selected-02: #6f6f6f;
+  --cds-border-subtle-selected-01: #6f6f6f;
+  --cds-border-subtle-selected-02: #8d8d8d;
   --cds-border-subtle-selected-03: #8d8d8d;
   --cds-border-tile-01: #525252;
   --cds-border-tile-02: #6f6f6f;
@@ -17430,18 +17530,24 @@ em {
   --cds-skeleton-element: #393939;
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
-  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-end: rgba(0, 0, 0, 0);
   --cds-slug-callout-aura-end-hover-01: rgba(22, 22, 22, 0);
   --cds-slug-callout-aura-end-selected: rgba(22, 22, 22, 0);
-  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-aura-start: rgba(69, 137, 255, 0.1);
   --cds-slug-callout-aura-start-hover-01: rgba(184, 211, 255, 0.3);
   --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-caret-bottom: #3d4655;
+  --cds-slug-callout-caret-bottom-background: #213250;
+  --cds-slug-callout-caret-bottom-background-actions: #192436;
+  --cds-slug-callout-caret-center: #3f68af;
   --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
   --cds-slug-callout-gradient-bottom-hover: rgba(71, 71, 71, 0.55);
   --cds-slug-callout-gradient-bottom-selected: rgba(71, 71, 71, 0.85);
   --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
   --cds-slug-callout-gradient-top-hover: rgba(57, 57, 57, 0.55);
   --cds-slug-callout-gradient-top-selected: rgba(57, 57, 57, 0.85);
+  --cds-slug-callout-shadow-outer-01: rgba(0, 45, 156, 0.25);
+  --cds-slug-callout-shadow-outer-02: rgba(0, 0, 0, 0.65);
   --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -18095,15 +18201,15 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--popover--left-top > .cds--popover > .cds--popover-content {
-  inset-block-start: -50%;
+  inset-block-start: 50%;
   inset-inline-end: 100%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
 .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
-  inset-block-end: -50%;
+  inset-block-end: 50%;
   inset-inline-end: 100%;
-  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
+  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
 [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
@@ -21365,8 +21471,9 @@ fieldset[disabled] .cds--form__helper-text {
   transform: translateY(-50%);
 }
 
-.cds--text-input__field-wrapper--slug .cds--text-input {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--text-input__field-wrapper--slug .cds--text-input:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   padding-inline-end: 2.5rem;
 }
 
@@ -22566,8 +22673,13 @@ fieldset[disabled] .cds--form__helper-text {
   transform: translateY(-50%);
 }
 
-.cds--list-box__wrapper--slug .cds--list-box {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+}
+
+.cds--list-box__wrapper--slug .cds--list-box input[role=combobox] {
+  border-block-end-color: transparent;
 }
 
 .cds--list-box__wrapper--slug .cds--list-box__field,
@@ -23485,6 +23597,7 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  flex: 1;
 }
 
 .cds--radio-button__appearance {
@@ -24419,13 +24532,15 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--data-table tbody tr:has(> .cds--table-column-slug--active) {
-  background-image: linear-gradient(90deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%), linear-gradient(90deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  background-image: linear-gradient(90deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   background-attachment: fixed;
 }
 
 .cds--data-table thead th.cds--table-sort__header--slug .cds--table-sort,
 .cds--data-table thead th:has(> .cds--table-header-label--slug) {
-  background-image: linear-gradient(180deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%), linear-gradient(180deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
+  background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
 }
 
 .cds--table-column-slug .cds--slug {
@@ -26869,8 +26984,9 @@ th .cds--table-sort__flex {
   transform: translateY(-50%);
 }
 
-.cds--date-picker-input__wrapper--slug .cds--date-picker__input {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   padding-inline-end: 4rem;
 }
 
@@ -28589,8 +28705,13 @@ button.cds--dropdown-text:focus {
   inset-block-start: 2.6875rem;
 }
 
-.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+}
+
+.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
 }
 
 .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
@@ -29141,12 +29262,17 @@ button.cds--dropdown-text:focus {
   padding-inline-end: 9rem;
 }
 
-.cds--number__input-wrapper--slug input[type=number],
+.cds--number__input-wrapper--slug input[type=number]:not(:has(~ .cds--slug--revert)),
 .cds--number__input-wrapper--slug input[type=number]:disabled {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   padding-inline-end: 7rem;
 }
 
+.cds--number__input-wrapper--slug .cds--number__control-btn {
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
+}
+
 .cds--number.cds--skeleton {
   position: relative;
   padding: 0;
@@ -29398,8 +29524,9 @@ button.cds--dropdown-text:focus {
   padding-inline-end: 7.5rem;
 }
 
-.cds--number-input--fluid .cds--number__input-wrapper--slug {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
 }
 
 .cds--search--fluid {
@@ -29774,8 +29901,9 @@ optgroup.cds--select-optgroup:disabled,
   transform: translateY(-50%);
 }
 
-.cds--select--slug .cds--select-input {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   padding-inline-end: 4rem;
 }
 
@@ -30072,8 +30200,9 @@ optgroup.cds--select-optgroup:disabled,
   transform: translate(0);
 }
 
-.cds--text-area__wrapper--slug .cds--text-area {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--text-area__wrapper--slug .cds--text-area:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
   padding-inline-end: 2.5rem;
 }
 
@@ -30294,8 +30423,9 @@ optgroup.cds--select-optgroup:disabled,
   inline-size: 80%;
 }
 
-.cds--text-area--fluid .cds--text-area__wrapper--slug {
-  background-image: linear-gradient(270deg, var(--cds-ai-gradient-start-01, rgba(242, 244, 248, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%), linear-gradient(270deg, var(--cds-ai-gradient-start-02, rgba(237, 245, 255, 0.5)) 0%, var(--cds-ai-gradient-end, rgba(255, 255, 255, 0)) 33%, transparent 100%);
+.cds--text-area--fluid .cds--text-area__wrapper--slug:not(:has(~ .cds--slug--revert)) {
+  background-image: linear-gradient(0deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
+  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
 }
 
 .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
@@ -31214,18 +31344,19 @@ optgroup.cds--select-optgroup:disabled,
   align-items: flex-start;
 }
 
-.cds--modal-close {
+.cds--modal-close-button {
   position: absolute;
-  z-index: 2;
-  overflow: hidden;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+.cds--modal-close {
   padding: 0.75rem;
   border: 2px solid transparent;
   background-color: transparent;
   block-size: 3rem;
   cursor: pointer;
   inline-size: 3rem;
-  inset-block-start: 0;
-  inset-inline-end: 0;
   transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--modal-close:hover {
@@ -31261,12 +31392,12 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--modal--slug .cds--modal-container {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   background-color: var(--cds-layer);
 }
 
 .cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) calc(0% + 64px), var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) calc(0% + 64px), var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   background-color: var(--cds-layer);
 }
 
@@ -31276,8 +31407,8 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-end: 0;
 }
 
-.cds--modal-header > .cds--slug:has(+ .cds--modal-close),
-.cds--modal-header > .cds--modal-close ~ .cds--slug,
+.cds--modal-header > .cds--slug:has(+ .cds--modal-close-button),
+.cds--modal-header > .cds--modal-close-button ~ .cds--slug,
 .cds--modal--slug .cds--modal-container-body > .cds--slug {
   inset-inline-end: 3rem;
 }
@@ -34450,32 +34581,181 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slug.cds--slug--enabled .cds--slug-content {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
-  border: 1px solid var(--cds-border-subtle);
-  border-radius: 16px;
-  backdrop-filter: blur(25px);
-  box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), -40px 30px 100px -25px var(--cds-slug-callout-shadow-outer-01, rgba(0, 67, 206, 0.25)), -60px 80px 60px -45px var(--cds-slug-callout-shadow-outer-02, rgba(0, 0, 0, 0.1));
   color: var(--cds-text-primary, #161616);
   min-inline-size: 17.5rem;
 }
 
 .cds--slug.cds--slug--enabled > .cds--toggletip > .cds--popover > .cds--popover-caret {
-  background: var(--cds-border-subtle);
+  background: transparent;
+  clip-path: none;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left,
+.cds--popover--bottom,
+.cds--popover--bottom-right,
+.cds--popover--bottom-left,
+.cds--popover--left,
+.cds--popover--left-top,
+.cds--popover--left-bottom,
+.cds--popover--right,
+.cds--popover--right-top,
+.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
+  position: absolute;
+  display: block;
+  border: 1px solid var(--cds-ai-border-start, #78a9ff);
+  background: var(--cds-background, #ffffff);
+  block-size: 0.75rem;
+  clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
+  content: "";
+  inline-size: 0.75rem;
+  transform: rotate(45deg);
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left,
+.cds--popover--bottom,
+.cds--popover--bottom-right,
+.cds--popover--bottom-left,
+.cds--popover--left,
+.cds--popover--left-top,
+.cds--popover--left-bottom,
+.cds--popover--right,
+.cds--popover--right-top,
+.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
+  position: absolute;
+  display: block;
+  background: var(--cds-background, #ffffff);
+  block-size: 0.875rem;
+  content: "";
+  inline-size: 0.125rem;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
+  inset-block-end: 0.0625rem;
+  transform: rotate(-135deg);
+}
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
+  background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
+  block-size: 0.125rem;
+  border-end-end-radius: 50%;
+  border-end-start-radius: 50%;
+  inline-size: 0.875rem;
+  inset-block-start: -0.125rem;
+  inset-inline-start: -0.0625rem;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
+  display: none;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
+.cds--popover--right-bottom,
+.cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
+  inset-inline-start: 0.0625rem;
+  transform: rotate(-45deg);
+}
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--right,
+.cds--popover--right-bottom,
+.cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
+  border-end-start-radius: 50%;
+  border-start-start-radius: 50%;
+  inset-block-start: -0.0625rem;
+  inset-inline-start: 0.375rem;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
+.cds--popover--bottom-left,
+.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
+  inset-block-start: 0.0625rem;
+  transform: rotate(45deg);
+}
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--bottom,
+.cds--popover--bottom-left,
+.cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
+  block-size: 0.125rem;
+  border-start-end-radius: 50%;
+  border-start-start-radius: 50%;
+  inline-size: 0.875rem;
+  inset-block-end: -0.15625rem;
+  inset-inline-start: -0.0625rem;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
+.cds--popover--left-bottom,
+.cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
+  inset-inline-end: 0.0625rem;
+  transform: rotate(135deg);
+}
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
+.cds--popover--left-bottom,
+.cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
+  border-end-end-radius: 50%;
+  border-start-end-radius: 50%;
+  inset-block-start: -0.0625rem;
+  inset-inline-start: -0.125rem;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
+.cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
+  background: transparent;
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
+.cds--popover--right-bottom,
+.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
+  border-color: var(--cds-slug-callout-caret-bottom, #d0e2ff);
+  background: var(--cds-slug-callout-caret-bottom-background, #d5e5ff);
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left-bottom,
+.cds--popover--right-bottom,
+.cds--popover--top,
+.cds--popover--top-right,
+.cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
+  background: var(--cds-slug-callout-caret-bottom-background-actions, #dae5f8);
+}
+
+.cds--slug.cds--slug--enabled > .cds--toggletip:is(.cds--popover--left,
+.cds--popover--right) > .cds--popover > .cds--popover-caret::before {
+  border-color: var(--cds-slug-callout-caret-center, #a7c7ff);
 }
 
 .cds--slug.cds--slug--enabled .cds--toggletip-content {
-  max-inline-size: 20.875rem;
   padding-block-end: 5rem;
-  padding-block-start: 2rem;
-  padding-inline: 2rem;
+  padding-block-start: 1.5rem;
+  padding-inline: 1.5rem;
+}
+
+.cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
+  max-inline-size: 20.875rem;
+}
+
+.cds--slug.cds--slug--enabled .cds--slug-content:not(.cds--slug-content--with-actions) .cds--toggletip-content {
+  max-inline-size: 20rem;
 }
 
 .cds--slug.cds--slug--enabled .cds--slug-actions {
   position: absolute;
   justify-content: flex-end;
-  background: var(--cds-layer-accent);
-  border-end-end-radius: 0.9375rem;
-  border-end-start-radius: 0.9375rem;
+  backdrop-filter: blur(85px);
+  background: rgba(0, 0, 0, 0.01);
+  border-end-end-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
   column-gap: 0;
   inline-size: 100%;
   inset-block-end: 0;
@@ -34489,7 +34769,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
   order: 1;
-  border-end-end-radius: 1rem;
+  border-end-end-radius: 0.4375rem;
 }
 
 .cds--slug.cds--slug--revert {
@@ -35700,12 +35980,12 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--tile--slug.cds--tile {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   border: 1px solid var(--cds-border-tile);
 }
 
 .cds--tile--slug.cds--tile--expandable:hover {
-  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
 }
 
 .cds--tile--slug.cds--tile--selectable::before,