@carbon/ibm-products 1.17.0 → 1.18.0

package/css/index-full-carbon.css

@@ -983,20 +983,20 @@ em {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--snippet__icon {
     fill: ButtonText;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--snippet--inline:focus {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--snippet--single,
 .bx--snippet--multi {
     outline: 1px solid transparent;
@@ -2729,14 +2729,14 @@ em {
   box-shadow: none;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--btn:focus {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]):not([fill=none]),
 .bx--btn--ghost.bx--btn--icon-only .bx--btn__icon {
     fill: ButtonText;
@@ -3265,13 +3265,13 @@ em {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--modal-close__icon {
     fill: ButtonText;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--modal-close:focus {
     color: Highlight;
     outline: 1px solid Highlight;
@@ -4058,7 +4058,7 @@ fieldset[disabled] .bx--form__helper-text {
   background: transparent;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--text-input--password__visibility,
 .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg,
 .bx--btn.bx--btn--icon-only.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:hover svg {
@@ -5190,14 +5190,14 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
   white-space: nowrap;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tabs--scrollable__nav-item .bx--tabs__nav-item--selected .bx--tabs--scrollable__nav-item--selected {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link {
     color: GrayText;
     fill: GrayText;
@@ -7723,7 +7723,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--overflow-menu:focus,
 .bx--overflow-menu-options__btn:focus {
     color: Highlight;
@@ -7731,7 +7731,7 @@ a.bx--overflow-menu-options__btn::before {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--overflow-menu svg {
     fill: ButtonText;
   }
@@ -9952,7 +9952,7 @@ a.bx--overflow-menu-options__btn::before {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tooltip__trigger svg,
 .bx--tooltip__trigger:hover svg,
 .bx--tooltip__trigger:focus svg {
@@ -9960,20 +9960,20 @@ a.bx--overflow-menu-options__btn::before {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tooltip__trigger:focus svg {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tooltip {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--assistive-text {
     outline: 1px solid transparent;
   }
@@ -12484,7 +12484,7 @@ a.bx--side-nav__link--current::before {
   fill: #525252;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--side-nav__icon > svg,
 .bx--side-nav a.bx--header__menu-item:hover .bx--header__menu-arrow,
 .bx--side-nav a.bx--header__menu-item:focus .bx--header__menu-arrow,
@@ -13184,14 +13184,9 @@ a.bx--side-nav__link--current::before {
   content: "";
   transform: scale(0.5);
 }
-@media screen and (-ms-high-contrast: active) {
-  .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
-    background-color: WindowText;
-  }
-}
-@media screen and (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
-    border: 2px solid WindowText;
+    fill: ButtonText;
   }
 }
 
@@ -13899,13 +13894,13 @@ a.bx--side-nav__link--current::before {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--file__selected-file {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--file__state-container .bx--file-close svg path {
     fill: ButtonText;
   }
@@ -14256,7 +14251,7 @@ a.bx--side-nav__link--current::before {
   display: none;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
     fill: ButtonText;
   }
@@ -14333,6 +14328,12 @@ a.bx--side-nav__link--current::before {
   margin-right: var(--cds-spacing-03, 0.5rem);
 }
 
+.c4p--add-select__sub-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
 .c4p--add-select__sidebar-header {
   display: flex;
   padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
@@ -15735,20 +15736,20 @@ button.c4p--add-select__global-filter-toggle {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tag {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tag__close-icon svg,
 .bx--tag__custom-icon svg {
     fill: ButtonText;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--tag__close-icon:focus {
     color: Highlight;
     outline: 1px solid Highlight;
@@ -16251,7 +16252,7 @@ button.c4p--add-select__global-filter-toggle {
   fill: var(--cds-icon-02, #525252);
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--search-close svg,
 .bx--search-magnifier-icon {
     fill: ButtonText;
@@ -19417,17 +19418,6 @@ button.c4p--add-select__global-filter-toggle {
   border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
   outline: 0;
 }
-.c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight.c4p--data-spreadsheet__active-cell--with-selection::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: var(--cds-interactive-01, #0f62fe);
-  content: "";
-  opacity: 0.25;
-}
 .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element {
   position: absolute;
   z-index: 2;
@@ -19445,6 +19435,19 @@ button.c4p--add-select__global-filter-toggle {
   content: "";
   opacity: 0.2;
 }
+.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element.c4p--data-spreadsheet__selection-area--element-cloned {
+  z-index: 4;
+}
+.c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element.c4p--data-spreadsheet__selection-area--element-cloned::before {
+  background-color: var(--cds-ui-05, #161616);
+  opacity: 0.25;
+}
+.c4p--data-spreadsheet .c4p--data-spreadsheet__reorder-indicator-line {
+  position: absolute;
+  z-index: 4;
+  width: var(--cds-spacing-01, 0.125rem);
+  background-color: var(--cds-interactive-01, #0f62fe);
+}
 .c4p--data-spreadsheet .c4p--data-spreadsheet__th--active-header,
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--active-header.c4p--data-spreadsheet__td {
   background-color: var(--cds-hover-selected-ui, #cacaca);
@@ -19454,10 +19457,17 @@ button.c4p--add-select__global-filter-toggle {
   background-color: var(--cds-inverse-02, #393939);
   color: var(--cds-text-04, #ffffff);
 }
-.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
+.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
+.c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:focus,
 .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td:hover {
   background-color: var(--cds-inverse-02, #393939);
 }
+.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header.c4p--data-spreadsheet__th {
+  cursor: grab;
+}
+.c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header-reorder-active.c4p--data-spreadsheet__th {
+  cursor: grabbing;
+}
 .c4p--data-spreadsheet .c4p--data-spreadsheet__list--container {
   overscroll-behavior: none;
 }
@@ -21871,7 +21881,7 @@ li.bx--accordion__item--disabled:last-of-type {
   margin-bottom: 0;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--accordion__arrow,
 .bx--accordion__item--active .bx--accordion__arrow {
     fill: ButtonText;
@@ -22778,7 +22788,7 @@ li.bx--accordion__item--disabled:last-of-type {
   background-color: inherit;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--list-box__field,
 .bx--list-box__menu,
 .bx--multi-select .bx--tag--filter {
@@ -22786,7 +22796,7 @@ li.bx--accordion__item--disabled:last-of-type {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--list-box__field:focus,
 .bx--multi-select .bx--tag__close-icon:focus,
 .bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option {
@@ -22795,7 +22805,7 @@ li.bx--accordion__item--disabled:last-of-type {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--list-box__menu-icon > svg,
 .bx--list-box__selection > svg,
 .bx--list-box__selection--multi > svg {
@@ -23008,7 +23018,7 @@ li.bx--accordion__item--disabled:last-of-type {
   fill: var(--cds-icon-inverse, #ffffff);
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--content-switcher-btn:focus {
     color: Highlight;
     outline: 1px solid Highlight;
@@ -24323,7 +24333,7 @@ tr.bx--data-table--selected:last-of-type td {
   margin: -0.1875rem 0;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--data-table-content {
     outline: 1px solid transparent;
   }
@@ -24609,14 +24619,14 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
   background: var(--cds-layer-selected, #e0e0e0);
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--table-expand__button:focus .bx--table-expand__svg {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--table-expand__svg {
     fill: ButtonText;
   }
@@ -24794,7 +24804,7 @@ th .bx--table-sort__flex {
   margin-top: 0.8125rem;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--table-sort__icon,
 .bx--table-sort__icon-unsorted {
     fill: ButtonText;
@@ -25506,14 +25516,14 @@ th .bx--table-sort__flex {
   cursor: pointer;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .flatpickr-prev-month,
 .flatpickr-next-month {
     fill: ButtonText;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .flatpickr-day.selected {
     color: Highlight;
     outline: 1px solid Highlight;
@@ -25521,14 +25531,14 @@ th .bx--table-sort__flex {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .flatpickr-day.today,
 .flatpickr-day.inRange {
     color: Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .flatpickr-calendar {
     outline: 1px solid transparent;
   }
@@ -25755,7 +25765,7 @@ th .bx--table-sort__flex {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--date-picker__icon {
     fill: ButtonText;
   }
@@ -26208,19 +26218,19 @@ button.bx--dropdown-text:focus {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--dropdown .bx--list-box__field {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--list-box__menu-item__option {
     outline: none;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--list-box__menu-item__selected-icon {
     fill: ButtonText;
   }
@@ -26921,13 +26931,13 @@ button.bx--dropdown-text:focus {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--inline-notification {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--inline-notification__close-button:focus,
 .bx--btn.bx--btn--ghost.bx--inline-notification__action-button:focus {
     color: Highlight;
@@ -26935,7 +26945,7 @@ button.bx--dropdown-text:focus {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--inline-notification__icon {
     fill: ButtonText;
   }
@@ -27182,20 +27192,20 @@ button.bx--dropdown-text:focus {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--toast-notification {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--toast-notification__close-button:focus {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--toast-notification__icon {
     fill: ButtonText;
   }
@@ -27608,7 +27618,7 @@ button.bx--dropdown-text:focus {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--number__control-btn:hover,
 .bx--number__control-btn:focus {
     color: Highlight;
@@ -27616,13 +27626,13 @@ button.bx--dropdown-text:focus {
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--number__control-btn {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--number__control-btn svg {
     fill: ButtonText;
   }
@@ -28053,7 +28063,7 @@ optgroup.bx--select-optgroup:disabled,
   display: none;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--select__arrow {
     fill: ButtonText;
   }
@@ -28274,7 +28284,7 @@ span.bx--pagination__text {
   margin-bottom: 0;
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--pagination__button,
 .bx--btn--ghost.bx--pagination__button {
     outline: 1px solid transparent;
@@ -28286,14 +28296,23 @@ span.bx--pagination__text {
   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);
-  display: block;
+  display: flex;
+  min-width: 3rem;
+  justify-content: space-between;
   margin-bottom: var(--cds-spacing-03, 0.5rem);
   color: var(--cds-text-primary, #161616);
 }
 
+.bx--progress-bar__label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .bx--progress-bar__track {
   position: relative;
   width: 100%;
+  min-width: 3rem;
   height: 0.5rem;
   background-color: var(--cds-layer, #f4f4f4);
 }
@@ -28310,7 +28329,8 @@ span.bx--pagination__text {
   display: block;
   width: 100%;
   height: 100%;
-  background-color: var(--cds-interactive, #0f62fe);
+  background-color: currentColor;
+  color: var(--cds-interactive, #0f62fe);
   transform: scaleX(0);
   transform-origin: 0 center /*rtl:100% center*/;
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -28336,10 +28356,52 @@ span.bx--pagination__text {
   font-size: var(--cds-helper-text-01-font-size, 0.75rem);
   line-height: var(--cds-helper-text-01-line-height, 1.33333);
   letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
-  margin-top: var(--cds-spacing-02, 0.25rem);
+  margin-top: var(--cds-spacing-03, 0.5rem);
   color: var(--cds-text-secondary, #525252);
 }
 
+.bx--progress-bar__status-icon {
+  flex-shrink: 0;
+  margin-left: var(--cds-spacing-05, 1rem);
+}
+
+.bx--progress-bar--finished .bx--progress-bar__bar,
+.bx--progress-bar--finished .bx--progress-bar__status-icon {
+  color: var(--cds-support-success, #198038);
+}
+
+.bx--progress-bar--error .bx--progress-bar__bar,
+.bx--progress-bar--error .bx--progress-bar__status-icon,
+.bx--progress-bar--error .bx--progress-bar__helper-text {
+  color: var(--cds-support-error, #da1e28);
+}
+
+.bx--progress-bar--finished .bx--progress-bar__bar,
+.bx--progress-bar--error .bx--progress-bar__bar {
+  transform: scaleX(1);
+}
+
+.bx--progress-bar--finished.bx--progress-bar--inline .bx--progress-bar__track,
+.bx--progress-bar--error.bx--progress-bar--inline .bx--progress-bar__track {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}
+
+.bx--progress-bar--finished.bx--progress-bar--inline .bx--progress-bar__label,
+.bx--progress-bar--error.bx--progress-bar--inline .bx--progress-bar__label {
+  flex-shrink: 1;
+  justify-content: flex-start;
+  margin-right: 0;
+}
+
 @keyframes progress-bar-indeterminate {
   0% {
     background-position-x: 25%;
@@ -28354,11 +28416,15 @@ span.bx--pagination__text {
 }
 
 .bx--progress-bar--inline .bx--progress-bar__label {
-  flex-shrink: 0;
   margin-right: var(--cds-spacing-05, 1rem);
   margin-bottom: 0;
 }
 
+.bx--progress-bar--inline .bx--progress-bar__track {
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
 .bx--progress-bar--inline .bx--progress-bar__helper-text {
   position: absolute;
   overflow: hidden;
@@ -28645,20 +28711,20 @@ span.bx--pagination__text {
 }
 
 /* stylelint-disable */
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--slider__thumb {
     outline: 1px solid transparent;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--slider__thumb:focus {
     color: Highlight;
     outline: 1px solid Highlight;
   }
 }
 
-@media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
+@media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .bx--slider__track {
     outline: 1px solid transparent;
   }