@carbon/charts 1.13.6 → 1.13.8

package/dist/demo/styles.css

@@ -5140,6 +5140,9 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
 }
 
 .cds--chart-holder {
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -5219,6 +5222,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
   --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-gradient: #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -5526,6 +5538,9 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
 }
 
 .cds--chart-holder[data-carbon-theme=g10] {
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -5605,6 +5620,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
   --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-gradient: #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -5912,6 +5936,9 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
 }
 
 .cds--chart-holder[data-carbon-theme=g90] {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -5991,6 +6018,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
   --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;
@@ -6298,6 +6334,9 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
 }
 
 .cds--chart-holder[data-carbon-theme=g100] {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -6377,6 +6416,15 @@ div.cds--cc--legend.clickable div.legend-item:not(.additional):hover div.checkbo
   --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;
@@ -9350,8 +9398,11 @@ em {
 }
 
 .cds--white {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -9431,6 +9482,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;
@@ -9524,8 +9582,11 @@ em {
 }
 
 .cds--g10 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -9605,6 +9666,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;
@@ -9698,8 +9766,10 @@ em {
 }
 
 .cds--g90 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -9779,6 +9849,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;
@@ -9871,8 +9948,10 @@ em {
 }
 
 .cds--g100 {
-  background: var(--cds-background);
+  background-color: var(--cds-background);
   color: var(--cds-text-primary);
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -9952,6 +10031,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;
@@ -10127,29 +10213,13 @@ em {
 .cds--accordion__heading::-moz-focus-inner {
   border: 0;
 }
-.cds--accordion__heading:hover::before, .cds--accordion__heading:focus::before {
-  position: absolute;
-  block-size: calc(100% + 2px);
-  content: "";
-  inline-size: 100%;
-  inset-block-start: -1px;
-  inset-inline-start: 0;
-}
-.cds--accordion__heading:hover::before {
+.cds--accordion__heading:hover {
   background-color: var(--cds-layer-hover);
 }
 .cds--accordion__heading:focus {
+  box-shadow: 0 -1px 0 0 var(--cds-focus, #0f62fe), inset 0 1px 0 0 var(--cds-focus, #0f62fe), inset 2px 0 0 0 var(--cds-focus, #0f62fe), 0 1px 0 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 0 var(--cds-focus, #0f62fe), inset -2px 0 0 0 var(--cds-focus, #0f62fe);
   outline: none;
 }
-.cds--accordion__heading:focus::before {
-  box-sizing: border-box;
-  border: 2px solid var(--cds-focus, #0f62fe);
-}
-@media screen and (prefers-contrast) {
-  .cds--accordion__heading:focus::before {
-    border-style: dotted;
-  }
-}
 
 .cds--accordion__heading[disabled] {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -14663,7 +14733,7 @@ fieldset[disabled] .cds--form__helper-text {
   block-size: 1.5rem;
   cursor: pointer;
   inline-size: 1.5rem;
-  inset-inline-end: 1rem;
+  inset-inline-end: 0.75rem;
   outline: none;
   transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -19141,11 +19211,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;
@@ -19933,6 +20006,7 @@ button.cds--dropdown-text:focus {
 .cds--loading--small {
   block-size: 1rem;
   inline-size: 1rem;
+  line-height: 1rem;
 }
 .cds--loading--small circle {
   stroke-width: 16;
@@ -20150,7 +20224,7 @@ button.cds--dropdown-text:focus {
   display: grid;
   align-items: center;
   background-color: var(--cds-layer);
-  gap: 0.75rem 1rem;
+  gap: 0.75rem 0;
   grid-auto-rows: auto;
   grid-template-columns: 1fr auto;
   margin-block-end: 0.5rem;
@@ -20180,14 +20254,69 @@ button.cds--dropdown-text:focus {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.cds--file__selected-file .cds--file-filename-container-wrap {
+  margin-block-start: 1px;
+  max-inline-size: 17.5rem;
+  padding-inline-start: 1rem;
+}
+@media (max-width: 410px) {
+  .cds--file__selected-file .cds--file-filename-container-wrap {
+    max-inline-size: 13.5rem;
+  }
+}
+.cds--file__selected-file .cds--file-filename-container-wrap-invalid {
+  max-inline-size: 15.5rem;
+}
+.cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
+  inline-size: -webkit-fill-available;
+  padding-inline-start: 1rem;
+}
+@-moz-document url-prefix() {
+  .cds--file__selected-file .cds--file-filename-container-wrap-invalid .cds--file-filename-tooltip {
+    inline-size: -moz-available;
+  }
+}
+.cds--file__selected-file .cds--file-filename-tooltip {
+  inline-size: -webkit-fill-available;
+}
+@-moz-document url-prefix() {
+  .cds--file__selected-file .cds--file-filename-tooltip {
+    inline-size: -moz-available;
+  }
+}
+.cds--file__selected-file .cds--file-filename-button {
+  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);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  inline-size: -webkit-fill-available;
+  outline: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@-moz-document url-prefix() {
+  .cds--file__selected-file .cds--file-filename-button {
+    inline-size: -moz-available;
+  }
+}
+.cds--file__selected-file .cds--file-filename-button:focus {
+  outline: revert;
+}
 
 .cds--file__selected-file--md {
-  gap: 0.5rem 1rem;
+  gap: 0.5rem 0;
   min-block-size: 2.5rem;
 }
 
 .cds--file__selected-file--sm {
-  gap: 0.25rem 1rem;
+  gap: 0.25rem 0;
   min-block-size: 2rem;
 }
 
@@ -20277,14 +20406,26 @@ button.cds--dropdown-text:focus {
   align-items: center;
   justify-content: center;
   min-inline-size: 1.5rem;
-  padding-inline-end: 1rem;
+  padding-inline-end: 0.75rem;
 }
 .cds--file__state-container .cds--loading__svg {
   stroke: var(--cds-icon-primary, #161616);
 }
 
+.cds--file__state-container .cds--file-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background-color: transparent;
+  block-size: 1rem;
+  inline-size: 1.5rem;
+}
+
 .cds--file__state-container .cds--file-complete {
   fill: var(--cds-interactive, #0f62fe);
+  inline-size: 1.5rem;
 }
 .cds--file__state-container .cds--file-complete:focus {
   outline: 1px solid var(--cds-focus, #0f62fe);
@@ -20661,6 +20802,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;
@@ -23191,8 +23336,8 @@ optgroup.cds--select-optgroup:disabled,
   font-weight: 400;
   grid-column: 1/-1;
   grid-row: 2/-2;
-  margin-block-end: 3rem;
   overflow-y: auto;
+  padding-block-end: 3rem;
   padding-block-start: 0.5rem;
   padding-inline-end: 1rem;
   padding-inline-start: 1rem;
@@ -23343,20 +23488,32 @@ optgroup.cds--select-optgroup:disabled,
   }
 }
 
+.cds--modal-scroll-content {
+  border-block-end: 2px solid transparent;
+}
+
 .cds--modal-scroll-content > *:last-child {
-  padding-block-end: 2rem;
+  padding-block-end: 1.5rem;
 }
 
 .cds--modal-content--overflow-indicator {
+  position: absolute;
+  background: var(--cds-layer);
+  block-size: 3rem;
+  grid-column: 1/-1;
+  grid-row: 2/-2;
+  inline-size: calc(100% - 1rem);
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+.cds--modal-content--overflow-indicator::before {
   position: absolute;
   background-image: linear-gradient(to bottom, transparent, var(--cds-layer));
   block-size: 2rem;
   content: "";
-  grid-column: 1/-1;
-  grid-row: 2/-2;
   inline-size: 100%;
-  inset-block-end: 3rem;
-  inset-inline-start: 0;
+  inset-block-start: -32px;
   pointer-events: none;
 }
 
@@ -23369,7 +23526,6 @@ optgroup.cds--select-optgroup:disabled,
 }
 .cds--modal-content:focus ~ .cds--modal-content--overflow-indicator {
   margin: 0 2px 2px;
-  inline-size: calc(100% - 4px);
 }
 
 @media screen and (-ms-high-contrast: active) {
@@ -25833,18 +25989,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);
@@ -25854,9 +26013,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;
@@ -25914,10 +26070,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;
@@ -25936,7 +26180,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,
@@ -25956,7 +26200,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%;
 }
 
@@ -26025,15 +26268,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;
@@ -26074,6 +26326,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) {
@@ -26096,6 +26354,317 @@ 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.cds--slug__button--mini::after,
+.cds--slug__button.cds--slug__button--2xs::after {
+  position: absolute;
+  block-size: 1.5rem;
+  content: "";
+  inline-size: 1.5rem;
+  opacity: 0;
+}
+
+.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--slug-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--toggletip > .cds--popover > .cds--popover-caret {
+  background: var(--cds-border-subtle);
+}
+
+.cds--slug.cds--slug--enabled .cds--toggletip-content {
+  max-inline-size: 20.875rem;
+  padding-block-end: 5rem;
+  padding-block-start: 2rem;
+  padding-inline: 2rem;
+}
+
+.cds--slug.cds--slug--enabled .cds--slug-actions {
+  position: absolute;
+  justify-content: flex-end;
+  background: var(--cds-layer-accent);
+  border-end-end-radius: 0.9375rem;
+  border-end-start-radius: 0.9375rem;
+  column-gap: 0;
+  inline-size: 100%;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+.cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn:focus {
+  border-color: var(--cds-focus, #0f62fe);
+  box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff);
+}
+
+.cds--slug.cds--slug--enabled .cds--slug-actions .cds--btn--primary {
+  order: 1;
+  border-end-end-radius: 1rem;
+}
+
 .cds--stack-horizontal {
   display: inline-grid;
   column-gap: var(--cds-stack-gap, 0);
@@ -28499,7 +29068,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 {
@@ -29515,7 +30084,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 {
@@ -29961,6 +30530,9 @@ a.cds--side-nav__link--current::before {
 }
 
 html {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -30040,6 +30612,15 @@ html {
   --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;
@@ -30402,6 +30983,9 @@ html {
 }
 
 html[data-carbon-theme=white] {
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -30481,6 +31065,15 @@ html[data-carbon-theme=white] {
   --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-gradient: #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -30843,6 +31436,9 @@ html[data-carbon-theme=white] {
 }
 
 html[data-carbon-theme=g10] {
+  --cds-ai-gradient-end: rgba(255, 255, 255, 0);
+  --cds-ai-gradient-start-01: rgba(242, 244, 248, 0.5);
+  --cds-ai-gradient-start-02: rgba(237, 245, 255, 0.5);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -30922,6 +31518,15 @@ html[data-carbon-theme=g10] {
   --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-gradient: #161616 linear-gradient(135deg, #a8a8a8 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-gradient-hover: #161616 linear-gradient(135deg, #d1d1d1 0%, rgba(255, 255, 255, 0) 100%);
+  --cds-slug-hollow-hover: #474747;
   --cds-support-caution-major: #ff832b;
   --cds-support-caution-minor: #f1c21b;
   --cds-support-caution-undefined: #8a3ffc;
@@ -31284,6 +31889,9 @@ html[data-carbon-theme=g10] {
 }
 
 html[data-carbon-theme=g90] {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -31363,6 +31971,15 @@ html[data-carbon-theme=g90] {
   --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;
@@ -31725,6 +32342,9 @@ html[data-carbon-theme=g90] {
 }
 
 html[data-carbon-theme=g100] {
+  --cds-ai-gradient-end: rgba(38, 38, 38, 0);
+  --cds-ai-gradient-start-01: rgba(208, 226, 255, 0.2);
+  --cds-ai-gradient-start-02: transparent;
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -31804,6 +32424,15 @@ html[data-carbon-theme=g100] {
   --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;