@carbon/styles 1.44.0-rc.0 → 1.45.0-rc.0

package/css/styles.css

@@ -2844,9 +2844,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;
@@ -3028,9 +3038,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;
@@ -3211,9 +3231,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;
@@ -3393,9 +3421,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;
@@ -3529,7 +3565,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);
@@ -3626,10 +3661,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 {
@@ -3671,46 +3713,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);
@@ -3970,7 +3979,7 @@ li.cds--accordion__item--disabled:last-of-type {
   will-change: transform;
 }
 
-.cds--popover--open > .cds--popover > .cds--popover-caret {
+.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
   display: block;
 }
 
@@ -6109,6 +6118,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--copy-btn {
   position: relative;
   display: flex;
@@ -8115,7 +8139,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty,
 .cds--list-box--warning .cds--list-box__field .cds--text-input--empty {
-  padding-inline-end: carbon--mini-units(9);
+  padding-inline-end: 4rem;
 }
 
 .cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty + .cds--list-box__invalid-icon,
@@ -8644,15 +8668,26 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--list-box__wrapper--slug .cds--list-box__field,
-.cds--list-box__wrapper--slug .cds--text-input {
+.cds--list-box__wrapper--slug .cds--text-input--empty {
   padding-inline-end: 4rem;
 }
 
-.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field,
+.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
+  padding-inline-end: 6rem;
+}
+
+.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--text-input--empty,
+.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--list-box__field,
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input--empty,
 .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[data-invalid] .cds--text-input:not(.cds--text-input--empty),
+.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty) {
+  padding-inline-end: 7.5rem;
+}
+
 .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;
@@ -8761,6 +8796,7 @@ fieldset[disabled] .cds--form__helper-text {
   max-inline-size: 18rem;
   min-inline-size: 10rem;
   opacity: 0;
+  overflow-y: auto;
   visibility: hidden;
 }
 .cds--menu *,
