@carbon/styles 1.47.0 → 1.48.0

package/css/styles.css

@@ -2847,16 +2847,25 @@ 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-border-01: #78a9ff;
+  --cds-slug-callout-border-02: #d0e2ff;
+  --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-inner: rgba(69, 137, 255, 0.2);
+  --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;
@@ -3041,16 +3050,25 @@ 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-border-01: #78a9ff;
+  --cds-slug-callout-border-02: #d0e2ff;
+  --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-inner: rgba(69, 137, 255, 0.2);
+  --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;
@@ -3164,11 +3182,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;
@@ -3230,18 +3248,27 @@ 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(255, 255, 255, 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-border-01: #4589ff;
+  --cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
+  --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-inner: rgba(69, 137, 255, 0.2);
+  --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;
@@ -3354,11 +3381,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;
@@ -3420,18 +3447,27 @@ 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(255, 255, 255, 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-border-01: #4589ff;
+  --cds-slug-callout-border-02: rgba(166, 200, 255, 0.25);
+  --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-inner: rgba(69, 137, 255, 0.2);
+  --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;
@@ -4169,15 +4205,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,
@@ -9604,6 +9640,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 1;
 }
 
 .cds--radio-button__appearance {
@@ -17438,18 +17475,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 {
@@ -17485,12 +17523,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-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #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-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
   background-color: var(--cds-layer);
 }
 
@@ -17500,8 +17538,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;
 }
@@ -20690,33 +20728,184 @@ 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;
-  -webkit-backdrop-filter: blur(25px);
-          backdrop-filter: blur(25px);
-  box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(to top, var(--cds-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #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-slug-callout-shadow-inner, 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;
+  -webkit-clip-path: none;
+          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-slug-callout-border-01, #78a9ff);
+  background: var(--cds-background, #ffffff);
+  block-size: 0.75rem;
+  -webkit-clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
+          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;
+  -webkit-backdrop-filter: blur(85px);
+          backdrop-filter: blur(85px);
+  background: rgba(0, 0, 0, 0.01);
+  border-end-end-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
   -moz-column-gap: 0;
        column-gap: 0;
   inline-size: 100%;
@@ -20731,7 +20920,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 {
@@ -21949,12 +22138,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-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #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-slug-callout-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-slug-callout-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-slug-callout-border-01, #78a9ff), var(--cds-slug-callout-border-02, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
 }
 
 .cds--tile--slug.cds--tile--selectable::before,