@sapudex/web-components 0.226.0 → 2.1.0

package/src/themes/Badge.css

@@ -2,18 +2,18 @@
   --udex-info-badge-text-radius: 0.375rem;
   --udex-info-badge-number-radius: 1rem;
   --udex-info-badge-text-border-width: 1px;
-  --udex-info-badge-text-large-font-size: 0.875rem;
-  --udex-info-badge-text-large-line-height: 1.313rem;
-  --udex-info-badge-text-large-height: 1.813rem;
-  --udex-info-badge-text-large-padding: var(--udexSpacer4) var(--udexSpacer8);
+  --udex-info-badge-text-medium-font-size: 0.875rem;
+  --udex-info-badge-text-medium-line-height: 1.313rem;
+  --udex-info-badge-text-medium-height: 1.813rem;
+  --udex-info-badge-text-medium-padding: var(--udexSpacer4) var(--udexSpacer8);
   --udex-info-badge-text-small-font-size: 0.75rem;
   --udex-info-badge-text-small-line-height: 1.125rem;
   --udex-info-badge-text-small-height: 1.625rem;
   --udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);
-  --udex-info-badge-number-large-font-size: 0.875rem;
-  --udex-info-badge-number-large-line-height: 1rem;
-  --udex-info-badge-number-large-height: 1rem;
-  --udex-info-badge-number-large-padding: 0 var(--udexSpacer4);
+  --udex-info-badge-number-medium-font-size: 0.875rem;
+  --udex-info-badge-number-medium-line-height: 1rem;
+  --udex-info-badge-number-medium-height: 1rem;
+  --udex-info-badge-number-medium-padding: 0 var(--udexSpacer4);
   --udex-info-badge-number-small-font-size: 0.75rem;
   --udex-info-badge-number-small-line-height: 0.875rem;
   --udex-info-badge-number-small-height: 0.875rem;
