@sapudex/web-components 0.117.1 → 0.138.0

package/src/themes/SecondaryNavigation.css

@@ -1,20 +1,22 @@
 :host {
   --udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-padding: 0 var(--udexSpacer84);
-  --udex-secondary-navigation-height: 72px;
   --udex-secondary-navigation-min-height: 72px;
-  --udex-secondary-navigation-z-index: 10;
+  --udex-secondary-navigation-z-index: 9;
   --udex-secondary-navigation-background: #FFF;
 
   --udex-secondary-navigation-title-color-hover: var(--udexColorBlue8,  #0057D2);
   --udex-secondary-navigation-title-color: var(--udexColorGrey9, #223548);
   --udex-secondary-navigation-title-font-size: var(--udexTypographyBodySFontSize, 16px);
-  --udex-secondary-navigation-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  --udex-secondary-navigation-title-line-height: 18px;
   --udex-secondary-navigation-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
   --udex-secondary-navigation-title-border-color: var(--udexColorGrey3, #D5DADD);
   --udex-secondary-navigation-title-max-width: 248px;
   --udex-secondary-navigation-mobile-button-border-color: var(--udexColorGrey3, #D5DADD);
 
+  --udex-secondary-navigation-container-xl-max-width: 1432px;
+  --udex-secondary-navigation-container-l-max-width: 1456px;
+
   border-bottom: 1px solid var(--udex-secondary-navigation-border-color);
   display: block;
   padding: var(--udex-secondary-navigation-padding);
@@ -24,10 +26,8 @@
 }
 
 .udex-secondary-navigation__root {
-  max-width: 1428px;
+  max-width: var(--udex-secondary-navigation-container-xl-max-width);
   margin: 0 auto;
-  padding-top: var(--udexSpacer12);
-  height: var(--udex-secondary-navigation-height);
   min-height: var(--udex-secondary-navigation-min-height);
   box-sizing: border-box;
   display: flex;
@@ -41,7 +41,6 @@
 }
 
 .udex-secondary-navigation__title {
-  max-width: var(--udex-secondary-navigation-title-max-width);
   font-family: var(--sapFontFamily);
   font-size: var(--udex-secondary-navigation-title-font-size);
   line-height: var(--udex-secondary-navigation-title-line-height);
@@ -95,21 +94,23 @@ a.udex-secondary-navigation__title:focus-visible {
 }
 
 .udex-secondary-navigation__heading {
-  margin-inline-end: var(--udexSpacer16);
+  max-width: var(--udex-secondary-navigation-title-max-width);
+  box-sizing: border-box;
+  margin-inline-end: var(--udexSpacer20);
   padding-inline-end: var(--udexSpacer20);
-  position: relative;
+  margin-bottom: 18px;
   flex-shrink: 0;
-  align-items: flex-start;
+  position: relative;
 }
 
 .udex-secondary-navigation__heading:before {
-  height: calc(var(--udex-secondary-navigation-title-font-size)* 1.25);
   background: var(--udex-secondary-navigation-title-border-color);
   content: '';
   position: absolute;
   width: 1px;
   right: 0;
   top: 0;
+  bottom: 0;
 }
 
 .udex-secondary-navigation__heading:dir(rtl):before {
@@ -125,11 +126,38 @@ a.udex-secondary-navigation__title:focus-visible {
   display: none;
 }
 
+.udex-secondary-navigation__breadcrumbs {
+  padding-top: var(--udexSpacer12);
+}
+
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__list,
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__heading,
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item {
+  align-items: center;
+}
+
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__heading {
+  height: fit-content;
+  margin-block: auto;
+}
+
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item {
+  height: 100%;
+  display: flex;
+}
+
+.udex-secondary-navigation__root_centered .udex-secondary-navigation__buttons {
+  margin-top: 0;
+}
+
 @media (max-width: 1599px) {
   :host {
     padding-left: var(--udexSpacer72);
     padding-right: var(--udexSpacer72);
   }
+  .udex-secondary-navigation__root {
+    max-width: var(--udex-secondary-navigation-container-l-max-width);
+  }
 }
 
 @media (max-width: 979px) {
@@ -162,7 +190,7 @@ a.udex-secondary-navigation__title:focus-visible {
   }
 
   .udex-secondary-navigation__buttons {
-    padding: var(--udexSpacer24) var(--udexSpacer48) var(--udexSpacer8);
+    padding: var(--udexSpacer24) var(--udexSpacer48);
     margin-top: var(--udexSpacer16);
     position: relative;
   }
@@ -188,7 +216,7 @@ a.udex-secondary-navigation__title:focus-visible {
   }
 
   .udex-secondary-navigation__buttons {
-    padding: var(--udexSpacer24) var(--udexSpacer24) var(--udexSpacer8);
+    padding: var(--udexSpacer24);
     flex-direction: column;
     align-items: flex-start;
   }

package/src/themes/SecondaryNavigationItem.css

@@ -30,7 +30,8 @@
   font-size: var(--udex-secondary-navigation-item-font-size);
   line-height: var(--udex-secondary-navigation-item-line-height);
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  height: 100%;
   text-decoration: none;
   background: none;
   cursor: pointer;
@@ -66,7 +67,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: -1px;
   height: 3px;
 }
 
@@ -155,19 +156,19 @@
     min-height: 100%;
     width: 100%;
     z-index: 1;
+    display: flex;
+    align-items: center;
   }
 
   .udex-secondary-navigation__item-sub-title {
     font-family: var(--sapFontFamily);
     font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
     line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-    margin-top: var(--udexSpacer8);
     font-weight: normal;
     display: block;
   }
 
   .udex-secondary-navigation__dropdown {
-    padding: var(--udexSpacer16) 0;
     border-radius: 0 0 var(--udexRadiusM) var(--udexRadiusM);
     box-shadow: var(--udex-secondary-navigation-item-mobile-dropdown-shadow);
   }
@@ -200,6 +201,7 @@
     text-align: left;
     width: 100%;
     padding-inline-end: var(--udexSpacer32);
+    gap: var(--udexSpacer16);
   }
 
   .udex-secondary-navigation__item-text-wrap:dir(rtl){

package/src/themes/SecondaryNavigationSubItem.css

@@ -3,8 +3,8 @@
   --udex-secondary-navigation-sub-item-line-height: 1.125rem;
   --udex-secondary-navigation-sub-item-color: var(--udexColorGrey9, #223548);
   --udex-secondary-navigation-sub-item-hover-color: var(--udexColorBlue7, #0070f2);
-  --udex-secondary-navigation-sub-item-hover-bakground: var(--udexColorGrey1, #F5F6F7);
-  --udex-secondary-navigation-sub-item-active-bakground: var(--udexColorGrey2, #EAECEE);
+  --udex-secondary-navigation-sub-item-hover-background: var(--udexColorGrey1, #F5F6F7);
+  --udex-secondary-navigation-sub-item-active-background: var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-sub-item-active-border-color: var(--udexColorBlue7, #0070f2);
 }
 
@@ -26,6 +26,7 @@ button.udex-secondary-navigation__dropdown-item {
   background: none;
   justify-content: space-between;
   align-items: center;
+  text-align: left;
 }
 
 .udex-secondary-navigation__dropdown-item:focus {
@@ -68,11 +69,11 @@ button.udex-secondary-navigation__dropdown-item {
 }
 
 .udex-secondary-navigation__dropdown-item:hover {
-  background: var(--udex-secondary-navigation-sub-item-hover-bakground);
+  background: var(--udex-secondary-navigation-sub-item-hover-background);
 }
 
 .udex-secondary-navigation__dropdown-item:active {
-  background: var(--udex-secondary-navigation-sub-item-active-bakground);
+  background: var(--udex-secondary-navigation-sub-item-active-background);
 }
 
 .udex-secondary-navigation__dropdown:dir(rtl) {
@@ -92,7 +93,6 @@ button.udex-secondary-navigation__dropdown-item {
 @media (max-width: 979px) {
   .udex-secondary-navigation__dropdown-item {
     padding: var(--udexSpacer12) var(--udexSpacer48);
-    text-align: left;
   }
 
   .udex-secondary-navigation__dropdown-item:hover .udex-secondary-navigation__dropdown-icon,

package/src/themes/SelectBox.css

@@ -1,3 +1,10 @@
+:host {
+  --udex-select-box-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  --udex-select-box-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-select-box-popover-border-width: var(--sapElement_BorderWidth, 1px);
+  --udex-select-box-popover-border-radius: var(--udexRadiusM, 8px);
+}
+
 :host([disabled]) .udex-text-field__trigger,
 :host([readonly]) .udex-text-field__trigger {
   cursor: inherit;
@@ -57,45 +64,39 @@
   right: 0;
 }
 
-:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color:  var(--udexCoreSemanticError9, #840606);
-}
-
 :host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
 }
 
 :host([value-state="Error"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
   border-left: none;
 }
 
-:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color: var(--udexCoreSemanticSuccess9, #1E592F);
-}
-
 :host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
 }
 
 :host([value-state="Success"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
   border-left: none;
 }
 
-:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color: var(--udexCoreSemanticWarning9, #8D2A00);
-}
-
 :host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
 }
 
 :host([value-state="Warning"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
   border-left: none;
 }
 
@@ -123,15 +124,19 @@
 }
 
 .udex-text-field__trigger {
-  cursor: pointer;
-  height: 42px;
-  min-width: 42px;
+  --udex-control-button-large-height: 42px;
+  --udex-control-button-large-width: 42px;
+  
+  width: 38px;
+  background: none;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
   border-radius: var(--udexRadiusXS);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin-inline-start: auto;
+  padding: var(--udexSpacer4, 4px);
   z-index: 1;
+  color: var(--udexColorGrey7, #475E75);
 }
 
 .udex-text-field__text-holder {
@@ -184,12 +189,7 @@
   margin-inline-start: -20px;
 }
 
-:host .udex-text-field__icon {
-  margin-inline-end: 0;
-  color: var(--udexColorGrey7, #475E75);
-}
-
-:host .udex-text-field__input[open] .udex-text-field__icon {
+:host .udex-text-field__input[open] .udex-text-field__trigger {
   color: var(--udexColorBlue9, #0040B0);
 }
 
@@ -257,3 +257,30 @@
   margin: 0;
   padding: 0;
 }
+
+.udex-select-box__dropdown {
+  width: var(--udex-dropdown-pane-width);
+  border: var(--udex-select-box-popover-border-width) solid var(--udex-select-box-popover-border-color);
+  border-radius: var(--udex-select-box-popover-border-radius);
+  box-shadow: var(--udex-select-box-popover-shadow);
+}
+
+.udex-no-result {
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  color: var(--sapContent_TitleColor, #000000);
+  padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
+}
+
+
+.udex-select-box__dropdown::part(header),
+.udex-select-box__dropdown::part(footer) {
+  padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+}
+
+.udex-select-box__dropdown::part(content) {
+  padding: 0;
+  overflow: auto;
+}

package/src/themes/StepInput.css

@@ -39,7 +39,10 @@
     --udex-control-button-large-height: var(--udex-step-input-button-size);
     --udex-control-button-large-width: var(--udex-step-input-button-size);
 
-    z-index: 2;
+    position: relative;
+    padding: var(--udexSpacer4, 4px);
+    width: 38px;
+    z-index: 3;
     background: none;
     flex-shrink: 0;
 }
@@ -121,4 +124,4 @@
 
 :host .udex-step-input__button_inc {
     order: 3;
-}
+}

package/src/themes/TabNavigation.css

@@ -153,7 +153,6 @@
   display: flex;
   align-items: center;
   position: relative;
-  z-index: 0;
 }
 
 .udex-tab-navigation__header:before {
@@ -355,6 +354,13 @@
   line-height: var(--udex-tab-navigation-content-line-height);
 }
 
+.udex-tab-navigation__content-item:focus,
+.udex-tab-navigation__content-item:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid var(--udex-button-tab-text-color-active);
+  border-radius: var(--udexRadiusXXS, 2px);
+}
+
 .hidden {
   display: none;
 }