@@ -8801,7 +8837,7 @@ fieldset[disabled] .cds--form__helper-text {
   display: grid;
   align-items: center;
   block-size: 2rem;
-  color: var(--cds-text-primary, #161616);
+  color: var(--cds-text-secondary, #525252);
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
   cursor: pointer;
@@ -8818,9 +8854,16 @@ fieldset[disabled] .cds--form__helper-text {
     outline-style: dotted;
   }
 }
+.cds--menu-item svg {
+  color: var(--cds-icon-secondary, #525252);
+}
 
 .cds--menu-item:hover {
   background-color: var(--cds-layer-hover);
+  color: var(--cds-text-primary, #161616);
+}
+.cds--menu-item:hover svg {
+  color: var(--cds-icon-primary, #161616);
 }
 
 .cds--menu--xs .cds--menu-item {
@@ -9746,6 +9789,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;
@@ -9767,7 +9825,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--data-table-header {
-  background: var(--cds-layer);
+  background-color: var(--cds-layer);
   padding-block-end: 1.5rem;
   padding-block-start: 1rem;
   padding-inline: 1rem;
@@ -9834,13 +9892,13 @@ fieldset[disabled] .cds--form__helper-text {
   transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-.cds--data-table tbody tr:hover {
-  background: var(--cds-layer-hover);
+.cds--data-table tbody tr:not([data-child-row]):hover,
+.cds--data-table tbody tr[data-child-row]:hover > td {
+  background-color: var(--cds-layer-hover);
 }
 
 .cds--data-table tbody tr:hover td,
 .cds--data-table tbody tr:hover th {
-  background: var(--cds-layer-hover);
   border-block-end: 1px solid var(--cds-layer-hover);
   border-block-start: 1px solid var(--cds-layer-hover);
   color: var(--cds-text-primary, #161616);
@@ -9916,7 +9974,6 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--data-table td,
 .cds--data-table tbody th {
-  background: var(--cds-layer);
   border-block-end: 1px solid var(--cds-border-subtle);
   border-block-start: 1px solid var(--cds-layer);
   color: var(--cds-text-secondary, #525252);
@@ -10019,17 +10076,23 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(even) td {
-  background-color: var(--cds-layer-accent);
   border-block-end: 1px solid var(--cds-layer-accent);
   border-block-start: 1px solid var(--cds-layer-accent);
 }
 
+.cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):nth-child(even) {
+  background-color: var(--cds-layer-accent);
+}
+
 .cds--data-table--zebra tbody tr:not(.cds--parent-row):hover td {
-  background-color: var(--cds-layer-hover);
   border-block-end: 1px solid var(--cds-layer-hover);
   border-block-start: 1px solid var(--cds-layer-hover);
 }
 
+.cds--data-table--zebra tbody tr:not(.cds--parent-row):not(.cds--data-table--selected):hover {
+  background-color: var(--cds-layer-hover);
+}
+
 .cds--table-column-checkbox .cds--checkbox-label {
   min-block-size: 1.5rem;
   padding-inline-start: 0;
@@ -10045,7 +10108,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--data-table th.cds--table-column-checkbox {
   position: static;
-  background: var(--cds-layer-accent);
+  background-color: var(--cds-layer-accent);
   inline-size: 2rem;
   transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
 }
@@ -10117,12 +10180,16 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected td,
 tr.cds--data-table--selected td {
-  background-color: var(--cds-layer-selected);
   border-block-end: 1px solid var(--cds-layer-active);
   border-block-start: 1px solid var(--cds-layer-selected);
   color: var(--cds-text-primary, #161616);
 }
 
+.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected,
+tr.cds--data-table--selected {
+  background-color: var(--cds-layer-selected);
+}
+
 .cds--data-table--zebra tbody tr:first-of-type:nth-child(odd).cds--data-table--selected td,
 tr.cds--data-table--selected:first-of-type td {
   border-block-start: 1px solid var(--cds-border-subtle-selected);
@@ -10145,12 +10212,16 @@ tr.cds--data-table--selected:last-of-type td {
 
 .cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover td,
 .cds--data-table tbody .cds--data-table--selected:hover td {
-  background: var(--cds-layer-selected-hover);
   border-block-end: 1px solid var(--cds-layer-selected-hover);
   border-block-start: 1px solid var(--cds-layer-selected-hover);
   color: var(--cds-text-primary, #161616);
 }
 
+.cds--data-table--zebra tbody tr:nth-child(odd).cds--data-table--selected:hover,
+.cds--data-table tbody .cds--data-table--selected:hover {
+  background-color: var(--cds-layer-selected-hover);
+}
+
 .cds--data-table--selected .cds--overflow-menu .cds--overflow-menu__icon {
   opacity: 1;
 }
@@ -10448,6 +10519,39 @@ tr.cds--data-table--selected:last-of-type td {
   margin: -0.1875rem 0;
 }
 
+.cds--data-table .cds--table-column-slug {
+  inline-size: 1rem;
+  padding-inline-end: 0;
+}
+
+.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-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%);
+}
+
+.cds--table-column-slug .cds--slug {
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.cds--data-table--xl .cds--table-column-slug .cds--slug {
+  transform: translateY(1px);
+}
+
+th .cds--table-header-label.cds--table-header-label--slug {
+  display: flex;
+  align-items: center;
+}
+
+th .cds--table-header-label.cds--table-header-label--slug .cds--slug {
+  margin-inline-start: 0.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--data-table-content {
     outline: 1px solid transparent;
@@ -11533,7 +11637,7 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td {
   background-color: var(--cds-layer-hover);
   padding-block-end: 0;
   padding-block-start: 0;
-  transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child-row-inner-container {
@@ -11542,13 +11646,22 @@ tr.cds--parent-row:not(.cds--expandable-row) + tr[data-child-row] td .cds--child
 }
 
 tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
-  transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
   border-block-end: 1px solid var(--cds-border-subtle);
   padding-inline-start: 3.5rem;
-  transition: padding-bottom 110ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: padding-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+tbody:has(> tr.cds--parent-row--slug) > tr.cds--expandable-row[data-child-row] td,
+tbody:has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
+  padding-inline-start: 5.5rem;
+}
+
+tbody:has(> tr.cds--parent-row--slug):has(td.cds--table-column-checkbox) > tr.cds--expandable-row[data-child-row] td {
+  padding-inline-start: 7.5rem;
 }
 
 tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-inner-container {
@@ -11572,7 +11685,7 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td .cds--child-row-i
 tr.cds--parent-row:not(.cds--expandable-row) td,
 tr.cds--parent-row.cds--expandable-row td,
 tr.cds--parent-row.cds--expandable-row {
-  transition: height 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: height 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 tr.cds--parent-row:not(.cds--expandable-row):first-of-type:hover td {
@@ -11626,6 +11739,11 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
   padding-inline-start: 0.375rem;
 }
 
+.cds--data-table td.cds--table-expand[data-previous-value=collapsed] + .cds--table-column-checkbox {
+  border-block-end: 1px solid transparent;
+  box-shadow: none;
+}
+
 .cds--data-table th.cds--table-expand + .cds--table-column-checkbox + th,
 .cds--data-table td.cds--table-expand + .cds--table-column-checkbox + td {
   padding-inline-start: 0.5rem;
@@ -11716,7 +11834,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
 
 tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
   position: absolute;
-  background: var(--cds-layer-accent);
+  background-color: var(--cds-layer-accent);
   block-size: 0.0625rem;
   content: "";
   inline-size: 0.5rem;
@@ -11726,7 +11844,7 @@ tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
 
 tr.cds--parent-row.cds--expandable-row:hover td.cds--table-expand + td::after,
 tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td.cds--table-expand + td::after {
-  background: var(--cds-layer-hover);
+  background-color: var(--cds-layer-hover);
 }
 
 tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
@@ -11747,7 +11865,7 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
 
 .cds--data-table--zebra tr.cds--parent-row td,
 .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
-  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9), border-bottom 70ms cubic-bezier(0.2, 0, 0.38, 0.9), border-top 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
 .cds--data-table--zebra tbody tr[data-parent-row]:hover td,
@@ -11759,33 +11877,33 @@ tr.cds--parent-row.cds--data-table--selected td.cds--table-expand + td::after {
 }
 
 .cds--data-table--zebra tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td {
-  background: var(--cds-layer-hover);
+  background-color: var(--cds-layer-hover);
   border-block-end: 1px solid var(--cds-layer-hover);
   border-block-start: 1px solid var(--cds-layer-hover);
 }
 
+tr.cds--parent-row.cds--data-table--selected {
+  background-color: var(--cds-layer-selected);
+}
+
 tr.cds--parent-row.cds--data-table--selected:first-of-type td {
-  background: var(--cds-layer-selected);
-  border-block-end: 1px solid var(--cds-border-subtle);
   border-block-start: 1px solid var(--cds-layer-active);
   box-shadow: 0 1px var(--cds-layer-active);
 }
 
 tr.cds--parent-row.cds--data-table--selected td {
-  background: var(--cds-layer-selected);
-  border-block-end: 1px solid transparent;
+  border-block-end: 1px solid var(--cds-layer-active);
   box-shadow: 0 1px var(--cds-layer-active);
   color: var(--cds-text-primary, #161616);
 }
 
 tr.cds--parent-row.cds--data-table--selected:last-of-type td {
-  background: var(--cds-layer-selected);
   border-block-end: 1px solid transparent;
   box-shadow: 0 1px var(--cds-border-subtle);
 }
 
 tr.cds--parent-row.cds--data-table--selected:not(.cds--expandable-row):hover td {
-  background: var(--cds-layer-selected-hover);
+  background-color: var(--cds-layer-selected-hover);
   border-block-end: 1px solid var(--cds-border-subtle);
   border-block-start: 1px solid var(--cds-layer-selected-hover);
   box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -11801,7 +11919,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td,
 tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover td:first-of-type,
 tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td,
 tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover td:first-of-type {
-  background: var(--cds-layer-selected-hover);
+  background-color: var(--cds-layer-selected-hover);
   border-block-end: 1px solid transparent;
   border-block-start: 1px solid var(--cds-layer-selected-hover);
   box-shadow: 0 1px var(--cds-layer-selected-hover);
@@ -11822,7 +11940,22 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row + tr[data-child
 
 tr.cds--parent-row.cds--data-table--selected.cds--expandable-row:hover + tr[data-child-row] td,
 tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[data-child-row] td {
-  background: var(--cds-layer-selected);
+  background-color: var(--cds-layer-selected);
+}
+
+.cds--parent-row .cds--table-column-slug,
+.cds--parent-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
+  box-shadow: none;
+}
+
+.cds--parent-row.cds--expandable-row .cds--table-column-slug,
+.cds--parent-row.cds--expandable-row .cds--table-column-slug + td.cds--table-expand[data-previous-value=collapsed] {
+  border-block-end: 1px solid transparent;
+}
+
+.cds--parent-row--slug td,
+.cds--data-table tr.cds--parent-row--slug:hover td {
+  border-block-start: 1px solid transparent;
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -12170,6 +12303,11 @@ th .cds--table-sort__flex {
   margin-block-start: 0.8125rem;
 }
 
+.cds--table-sort__header--slug .cds--slug {
+  margin-inline-end: auto;
+  margin-inline-start: 0.5rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--table-sort__icon,
   .cds--table-sort__icon-unsorted {
@@ -14189,7 +14327,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--list-box__wrapper--fluid :not(.cds--list-box--up) .cds--list-box__menu {
-  inset-block-start: calc(100% + 0.1875rem);
+  inset-block-start: calc(100% + 0.0625rem);
 }
 
 .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
@@ -14302,6 +14440,34 @@ button.cds--dropdown-text:focus {
   background: var(--cds-skeleton-element, #c6c6c6);
 }
 
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--slug {
+  inset-block-start: 2.625rem;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug,
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--slug {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning button.cds--list-box__field,
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] button.cds--list-box__field {
+  padding-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--text-input:not(.cds--text-input--empty),
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug.cds--list-box__wrapper--fluid--invalid .cds--list-box--invalid .cds--text-input:not(.cds--text-input--empty) {
+  padding-inline-end: 5.5rem;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--warning .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug,
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid .cds--list-box__field:has(.cds--text-input:not(.cds--text-input--empty)) ~ .cds--slug {
+  inset-inline-end: 4rem;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--text-input:not(.cds--text-input--empty) {
+  padding-inline-end: 6rem;
+}
+
 .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
   overflow: visible;
   padding: 0;
@@ -14309,7 +14475,8 @@ button.cds--dropdown-text:focus {
 
 .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input {
   overflow: hidden;
-  padding: 2.0625rem 4rem 0.8125rem 1rem;
+  padding-block: 2.0625rem 0.8125rem;
+  padding-inline: 1rem 4rem;
   text-overflow: ellipsis;
   transition: none;
   white-space: nowrap;
@@ -14612,6 +14779,12 @@ button.cds--dropdown-text:focus {
   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 .cds--date-picker__input,
+.cds--date-picker--fluid--invalid .cds--date-picker-input__wrapper--slug .cds--date-picker__input,
+.cds--date-picker--fluid--warn .cds--date-picker-input__wrapper--slug .cds--date-picker__input {
+  padding-inline-end: 4rem;
+}
+
 .cds--multi-select .cds--list-box__field--wrapper {
   display: inline-flex;
   align-items: center;
@@ -15153,7 +15326,8 @@ 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],
+.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%);
   padding-inline-end: 7rem;
 }
@@ -15398,6 +15572,17 @@ button.cds--dropdown-text:focus {
   inset-block-start: 2.6875rem;
 }
 
+.cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug .cds--slug,
+.cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning .cds--slug {
+  inset-inline-end: 5.5rem;
+}
+
+.cds--number-input--fluid .cds--number__input-wrapper--slug input,
+.cds--number-input--fluid.cds--number-input--fluid--invalid .cds--number__input-wrapper--slug input[data-invalid],
+.cds--number-input--fluid .cds--number__input-wrapper--slug.cds--number__input-wrapper--warning input {
+  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%);
 }
@@ -15838,7 +16023,8 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--select--fluid .cds--select__arrow {
   block-size: 1rem;
-  inset-block-start: 2rem;
+  inset-block-start: 2.125rem;
+  inset-inline-end: 0.75rem;
 }
 
 .cds--select--fluid .cds--select__divider {
@@ -15939,6 +16125,15 @@ optgroup.cds--select-optgroup:disabled,
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--select--fluid .cds--select--slug .cds--slug {
+  inset-block-start: 2.625rem;
+  inset-inline-end: 2.5rem;
+}
+
+.cds--select--fluid .cds--select--slug .cds--select-input {
+  padding-inline-end: 4rem;
+}
+
 .cds--text-area {
   box-sizing: border-box;
   padding: 0;
@@ -16162,7 +16357,7 @@ optgroup.cds--select-optgroup:disabled,
   align-items: center;
   margin: 0;
   block-size: 1rem;
-  inline-size: calc(100% - 2rem);
+  inline-size: auto;
   inset-block-start: 0.8125rem;
   inset-inline-start: 1rem;
 }
@@ -16306,6 +16501,11 @@ optgroup.cds--select-optgroup: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%);
 }
 
+.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid ~ .cds--slug,
+.cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--warn ~ .cds--slug {
+  inset-inline-end: 1rem;
+}
+
 .cds--text-input--fluid.cds--text-input-wrapper {
   position: relative;
   background: var(--cds-field);
@@ -16371,8 +16571,8 @@ optgroup.cds--select-optgroup:disabled,
   border-block-end: none;
 }
 
-.cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
-.cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
+.cds--text-input--fluid .cds--text-input--invalid ~ .cds--text-input__divider,
+.cds--text-input--fluid .cds--text-input--warning ~ .cds--text-input__divider {
   display: block;
   border-style: solid;
   border-color: var(--cds-border-subtle);
@@ -16460,7 +16660,18 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--slug {
-  inset-block-start: 2.6875rem;
+  inset-block-start: 2.625rem;
+}
+
+.cds--text-input--fluid .cds--text-input--invalid ~ .cds--slug,
+.cds--text-input--fluid .cds--text-input--warning ~ .cds--slug {
+  inset-inline-end: 1rem;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input,
+.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--invalid,
+.cds--text-input--fluid .cds--text-input__field-wrapper--slug .cds--text-input--warning {
+  padding-inline-end: 2.5rem;
 }
 
 .cds--time-picker--fluid {
@@ -16539,7 +16750,7 @@ optgroup.cds--select-optgroup:disabled,
   padding-block-start: 1.875rem;
 }
 
-.cds--select--fluid:last-of-type .cds--select-input {
+.cds--time-picker--fluid .cds--select--fluid:last-of-type .cds--select-input {
   border-inline-end: 2px solid transparent;
 }
 
@@ -18140,6 +18351,10 @@ optgroup.cds--select-optgroup:disabled,
   padding: 0.9375rem 0;
 }
 
+.cds--actionable-notification__button-wrapper {
+  display: flex;
+}
+
 .cds--actionable-notification--toast .cds--actionable-notification__text-wrapper {
   padding: 0.9375rem 0 1.4375rem 0;
 }
@@ -19704,29 +19919,89 @@ span.cds--pagination__text.cds--pagination__items-count {
   transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--slider__thumb {
+.cds--slider__thumb-wrapper {
   position: absolute;
   z-index: 3;
+  block-size: 0.875rem;
+  inline-size: 0.875rem;
+  transform: translate(-50%, -50%);
+  --cds-tooltip-padding-inline: 0.5rem;
+  --cds-popover-offset: 0.5rem;
+}
+.cds--slider-container--rtl .cds--slider__thumb-wrapper {
+  transform: translate(50%, -50%);
+}
+
+.cds--slider__thumb-wrapper--lower,
+.cds--slider__thumb-wrapper--upper {
+  block-size: 24px;
+  inline-size: 16px;
+  --cds-popover-offset: var(--cds-popover-caret-height, 0.5rem);
+}
+
+.cds--slider__thumb-wrapper--lower {
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
+  transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
+}
+.cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
+  inset-inline-end: 0;
+  inset-inline-start: revert;
+  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower {
+  transform: translate(100%, -50%);
+}
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-content {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
+}
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--lower > .cds--popover > .cds--popover-caret {
+  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
+.cds--slider__thumb-wrapper--upper {
+  transform: translate(0, -50%);
+}
+.cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
+  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
+}
+.cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
+  inset-inline-start: 0;
+  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper {
+  transform: translate(0, -50%);
+}
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-content {
+  transform: translate(0, calc(-100% - var(--cds-popover-offset, 0rem)));
+}
+.cds--slider-container--rtl .cds--slider__thumb-wrapper--upper > .cds--popover > .cds--popover-caret {
+  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
+.cds--slider__thumb {
+  position: absolute;
   border-radius: 50%;
   background: var(--cds-layer-selected-inverse, #161616);
-  block-size: 0.875rem;
   box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-  inline-size: 0.875rem;
+  inset: 0;
   outline: none;
-  transform: translate(-50%, -50%);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background 110ms cubic-bezier(0.2, 0, 0.38, 0.9), box-shadow 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 .cds--slider__thumb:hover {
-  transform: translate(-50%, -50%) scale(1.4286);
+  transform: scale(1.4286);
 }
 .cds--slider__thumb:focus {
   background-color: var(--cds-interactive, #0f62fe);
   box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe), inset 0 0 0 3px var(--cds-layer);
-  transform: translate(-50%, -50%) scale(1.4286);
+  transform: scale(1.4286);
 }
 .cds--slider__thumb:active {
   box-shadow: inset 0 0 0 2px var(--cds-interactive, #0f62fe);
-  transform: translate(-50%, -50%) scale(1.4286);
+  transform: scale(1.4286);
 }
 
 .cds--slider__thumb-icon {
@@ -19740,14 +20015,12 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--slider__thumb--lower,
 .cds--slider__thumb--upper {
-  display: block;
+  position: absolute;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
   border-radius: unset;
   background-color: transparent;
-  block-size: 24px;
   box-shadow: none;
-  inline-size: 16px;
-  transform: translate(-100%, -50%);
+  inset: 0;
   transition: none;
 }
 .cds--slider__thumb--lower::before,
@@ -19764,7 +20037,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 .cds--slider__thumb--lower:hover,
 .cds--slider__thumb--upper:hover {
-  transform: translate(-100%, -50%);
+  transform: none;
 }
 .cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
 .cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
@@ -19773,13 +20046,13 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider__thumb--lower:active,
 .cds--slider__thumb--upper:active {
   box-shadow: none;
-  transform: translate(-100%, -50%);
+  transform: none;
 }
 .cds--slider__thumb--lower:focus,
 .cds--slider__thumb--upper:focus {
   background-color: transparent;
   box-shadow: none;
-  transform: translate(-100%, -50%);
+  transform: none;
 }
 .cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
 .cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
@@ -19797,20 +20070,14 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slider__thumb--upper {
-  transform: translate(0, -50%);
+  transform: none;
 }
 .cds--slider__thumb--upper::before {
   inset-inline-end: auto;
   inset-inline-start: 0;
 }
-.cds--slider__thumb--upper:hover {
-  transform: translate(0, -50%);
-}
-.cds--slider__thumb--upper:active {
-  transform: translate(0, -50%);
-}
-.cds--slider__thumb--upper:focus {
-  transform: translate(0, -50%);
+.cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
+  transform: none;
 }
 
 .cds--slider__input {
@@ -19821,6 +20088,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: relative;
 }
 
+.cds--slider-text-input-wrapper--hidden {
+  display: none;
+}
+
 .cds--slider-text-input,
 .cds-slider-text-input {
   -moz-appearance: textfield;
@@ -19835,11 +20106,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: none;
 }
 
-.cds--slider-text-input--hidden {
-  display: none;
-}
-
-.cds--slider__thumb:focus ~ .cds--slider__filled-track {
+.cds--slider__thumb:focus ~ .cds--slider__filled-track,
+.cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
   background-color: var(--cds-border-interactive, #0f62fe);
 }
 
@@ -19981,15 +20249,17 @@ span.cds--pagination__text.cds--pagination__items-count {
   pointer-events: none;
 }
 
+.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
+  inset-inline-start: 50%;
+}
 .cds--slider-container.cds--skeleton .cds--slider__thumb {
   cursor: default;
-  inset-inline-start: 50%;
   pointer-events: none;
 }
-.cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
+.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
   inset-inline-start: 0;
 }
-.cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
+.cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
   inset-inline-start: 100%;
 }
 
@@ -20287,11 +20557,11 @@ 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);
-  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;
@@ -21529,6 +21799,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,