@sapudex/web-components 0.225.0 → 2.0.0

package/src/themes/Dropdown.css

@@ -3,7 +3,6 @@
   --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
   --udex-dropdown-border-radius: var(--udexRadiusM, 8px);
   --udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);
-  --udex-dropdown-default-background-color: var(--udexColorNeutralWhite, #fff);
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
   --udex-dropdown-pane-min-width: 320px;
@@ -15,39 +14,39 @@
   --udex-dropdown-pane-max-height: none;
   --udex-dropdown-pane-overflow: visible;
   --udex-dropdown-pane-content-overflow: auto;
+  --udex-dropdown-background-content: var(--sapBackgroundColor, #FFF);
 }
 
-.udex-dropdown__pane {
-  border: var(--udex-dropdown-border-width) solid var(--udex-dropdown-border-color-default);
-  box-shadow: var(--udex-dropdown-box-shadow);
-  border-radius: var(--udex-dropdown-border-radius);
-  background: var(--udex-dropdown-default-background-color);
+:host {
   min-width: var(--udex-dropdown-pane-min-width);
   max-width: var(--udex-dropdown-pane-max-width);
   width: var(--udex-dropdown-pane-width);
   max-height: var(--udex-dropdown-pane-max-height);
-  margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
   overflow: var(--udex-dropdown-pane-overflow);
+  border: var(--udex-dropdown-border-width) solid var(--udex-dropdown-border-color-default);
+  border-radius: var(--udex-dropdown-border-radius);
+  box-shadow: var(--udex-dropdown-box-shadow);
+  background: var(--udex-dropdown-background-content);
+}
+
+.ui5-popup-root.ui5-popover-root {
+  margin: var(--udex-dropdown-vertical-distance) var(--udex-dropdown-horizontal-distance);
 }
 
-.udex-dropdown__pane::part(content) {
+:host .ui5-popup-root .ui5-popup-content {
   padding: 0;
   overflow: var(--udex-dropdown-pane-content-overflow);
 }
 
-.udex-dropdown__pane::part(header),
-.udex-dropdown__pane::part(footer) {
+:host .ui5-popup-root .ui5-popup-header-root,
+:host .ui5-popup-root .ui5-popup-footer-root {
   padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+  background: none;
 }
 
-.udex-dropdown__pane::part(footer) {
+:host .ui5-popup-root .ui5-popup-footer-root {
   justify-content: flex-start;
   border-color: var(--udex-dropdown-border-color-default);
-  box-shadow: var(--udex-dropdown-box-shadow);
-}
-
-::slotted([slot="header"])  {
-  width: 100%;
 }
 
 ::slotted(.udex-no-result){
@@ -60,7 +59,7 @@
 }
 
 @media (width < 640px) {
-  .udex-dropdown__pane {
+  .ui5-popup-root.ui5-popover-root {
     min-width: var(--udex-dropdown-pane-min-width-xs);
     max-width: var(--udex-dropdown-pane-max-width-xs);
   }

package/src/themes/Link.css

@@ -15,14 +15,16 @@
   --udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);
   --udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);
   --udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);
+  --udex-link-focus-background-color: transparent;
+  --udex-link-focus-color: inherit;
   white-space: normal;
 }
 
-:host([focused]),
-:host([focused]:hover),
-:host([focused]:hover:not(:active)),
+:host([desktop]:hover:not(:active):focus-within),
+:host([design="Subtle"][desktop]:hover:not(:active):focus-within),
+:host([desktop]:focus-within),
+:host(:focus-visible),
 :host(:hover) {
-  text-decoration: none;
   color: var(--udex-link-hover-color);
 }
 
@@ -34,17 +36,9 @@
   color: var(--udex-link-color);
 }
 
-:host([focused]) slot {
-  text-decoration: var(--udex-link-focus-text-decoration);
-}
-
-:host([focused]:hover) slot,
-:host([focused]:hover:not(:active)) slot {
-  text-decoration: var(--udex-link-focused-hover-text-decoration);
-}
-
-:host([icon]) .udex-link__content {
+:host([end-icon]) .ui5-link-text {
   white-space: var(--udex-link-white-space);
+  margin-inline-end: 20px;
 }
 
 :host([design="Emphasized"]) {
@@ -81,66 +75,79 @@
   opacity: inherit;
 }
 
-.udex-link slot{
+.ui5-link-root slot {
   text-decoration: var(--udex-link-text-decoration);
   display: inline;
 }
 
-:host([design="Emphasized"]:active),
-:host([design="Emphasized"][focused]) .udex-link:hover slot,
-:host([design="Emphasized"][focused]) .udex-link slot,
-:host([design="Emphasized"]) .udex-link slot,
-.udex-link--with-icon slot{
-  text-decoration: var(--udex-link-emphasized-text-decoration);
-}
-
-.udex-link:hover slot,
-.udex-link--with-icon:hover slot,
-.udex-link--with-icon:active slot{
+.ui5-link-root:hover slot {
   text-decoration: var(--udex-link-hover-text-decoration);
 }
 
-.udex-link--with-icon .udex-link__content {
-  display: inline;
-  vertical-align: middle;
-  margin-inline-end: 20px;
+:host(:not([desktop])) .ui5-link-root:focus-visible,
+:host([design="Emphasized"][desktop]:focus-within),
+:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),
+:host([design="Emphasized"]:active),
+:host([desktop][design="Emphasized"]:active),
+:host([desktop][design="Emphasized"]:active:hover),
+:host([design="Emphasized"]) slot,
+:host([design="Emphasized"]:hover) slot,
+:host([design="Emphasized"][desktop]:hover) slot,
+:host([end-icon]) slot,
+:host([icon]) slot {
+  text-decoration: var(--udex-link-emphasized-text-decoration);
 }
 
-.udex-link--with-icon .udex-link__icon--icon-start ~ .udex-link__content {
-  margin-inline-end: 0;
+:host(:hover) slot {
+  text-decoration: var(--udex-link-hover-text-decoration);
 }
 
-.udex-link__icon {
-  display: inline-block;
-  vertical-align: middle;
+[ui5-icon] {
   width: var(--udex-link-icon-width);
   height: var(--udex-link-icon-height);
 }
 
+:host([desktop]:hover:active),
+:host([desktop]:active) {
+  text-decoration: var(--udex-link-focus-text-decoration);
+}
+
 :host .ui5-link-root {
   outline-offset: 0;
 }
 
-:host([focused]) .ui5-link-root,
-:host([design="Subtle"][focused]) .ui5-link-root {
+:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,
+:host([desktop]) .ui5-link-root:focus-within,
+:host .ui5-link-root:focus-visible {
   outline:
     var(--sapContent_FocusColor, #002A86)
     var(--sapContent_FocusStyle, 'solid')
     var(--sapContent_FocusWidth, 0.125rem);
 }
 
+.ui5-link-root:focus-visible,
+:host([desktop]) .ui5-link-root:focus-within,
+:host([design="Subtle"]) .ui5-link-root:focus-visible,
+:host([design="Subtle"][desktop]) .ui5-link-root:focus-within {
+  background-color: var(--udex-link-focus-background-color);
+}
+
 [ui5-link],
-.udex-link__icon,
-[ui5-link]:active .udex-link__icon,
-[ui5-link][focused] .udex-link__icon {
-  color: inherit;
+.ui5-link-icon,
+.ui5-link-root:active .ui5-link-icon,
+.ui5-link-root:focus-visible,
+:host([desktop]) .ui5-link-root:focus-within,
+:host([design="Subtle"]) .ui5-link-root:focus-visible,
+:host([design="Subtle"][desktop]) .ui5-link-root:focus-within {
+  color: var(--udex-link-focus-color);
 }
 
-.udex-link__icon--icon-start {
+.ui5-link-icon {
+  margin-inline-end: 0;
   padding-inline-end: var(--udexSpacer4, 4px);
 }
 
-.udex-link__icon--icon-end {
-  padding-inline-start: var(--udexSpacer4, 4px);
+.ui5-link-end-icon {
   margin-inline-start: -20px;
+  padding-inline-start: var(--udexSpacer4, 4px);
 }

package/src/themes/ListItem.css

@@ -253,29 +253,6 @@
   line-height: var(--udexTypographyBodyLineHeight, 24px);
 }
 
-.udex-list__edit-button,
-.udex-list__delete-button {
-  --udex-button-color-tertiary-standard-hover-background: none;
-  --udex-button-color-tertiary-standard-hover-border: var(--udexColorGrey5, #8396A8);
-  --udex-button-color-tertiary-standard-active-border: var(--udexColorBlue7, #0070f2);
-}
-
-.udex-list__edit-button,
-.udex-list__delete-button {
-  margin-inline-start: var(--udexSpacer2, 2px);
-}
-
-.udex-list__delete-button:focus-visible,
-.udex-list__edit-button:focus-visible {
-  outline: 2px solid var(--udex-list-item-outline-border-color);
-  border-radius: 2px;
-}
-
-.udex-list__edit-icon,
-.udex-list__delete-icon {
-  color: var(--udexColorBlue7, #0070f2);
-}
-
 .udex-list__flag-wrap {
   min-width: 30px;
   margin-inline-end: var(--udexSpacer12, 12px);

package/src/themes/MessageStrip.css

@@ -2,45 +2,39 @@
   --udex-message-strip-color-action-background: var(--sapBackgroundColor, #fff);
   --udex-message-strip-color-action-border: var(--udexColorBlue7, #0070f2);
   --udex-message-strip-color-action-close-icon: var(--udexColorGrey7, #475e75);
-
-  --udex-message-strip-color-information-close-icon: var(--udexColorGrey7, #475e75);
   --udex-message-strip-color-information-status: var(--sapInformativeElementColor, #0070f2);
-
-  --udex-message-strip-color-success-close-icon: var(--udexColorGrey7, #475e75);
   --udex-message-strip-color-success-status: var(--sapPositiveElementColor, #188918);
-
-  --udex-message-strip-color-warning-close-icon: var(--udexColorGrey7, #475e75);
   --udex-message-strip-color-warning-status: var(--sapCriticalElementColor, #c35500);
-
-  --udex-message-strip-color-error-close-icon: var(--udexColorGrey7, #475e75);
   --udex-message-strip-color-error-status: var(--sapNegativeElementColor, #d20a0a);
-
   --udex-message-strip-close-icon-top: calc(50% - 13px);
   --udex-message-strip-min-height: 20px;
+  --udex-message-strip-padding-inline-no-icon: var(--udexSpacer12, 12px);
+  --udex-message-strip-padding-block-no-icon: var(--udexSpacer8, 8px);
+  --udex-message-strip-border-width: 1px;
+  --udex-message-strip-padding: var(--udexSpacer8, 8px) 36px;
+  --udex-message-strip-padding-hide-icon: var(--udexSpacer8, 12px);
 }
 
-:host([design="Action"]) [udex-button] {
+:host [udex-button] {
   --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-action-close-icon);
 }
 
-:host([design="Information"]) [udex-button] {
-  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-information-close-icon);
-}
-
-:host([design="Positive"]) [udex-button] {
-  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-success-close-icon);
+:host([design="Action"]) .udex-message-strip {
+  border-color: var(--udex-message-strip-color-action-border);
 }
 
-:host([design="Warning"]) [udex-button] {
-  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-warning-close-icon);
+.ui5-message-strip-root.ui5-message-strip-root-hide-icon {
+  padding-inline: var(--udex-message-strip-padding-inline-no-icon);
+  padding-block: var(--udex-message-strip-padding-block-no-icon);
 }
 
-:host([design="Negative"]) [udex-button] {
-  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-message-strip-color-error-close-icon);
+.ui5-message-strip-icon-wrapper {
+  top: calc(50% - var(--udexSpacer8, 8px));
 }
 
-:host([design="Action"]) .udex-message-strip {
-  border-color: var(--udex-message-strip-color-action-border);
+.ui5-message-strip-root {
+  padding: var(--udex-message-strip-padding);
+  border-width: var(--udex-message-strip-border-width);
 }
 
 .udex-message-strip [udex-button] {

package/src/themes/Modal.css

@@ -1,28 +1,33 @@
 :host {
-	--udexModalAndOverlayModalContentPaddingHorizontal: var(--udexGridSGutters, 32px);
-	--udexModalAndOverlayModalContentPaddingVertical: var(--udexGridXSMargins, 24px);
-	--udexModalAndOverlayModalFooterPaddingHorizontal: var(--udexGridSGutters, 32px);
-	--udexModalAndOverlayModalFooterPaddingVertical: var(--udexGridXSMargins, 24px);
-	--udexModalAndOverlayModalHeaderPaddingHorizontal: var(--udexGridSGutters, 32px);
-	--udexModalAndOverlayModalHeaderPaddingVertical: var(--udexGridXSMargins, 24px);
-  --udexModalBorderRadius: 0;
-	--browser_scrollbar_border_radius: var(--udexRadiusM, 8px);
+	--udex-modal-and-overlay-modal-content-padding-horizontal: var(--udexGridSGutters, 32px);
+	--udex-modal-and-overlay-modal-content-padding-vertical: var(--udexGridXSMargins, 24px);
+	--udex-modal-and-overlay-modal-footer-padding-horizontal: var(--udexGridSGutters, 32px);
+  --udex-modal-and-overlay-modal-footer-padding-vertical: var(--udexGridXSMargins, 24px);
+  --udex-modal-and-overlay-modal-header-padding-horizontal: var(--udexGridSGutters, 32px);
+  --udex-modal-and-overlay-modal-header-padding-vertical: var(--udexGridXSMargins, 24px);
+  --udex-modal-border-radius: 0;
+	--udex-modal-browser-scrollbar-border-radius: var(--udexRadiusM, 8px);
+  --udex-modal-block-layer-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+}
+
+:host .ui5-block-layer {
+  background: var(--udex-modal-block-layer-background);
 }
 
 :host .ui5-popup-root .ui5-popup-footer-root {
-	padding: var(--udexModalAndOverlayModalFooterPaddingVertical) var(--udexModalAndOverlayModalFooterPaddingHorizontal);
+	padding: var(--udex-modal-and-overlay-modal-footer-padding-vertical) var(--udex-modal-and-overlay-modal-footer-padding-horizontal);
 }
 
 :host .ui5-popup-root {
-  border-radius: var(--udexModalBorderRadius);
+  border-radius: var(--udex-modal-border-radius);
 }
 
 :host .ui5-popup-root .ui5-popup-header-root {
-	padding: var(--udexModalAndOverlayModalHeaderPaddingVertical)  var(--udexModalAndOverlayModalHeaderPaddingHorizontal);
+	padding: var(--udex-modal-and-overlay-modal-header-padding-vertical)  var(--udex-modal-and-overlay-modal-header-padding-horizontal);
 }
 
 :host .ui5-popup-root .ui5-popup-content  {
-	padding: var(--udexModalAndOverlayModalContentPaddingVertical) var(--udexModalAndOverlayModalContentPaddingHorizontal);
+	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
   scrollbar-gutter: stable both-edges;
 }
 
@@ -32,7 +37,7 @@
 }
 
 :host([type="basic"]) .ui5-popup-root .ui5-popup-content {
-	padding: 0 var(--udexModalAndOverlayModalContentPaddingHorizontal);
+	padding: 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
 }
 
 :host ::slotted([slot="footer"]) {

package/src/themes/Pagination.css

@@ -64,8 +64,6 @@
   padding: var(--udex-pagination-mobile-item-paddings);
 }
 
-.udex-pagination__item--first a,
-.udex-pagination__item--last a,
 .udex-pagination__item--prev a,
 .udex-pagination__item--next a {
   padding: var(--udex-pagination-item-paddings);

package/src/themes/PhoneNumberField.css

@@ -134,13 +134,13 @@
   padding: 11px;
 }
 
-:host([field-state="Success"]) .udex-phone-number-field__open-button {
+:host([value-state="Success"]) .udex-phone-number-field__open-button {
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--udex-phone-number-field-color-success-active-icon);
   --udex-button-color-tertiary-standard-active-border: transparent;
   --udex-button-color-tertiary-standard-active-background: transparent;
 }
 
-:host([field-state="Error"]) .udex-phone-number-field__open-button {
+:host([value-state="Error"]) .udex-phone-number-field__open-button {
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--udex-phone-number-field-color-error-active-icon);
   --udex-button-color-tertiary-standard-active-border: transparent;
 }
@@ -160,26 +160,26 @@
   border-left: 1px solid var(--udex-phone-number-field-color-standard-default-control-button-border);
 }
 
-:host([field-state="Success"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button {
+:host([value-state="Success"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button {
   --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-phone-number-field-color-success-active-icon);
   --udex-button-color-tertiary-standard-hover-text-and-icon: var(--udex-phone-number-field-color-success-active-icon);
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--udex-phone-number-field-color-success-active-icon);
   border-right: 1px solid var(--udex-phone-number-field-color-success-default-control-button-border);
 }
 
-:host([field-state="Success"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button:dir(rtl) {
+:host([value-state="Success"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button:dir(rtl) {
   border-right: transparent;
   border-left: 1px solid var(--udex-phone-number-field-color-success-default-control-button-border);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button {
+:host([value-state="Error"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button {
   --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-phone-number-field-color-error-active-icon);
   --udex-button-color-tertiary-standard-hover-text-and-icon: var(--udex-phone-number-field-color-error-active-icon);
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--udex-phone-number-field-color-error-active-icon);
   border-right: 1px solid var(--udex-phone-number-field-color-error-default-control-button-border);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button:dir(rtl) {
+:host([value-state="Error"]) .udex-phone-number-field__dropdown[open]+.udex-phone-number-field__input-wrapper .udex-phone-number-field__open-button:dir(rtl) {
   border-right: transparent;
   border-left: 1px solid var(--udex-phone-number-field-color-error-default-control-button-border);
 }
@@ -245,38 +245,38 @@
   border-color: var(--udex-phone-number-field-color-standard-active-border);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field {
+:host([value-state="Error"]) .udex-phone-number-field {
   background-color: var(--udex-phone-number-field-color-error-default-background);
   border-color: var(--udex-phone-number-field-color-error-default-border);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field__label {
+:host([value-state="Error"]) .udex-phone-number-field__label {
   background: linear-gradient(var(--udex-phone-number-field-color-label-background) 65%, var(--udex-phone-number-field-color-error-default-background) 35%);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field:hover {
+:host([value-state="Error"]) .udex-phone-number-field:hover {
   border-color: var(--udex-phone-number-field-color-error-hover-border);
 }
 
-:host([field-state="Error"]) .udex-phone-number-field:focus-within {
+:host([value-state="Error"]) .udex-phone-number-field:focus-within {
   border-color: var(--udex-phone-number-field-color-error-active-border);
 }
 
-:host([field-state="Success"]) .udex-phone-number-field {
+:host([value-state="Success"]) .udex-phone-number-field {
   background-color: var(--udex-phone-number-field-color-success-default-background);
   border-color: var(--udex-phone-number-field-color-success-default-border);
 }
 
-:host([field-state="Success"]) .udex-phone-number-field__label {
+:host([value-state="Success"]) .udex-phone-number-field__label {
   background: linear-gradient(var(--udex-phone-number-field-color-label-background) 65%, var(--udex-phone-number-field-color-success-default-background) 35%);
 }
 
 
-:host([field-state="Success"]) .udex-phone-number-field:hover {
+:host([value-state="Success"]) .udex-phone-number-field:hover {
   border-color: var(--udex-phone-number-field-color-success-hover-border);
 }
 
-:host([field-state="Success"]) .udex-phone-number-field:focus-within {
+:host([value-state="Success"]) .udex-phone-number-field:focus-within {
   border-color: var(--udex-phone-number-field-color-success-active-border);
 }
 
@@ -338,6 +338,7 @@
   width: var(--udex-phone-number-field-flag-width);
   height: var(--udex-phone-number-field-flag-height);
   min-width: var(--udex-phone-number-field-flag-width);
+  margin-right: var(--udexSpacer6, 6px);
 }
 
 .udex-phone-number-field__dropdown-list-item .udex-phone-number-field__flag {

package/src/themes/ProgressBar.css

@@ -1,9 +1,83 @@
 :host {
-    --udex-progress-bar-point-size: 0.375rem;
+  --udex-progress-bar-point-size: 0.375rem;
+  --udex-progress-bar-padding-end: 24px;
+  --udex-progress-bar-root-height: 0.5rem;
+  --udex-progress-bar-height: 0.75rem;
+  --udex-progress-bar-border-radius: var(--udexRadiusS, 6px);
+  --udex-progress-bar-icon-size: 1.125rem;
+  --udex-progress-bar-icon-right-position: -24px;
 }
 
-.ui5-progress-indicator-remaining-bar::before,
-.ui5-progress-indicator-remaining-bar::after {
+.ui5-progress-indicator-icon {
+  width: var(--udex-progress-bar-icon-size);
+  height: var(--udex-progress-bar-icon-size);
+  inset-inline-end: var(--udex-progress-bar-icon-right-position);
+}
+
+.ui5-progress-indicator-bar {
+  height: var(--udex-progress-bar-height);
+  border-radius: var(--udex-progress-bar-border-radius);
+}
+
+.ui5-progress-indicator-root {
+  height: var(--udex-progress-bar-root-height);
+}
+
+:host(:not([hidden])) {
+  padding-inline-end: var(--udex-progress-bar-padding-end);
+}
+
+:host::part(remaining-bar):after {
   width: var(--udex-progress-bar-point-size, 0.375rem);
   height: var(--udex-progress-bar-point-size, 0.375rem);
 }
+
+:host([value-state="Error"]) .ui5-progress-indicator-root {
+  background: var(--sapProgress_NegativeBackground, #FFB2D2);
+}
+
+:host([value-state="Error"]) .ui5-progress-indicator-bar,
+:host([value-state="Error"]) .ui5-progress-indicator-remaining-bar:before,
+:host([value-state="Error"]) .ui5-progress-indicator-remaining-bar:after {
+  background: var(--sapProgress_Value_NegativeBackground, #D20A0A);
+}
+
+:host([value-state="Error"]) .ui5-progress-indicator-icon {
+  color: var(--sapProgress_Value_NegativeBackground, #D20A0A);
+}
+
+:host([value-state="Success"]) .ui5-progress-indicator-root {
+  background: var(--sapProgress_PositiveBackground, #BDE986);
+}
+
+:host([value-state="Success"]) .ui5-progress-indicator-bar,
+:host([value-state="Success"]) .ui5-progress-indicator-remaining-bar:before,
+:host([value-state="Success"]) .ui5-progress-indicator-remaining-bar:after {
+  background: var(--sapProgress_Value_PositiveBackground, #188918);
+}
+
+:host([value-state="Success"]) .ui5-progress-indicator-icon {
+  color: var(--sapProgress_Value_PositiveBackground, #188918);
+}
+
+:host([value-state="Warning"]) .ui5-progress-indicator-root {
+  background: var(--sapProgress_CriticalBackground, #FFDF72);
+}
+
+:host([value-state="Warning"]) .ui5-progress-indicator-bar,
+:host([value-state="Warning"]) .ui5-progress-indicator-remaining-bar:before,
+:host([value-state="Warning"]) .ui5-progress-indicator-remaining-bar:after {
+  background: var(--sapProgress_Value_CriticalBackground, #C35500);
+}
+
+:host([value-state="Warning"]) .ui5-progress-indicator-icon {
+  color: var(--sapProgress_Value_CriticalBackground, #C35500);
+}
+
+:host([disabled]) .ui5-progress-indicator-root {
+  opacity: var(--sapContent_DisabledOpacity, 0.4);
+}
+
+.ui5-progress-indicator-bar {
+  border-radius: var(--udexRadiusS, 6px);
+}