@sapudex/web-components 2.47.0 → 2.49.0

package/src/themes/Badge.css

@@ -28,19 +28,19 @@
 
   --udex-info-badge-color-information-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));
   --udex-info-badge-color-information-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));
-  --udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));
+  --udex-info-badge-color-information-background: var(--sapInformationBackground, var(--udexColorBlue1, #ebf8ff));
 
-  --udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));
+  --udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexColorGreen7, #188918));
   --udex-info-badge-color-positive-text-color: var(--sapSuccessColor, #1e592f);
-  --udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5));
+  --udex-info-badge-color-positive-background: var(--sapSuccessBackground, var(--udexColorGreen1, #f5fae5));
 
-  --udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexCoreSemanticWarning7, #c35500));
+  --udex-info-badge-color-warning-border-color: var(--sapWarningBorderColor, var(--udexColorMango7, #c35500));
   --udex-info-badge-color-warning-text-color: var(--sapWarningColor, #8d2a00);
-  --udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexCoreSemanticWarning1, #fff8d6));
+  --udex-info-badge-color-warning-background: var(--sapWarningBackground, var(--udexColorMango1, #fff8d6));
 
-  --udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));
+  --udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexColorRed7, #d20a0a));
   --udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);
-  --udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));
+  --udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexColorRed1, #ffeaf4));
 
   --udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);
   --udex-number-badge-color-blue-background: var(--udexColorBlue8, #0057D2);

package/src/themes/BusyIndicator.css

@@ -0,0 +1,24 @@
+:host([surface-container]) {
+  --udex-busy-indicator-backdrop-background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+  --udex-busy-indicator-container-background: var(--sapBaseColor, #fff);
+  --udex-busy-indicator-container-border-radius: var(--udexRadiusXL, 16px);
+  --udex-busy-indicator-container-padding-vertical: var(--udexSpacer24, 24px);
+  --udex-busy-indicator-container-padding-horizontal: var(--udexSpacer48, 48px);
+}
+
+/* Semi-transparent backdrop fills the slotted content area */
+:host([surface-container]) .ui5-busy-indicator-busy-area {
+  background: transparent;
+}
+
+:host([surface-container]) .ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content {
+  background: var(--udex-busy-indicator-backdrop-background);
+}
+
+/* White rounded card around the dots */
+:host([surface-container]) .ui5-busy-indicator-circles-wrapper {
+  background: var(--udex-busy-indicator-container-background);
+  border-radius: var(--udex-busy-indicator-container-border-radius);
+  padding: var(--udex-busy-indicator-container-padding-vertical) var(--udex-busy-indicator-container-padding-horizontal);
+  box-shadow: var(--sapContent_Shadow3);
+}

package/src/themes/Button.css

@@ -25,18 +25,18 @@
   /* Default */
   --udex-button-color-primary-standard-default-background: var(--sapButton_Emphasized_Background, var(--udexColorBlue8));
   --udex-button-color-primary-standard-default-border-color: var(--sapButton_Emphasized_BorderColor, var(--udexColorBlue8));
-  --udex-button-color-primary-standard-default-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-default-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexColorNeutralWhite));
   /* Hover */
   --udex-button-color-primary-standard-hover-background: var(--sapButton_Emphasized_Hover_Background, var(--udexColorBlue9));
   --udex-button-color-primary-standard-hover-border-color: var(--sapButton_Emphasized_Hover_BorderColor, var(--udexColorBlue9));
-  --udex-button-color-primary-standard-hover-text-and-icon: var(--sapButton_Emphasized_Hover_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-hover-text-and-icon: var(--sapButton_Emphasized_Hover_TextColor, var(--udexColorNeutralWhite));
   /* Active */
   --udex-button-color-primary-standard-active-background: var(--sapButton_Emphasized_Active_Background, var(--udexColorNeutralWhite));
   --udex-button-color-primary-standard-active-border: var(--sapButton_Emphasized_Active_BorderColor, var(--udexColorBlue9));
   --udex-button-color-primary-standard-active-text-and-icon: var(--sapButton_Emphasized_Active_TextColor, var(--udexColorBlue9));
   /* Disabled */
   --udex-button-color-primary-standard-disabled-background: var(--sapButton_Emphasized_Background, var(--udexColorBlue8));
-  --udex-button-color-primary-standard-disabled-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexCoreTextLight));
+  --udex-button-color-primary-standard-disabled-text-and-icon: var(--sapButton_Emphasized_TextColor, var(--udexColorNeutralWhite));
   /* Toggled default */
   --udex-button-color-primary-toggled-default-background: var(--sapButton_Selected_Background, var(--udexColorNeutralWhite));
   --udex-button-color-primary-toggled-default-border: var(--sapButton_Selected_BorderColor, var(--udexColorBlue9));