@@ -25,21 +25,21 @@
   --udex-neutral-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);
   --udex-neutral-badge-color-neutral-background: var(--sapNeutralBackground, var(--udexColorNeutralWhite, #ffffff));
 
-  --udex-info-badge-color-info-border-color: var(--sapMessage_InformationBorderColor, var(--udexColorBlue7, #0070f2));
-  --udex-info-badge-color-info-text-color: var(--sapInformationColor, var(--udexColorBlue9, #0040b0));
-  --udex-info-badge-color-info-background: var(--sapInformationBackground, var(--udexCoreSemanticInfo1, #ebf8ff));
+  --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-success-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #188918));
-  --udex-info-badge-color-success-text-color: var(--sapSuccessColor, #1e592f);
-  --udex-info-badge-color-success-background: var(--sapSuccessBackground, var(--udexCoreSemanticSuccess1, #f5fae5));
+  --udex-info-badge-color-positive-border-color: var(--sapMessage_SuccessBorderColor, var(--udexCoreSemanticSuccess7, #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-warning-border-color: var(--sapWarningBorderColor, var(--udexCoreSemanticWarning7, #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-error-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));
-  --udex-info-badge-color-error-text-color: var(--sapErrorColor, #840606);
-  --udex-info-badge-color-error-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));
+  --udex-info-badge-color-negative-border-color: var(--sapErrorBorderColor, var(--udexCoreSemanticError7, #d20a0a));
+  --udex-info-badge-color-negative-text-color: var(--sapErrorColor, #840606);
+  --udex-info-badge-color-negative-background: var(--sapErrorBackground,var(--udexCoreSemanticError1, #ffeaf4));
 
   --udex-number-badge-color-blue-text-color: var(--udexColorNeutralWhite,#ffffff);
   --udex-number-badge-color-blue-background: var(--udexColorBlue7, #0070f2);
@@ -47,9 +47,6 @@
   --udex-number-badge-color-red-text-color: var(--udexColorNeutralWhite,#ffffff);
   --udex-number-badge-color-red-background: var(--sapNegativeBackgroundColor, #d20a0a);
 
-  --udex-number-badge-color-white-text-color: var(--udexColorBlue7, #0070f2);
-  --udex-number-badge-color-white-background: var(--udexColorNeutralWhite, #ffffff);
-
   --udex-number-badge-color-neutral-background: var(--udexColorNeutralWhite, #ffffff);
   --udex-number-badge-color-neutral-text-color: var(--udexColorGrey9, #223548);
 }
@@ -69,11 +66,11 @@
   color: var(--udex-badge-icon-color);
 }
 
-.udex-badge--text.udex-badge--large {
-  line-height: var(--udex-info-badge-text-large-line-height);
-  height: var(--udex-info-badge-text-large-height);
-  font-size: var(--udex-info-badge-text-large-font-size);
-  padding: var(--udex-info-badge-text-large-padding);
+.udex-badge--text.udex-badge--medium {
+  line-height: var(--udex-info-badge-text-medium-line-height);
+  height: var(--udex-info-badge-text-medium-height);
+  font-size: var(--udex-info-badge-text-medium-font-size);
+  padding: var(--udex-info-badge-text-medium-padding);
 }
 
 .udex-badge--text.udex-badge--small {
@@ -87,11 +84,11 @@
   border-radius: var(--udex-info-badge-text-radius);
 }
 
-.udex-badge--text.udex-badge--info {
-  background: var(--udex-info-badge-color-info-background);
+.udex-badge--text.udex-badge--information {
+  background: var(--udex-info-badge-color-information-background);
   box-shadow: inset 0 0 0 var(--udex-info-badge-text-border-width)
-    var(--udex-info-badge-color-info-border-color);
-  color: var(--udex-info-badge-color-info-text-color);
+    var(--udex-info-badge-color-information-border-color);
+  color: var(--udex-info-badge-color-information-text-color);
 }
 
 .udex-badge--text.udex-badge--neutral {
@@ -101,18 +98,17 @@
   color: var(--udex-neutral-badge-color-neutral-text-color);
 }
 
-.udex-badge--text.udex-badge--success {
-  background: var(--udex-info-badge-color-success-background);
+.udex-badge--text.udex-badge--positive {
+  background: var(--udex-info-badge-color-positive-background);
   box-shadow: inset 0 0 0 var(--udex-info-badge-text-border-width)
-    var(--udex-info-badge-color-success-border-color);
-  color: var(--udex-info-badge-color-success-text-color);
+    var(--udex-info-badge-color-positive-border-color);
+  color: var(--udex-info-badge-color-positive-text-color);
 }
 
-.udex-badge--text.udex-badge--error {
-  background: var(--udex-info-badge-color-error-background);
-  box-shadow: inset 0 0 0 var(--udex-info-badge-text-border-width)
-    var(--udex-info-badge-color-error-border-color);
-  color: var(--udex-info-badge-color-error-text-color);
+.udex-badge--text.udex-badge--negative {
+  background: var(--udex-info-badge-color-negative-background);
+  box-shadow: inset 0 0 0 var(--udex-info-badge-text-border-width) var(--udex-info-badge-color-negative-border-color);
+  color: var(--udex-info-badge-color-negative-text-color);
 }
 
 .udex-badge--text.udex-badge--warning {
@@ -126,11 +122,11 @@
   border-radius: var(--udex-info-badge-number-radius);
 }
 
-.udex-badge--number.udex-badge--large {
-  padding: var(--udex-info-badge-number-large-padding);
-  height: var(--udex-info-badge-number-large-height);
-  line-height: var(--udex-info-badge-number-large-line-height);
-  font-size: var(--udex-info-badge-number-large-font-size);
+.udex-badge--number.udex-badge--medium {
+  padding: var(--udex-info-badge-number-medium-padding);
+  height: var(--udex-info-badge-number-medium-height);
+  line-height: var(--udex-info-badge-number-medium-line-height);
+  font-size: var(--udex-info-badge-number-medium-font-size);
 }
 
 .udex-badge--number.udex-badge--small {
@@ -150,13 +146,7 @@
   background: var(--udex-number-badge-color-red-background);
 }
 
-.udex-badge--number.udex-badge--white {
-  color: var(--udex-number-badge-color-white-text-color);
-  background: var(--udex-number-badge-color-white-background);
-  font-weight: var(--udexTypographyFontWeightMedium);
-}
-
 .udex-badge--number.udex-badge--neutral {
   color: var(--udex-number-badge-color-neutral-text-color);
   background: var(--udex-number-badge-color-neutral-background);
-}
+}

package/src/themes/Breadcrumbs.css

@@ -1,6 +1,7 @@
 :host {
   --udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));
   --udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);
+  --udex-breadcrumbs-item-line-height: var(--udexTypographyBodyLineHeight, 1.5);
   --udex-breadcrumbs-margin: 0;
 }
 
@@ -59,6 +60,7 @@
 .udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],
 .udex-breadcrumbs__item[focused],
 .udex-breadcrumbs__item {
+  font-family: var(--sapFontFamily);
   color: var(--udex-breadcrumbs-item-color);
   --sapLinkColor: var(--udex-breadcrumbs-item-color);
   --sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);
@@ -71,7 +73,7 @@
 }
 
 .udex-breadcrumbs__item {
-  line-height: 18px;
+  line-height: var(--udex-breadcrumbs-item-line-height);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper {

package/src/themes/BreadcrumbsPopover.css

@@ -1,31 +1,14 @@
 :host {
   --udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B));
   --udex-breadcrumbs-current-item-color:  var(--udexCoreTextDark, #223548);
-  --udex-breadcrumbs-dropdown-item-font-size:  13px;
-}
-
-.udex-breadcrumbs__item {
-  font-family: var(--sapFontFamily);
-  color: var(--udex-breadcrumbs-item-color);
-  --sapLinkColor: var(--udex-breadcrumbs-item-color);
-  --sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);
-  --sapLink_Active_Color: var(--udex-breadcrumbs-item-color);
-  --sapFontSize: var(--udex-breadcrumbs-dropdown-item-font-size);
-  --sapLinkColor: var(--udex-breadcrumbs-item-color);
-  --sapLink_Active_Color: var(--udex-breadcrumbs-item-color);
-  --udex-link-text-decoration: none;
-  position: relative;
-}
-
-.udex-breadcrumbs__item {
-  line-height: 18px;
+  --udex-breadcrumbs-dropdown-item-font-size:  var(--udexTypographyNavigationMediumXSFontSize, 12px);
+  --udex-breadcrumbs-dropdown-item-line-height:  var(--udexTypographyNavigationLineHeight, 1.1);
 }
 
 .udex-breadcrumbs__popover {
-  --udex-dropdown-vertical-distance: 4px;
-  --udex-dropdown-box-shadow: var(--sapContent_Shadow2, 0px 10px 30px 0px rgba(34, 54, 73, 0.25));
-  --udex-dropdown-border-radius: 0;
+  --udex-dropdown-vertical-distance: var(--udexSpacer4, 4px);
   --udex-dropdown-border-width: 0;
+  --udex-dropdown-border-radius: 0;
   --udex-dropdown-pane-max-width: fit-content;
 }
 
@@ -44,18 +27,15 @@
 
 .udex-breadcrumbs__popover-content .udex-breadcrumbs__item {
   font-size: var(--udex-breadcrumbs-dropdown-item-font-size);
-  line-height: 13px;
-  height: 17px;
+  line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
+  --udex-link-line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
   --udex-link-icon-height: 12px;
   --udex-link-icon-width: 12px;
 }
 
 .udex-breadcrumb__item--current {
   color: var(--udex-breadcrumbs-current-item-color);
-  font-weight: 500;
-  font-size: var(--udex-breadcrumbs-dropdown-item-font-size);
-  line-height: 13px;
-  line-height: 13px;
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
 }
 
 .udex-breadcrumbs__popover::part(content) {
@@ -67,7 +47,7 @@
 }
 
 .udex-breadcrumbs__item--with-icon:dir(ltr) ~ .udex-breadcrumbs__item {
-  padding-left: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));  
+  padding-left: calc(var(--udex-link-icon-width) + var(--udexSpacer4, 4px));
 }
 
 .udex-breadcrumbs__item--with-icon:dir(rtl) ~ .udex-breadcrumbs__item {
@@ -224,4 +204,4 @@
 }
 .udex-breadcrumbs__item--25:dir(rtl) {
   margin-right: calc(var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12) + var(--udexSpacer12));
-}
+}

package/src/themes/Button.css

@@ -15,6 +15,7 @@
   --udex-button-icon-text-spacing-small-size: 4px;
   --udex-button-icon-text-spacing-medium-size: 8px;
   --udex-button-icon-text-spacing-large-size: 8px;
+  --udex-button-focus-border-radius: 0.375rem;
   --udexTypographyFontWeightMedium: 500;
 
   /* Primary design */
@@ -225,6 +226,10 @@
   --udex-button-color-warning-toggled-disabled-text-and-icon: var(--sapButton_Attention_Selected_TextColor, var(--udexCoreSemanticWarning10));
 }
 
+:host([desktop][active]) .ui5-button-root:focus-within:before {
+  border-radius: var(--udex-button-focus-border-radius);
+}
+
 :host {
   display: inline-block;
   font-weight: var(--udexTypographyFontWeightMedium);
@@ -254,6 +259,8 @@
   inset: var(--udex-button-invisible-focus-inset);
 }
 
+
+
 :host,
 :host([size="Medium"]) {
   font-size: 1rem;
@@ -311,50 +318,53 @@
   padding: var(--udex-button-icon-only-padding-large);
 }
 
-:host([icon-only][icon-end])::part(icon) {
+:host([icon-only][end-icon])::part(icon) {
   margin: 0px;
 }
 
-:host([icon-end])::part(icon) {
+:host([end-icon])::part(icon) {
   margin-inline-start: 0;
 }
 
-:host([size="Small"])::part(icon) {
+:host([size="Small"])::part(icon),
+:host([size="Small"])::part(endIcon)  {
   height: var(--udex-button-icon-s-size, 14px);
   width: var(--udex-button-icon-s-size, 14px);
 }
 
-:host([size="Medium"])::part(icon) {
+:host([size="Medium"])::part(icon),
+:host([size="Medium"])::part(endIcon)  {
   height: var(--udex-button-icon-m-size, 16px);
   width: var(--udex-button-icon-m-size, 16px);
 }
 
-:host([size="Large"])::part(icon) {
+:host([size="Large"])::part(icon),
+:host([size="Large"])::part(endIcon)  {
   height: var(--udex-button-icon-l-size, 18px);
   width: var(--udex-button-icon-l-size, 18px);
 }
 
-:host([has-icon]:not([icon-only])[size="Small"][icon-end]) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Small"][end-icon]) .ui5-button-text {
   margin-inline-end: var(--udex-button-icon-text-spacing-small-size);
 }
 
-:host([has-icon]:not([icon-only])[size="Small"]:not([icon-end])) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Small"]:not([end-icon])) .ui5-button-text {
   margin-inline-start: var(--udex-button-icon-text-spacing-small-size);
 }
 
-:host([has-icon]:not([icon-only])[size="Medium"][icon-end]) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Medium"][end-icon]) .ui5-button-text {
   margin-inline-end: var(--udex-button-icon-text-spacing-medium-size);
 }
 
-:host([has-icon]:not([icon-only])[size="Medium"]:not([icon-end])) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Medium"]:not([end-icon])) .ui5-button-text {
   margin-inline-start: var(--udex-button-icon-text-spacing-medium-size);
 }
 
-:host([has-icon]:not([icon-only])[size="Large"][icon-end]) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Large"][end-icon]) .ui5-button-text {
   margin-inline-end: var(--udex-button-icon-text-spacing-large-size);
 }
 
-:host([has-icon]:not([icon-only])[size="Large"]:not([icon-end])) .ui5-button-text {
+:host([has-icon]:not([icon-only])[size="Large"]:not([end-icon])) .ui5-button-text {
   margin-inline-start: var(--udex-button-icon-text-spacing-large-size);
 }
 
@@ -363,6 +373,7 @@
 :host,
 :host([design="Emphasized"]),
 :host([design="Primary"]) {
+  font-family: var(--sapFontFamily);
   color: var(--udex-button-color-primary-standard-default-text-and-icon);
   background-color: var(--udex-button-color-primary-standard-default-background);
   border: 1px solid var(--udex-button-color-primary-standard-default-background);

package/src/themes/Carousel.css

@@ -51,6 +51,7 @@
 .udex-carousel__navigation--bottom .udex-carousel__navigation-button:first-child {
   margin-inline-end: 4.7rem;
 }
+
 .udex-carousel__navigation--bottom .udex-carousel__navigation-button:last-child {
   margin-inline-start: 4.7rem;
 }

package/src/themes/Checkbox.css

@@ -1,5 +1,122 @@
+:host {
+  --udex-checkbox-success-border-color: var(--udexColorGreen6, #36A41D);
+  --udex-checkbox-success-background-hover: var(--udexColorGreen1, #F5FAE5);
+  --udex-checkbox-success-icon-color: var(--udexColorGreen8, #256F3A);
+  --udex-checkbox-success-indeterminate-color: var(--udexColorGreen8, #256F3A);
+  --udex-checkbox-error-border-color: var(--udexColorRed6, #EE3939);
+  --udex-checkbox-error-background-hover: var(--udexColorRed1, #FFEAF4);
+  --udex-checkbox-error-icon-color: var(--udexColorRed8, #AA0808);
+  --udex-checkbox-error-indeterminate-color: var(--udexColorRed8, #AA0808);
+  --udex-checkbox-background: var(--sapBackgroundColor, #FFF);
+  --udex-checkbox-width-height: 24px;
+  --udex-checkbox-root-width-height: 42px;
+  --udex-checkbox-border: var(--sapElement_BorderWidth) solid var(--sapField_BorderColor);
+  --udex-checkbox-border-radius: var(--udexRadiusXS, 4px);
+  --udex-checkbox-checkmark-color: var(--udexColorBlue7, #0070F2);
+  --udex-checkbox-selected-border-color: var(--sapField_BorderColor, #5B738B);
+  --udex-checkbox-label-color: var(--udexColorGrey9, #223548);
+  --udex-checkbox-label-offset: 2px;
+  --udex-checkbox-hover-background: var(--sapInformationBackground, #EBF8FF);
+  --udex-checkbox-hover-border-color: var(--sapContent_Selected_ForegroundColor, #0070f2);
+  --udex-checkbox-icon-size: 16px;
+  --udex-checkbox-disabled-label-color: var(--udexColorGrey9, #223548);
+  --udex-checkbox-disabled-border-color: var(--sapField_BorderColor, #5B738B);
+  --udex-checkbox-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
+  --udex-checkbox-active-border-color: var(--sapSelectedColor, #0070F2);
+  --udex-checkbox-readonly-border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
+}
+
+:host([active]:not([checked]):not([value-state]):not([disabled])) .ui5-checkbox-inner,
+:host([active]:not([checked])[value-state="None"]:not([disabled])) .ui5-checkbox-inner {
+  border-color: var(--udex-checkbox-active-border-color);
+}
+
+:host([disabled]) .ui5-checkbox-label {
+  color: var(--udex-checkbox-disabled-label-color);
+}
+
+:host([disabled]) .ui5-checkbox-inner {
+  border-color: var(--udex-checkbox-disabled-border-color);
+}
+
+.ui5-checkbox-icon,
+:host([indeterminate][checked]) .ui5-checkbox-inner::after {
+  width: var(--udex-checkbox-icon-size);
+  height: var(--udex-checkbox-icon-size);
+}
+
+.ui5-checkbox-inner {
+  background: var(--udex-checkbox-background);
+  min-width: var(--udex-checkbox-width-height);
+  max-width: var(--udex-checkbox-width-height);
+  height: var(--udex-checkbox-width-height);
+  max-height: var(--udex-checkbox-width-height);
+  border: var(--udex-checkbox-border);
+  border-radius: var(--udex-checkbox-border-radius);
+  color: var(--udex-checkbox-checkmark-color);
+}
+
+:host([checked]:not([value-state])) .ui5-checkbox-inner,
+:host([checked][value-state="None"]) .ui5-checkbox-inner {
+  border-color: var(--udex-checkbox-selected-border-color);
+}
+
+.ui5-checkbox-root .ui5-checkbox-label {
+  color: var(--udex-checkbox-label-color);
+  margin-inline-start: var(--udex-checkbox-label-offset);
+}
+
+:host(:not([active])[checked]:not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner,
+:host(:not([active])[checked][value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner,
+:host(:not([active]):not([checked]):not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner,
+:host(:not([active]):not([checked])[value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+  background: var(--udex-checkbox-hover-background);
+  border-color: var(--udex-checkbox-hover-border-color);
+}
+
+:host([display-only]) .ui5-checkbox-display-only-icon-inner {
+  min-width: var(--udex-checkbox-width-height);
+  min-height: var(--udex-checkbox-root-width-height);
+}
+
+:host([disabled]) .ui5-checkbox-root {
+  opacity: var(--udex-checkbox-disabled-opacity);
+}
+
 :host([readonly]){
-    --sapField_TextColor: var(--sapField_ReadOnly_BorderColor);
+  --sapField_TextColor: var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([value-state="Success"]) .ui5-checkbox-inner {
+  border-color: var(--udex-checkbox-success-border-color);
+}
+
+:host(:not([disabled])[value-state="Success"]:hover) .ui5-checkbox-inner {
+  background: var(--udex-checkbox-success-background-hover);
+}
+
+:host(:not([readonly])[value-state="Success"]) .ui5-checkbox-icon {
+  color: var(--udex-checkbox-success-icon-color);
+}
+
+:host(:not([readonly])[value-state="Success"][indeterminate][checked]) .ui5-checkbox-inner:after {
+  background: var(--udex-checkbox-success-indeterminate-color);
+}
+
+:host([value-state="Error"]) .ui5-checkbox-inner {
+  border-color: var(--udex-checkbox-error-border-color);
+}
+
+:host(:not([disabled])[value-state="Error"]:hover) .ui5-checkbox-inner {
+  background: var(--udex-checkbox-error-background-hover);
+}
+
+:host(:not([readonly])[value-state="Error"]) .ui5-checkbox-icon {
+  color: var(--udex-checkbox-error-icon-color);
+}
+
+:host(:not([readonly])[value-state="Error"][indeterminate][checked]) .ui5-checkbox-inner:after {
+  background: var(--udex-checkbox-error-indeterminate-color);
 }
 
 :host([display-only])::part(icon) {
@@ -7,8 +124,8 @@
   width: 24px;
 }
 
-:host([text]) .ui5-checkbox-root,
-.ui5-checkbox-root {
+.ui5-checkbox-root,
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root {
   padding: 0;
   padding-inline-end: var(--udexSpacer2, 2px)
 }
@@ -17,18 +134,14 @@
   margin: 9px;
 }
 
-.ui5-checkbox-root .ui5-checkbox-label {
-  margin-inline-start: 2px;
-}
-
 :host([readonly]) .ui5-checkbox-inner,
 :host([readonly][value-state="Warning"][value-state="Error"][value-state="Success"]) .ui5-checkbox-inner {
   background: var(--sapField_ReadOnly_Background);
-  border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed;
+  border: var(--udex-checkbox-readonly-border);
   color: var(--sapField_TextColor);
 }
 
 :host([required]) .ui5-checkbox-label::after {
   padding-inline: var(--udexSpacer8) var(--udexSpacer2);
   content: "*";
-}
+}

package/src/themes/ControlButton.css

@@ -72,6 +72,7 @@
   min-width: var(--udex-control-button-medium-width);
   font-weight: var(--udex-control-button-font-weight);
   line-height: var(--udex-control-button-line-height);
+  font-family: var(--sapFontFamily);
 }
 
 :host([has-icon]:not([icon-end])) .ui5-button-text {

package/src/themes/DatePicker.css

@@ -13,10 +13,6 @@
   min-width: var(--udex-date-picker-width);
   background-color: var(--udexNeutralColorWhite, #ffffff);
   border-radius: 8px;
-  box-shadow: 0 2px 8px 0 #2236494D;
-  position: absolute;
-  top: 42px;
-  z-index: 100;
 }
 
 .udex-date-picker__input {

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);
   }