@carbon/ibm-products 2.13.0 → 2.15.0

package/css/index-full-carbon.css

@@ -5903,6 +5903,15 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 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;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -8104,10 +8113,15 @@ button.c4p--add-select__global-filter-toggle--open {
   color: var(--cds-text-inverse, #ffffff);
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-list {
+  display: flex;
+  flex-direction: column;
   margin-bottom: 0.5rem;
 }
-.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item,
-.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item .cds--tag {
+.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--tag .cds--tag {
+  background-color: var(--cds-background-inverse-hover, #474747);
+}
+.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default,
+.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__tag-item.c4p--tag-set-overflow__tag-item--default .cds--tag {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -9536,6 +9550,15 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #333333;
   --cds-skeleton-element: #525252;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 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;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -9944,6 +9967,15 @@ button.c4p--add-select__global-filter-toggle--open {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 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;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -12089,7 +12121,28 @@ button.c4p--add-select__global-filter-toggle--open {
   justify-content: center;
 }
 
-.c4p--datagrid .c4p--datagrid__row-size__row-settings-trigger--open.cds--btn--ghost {
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td,
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td {
+  align-items: flex-start;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center td.c4p--datagrid__actions-column-cell,
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top td.c4p--datagrid__actions-column-cell {
+  padding-left: 0.5rem;
+}
+
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center th .cds--table-header-label,
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-top th .cds--table-header-label {
+  align-items: flex-start;
+}
+
+.c4p--datagrid table.cds--data-table--xl.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: 0.75rem;
+}
+
+.c4p--datagrid__row-size__row-settings-trigger--open.cds--btn--ghost {
   background-color: var(--cds-layer-02, #ffffff);
 }
 
@@ -12734,7 +12787,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background-color: var(--cds-layer-hover);
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active::before {
+.c4p--datagrid .c4p--datagrid__grid-container-active::before {
   position: absolute;
   z-index: 2;
   bottom: 0;
@@ -12745,7 +12798,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   content: "";
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active::after {
+.c4p--datagrid .c4p--datagrid__grid-container-active::after {
   position: absolute;
   z-index: 2;
   right: 0;
@@ -12756,7 +12809,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
   content: "";
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active .cds--data-table-content::before {
+.c4p--datagrid .c4p--datagrid__grid-container-active .cds--data-table-content::before {
   position: absolute;
   z-index: 2;
   top: 0;
@@ -12767,12 +12820,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background-color: var(--cds-link-inverse, #78a9ff);
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::before,
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active.c4p--datagrid__grid-container-grid-active--without-toolbar::after {
+.c4p--datagrid .c4p--datagrid__grid-container-active.c4p--datagrid__grid-container-active--without-toolbar::before,
+.c4p--datagrid .c4p--datagrid__grid-container-active.c4p--datagrid__grid-container-active--without-toolbar::after {
   height: calc(100% - 2px - var(--c4p--datagrid--grid-header-height));
 }
 
-.c4p--datagrid .c4p--datagrid__grid-container-grid-active .c4p--datagrid__table-container {
+.c4p--datagrid .c4p--datagrid__grid-container-active .c4p--datagrid__table-container {
   outline: 2px solid var(--cds-link-inverse, #78a9ff);
   outline-offset: -2px;
 }
@@ -14647,7 +14700,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .cds--side-nav__item--large {
-  block-size: 3rem;
+  block-size: auto;
 }
 
 .cds--side-nav__divider {
@@ -15744,6 +15797,7 @@ a.cds--side-nav__link--current::before {
 .c4p--checklist__header {
   display: flex;
   padding: 1rem;
+  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
   background-color: var(--cds-layer-01, #f4f4f4);
   gap: 0.5rem;
 }
@@ -15826,6 +15880,10 @@ a.cds--side-nav__link--current::before {
 }
 
 .c4p--checklist__button.cds--btn--primary {
+  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);
   max-width: none;
   min-height: auto;
   /* stylelint-disable-next-line declaration-property-value-disallowed-list */
@@ -15856,11 +15914,6 @@ a.cds--side-nav__link--current::before {
   text-decoration: underline;
 }
 
-.c4p--checklist__button--error {
-  /* stylelint-disable-next-line declaration-no-important */
-  color: var(--cds-text-error, #da1e28) !important;
-}
-
 .c4p--checklist__content-outer {
   overflow: hidden;
 }
@@ -15888,6 +15941,10 @@ a.cds--side-nav__link--current::before {
   border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 
+.c4p--checklist__list-group:first-of-type {
+  border-top: none;
+}
+
 .c4p--checklist__list-title {
   font-size: var(--cds-body-short-01-font-size, 0.875rem);
   font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -15911,9 +15968,14 @@ a.cds--side-nav__link--current::before {
 }
 
 .c4p--checklist__icon {
-  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  /* stylelint-disable-next-line */
   margin: 0.0625rem 0.5rem 0 0;
-  color: var(--cds-link-primary, #0f62fe);
+  color: var(--cds-icon-primary, #161616);
+}
+
+.c4p--checklist__icon--checked,
+.c4p--checklist__icon--indeterminate {
+  color: var(--cds-interactive, #0f62fe);
 }
 
 .c4p--checklist__icon--error {
@@ -15936,9 +15998,7 @@ a.cds--side-nav__link--current::before {
   text-overflow: ellipsis;
 }
 
-.c4p--checklist__label--checked,
-.c4p--checklist__label--disabled,
-.c4p--checklist__label--error {
+.c4p--checklist__label--disabled {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
@@ -15949,7 +16009,7 @@ a.cds--side-nav__link--current::before {
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   padding: 0.5rem 1rem;
-  border-top: 1px solid var(--cds-border-subtle);
+  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
 }
 
 html,
@@ -16906,7 +16966,7 @@ em {
   unicode-range: "U+0000", "U+000D", "U+0020-007E", "U+00A0-00A3", "U+00A4-00FF", "U+0131", "U+0152-0153", "U+02C6", "U+02DA", "U+02DC", "U+2013-2014", "U+2018-201A", "U+201C-201E", "U+2020-2022", "U+2026", "U+2030", "U+2039-203A", "U+2044", "U+2074", "U+20AC", "U+2122", "U+2212", "U+FB01-FB02";
 }
 .cds--white {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
@@ -16987,6 +17047,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
+  --cds-slug-background: #525252;
+  --cds-slug-background-hover: #6f6f6f;
+  --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -17080,7 +17147,7 @@ em {
 }
 
 .cds--g10 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
@@ -17161,6 +17228,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.3);
   --cds-skeleton-background: #e8e8e8;
   --cds-skeleton-element: #c6c6c6;
+  --cds-slug-background: #525252;
+  --cds-slug-background-hover: #6f6f6f;
+  --cds-slug-callout-aura-end: rgba(255, 255, 255, 0);
+  --cds-slug-callout-aura-start: rgba(237, 245, 255, 0.6);
+  --cds-slug-callout-gradient-bottom: rgba(224, 224, 224, 0.85);
+  --cds-slug-callout-gradient-top: rgba(244, 244, 244, 0.85);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -17254,7 +17328,7 @@ em {
 }
 
 .cds--g90 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
@@ -17335,6 +17409,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #333333;
   --cds-skeleton-element: #525252;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -17427,7 +17508,7 @@ em {
 }
 
 .cds--g100 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
@@ -17508,6 +17589,13 @@ em {
   --cds-shadow: rgba(0, 0, 0, 0.8);
   --cds-skeleton-background: #292929;
   --cds-skeleton-element: #393939;
+  --cds-slug-background: #c6c6c6;
+  --cds-slug-background-hover: #e0e0e0;
+  --cds-slug-callout-aura-end: rgba(22, 22, 22, 0);
+  --cds-slug-callout-aura-start: rgba(208, 226, 255, 0.2);
+  --cds-slug-callout-gradient-bottom: rgba(38, 38, 38, 0.85);
+  --cds-slug-callout-gradient-top: rgba(22, 22, 22, 0.85);
+  --cds-slug-hollow-hover: #b5b5b5;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #a56eff;
@@ -24951,11 +25039,14 @@ th .cds--table-sort__flex {
 }
 
 .cds--date-picker-input__wrapper {
-  position: relative;
   display: flex;
   align-items: center;
 }
 
+.cds--date-picker-input__wrapper span {
+  position: relative;
+}
+
 .cds--date-picker.cds--date-picker--simple .cds--date-picker__input,
 .cds--date-picker.cds--date-picker--simple .cds--label {
   inline-size: 7.5rem;
@@ -26538,6 +26629,10 @@ button.cds--dropdown-text:focus {
   white-space: nowrap;
 }
 
+.cds--date-picker--fluid .cds--date-picker-input__wrapper > span {
+  inline-size: 100%;
+}
+
 .cds--date-picker--fluid .cds--date-picker-input__wrapper .cds--date-picker__input {
   padding: 2rem 1rem 0.8125rem;
   background: transparent;
@@ -31721,18 +31816,21 @@ span.cds--pagination__text.cds--pagination__items-count {
   position: relative;
   display: flex;
   align-items: center;
+  gap: 1rem;
   user-select: none;
 }
 
 .cds--slider {
   position: relative;
   padding: 1rem 0;
-  margin: 0 1rem;
   cursor: pointer;
   inline-size: 100%;
   max-inline-size: 40rem;
   min-inline-size: 12.5rem;
 }
+.cds--slider-container--two-handles .cds--slider {
+  margin-inline: 0.25rem;
+}
 
 .cds--slider__range-label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -31742,9 +31840,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   color: var(--cds-text-primary, #161616);
   white-space: nowrap;
 }
-.cds--slider__range-label:last-of-type {
-  margin-inline-end: 1rem;
-}
 
 .cds--slider__track {
   position: absolute;
@@ -31802,10 +31897,98 @@ span.cds--pagination__text.cds--pagination__items-count {
   transform: translate(-50%, -50%) scale(1.4286);
 }
 
+.cds--slider__thumb-icon {
+  fill: var(--cds-layer-selected-inverse, #161616);
+}
+
+.cds--slider__thumb-icon--focus {
+  display: none;
+  fill: var(--cds-interactive, #0f62fe);
+}
+
+.cds--slider__thumb--lower,
+.cds--slider__thumb--upper {
+  display: block;
+  /* 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%);
+  transition: none;
+}
+.cds--slider__thumb--lower::before,
+.cds--slider__thumb--upper::before {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  background: var(--cds-background, #ffffff);
+  block-size: 0.125rem;
+  content: "";
+  inline-size: 0.375rem;
+  inset-block-start: calc(50% - 0.0625rem);
+  inset-inline-end: 0;
+}
+.cds--slider__thumb--lower:hover,
+.cds--slider__thumb--upper:hover {
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:hover .cds--slider__thumb-icon,
+.cds--slider__thumb--upper:hover .cds--slider__thumb-icon {
+  fill: var(--cds-text-secondary, #525252);
+}
+.cds--slider__thumb--lower:active,
+.cds--slider__thumb--upper:active {
+  box-shadow: none;
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:focus,
+.cds--slider__thumb--upper:focus {
+  background-color: transparent;
+  box-shadow: none;
+  transform: translate(-100%, -50%);
+}
+.cds--slider__thumb--lower:focus .cds--slider__thumb-icon,
+.cds--slider__thumb--upper:focus .cds--slider__thumb-icon {
+  display: none;
+  fill: var(--cds-interactive, #0f62fe);
+}
+.cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus,
+.cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus {
+  display: block;
+}
+
+.cds--slider__thumb--lower:focus::before,
+.cds--slider__thumb--upper:focus::before {
+  inline-size: 100%;
+}
+
+.cds--slider__thumb--upper {
+  transform: translate(0, -50%);
+}
+.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__input {
   display: none;
 }
 
+.cds--slider-text-input-wrapper {
+  position: relative;
+}
+
 .cds--slider-text-input,
 .cds-slider-text-input {
   -moz-appearance: textfield;
@@ -31824,7 +32007,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--slider__thumb:focus ~ .cds--slider__filled-track {
-  background-color: var(--cds-interactive, #0f62fe);
+  background-color: var(--cds-border-interactive, #0f62fe);
 }
 
 .cds--slider-text-input.cds--text-input--invalid,
@@ -31844,7 +32027,6 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--slider__validation-msg.cds--form-requirement {
   display: block;
   overflow: visible;
-  margin-block-start: 0;
   max-block-size: 100%;
 }
 
@@ -31913,15 +32095,24 @@ span.cds--pagination__text.cds--pagination__items-count {
   cursor: default;
 }
 
-.cds--slider--readonly .cds--slider__thumb {
+.cds--slider-container--readonly .cds--slider__thumb {
   block-size: 0;
   inline-size: 0;
 }
+.cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
+  display: none;
+}
 
-.cds--slider--readonly ~ .cds--slider-text-input {
+.cds--slider-container--readonly .cds--slider-text-input {
   background-color: transparent;
 }
 
+.cds--slider__status-msg.cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-block-size: 100%;
+}
+
 .cds--slider-container.cds--skeleton .cds--slider__range-label {
   position: relative;
   padding: 0;
@@ -31962,6 +32153,12 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-inline-start: 50%;
   pointer-events: none;
 }
+.cds--slider-container.cds--skeleton .cds--slider__thumb--lower {
+  inset-inline-start: 0;
+}
+.cds--slider-container.cds--skeleton .cds--slider__thumb--upper {
+  inset-inline-start: 100%;
+}
 
 /* stylelint-disable */
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -31984,6 +32181,285 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 /* stylelint-enable */
+.cds--slug {
+  display: flex;
+}
+
+.cds--slug .cds--slug__button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--cds-text-inverse, #ffffff);
+  font-weight: 600;
+  transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+.cds--slug .cds--slug__button--mini {
+  height: 1rem;
+  width: 1rem;
+  font-size: 0.5625rem;
+  line-height: 0.75rem;
+  background: var(--cds-slug-background, #525252);
+}
+.cds--slug .cds--slug__button--2xs {
+  height: 1.25rem;
+  width: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--cds-slug-background, #525252);
+}
+.cds--slug .cds--slug__button--xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--sm {
+  height: 2rem;
+  width: 2rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--md {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--lg {
+  height: 3rem;
+  width: 3rem;
+  font-size: 1rem;
+  line-height: 1.3125rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+.cds--slug .cds--slug__button--xl {
+  height: 4rem;
+  width: 4rem;
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  background: var(--cds-slug-gradient, #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%));
+}
+
+.cds--slug .cds--slug__button:focus {
+  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
+  outline: none;
+}
+
+.cds--slug__text {
+  position: relative;
+  z-index: 1;
+}
+
+.cds--slug__button::before {
+  position: absolute;
+  background: var(--cds-slug-gradient-hover, #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%));
+  block-size: 100%;
+  content: "";
+  inline-size: 100%;
+  opacity: 0;
+  transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+.cds--slug__button:hover::before {
+  opacity: 1;
+}
+
+.cds--slug .cds--slug__button:focus::before {
+  block-size: calc(100% - 6px);
+  inline-size: calc(100% - 6px);
+}
+
+.cds--slug__button.cds--slug__button--mini::before,
+.cds--slug__button.cds--slug__button--2xs::before {
+  background: var(--cds-slug-background-hover, #6f6f6f);
+}
+
+.cds--slug__button.cds--slug__button--mini:focus,
+.cds--slug__button.cds--slug__button--2xs:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
+}
+
+.cds--slug__button.cds--slug__button--mini:focus::before,
+.cds--slug__button.cds--slug__button--2xs:focus::before {
+  block-size: calc(100% - 4px);
+  inline-size: calc(100% - 4px);
+}
+
+.cds--slug__button--hollow.cds--slug__button--sm,
+.cds--slug__button--hollow.cds--slug__button--md,
+.cds--slug__button--hollow.cds--slug__button--lg,
+.cds--slug__button--hollow.cds--slug__button--xl {
+  block-size: 1.5rem;
+  font-size: 0.75rem;
+  inline-size: 1.5rem;
+  line-height: 1rem;
+}
+
+.cds--slug__button--hollow::before {
+  display: none;
+}
+
+.cds--slug .cds--slug__button--hollow {
+  border: 1px solid var(--cds-border-inverse, #161616);
+  background: transparent;
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--slug__button--hollow:hover {
+  border-color: var(--cds-slug-hollow-hover, #474747);
+  color: var(--cds-slug-hollow-hover, #474747);
+}
+
+.cds--slug__button--hollow:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+}
+
+.cds--slug .cds--slug__button--inline {
+  border: 1px solid transparent;
+  border-radius: 0.0625rem;
+  background: transparent;
+  block-size: initial;
+  color: var(--cds-text-primary, #161616);
+  font-size: 0.875rem;
+  inline-size: initial;
+  line-height: initial;
+  padding-inline: 0.25rem;
+}
+
+.cds--slug__button--inline::before {
+  display: none;
+}
+
+.cds--slug .cds--slug__button--inline:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: none;
+}
+
+.cds--slug .cds--slug__button--inline:hover {
+  border-color: var(--cds-icon-secondary, #525252);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--slug .cds--slug__button--inline:focus:hover {
+  border-color: var(--cds-focus, #0f62fe);
+}
+
+.cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
+  background: var(--cds-icon-secondary, #525252);
+}
+
+.cds--slug--hollow .cds--slug__button--inline:hover .cds--slug__text::before {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--cds-icon-secondary, #525252);
+}
+
+.cds--slug__button--inline .cds--slug__text {
+  padding-inline-start: 0.5rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--lg .cds--slug__text {
+  padding-inline-start: 0.75rem;
+}
+
+.cds--slug__button--inline .cds--slug__text::before {
+  position: absolute;
+  display: inline-block;
+  background: var(--cds-icon-primary, #161616);
+  block-size: 0.25rem;
+  content: "";
+  inline-size: 0.25rem;
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  opacity: 1;
+  transform: translateY(-50%);
+  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
+}
+
+.cds--slug--hollow .cds--slug__text::before {
+  background: transparent;
+  block-size: 0.375rem;
+  box-shadow: inset 0 0 0 1px var(--cds-icon-primary, #161616);
+  inline-size: 0.375rem;
+}
+
+.cds--slug--hollow .cds--slug__button--sm .cds--slug__text,
+.cds--slug--hollow .cds--slug__button--md .cds--slug__text {
+  padding-inline-start: 0.5625rem;
+}
+
+.cds--slug__button--lg .cds--slug__text::before,
+.cds--slug--hollow .cds--slug__button--lg .cds--slug__text::before {
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--mini,
+.cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--2xs,
+.cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--xs,
+.cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
+.cds--slug__button--inline.cds--slug__button--sm,
+.cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
+  font-size: 0.75rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--lg,
+.cds--slug__button--inline.cds--slug__button--xl {
+  font-size: 1rem;
+}
+
+.cds--slug .cds--slug__button--inline-with-content {
+  border: 1px solid var(--cds-border-inverse, #161616);
+  padding-block: 0.125rem;
+  padding-inline: 0.5rem;
+}
+
+.cds--slug__button--inline-with-content .cds--slug__additional-text {
+  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-weight: var(--cds-body-compact-02-font-weight, 400);
+  line-height: var(--cds-body-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  padding-inline-start: 0.25rem;
+}
+
+.cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
+  font-size: 0.875rem;
+}
+
+.cds--slug .cds--slug__button--inline-with-content:focus {
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
+}
+
+.cds--slug.cds--slug--hollow .cds--toggletip-content {
+  row-gap: 0;
+}
+
+.cds--slug.cds--slug--enabled .cds--popover-content {
+  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;
+}
+
+.cds--slug.cds--slug--enabled .cds--popover-caret {
+  background: var(--cds-border-subtle);
+}
+
+.cds--slug.cds--slug--enabled .cds--toggletip-content {
+  padding-block-end: 5rem;
+  padding-block-start: 2rem;
+  padding-inline: 2rem;
+}
+
 .cds--stack-horizontal {
   display: inline-grid;
   column-gap: var(--cds-stack-gap, 0);
@@ -34387,7 +34863,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--side-nav__item--large {
-  block-size: 3rem;
+  block-size: auto;
 }
 
 .cds--side-nav__divider {
@@ -35403,7 +35879,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--side-nav__item--large {
-  block-size: 3rem;
+  block-size: auto;
 }
 
 .cds--side-nav__divider {