@@ -137,97 +137,97 @@
   /* Positive design */
 
   /* Default */
-  --udex-button-color-positive-standard-default-background: var(--sapButton_Accept_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-standard-default-border: var(--sapButton_Accept_BorderColor, var(--udexCoreSemanticSuccess7));
-  --udex-button-color-positive-standard-default-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-standard-default-background: var(--sapButton_Accept_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-standard-default-border: var(--sapButton_Accept_BorderColor, var(--udexColorGreen7));
+  --udex-button-color-positive-standard-default-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Hover */
-  --udex-button-color-positive-standard-hover-background: var(--sapButton_Accept_Hover_Background, var(--udexCoreSemanticSuccess3));
-  --udex-button-color-positive-standard-hover-border: var(--sapButton_Accept_Hover_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-standard-hover-text-and-icon: var(--sapButton_Accept_Hover_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-standard-hover-background: var(--sapButton_Accept_Hover_Background, var(--udexColorGreen3));
+  --udex-button-color-positive-standard-hover-border: var(--sapButton_Accept_Hover_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-standard-hover-text-and-icon: var(--sapButton_Accept_Hover_TextColor, var(--udexColorGreen10));
   /* Active */
   --udex-button-color-positive-standard-active-background: var(--sapButton_Accept_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-standard-active-border: var(--sapButton_Accept_Active_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-standard-active-text-and-icon: var(--sapButton_Accept_Active_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-standard-active-border: var(--sapButton_Accept_Active_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-standard-active-text-and-icon: var(--sapButton_Accept_Active_TextColor, var(--udexColorGreen10));
   /* Disabled */
-  --udex-button-color-positive-standard-disabled-background: var(--sapButton_Accept_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-standard-disabled-border: var(--sapButton_Accept_BorderColor, var(--udexCoreSemanticSuccess7));
-  --udex-button-color-positive-standard-disabled-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-standard-disabled-background: var(--sapButton_Accept_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-standard-disabled-border: var(--sapButton_Accept_BorderColor, var(--udexColorGreen7));
+  --udex-button-color-positive-standard-disabled-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Toggled default */
   --udex-button-color-positive-toggled-default-background: var(--sapButton_Accept_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-toggled-default-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-toggled-default-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-toggled-default-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-toggled-default-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexColorGreen10));
   /* Toggled hover */
-  --udex-button-color-positive-toggled-hover-background: var(--sapButton_Accept_Selected_Hover_Background, var(--udexCoreSemanticSuccess2));
-  --udex-button-color-positive-toggled-hover-border: var(--sapButton_Accept_Selected_Hover_BorderColor, var(--udexCoreSemanticSuccess8));
-  --udex-button-color-positive-toggled-hover-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexCoreSemanticSuccess8));
+  --udex-button-color-positive-toggled-hover-background: var(--sapButton_Accept_Selected_Hover_Background, var(--udexColorGreen2));
+  --udex-button-color-positive-toggled-hover-border: var(--sapButton_Accept_Selected_Hover_BorderColor, var(--udexColorGreen8));
+  --udex-button-color-positive-toggled-hover-text-and-icon: var(--sapButton_Accept_TextColor, var(--udexColorGreen8));
   /* Toggled disabled */
   --udex-button-color-positive-toggled-disabled-background: var(--sapButton_Accept_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-positive-toggled-disabled-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexCoreSemanticSuccess10));
-  --udex-button-color-positive-toggled-disabled-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexCoreSemanticSuccess10));
+  --udex-button-color-positive-toggled-disabled-border: var(--sapButton_Accept_Selected_BorderColor, var(--udexColorGreen10));
+  --udex-button-color-positive-toggled-disabled-text-and-icon: var(--sapButton_Accept_Selected_TextColor, var(--udexColorGreen10));
 
 
   /* Negative design */
 
   /* Default */
-  --udex-button-color-negative-standard-default-background: var(--sapButton_Reject_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-standard-default-border: var(--sapButton_Reject_BorderColor, var(--udexCoreSemanticError7));
-  --udex-button-color-negative-standard-default-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexCoreSemanticError8));
+  --udex-button-color-negative-standard-default-background: var(--sapButton_Reject_Background, var(--udexColorRed2));
+  --udex-button-color-negative-standard-default-border: var(--sapButton_Reject_BorderColor, var(--udexColorRed7));
+  --udex-button-color-negative-standard-default-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexColorRed8));
   /* Hover */
-  --udex-button-color-negative-standard-hover-background: var(--sapButton_Reject_Hover_Background, var(--udexCoreSemanticError3));
-  --udex-button-color-negative-standard-hover-border: var(--sapButton_Reject_Hover_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-standard-hover-text-and-icon: var(--sapButton_Reject_Hover_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-standard-hover-background: var(--sapButton_Reject_Hover_Background, var(--udexColorRed3));
+  --udex-button-color-negative-standard-hover-border: var(--sapButton_Reject_Hover_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-standard-hover-text-and-icon: var(--sapButton_Reject_Hover_TextColor, var(--udexColorRed10));
   /* Active */
   --udex-button-color-negative-standard-active-background: var(--sapButton_Reject_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-standard-active-border: var(--sapButton_Reject_Active_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-standard-active-text-and-icon: var(--sapButton_Reject_Active_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-standard-active-border: var(--sapButton_Reject_Active_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-standard-active-text-and-icon: var(--sapButton_Reject_Active_TextColor, var(--udexColorRed10));
   /* Disabled */
-  --udex-button-color-negative-standard-disabled-background: var(--sapButton_Reject_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-standard-disabled-border: var(--sapButton_Reject_BorderColor, var(--udexCoreSemanticError7));
-  --udex-button-color-negative-standard-disabled-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexCoreSemanticError8));
+  --udex-button-color-negative-standard-disabled-background: var(--sapButton_Reject_Background, var(--udexColorRed2));
+  --udex-button-color-negative-standard-disabled-border: var(--sapButton_Reject_BorderColor, var(--udexColorRed7));
+  --udex-button-color-negative-standard-disabled-text-and-icon: var(--sapButton_Reject_TextColor, var(--udexColorRed8));
   /* Toggled default */
   --udex-button-color-negative-toggled-default-background: var(--sapButton_Reject_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-toggled-default-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-toggled-default-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-toggled-default-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-toggled-default-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexColorRed10));
   /* Toggled hover */
-  --udex-button-color-negative-toggled-hover-background: var(--sapButton_Reject_Selected_Hover_Background, var(--udexCoreSemanticError2));
-  --udex-button-color-negative-toggled-hover-border: var(--sapButton_Reject_Selected_Hover_BorderColor, var(--udexCoreSemanticError8));
-  --udex-button-color-negative-toggled-hover-text-and-icon: var(--udexCoreSemanticError8, #AA0808);
+  --udex-button-color-negative-toggled-hover-background: var(--sapButton_Reject_Selected_Hover_Background, var(--udexColorRed2));
+  --udex-button-color-negative-toggled-hover-border: var(--sapButton_Reject_Selected_Hover_BorderColor, var(--udexColorRed8));
+  --udex-button-color-negative-toggled-hover-text-and-icon: var(--udexColorRed8, #AA0808);
   /* Toggled disabled */
   --udex-button-color-negative-toggled-disabled-background: var(--sapButton_Reject_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-negative-toggled-disabled-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexCoreSemanticError10));
-  --udex-button-color-negative-toggled-disabled-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexCoreSemanticError10));
+  --udex-button-color-negative-toggled-disabled-border: var(--sapButton_Reject_Selected_BorderColor, var(--udexColorRed10));
+  --udex-button-color-negative-toggled-disabled-text-and-icon: var(--sapButton_Reject_Selected_TextColor, var(--udexColorRed10));
 
 
   /* Warning design */
 
   /* Default */
-  --udex-button-color-warning-standard-default-background: var(--sapButton_Attention_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-standard-default-border: var(--sapButton_Attention_BorderColor, var(--udexCoreSemanticWarning7));
-  --udex-button-color-warning-standard-default-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-standard-default-background: var(--sapButton_Attention_Background, var(--udexColorMango2));
+  --udex-button-color-warning-standard-default-border: var(--sapButton_Attention_BorderColor, var(--udexColorMango7));
+  --udex-button-color-warning-standard-default-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexColorMango8));
   /* Hover */
-  --udex-button-color-warning-standard-hover-background: var(--sapButton_Attention_Hover_Background, var(--udexCoreSemanticWarning3));
-  --udex-button-color-warning-standard-hover-border: var(--sapButton_Attention_Hover_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-standard-hover-text-and-icon: var(--sapButton_Attention_Hover_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-standard-hover-background: var(--sapButton_Attention_Hover_Background, var(--udexColorMango3));
+  --udex-button-color-warning-standard-hover-border: var(--sapButton_Attention_Hover_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-standard-hover-text-and-icon: var(--sapButton_Attention_Hover_TextColor, var(--udexColorMango10));
   /* Active */
   --udex-button-color-warning-standard-active-background: var(--sapButton_Attention_Active_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-standard-active-border: var(--sapButton_Attention_Active_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-standard-active-text-and-icon: var(--sapButton_Attention_Active_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-standard-active-border: var(--sapButton_Attention_Active_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-standard-active-text-and-icon: var(--sapButton_Attention_Active_TextColor, var(--udexColorMango10));
   /* Disabled */
-  --udex-button-color-warning-standard-disabled-background: var(--sapButton_Attention_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-standard-disabled-border: var(--sapButton_Attention_BorderColor, var(--udexCoreSemanticWarning7));
-  --udex-button-color-warning-standard-disabled-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-standard-disabled-background: var(--sapButton_Attention_Background, var(--udexColorMango2));
+  --udex-button-color-warning-standard-disabled-border: var(--sapButton_Attention_BorderColor, var(--udexColorMango7));
+  --udex-button-color-warning-standard-disabled-text-and-icon: var(--sapButton_Attention_TextColor, var(--udexColorMango8));
   /* Toggled default */
   --udex-button-color-warning-toggled-default-background: var(--sapButton_Attention_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-toggled-default-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-toggled-default-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-toggled-default-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-toggled-default-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexColorMango10));
   /* Toggled hover */
-  --udex-button-color-warning-toggled-hover-background: var(--sapButton_Attention_Selected_Hover_Background, var(--udexCoreSemanticWarning2));
-  --udex-button-color-warning-toggled-hover-border: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexCoreSemanticWarning8));
-  --udex-button-color-warning-toggled-hover-text-and-icon: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexCoreSemanticWarning8));
+  --udex-button-color-warning-toggled-hover-background: var(--sapButton_Attention_Selected_Hover_Background, var(--udexColorMango2));
+  --udex-button-color-warning-toggled-hover-border: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexColorMango8));
+  --udex-button-color-warning-toggled-hover-text-and-icon: var(--sapButton_Attention_Selected_Hover_BorderColor, var(--udexColorMango8));
   /* Toggled disabled */
   --udex-button-color-warning-toggled-disabled-background: var(--sapButton_Attention_Selected_Background, var(--udexColorNeutralWhite));
-  --udex-button-color-warning-toggled-disabled-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexCoreSemanticWarning10));
-  --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
+  --udex-button-color-warning-toggled-disabled-border: var(--sapButton_Attention_Selected_BorderColor, var(--udexColorMango10));
+  --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexColorMango10));
 }
 
 :host([desktop][active]) .ui5-button-root:focus-within:before {

package/src/themes/Carousel.css

@@ -34,29 +34,41 @@
 }
 
 .udex-carousel__navigation--top .udex-carousel__navigation-wrapper {
-  justify-content: end;
   margin-bottom: 10px;
+  justify-content: end;
 }
 
 .udex-carousel__navigation--bottom .udex-carousel__navigation-wrapper {
-  justify-content: center;
   position: absolute;
   bottom: 0;
   left: 0;
+  justify-content: center;
+}
+
+.udex-carousel__navigation--bottom .udex-carousel__navigation-wrapper--autoplay {
+  justify-content: space-between;
 }
 
 :host([hide-page-indicator]) .udex-carousel__navigation--bottom .udex-carousel__navigation-wrapper {
   position: static;
 }
 
-.udex-carousel__navigation--top .udex-carousel__navigation-button {
-  margin-inline-start: var(--udexSpacer16, 16px);
+.udex-carousel__navigation-button-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.udex-carousel__navigation-page-indicator-spacer {
+  width: 8.5rem;
+  margin: 0 var(--udexSpacer12, 12px);
 }
 
-.udex-carousel__navigation--bottom .udex-carousel__navigation-button:first-child {
-  margin-inline-end: 4.7rem;
+.udex-carousel__navigation--top .udex-carousel__navigation-button {
+  margin-inline-start: var(--udexSpacer16, 16px);
 }
 
-.udex-carousel__navigation--bottom .udex-carousel__navigation-button:last-child {
-  margin-inline-start: 4.7rem;
+.udex-carousel__navigation--bottom .udex-carousel__navigation-spacer {
+  min-width: 42px;
+  max-width: 42px;
+  height: 42px;
+  min-height: 42px;
 }

package/src/themes/Divider.css

@@ -1,5 +1,5 @@
 :host {
-  --udex-divider-color: var(--udexCoreDividerLight, #D5DADD);
+  --udex-divider-color: var(--udexColorGrey3, #D5DADD);
   --udex-divider-padding: var(--udexSpacer2) 0;
 }
 

package/src/themes/Dropdown.css

@@ -1,6 +1,6 @@
 :host {
   --udex-dropdown-box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
-  --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-dropdown-border-color-default: var(--sapField_BorderColor, var(--udexColorGrey6));
   --udex-dropdown-border-radius: var(--udexRadiusM, 8px);
   --udex-dropdown-border-width: var(--sapElement_BorderWidth, 1px);
   --udex-dropdown-horizontal-distance: 0;

package/src/themes/FilterMenu.css

@@ -26,7 +26,7 @@
   --udex-filter-menu-popover-max-width: 640px;
 
   --udex-filter-menu-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
-  --udex-filter-menu-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-filter-menu-popover-border-color: var(--sapField_BorderColor, var(--udexColorGrey6));
   --udex-filter-menu-popover-border-width: var(--sapElement_BorderWidth, 1px);
   --udex-filter-menu-popover-border-radius: var(--udexRadiusM, 8px);
 
@@ -171,7 +171,7 @@
 
 [ui5-popover]::part(footer) {
   justify-content: flex-start;
-  border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  border-color: var(--sapField_BorderColor, var(--udexColorGrey6));
   box-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 rgba(34,54,73,0.3));
 }
 

package/src/themes/Footer.css

@@ -1,7 +1,7 @@
 :host {
   --udex-footer-container-xl-max-width: 1432px;
   --udex-footer-container-l-max-width: 1456px;
-  --udex-footer-background-color: var(--udexCoreSurfaceHigher, #EAECEE);
+  --udex-footer-background-color: var(--udexColorGrey2, #EAECEE);
   --udex-footer-icon-color: var(--udexColorGrey9, #223548);
   --udex-footer-text-color: var(--sapShell_NeutralColor, #475E75);
   --udex-footer-expandable-link-text-color: var(--sapTitleColor, #000);

package/src/themes/ImageGridTableItem.css

@@ -7,7 +7,7 @@
   --udex-image-grid-table-item-hover-scale: 1.1;
   --udex-image-grid-table-item-max-width-image-mobile: 160px;
   --udex-image-grid-table-item-body-color: var(--udexColorGrey7, #223548);
-  --udex-image-grid-table-item-headline-color: var(--udexCoreHeadingDark, #000);
+  --udex-image-grid-table-item-headline-color: var(--udexColorNeutralBlack, #000);
 }
 
 .udex-image-grid-table-item {

package/src/themes/MastheadItem.css

@@ -19,8 +19,8 @@
   --udex-masthead-item-icon-container-size: 2rem;
   --udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);
   --udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
-  --udex-masthead-item-dropdown-position-left: -55px;
-  --udex-masthead-item-dropdown-position-right: -55px;
+  --udex-masthead-item-dropdown-position-left: -52px;
+  --udex-masthead-item-dropdown-position-right: -52px;
   --udex-masthead-item-dropdown-min-width: 344px;
   --udex-masthead-item-dropdown-max-width: 400px;
   --udex-masthead-item-dropdown-mobile-min-width: 360px;
@@ -60,7 +60,7 @@
 .udex-masthead-item__button--icon + .udex-masthead-item__dropdown {
   top: 46px;
   left: auto;
-  right: -52px;
+  right: var(--udex-masthead-item-dropdown-position-right);
   min-width: var(--udex-masthead-item-dropdown-min-width);
   max-width: var(--udex-masthead-item-dropdown-max-width);
 }
@@ -406,7 +406,7 @@
   position: relative;
 }
 
-.udex-masthead-item__button--profile+.udex-masthead-item__dropdown-holder {
+.udex-masthead-item__button--profile+ .udex-masthead-item__dropdown .udex-masthead-item__dropdown-holder {
   padding: var(--udex-masthead-item-profile-padding-l);
 }
 
@@ -446,6 +446,7 @@
     display: initial;
   }
 
+  .udex-masthead-item__button--profile + .udex-masthead-item__dropdown .udex-masthead-item__dropdown-holder,
   :host .udex-masthead-item__dropdown-holder {
     padding: var(--udex-masthead-item-padding-m);
   }
@@ -514,6 +515,7 @@
     min-width: auto;
   }
 
+  .udex-masthead-item__button--profile + .udex-masthead-item__dropdown .udex-masthead-item__dropdown-holder,
   :host .udex-masthead-item__dropdown-holder {
     padding: var(--udex-masthead-item-padding-s);
   }
@@ -524,6 +526,7 @@
 }
 
 @media (max-width: 639px) {
+  .udex-masthead-item__button--profile + .udex-masthead-item__dropdown .udex-masthead-item__dropdown-holder,
   :host .udex-masthead-item__dropdown-holder {
     padding: var(--udex-masthead-item-padding-xs);
   }

package/src/themes/MastheadProfileMenu.css

@@ -72,12 +72,6 @@
   height: 100%;
 }
 
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__identities-list-wrap,
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__message,
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__header {
-  margin-bottom: var(--udexSpacer24);
-}
-
 .udex-masthead-profile-menu__identities-list-wrap {
   overflow: auto;
   height: 100%;
@@ -151,13 +145,6 @@
   overflow: auto;
 }
 
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__add-remove-btn,
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__btn,
-:host([_is-mobile-mode]) .udex-masthead-profile-menu__content {
-  margin-bottom: var(--udexSpacer24);
-  padding-top: 0;
-}
-
 :host([_is-mobile-mode]) .udex-masthead-profile-menu__add-remove-btn {
   margin-top: 0;
 }

package/src/themes/MastheadShell.css

@@ -19,7 +19,7 @@
   --udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);
   --udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);
   --udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));
-  --udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);
+  --udex-masthead-shell-close-button-divider-color: var(--udexColorGrey3, #D5DADD);
   --udex-masthead-shell-z-index: 10;
   --udex-masthead-shell-container-xl-max-width: 1432px;
   --udex-masthead-shell-container-l-max-width: 1456px;
@@ -90,7 +90,7 @@
   width: var(--udex-masthead-shell-co-brand-width);
   margin-inline-end: var(--udexSpacer24);
   padding-inline-start: var(--udexSpacer16);
-  border-inline-start: 1px solid var(--udexCoreDividerLight, #D5DADD);
+  border-inline-start: 1px solid var(--udexColorGrey3, #D5DADD);
 }
 
 .udex-masthead-shell__co-brand,

package/src/themes/MediaPlayer.css

@@ -1465,52 +1465,23 @@ video::-webkit-media-text-track-display {
 }
 
 .vjs-loading-spinner {
-  background-clip: padding-box;
-  border: .6em solid #2b333fb3;
-  border-radius: 50%;
   box-sizing: border-box;
   display: none;
-  height: 5em;
-  left: 50%;
-  opacity: .85;
   position: absolute;
-  text-align: left;
-  top: 50%;
-  transform: translate(-50%,-50%);
+  inset: 0;
   visibility: hidden;
-  width: 5em
+  background: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 60%);
+  align-items: center;
+  justify-content: center;
 }
 
 .vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner {
-  align-items: center;
   animation: vjs-spinner-show 0s linear .3s forwards;
   display: flex;
-  justify-content: center
 }
 
 .vjs-loading-spinner:after,.vjs-loading-spinner:before {
-  border: inherit;
-  border-color: #fff #0000 #0000;
-  border-radius: inherit;
-  box-sizing: inherit;
-  content: "";
-  height: inherit;
-  opacity: 1;
-  position: absolute;
-  width: inherit
-}
-
-.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before {
-  animation: vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite
-}
-
-.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before {
-  border-top-color: #fff
-}
-
-.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after {
-  animation-delay: .44s;
-  border-top-color: #fff
+  content: none;
 }
 
 .vjs-chapters-button .vjs-menu ul {

package/src/themes/PhoneNumberField.css

@@ -12,16 +12,16 @@
   --udex-phone-number-field-color-standard-active-icon: var(--sapSelectedColor, #0040b0);
 
   --udex-phone-number-field-color-error-default-background: var(--sapField_InvalidBackground, #fff);
-  --udex-phone-number-field-color-error-default-border: var(--udexCoreSemanticError6, #ee3939);
-  --udex-phone-number-field-color-error-default-control-button-border: var(--udexCoreSemanticError4, #ff8cb2);
+  --udex-phone-number-field-color-error-default-border: var(--udexColorRed6, #ee3939);
+  --udex-phone-number-field-color-error-default-control-button-border: var(--udexColorRed4, #ff8cb2);
 
   --udex-phone-number-field-color-error-hover-border: var(--sapField_InvalidColor, #d20a0a);
-  --udex-phone-number-field-color-error-active-border: var(--udexCoreSemanticError9, #840606);
-  --udex-phone-number-field-color-error-active-icon: var(--udexCoreSemanticError9, #840606);
+  --udex-phone-number-field-color-error-active-border: var(--udexColorRed9, #840606);
+  --udex-phone-number-field-color-error-active-icon: var(--udexColorRed9, #840606);
 
   --udex-phone-number-field-color-success-default-background: var(--sapField_SuccessBackground, #fff);
-  --udex-phone-number-field-color-success-default-border: var(--udexCoreSemanticSuccess6, #36a41d);
-  --udex-phone-number-field-color-success-default-control-button-border: var(--udexCoreSemanticSuccess6, #36a41d);
+  --udex-phone-number-field-color-success-default-border: var(--udexColorGreen6, #36a41d);
+  --udex-phone-number-field-color-success-default-control-button-border: var(--udexColorGreen6, #36a41d);
 
   --udex-phone-number-field-color-success-hover-border: var(--sapField_SuccessColor, #188918);
   --udex-phone-number-field-color-success-active-border: var(--sapSuccessColor, #1e592f);

package/src/themes/ProgressBar.css

@@ -8,6 +8,10 @@
   --udex-progress-bar-icon-right-position: -24px;
 }
 
+:host([value-state="Information"]) .ui5-progress-indicator-bar {
+  background-color:  var(--udexColorBlue7);
+}
+
 .ui5-progress-indicator-icon {
   width: var(--udex-progress-bar-icon-size);
   height: var(--udex-progress-bar-icon-size);

package/src/themes/PromoTile.css

@@ -14,10 +14,10 @@
   --udex-promo-tile-icon-height: 100%;
   --udex-promo-tile-icon-fill-color: inherit;
   --udex-promo-tile-eyebrow-color: var(--udexColorBlue8, #0057D2);
-  --udex-promo-tile-header-color-light: var(--udexCoreHeadingLight, #FFFFFF);
-  --udex-promo-tile-header-color-dark: var(--udexCoreHeadingDark, #000000);
-  --udex-promo-tile-text-color-light: var(--udexCoreTextLight, #FFFFFF);
-  --udex-promo-tile-text-color-dark: var(--udexCoreTextDark, #223548);
+  --udex-promo-tile-header-color-light: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-promo-tile-header-color-dark: var(--udexColorNeutralBlack, #000000);
+  --udex-promo-tile-text-color-light: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-promo-tile-text-color-dark: var(--udexColorGrey9, #223548);
 }
 
 :host ::slotted([slot="pictogram"]) {

package/src/themes/Review.css

@@ -1,6 +1,6 @@
 :host {
-  --udex-review-color: var(--udexCoreTextDark, #223548);
-  --udex-review-rating-color: var(--udexCoreHeadingDark, #000000);
+  --udex-review-color: var(--udexColorGrey9, #223548);
+  --udex-review-rating-color: var(--udexColorNeutralBlack, #000000);
   --udex-review-container-inline-padding: 0;
   --udex-review-container-vertical-padding: var(--udexSpacer32);
   --udex-review-container-vertical-padding-xs: var(--udexSpacer24);

package/src/themes/ReviewItem.css

@@ -4,10 +4,10 @@
   --udex-review-item-column-space-s-xs: var(--udexSpacer24, 24px);
   --udex-review-item-underline-color: var(--udexColorGrey1);
   --udex-review-item-text-font-family: var(--sapFontFamily, sans-serif);
-  --udex-review-item-text-color: var(--udexCoreTextDark, #223548);
+  --udex-review-item-text-color: var(--udexColorGrey9, #223548);
   --udex-review-item-text-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   --udex-review-item-text-gradient-height: 80px;
-  --udex-review-item-title-color: var(--udexCoreHeadingDark, #000000);
+  --udex-review-item-title-color: var(--udexColorNeutralBlack, #000000);
   --udex-review-item-date-and-author-color: var(--udexColorGrey6);
   --udex-review-item-max-text-height: 90px;
   --udex-review-item-color: var(--udexColorGrey9, #223548);

package/src/themes/Search.css

@@ -12,7 +12,7 @@
   --udex-input-font-weight-label-active: var(--udexTypographyFontWeightRegular, 400);
   --udex-input-line-height-label-active: var(--udexTypographyBodyLineHeight, 1.5);
 
-  --udex-input-color-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));
+  --udex-input-color-typed-text: var(--sapField_TextColor, var(--udexColorGrey9));
   --udex-input-color-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));
   --udex-input-color-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));
   --udex-input-color-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));
@@ -395,7 +395,7 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .udex-search__prefix-button:hover {
   cursor: pointer;
-  background-color: var(--udexCoreBase);
+  background-color: var(--udexColorNeutralWhite);
   color: var(--udexColorBlue8)
 }
 
@@ -406,7 +406,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .udex-search__prefix-button--active {
-  background-color: var(--udexCoreBase);
+  background-color: var(--udexColorNeutralWhite);
   color: var(--udexColorBlue10)
 }
 
@@ -427,7 +427,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__prefix-popover {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border: 1px solid var(--udexCoreBorderDefault);
+  border: 1px solid var(--udexColorGrey6);
   border-block-start: 0;
   box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
   background-color: var(--udexColorNeutralWhite, #fff);
@@ -437,7 +437,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__prefix-popover-top {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
-  border: 1px solid var(--udexCoreBorderDefault);
+  border: 1px solid var(--udexColorGrey6);
   border-block-end: 0;
   box-shadow: none;
   background-color: var(--udexColorNeutralWhite, #fff);