@carbon/ibm-products 2.17.1 → 2.17.2

package/css/index-full-carbon.css

@@ -1190,6 +1190,12 @@
   box-shadow: none;
 }
 
+.cds--btn-set .cds--btn.cds--btn--loading {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn:focus {
     color: Highlight;
@@ -4113,6 +4119,7 @@ p.c4p--about-modal__copyright-text:first-child {
   --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;
   position: fixed;
   z-index: 9000;
   top: 3rem;
@@ -4278,6 +4285,9 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container-without-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-is-animating {
   pointer-events: none;
 }
@@ -4297,7 +4307,8 @@ p.c4p--about-modal__copyright-text:first-child {
   letter-spacing: var(--cds-heading-03-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
-  padding-right: 3rem;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--c4p--side-panel--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   position: inherit;
@@ -4313,7 +4324,7 @@ p.c4p--about-modal__copyright-text:first-child {
   line-height: var(--cds-label-01-line-height, 1.33333);
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
   overflow: hidden;
-  padding-right: 1rem;
+  padding-right: var(--c4p--side-panel--title-padding-right);
   opacity: var(--c4p--side-panel--subtitle-opacity);
   text-overflow: ellipsis;
   transform: translateY(var(--c4p--side-panel--title-y-position));
@@ -4326,7 +4337,8 @@ p.c4p--about-modal__copyright-text:first-child {
   letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
   display: -webkit-box;
   overflow: hidden;
-  padding-right: 3rem;
+  /* stylelint-disable-next-line carbon/layout-token-use -- custom css property set below */
+  padding-right: var(--c4p--side-panel--title-padding-right);
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   position: absolute;
@@ -4371,6 +4383,9 @@ p.c4p--about-modal__copyright-text:first-child {
   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;
 }
+.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__inner-content-with-actions {
   height: calc(100vh - (var(--c4p--side-panel--content-bottom-padding) + 2rem));
 }
@@ -4423,17 +4438,22 @@ p.c4p--about-modal__copyright-text:first-child {
   color: var(--cds-text-primary, #161616);
 }
 .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button {
-  position: absolute;
-  z-index: 5;
-  top: 0.5rem;
-  right: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0.5rem;
+  margin-bottom: 0;
 }
 .c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
   margin: 0;
 }
+.c4p--side-panel__container .c4p--side-panel__slug-and-close {
+  position: fixed;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  display: flex;
+}
 .c4p--side-panel__container .c4p--side-panel__body-content {
   padding: 1rem;
   padding-top: 0;
@@ -5913,9 +5933,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 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-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-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-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;
@@ -9563,9 +9593,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 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-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-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-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;
@@ -9983,9 +10023,19 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 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-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-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-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;
@@ -12181,6 +12231,11 @@ button.c4p--add-select__global-filter-toggle--open {
   background-color: var(--cds-layer-02, #ffffff);
 }
 
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__expandable-row-cell,
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__expandable-row-cell {
+  padding-top: 0.5rem;
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -12483,6 +12538,16 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: var(--cds-layer-hover);
 }
 
+.c4p--datagrid .cds--data-table tbody tr:hover td.c4p--datagrid__expanded-row-cell-wrapper,
+.c4p--datagrid .cds--data-table td.c4p--datagrid__expanded-row-cell-wrapper,
+.c4p--datagrid .cds--data-table .c4p--datagrid__carbon-row-expanded td.c4p--datagrid__expandable-row-cell {
+  border: none;
+}
+
+.c4p--datagrid .cds--data-table td.c4p--datagrid__expanded-row-cell-wrapper {
+  padding: 0;
+}
+
 .c4p--datagrid__draggable-handleStyle {
   display: flex;
   align-items: center;
@@ -17278,9 +17343,19 @@ em {
   --cds-slug-background: #525252;
   --cds-slug-background-hover: #6f6f6f;
   --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --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-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-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-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17462,9 +17537,19 @@ em {
   --cds-slug-background: #525252;
   --cds-slug-background-hover: #6f6f6f;
   --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --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-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-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-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17645,9 +17730,17 @@ em {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 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-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --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-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17827,9 +17920,17 @@ em {
   --cds-slug-background: #c6c6c6;
   --cds-slug-background-hover: #e0e0e0;
   --cds-slug-callout-aura-end: rgba(22, 22, 22, 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-hover-01: rgba(184, 211, 255, 0.3);
+  --cds-slug-callout-aura-start-selected: rgba(208, 226, 255, 0.2);
   --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-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
@@ -17963,7 +18064,6 @@ em {
   display: list-item;
   overflow: visible;
   border-block-start: 1px solid var(--cds-border-subtle);
-  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--accordion__item:last-child {
   border-block-end: 1px solid var(--cds-border-subtle);
@@ -18058,10 +18158,17 @@ li.cds--accordion__item--disabled:last-of-type {
   text-align: start;
 }
 
+.cds--accordion__wrapper {
+  padding: 0;
+  max-block-size: 0;
+  opacity: 0;
+  transition: all 110ms cubic-bezier(0, 0, 0.38, 0.9);
+  writing-mode: horizontal-tb;
+}
+
 .cds--accordion__content {
-  display: none;
+  overflow: hidden;
   padding-inline: var(--cds-layout-density-padding-inline-local);
-  transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
 }
 @media (min-width: 480px) {
   .cds--accordion__content {
@@ -18101,46 +18208,13 @@ li.cds--accordion__item--disabled:last-of-type {
   display: block;
 }
 
-@keyframes collapse-accordion {
-  0% {
-    block-size: 100%;
-    opacity: 1;
-    visibility: inherit;
-  }
-  100% {
-    block-size: 0;
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-@keyframes expand-accordion {
-  0% {
-    block-size: 0;
-    opacity: 0;
-    visibility: hidden;
-  }
-  100% {
-    block-size: 100%;
-    opacity: 1;
-    visibility: inherit;
-  }
-}
-.cds--accordion__item--collapsing .cds--accordion__content {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) collapse-accordion;
-}
-
-.cds--accordion__item--expanding .cds--accordion__content {
-  animation: 110ms cubic-bezier(0.2, 0, 0.38, 0.9) expand-accordion;
-}
-
 .cds--accordion__item--active {
   overflow: visible;
 }
-.cds--accordion__item--active .cds--accordion__content {
-  display: block;
+.cds--accordion__item--active .cds--accordion__wrapper {
+  opacity: 1;
   padding-block: 0.5rem;
   padding-block-end: 1.5rem;
-  transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms;
 }
 .cds--accordion__item--active .cds--accordion__arrow {
   fill: var(--cds-icon-primary, #161616);
@@ -19525,6 +19599,21 @@ fieldset[disabled] .cds--form__helper-text {
   transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
 }
 
+.cds--checkbox-group--slug legend.cds--label,
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text {
+  display: flex;
+}
+
+.cds--checkbox-group--slug legend.cds--label .cds--slug,
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
+.cds--checkbox-wrapper--slug .cds--checkbox-label-text .cds--slug__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .cds--text-input {
   --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
   --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
@@ -20095,6 +20184,28 @@ fieldset[disabled] .cds--form__helper-text {
   border-block-end-color: var(--cds-border-subtle);
 }
 
+.cds--text-input__field-wrapper .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 1rem;
+  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%);
+  padding-inline-end: 2.5rem;
+}
+
+.cds--text-input--invalid:has(~ .cds--slug),
+.cds--text-input--warning:has(~ .cds--slug) {
+  padding-inline-end: 4rem;
+}
+
+.cds--text-input--invalid ~ .cds--slug,
+.cds--text-input--warning ~ .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,
   .cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg {
@@ -21261,6 +21372,41 @@ fieldset[disabled] .cds--form__helper-text {
   text-overflow: ellipsis;
 }
 
+.cds--list-box__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  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__field,
+.cds--list-box__wrapper--slug .cds--text-input {
+  padding-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field {
+  padding-inline-end: 6rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug {
+  inset-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
+  inset-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--list-box__selection) ~ .cds--slug {
+  inset-inline-end: 5.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--list-box__field,
   .cds--list-box__menu,
@@ -21506,15 +21652,15 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--combo-button__container--sm .cds--combo-button__primary-action {
-  min-inline-size: 7.9375rem;
+  min-inline-size: 9.9375rem;
 }
 
 .cds--combo-button__container--md .cds--combo-button__primary-action {
-  min-inline-size: 7.4375rem;
+  min-inline-size: 9.4375rem;
 }
 
 .cds--combo-button__container--lg .cds--combo-button__primary-action {
-  min-inline-size: 6.9375rem;
+  min-inline-size: 8.9375rem;
 }
 
 .cds--combo-button__primary-action .cds--btn {
@@ -22332,6 +22478,21 @@ fieldset[disabled] .cds--form__helper-text {
   margin-inline-start: 0.5rem;
 }
 
+.cds--radio-button-group--slug legend.cds--label,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text {
+  display: flex;
+}
+
+.cds--radio-button-group--slug legend.cds--label .cds--slug,
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
+.cds--radio-button-wrapper--slug .cds--radio-button__label-text .cds--slug__button--inline {
+  line-height: inherit;
+  margin-block-start: -0.0625rem;
+}
+
 .cds--data-table-container {
   position: relative;
   padding-block-start: 0.125rem;
@@ -25278,7 +25439,7 @@ th .cds--table-sort__flex {
   align-items: center;
 }
 
-.cds--date-picker-input__wrapper span {
+.cds--date-picker-input__wrapper > span {
   position: relative;
 }
 
@@ -25404,7 +25565,6 @@ th .cds--table-sort__flex {
 
 .cds--date-picker__input:disabled ~ .cds--date-picker__icon {
   cursor: not-allowed;
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
 .cds--date-picker--range > .cds--date-picker-container:first-child {
@@ -25416,6 +25576,28 @@ th .cds--table-sort__flex {
   inline-size: 8.96875rem;
 }
 
+.cds--date-picker-input__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  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%);
+  padding-inline-end: 4rem;
+}
+
+.cds--date-picker__input[readonly] {
+  background: transparent;
+  border-block-end-color: var(--cds-border-subtle);
+  cursor: text;
+}
+
+.cds--date-picker__input[readonly] + .cds--date-picker__icon {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--date-picker.cds--skeleton input,
 .cds--date-picker__input.cds--skeleton {
   position: relative;
@@ -25491,16 +25673,6 @@ th .cds--table-sort__flex {
   }
 }
 
-.cds--date-picker__input[readonly] {
-  background: transparent;
-  border-block-end-color: var(--cds-border-subtle);
-  cursor: text;
-}
-
-.cds--date-picker__input[readonly] + .cds--date-picker__icon {
-  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
-}
-
 .cds--dropdown__wrapper--inline {
   display: inline-grid;
   align-items: center;
@@ -27098,6 +27270,14 @@ button.cds--dropdown-text:focus {
   border-inline-start-color: var(--cds-border-subtle);
 }
 
+.cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--slug {
+  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--multi-select .cds--list-box__field--wrapper {
   display: inline-flex;
   align-items: center;
@@ -27416,21 +27596,6 @@ button.cds--dropdown-text:focus {
 .cds--number__control-btn::-moz-focus-inner {
   border: 0;
 }
-.cds--number__control-btn::before, .cds--number__control-btn::after {
-  position: absolute;
-  display: block;
-  background-color: var(--cds-field);
-  block-size: 2.25rem;
-  content: "";
-  inline-size: 0.125rem;
-  inset-block-start: 0.125rem;
-}
-.cds--number__control-btn::before {
-  inset-inline-start: 0;
-}
-.cds--number__control-btn::after {
-  inset-inline-end: 0;
-}
 .cds--number__control-btn svg {
   fill: currentColor;
 }
@@ -27450,12 +27615,6 @@ button.cds--dropdown-text:focus {
   color: var(--cds-icon-primary, #161616);
   cursor: pointer;
 }
-.cds--number__control-btn:hover::before, .cds--number__control-btn:hover::after {
-  background-color: var(--cds-field-hover);
-}
-.cds--number__control-btn:focus::before, .cds--number__control-btn:focus::after, .cds--number__control-btn:hover:focus::before, .cds--number__control-btn:hover:focus::after {
-  background-color: transparent;
-}
 .cds--number__control-btn:disabled {
   border-block-end-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -27470,46 +27629,37 @@ button.cds--dropdown-text:focus {
   order: 2;
 }
 
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: transparent;
+.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: var(--cds-support-error, #da1e28);
 }
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
+
+.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe);
 }
-@media screen and (prefers-contrast) {
-  .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-    outline-style: dotted;
-  }
+
+.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset 0 2px var(--cds-focus, #0f62fe), inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end-color: transparent;
+.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
+  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28), inset -2px 0 var(--cds-support-error, #da1e28);
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid var(--cds-support-error, #da1e28);
+  box-shadow: inset 0 2px var(--cds-support-error, #da1e28), inset 0 -1px var(--cds-support-error, #da1e28);
+}
+
+.cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
+  outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
+  .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:focus:hover {
     outline-style: dotted;
   }
 }
 
-.cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background-color: transparent;
-}
-
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background-color: var(--cds-support-error, #da1e28);
-}
-
-.cds--number input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn.up-icon::after,
-.cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn.up-icon:focus::after {
-  background-color: var(--cds-focus, #0f62fe);
-}
-
 .cds--number__rule-divider {
   position: absolute;
   z-index: 6000;
@@ -27590,30 +27740,6 @@ button.cds--dropdown-text:focus {
   opacity: 1;
 }
 
-.cds--number--light input[type=number] {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light input[type=number]:disabled {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light .cds--number__control-btn::before,
-.cds--number--light .cds--number__control-btn::after {
-  background-color: var(--cds-field-02, #ffffff);
-}
-
-.cds--number--light .cds--number__control-btn:focus::before,
-.cds--number--light .cds--number__control-btn:focus::after {
-  background-color: transparent;
-}
-
-.cds--number--light .cds--number__control-btn:hover,
-.cds--number--light .cds--number__control-btn:not(:focus):hover::before,
-.cds--number--light .cds--number__control-btn:not(:focus):hover::after {
-  background-color: var(--cds-layer-hover-02, #e8e8e8);
-}
-
 .cds--number--lg input[type=number] {
   block-size: 3rem;
 }
@@ -27625,9 +27751,6 @@ button.cds--dropdown-text:focus {
 .cds--number--lg .cds--number__control-btn {
   inline-size: 3rem;
 }
-.cds--number--lg .cds--number__control-btn::before, .cds--number--lg .cds--number__control-btn::after {
-  block-size: 2.75rem;
-}
 
 .cds--number--sm input[type=number] {
   block-size: 2rem;
@@ -27640,9 +27763,6 @@ button.cds--dropdown-text:focus {
 .cds--number--sm .cds--number__control-btn {
   inline-size: 2rem;
 }
-.cds--number--sm .cds--number__control-btn::before, .cds--number--sm .cds--number__control-btn::after {
-  block-size: 1.75rem;
-}
 
 .cds--number--nolabel .cds--label + .cds--form__helper-text {
   margin-block-start: 0;
@@ -27669,23 +27789,37 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
   cursor: pointer;
 }
-.cds--number--readonly .cds--number__control-btn:hover::before, .cds--number--readonly .cds--number__control-btn:hover::after {
-  background-color: transparent;
-}
 
 .cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
   outline: none;
 }
 
-.cds--number--readonly .cds--number__control-btn::before,
-.cds--number--readonly .cds--number__control-btn::after {
-  background: transparent;
-}
-
 .cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) {
   background-color: var(--cds-border-subtle);
 }
 
+.cds--number__input-wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 5.5rem;
+  transform: translateY(-50%);
+}
+
+.cds--number__input-wrapper--slug input[data-invalid] ~ .cds--slug,
+.cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
+  inset-inline-end: 7.5rem;
+}
+
+.cds--number .cds--number__input-wrapper--slug input[data-invalid],
+.cds--number .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
+  padding-inline-end: 9rem;
+}
+
+.cds--number__input-wrapper--slug input[type=number] {
+  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%);
+  padding-inline-end: 7rem;
+}
+
 .cds--number.cds--skeleton {
   position: relative;
   padding: 0;
@@ -27719,6 +27853,28 @@ button.cds--dropdown-text:focus {
   display: none;
 }
 
+/* stylelint-disable */
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn:hover,
+  .cds--number__control-btn:focus {
+    color: Highlight;
+    outline: 1px solid Highlight;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn {
+    outline: 1px solid transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
+  .cds--number__control-btn svg {
+    fill: ButtonText;
+  }
+}
+
+/* stylelint-enable */
 .cds--number-input--fluid {
   position: relative;
   background: var(--cds-field);
@@ -27767,55 +27923,47 @@ button.cds--dropdown-text:focus {
   transform: translate(0);
 }
 
-.cds--number-input--fluid .cds--number__control-btn,
 .cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-block-end: 1px solid transparent;
+  border-block-end-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-}
-@media screen and (prefers-contrast) {
-  .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
-    outline-style: dotted;
-  }
+.cds--number-input--fluid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset 0 -1px var(--cds-focus, #0f62fe), inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number .cds--number__input-wrapper:not(.cds--number__input-wrapper--warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  outline: 2px solid transparent;
+.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn,
+.cds--number-input--fluid--invalid input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
+  border-block-end-color: transparent;
+  box-shadow: none;
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number .cds--number__input-wrapper:not(.cds--number__input-wrapper--warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover::before {
-  background: var(--cds-focus, #0f62fe);
-  block-size: 1px;
-  inline-size: 100%;
-  inset-block-end: 0;
-  inset-block-start: auto;
-  inset-inline-start: 0;
+.cds--number-input--fluid .cds--number__input-wrapper--warning input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type,
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:focus ~ .cds--number__controls .cds--number__control-btn:last-of-type {
+  box-shadow: inset -2px 0 var(--cds-focus, #0f62fe);
 }
 
-.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
-  border-block-end: 1px solid var(--cds-focus, #0f62fe);
-  outline: none;
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:last-of-type:hover {
+  box-shadow: inset -2px 0 var(--cds-support-error, #da1e28);
 }
 
-.cds--number-input--fluid input[type=number] ~ .cds--number__controls .cds--number__control-btn::after {
-  block-size: calc(100% - 0.0625rem);
-  inset-block-start: 0;
+.cds--number-input--fluid--invalid input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
+  box-shadow: none;
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  background: var(--cds-focus, #0f62fe);
+.cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
 }
-
-.cds--number-input--fluid input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon::after {
-  block-size: 100%;
+@media screen and (prefers-contrast) {
+  .cds--number-input--fluid.cds--number-input--fluid--focus .cds--number {
+    outline-style: dotted;
+  }
 }
 
-.cds--number-input--fluid.cds--number-input--fluid--focus input[type=number] ~ .cds--number__controls .cds--number__control-btn.up-icon:hover::after {
-  background-color: var(--cds-focus, #0f62fe);
-  block-size: 100%;
+.cds--number-input--fluid:not(.cds--number-input--fluid--invalid) .cds--number-input-wrapper:not(.cds--number-input-wrapper__warning) input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
+  border-block-end: 1px solid var(--cds-focus, #0f62fe);
+  outline: none;
 }
 
 .cds--number-input--fluid--invalid input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn:focus,
@@ -27908,6 +28056,14 @@ button.cds--dropdown-text:focus {
   background-color: transparent;
 }
 
+.cds--number-input--fluid .cds--number__input-wrapper--slug .cds--slug {
+  inset-block-start: 2.6875rem;
+}
+
+.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--search--fluid {
   block-size: 4rem;
 }
@@ -28153,7 +28309,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--select__invalid-icon--warning path[fill] {
-  fill: var(--cds-icon-primary, #161616);
+  fill: #000000;
   opacity: 1;
 }
 
@@ -28273,6 +28429,28 @@ optgroup.cds--select-optgroup:disabled,
   display: none;
 }
 
+.cds--select--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 2.5rem;
+  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%);
+  padding-inline-end: 4rem;
+}
+
+.cds--select--slug.cds--select--invalid .cds--select-input,
+.cds--select--slug.cds--select--warning .cds--select-input {
+  padding-inline-end: 6rem;
+}
+
+.cds--select--slug.cds--select--invalid .cds--slug,
+.cds--select--slug.cds--select--warning .cds--slug {
+  inset-inline-end: 4rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--select__arrow {
     fill: ButtonText;
@@ -28534,8 +28712,36 @@ optgroup.cds--select-optgroup:disabled,
   border-block-end-color: var(--cds-border-subtle);
 }
 
-.cds--text-area.cds--text-area--light:disabled {
-  background-color: var(--cds-field-02, #ffffff);
+.cds--text-area__wrapper--slug .cds--slug {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 1rem;
+}
+
+.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert {
+  inset-block-start: 0.25rem;
+  inset-inline-end: 0.5rem;
+  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%);
+  padding-inline-end: 2.5rem;
+}
+
+.cds--text-area--invalid:has(~ .cds--slug),
+.cds--text-area--warn:has(~ .cds--slug) {
+  padding-inline-end: 4rem;
+}
+
+.cds--text-area--invalid ~ .cds--slug,
+.cds--text-area--warn ~ .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--text-area--invalid ~ .cds--slug.cds--slug--revert,
+.cds--text-area--warn ~ .cds--slug.cds--slug--revert {
+  inset-inline-end: 2rem;
 }
 
 .cds--text-area.cds--skeleton {
@@ -28740,6 +28946,10 @@ 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-input--fluid.cds--text-input-wrapper {
   position: relative;
   background: var(--cds-field);
@@ -28893,6 +29103,10 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-start: 1rem;
 }
 
+.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
+  inset-block-start: 2.6875rem;
+}
+
 .cds--time-picker--fluid {
   background: var(--cds-field);
 }
@@ -29134,6 +29348,16 @@ optgroup.cds--select-optgroup:disabled,
   stroke: var(--cds-interactive, #0f62fe);
 }
 
+.cds--btn .cds--inline-loading--btn {
+  min-block-size: 0;
+}
+.cds--btn .cds--inline-loading--btn .cds--inline-loading__text {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+}
+
 /* If IE11 Don't show check animation */
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
   .cds--inline-loading__checkmark-container {
@@ -29240,8 +29464,12 @@ optgroup.cds--select-optgroup:disabled,
   inset-inline-start: calc(-1 * 0.75rem);
 }
 
+.cds--menu-button__container {
+  display: inline-block;
+}
+
 .cds--menu-button__trigger:not(.cds--btn--ghost) {
-  min-inline-size: 10rem;
+  min-inline-size: 12rem;
 }
 
 .cds--menu-button__trigger svg {
@@ -32421,6 +32649,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: flex;
 }
 
+.cds--slug:has(> .cds--popover--open) {
+  z-index: 2;
+}
+
 .cds--slug .cds--slug__button {
   position: relative;
   display: flex;
@@ -32686,10 +32918,10 @@ 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);
-  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)) 33%, transparent 100%), 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);
   box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
   color: var(--cds-text-primary, #161616);
   min-inline-size: 17.5rem;
@@ -32728,6 +32960,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   border-end-end-radius: 1rem;
 }
 
+.cds--slug.cds--slug--revert {
+  transform: translate(0.5rem, -50%);
+}
+
+.cds--slug--revert .cds--btn--icon-only {
+  align-items: center;
+  padding-block-start: 0;
+}
+
+.cds--slug--revert .cds--btn--icon-only svg {
+  margin: 0;
+}
+
 .cds--stack-horizontal {
   display: inline-grid;
   column-gap: var(--cds-stack-gap, 0);
@@ -32822,7 +33067,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   font-size: 100%;
   vertical-align: baseline;
   display: table;
-  background-color: transparent;
+  background-color: var(--cds-layer) transparent;
   border-collapse: collapse;
   border-spacing: 0;
   inline-size: 100%;
@@ -33906,6 +34151,98 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--tile > .cds--slug,
+.cds--tile--expandable > div > .cds--slug,
+.cds--tile--clickable .cds--tile--slug-icon {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 1rem;
+}
+
+.cds--tile.cds--tile--selectable > .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--tile.cds--tile--clickable > .cds--slug {
+  pointer-events: none;
+}
+
+.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);
+  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);
+}
+
+.cds--tile--slug.cds--tile--selectable::before,
+.cds--tile--slug.cds--tile--selectable::after,
+.cds--tile--slug.cds--tile--clickable::before {
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--tile--slug.cds--tile--selectable::before,
+.cds--tile--slug.cds--tile--clickable::before {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-01, rgba(255, 255, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-01, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-02, rgba(208, 226, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-02, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-hover, rgba(224, 224, 224, 0.55)) 0%, var(--cds-slug-callout-gradient-bottom-hover, rgba(209, 209, 209, 0.55)) 100%) rgba(0, 0, 0, 0.01);
+}
+
+.cds--tile--slug.cds--tile--selectable:hover::before,
+.cds--tile--slug.cds--tile--clickable:hover::before {
+  opacity: 1;
+}
+
+.cds--tile--slug.cds--tile--selectable::after {
+  background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-selected, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end-selected, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-selected, rgba(224, 224, 224, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom-selected, rgba(209, 209, 209, 0.85)) 100%) rgba(0, 0, 0, 0.01);
+}
+
+.cds--tile--slug.cds--tile--is-selected::after {
+  opacity: 1;
+}
+
+.cds--tile--slug.cds--tile--is-selected {
+  border-color: var(--cds-border-inverse, #161616);
+}
+
+.cds--tile--slug.cds--tile--selectable .cds--tile-content,
+.cds--tile--slug.cds--tile--clickable .cds--tile-content {
+  position: relative;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.cds--tile--slug.cds--tile--selectable > .cds--slug,
+.cds--tile--slug.cds--tile--selectable > .cds--tile__checkmark {
+  z-index: 1;
+}
+
+.cds--tile--expandable:has(.cds--slug > .cds--popover--open) {
+  overflow: visible;
+}
+
+.cds--tile--clickable .cds--tile--slug-icon rect {
+  stroke: var(--cds-icon-primary, #161616);
+}
+
+.cds--tile--clickable .cds--tile--slug-icon path {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--tile--slug-rounded,
+.cds--tile--slug-rounded.cds--tile--selectable::before,
+.cds--tile--slug-rounded.cds--tile--selectable::after,
+.cds--tile--slug-rounded.cds--tile--clickable::before {
+  border-radius: 1rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--tile__chevron svg,
   .cds--tile__checkmark svg,