@sapudex/web-components 2.60.0 → 2.62.0

package/src/themes/MessageStrip.css

@@ -21,7 +21,9 @@
   --udex-message-strip-color-warning-status: var(--udexColorMango8, #A93E00);
   --udex-message-strip-color-error-status: var(--udexColorRed8, #AA0808);
 
-  --udex-message-strip-close-icon-top: calc(50% - 13px);
+  --udex-message-strip-close-icon-top: var(--udexSpacer8, 8px);
+  --udex-message-strip-icon-top: var(--udexSpacer8, 8px);
+  --udex-message-strip-icon-height: 24px;
 
   --udex-message-strip-min-height: 20px;
   --udex-message-strip-padding-inline-end-no-icon: 36px;
@@ -156,7 +158,10 @@
 }
 
 .ui5-message-strip-icon-wrapper {
-  top: calc(50% - var(--udexSpacer8, 8px));
+  height: var(--udex-message-strip-icon-height);
+  top: var(--udex-message-strip-icon-top);
+  display: flex;
+  align-items: center;
 }
 
 .ui5-message-strip-root {

package/src/themes/Modal.css

@@ -52,7 +52,7 @@
   height: auto;
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   :host(:not([type="basic"])) {
     min-width: 100%;
     min-height: 100%;

package/src/themes/PromoTile.css

@@ -18,6 +18,7 @@
   --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);
+  --udex-promo-tile-image-object-fit: contain;
 }
 
 :host ::slotted([slot="pictogram"]) {
@@ -65,7 +66,7 @@
 .udex-promo-tile__pictogram img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: var(--udex-promo-tile-image-object-fit);
 }
 
 .udex-promo-tile--horizontal .udex-promo-tile__pictogram,
@@ -134,7 +135,7 @@
     align-items: center;
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-promo-tile--horizontal {
     padding: var(--udexSpacer24, 24px);
     gap: var(--udexSpacer24, 24px);
@@ -150,7 +151,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-promo-tile--horizontal {
     flex-direction: column;
   }

package/src/themes/Quote.css

@@ -139,7 +139,7 @@
   padding-inline: 34px;
 }
 
-@media screen and (max-width: 1279px) {
+@media screen and (width < 1280px) {
   .udex-quote__container {
     gap: var(--udexSpacer16);
   }
@@ -180,7 +180,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-quote__container {
     flex-direction: column;
     gap: var(--udexSpacer16);

package/src/themes/Review.css

@@ -129,7 +129,7 @@
   display: none;
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-review__rating {
     font-size: var(--udexTypographyDisplayBoldSFontSize);
   }
@@ -161,7 +161,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-review__rating {
     font-size: var(--udexTypographyDisplayBoldXSFontSize);
   }

package/src/themes/ReviewItem.css

@@ -114,7 +114,7 @@
   margin: 0;
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   .udex-review-item {
     gap: calc((100vw - (11 * var(--udex-review-item-column-space-l-m))) / 12);
   }
@@ -124,7 +124,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-review-item {
     display: flex;
     flex-direction: column;

package/src/themes/SecondaryNavigation.css

@@ -180,10 +180,9 @@ a.udex-secondary-navigation__title:focus-visible {
   }
 
   .udex-secondary-navigation__root {
-    padding: 0 0 var(--udexSpacer24) 0;
-    overflow: hidden;
     height: 100%;
     max-height: 100vh;
+    min-height: auto;
   }
 
   .udex-secondary-navigation__list {

package/src/themes/SecondaryNavigationItem.css

@@ -143,13 +143,10 @@
   }
 
   .udex-secondary-navigation__dropdown {
-    position: relative;
-    box-shadow: none;
-    min-width: initial;
-    max-width: initial;
-    left: initial;
+    max-width: 100%;
+    left: 0;
+    right: 0;
     margin-top: initial;
-    top: initial;
     overflow-y: auto;
     max-height: calc(var(--udex-secondary-navigation-item-dropdown-mobile-max-height) - var(--udexSpacer24));
   }

package/src/themes/SelectBase.css

@@ -231,7 +231,7 @@
   outline: none;
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-select-box__dropdown {
     --udex-dropdown-pane-min-width-xs: var(--udex-select-box-popover-min-width);
   }

package/src/themes/SideNavigation.css

@@ -1,10 +1,8 @@
 :host {
-  --udex-side-navigation-box-shadow: none;
-  --udex-side-navigation-padding: var(--udexSpacer40);
   --udex-side-navigation-navigation-separator-radius: 0;
   --udex-side-navigation-navigation-separator-background-color: var(--udexColorGrey3);
   --udex-side-navigation-navigation-separator-height: 1px;
-  --udex-side-navigation-navigation-separator-margin: var(--udexSpacer16) 0;
+  --udex-side-navigation-navigation-separator-margin: var(--udexSpacer2) 0;
   --udex-grid-gutter: 3rem;
   --udex-grid-margin-m: 4.5rem;
   --udex-grid-margin-l: 4.5rem;
@@ -27,13 +25,12 @@
 :host(:not([hidden])) {
   box-shadow: var(--udex-side-navigation-box-shadow);
   font-family: var(--sapFontFamily);
-  max-width: var(--udex-side-navigation-max-width);
   width: 100%;
 }
 
-.ui5-sn-root .ui5-sn-list {
-  padding: var(--udex-side-navigation-padding) 0 0;
-  margin: 0;
+:host(:not([hidden])),
+.ui5-sn-list.ui5-sn-flexible {
+  min-width: auto;
 }
 
 .ui5-sn-fixed {
@@ -41,12 +38,33 @@
   margin: 0;
 }
 
+:host(:not([variant="Content"])) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible {
+  padding: var(--udexSpacer8) 0;
+}
+
+:host([variant="Content"]) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible {
+  padding: 0;
+}
+
+/* Mobile dropdown nav: no block padding on the flexible list (same as Content).
+   Placed after the Full Page rule so it wins for the non-Content mobile nav. */
+:host([in-mobile]) .ui5-sn-root .ui5-sn-list.ui5-sn-flexible {
+  padding: 0;
+}
+
+.ui5-sn-root .ui5-sn-list.ui5-sn-fixed {
+  padding: var(--udexSpacer16) 0 var(--udexSpacer8);
+}
+
 .ui5-sn-spacer {
   background-color: var(--udex-side-navigation-navigation-separator-background-color);
-  margin: var(--udex-side-navigation-navigation-separator-margin);
   min-height: var(--udex-side-navigation-navigation-separator-height);
   height: var(--udex-side-navigation-navigation-separator-height);
   border-radius: var(--udex-side-navigation-navigation-separator-radius);
+  box-sizing: content-box;
+  /* Behave like the udex-divider: a 1px line with block spacing above/below. The
+     margin (transparent) keeps the background a 1px line instead of a filled band. */
+  margin: var(--udex-side-navigation-navigation-separator-margin);
 }
 
 @media (min-width: 980px) {
@@ -66,3 +84,8 @@
     --udex-side-navigation-max-width: var(--udex-side-navigation-max-width-xl);
   }
 }
+
+:host(:not([variant="Content"])) .ui5-sn-fixed ::slotted(*) {
+  width: 100%;
+  box-sizing: border-box;
+}

package/src/themes/SideNavigationItem.css

@@ -1,13 +1,15 @@
 :host {
   --udex-side-navigation-item-height: 2.5rem;
-  --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
-  --udex-side-navigation-item-color-selected-text: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-icon-font-size: 1.25rem;
-  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-side-navigation-item-label-color: var(--udexColorGrey9, #223548);
+  --udex-side-navigation-icon-font-size: 1rem;
+  --udex-side-navigation-item-padding-inline-start: var(--udexSpacer12, 12px);
+  --udex-side-navigation-item-padding-inline-end: var(--udexSpacer12, 12px);
+  --udex-side-navigation-item-icon-padding-inline-start: var(--udexSpacer12, 12px);
   --udex-side-navigation-selection-indicator-display: none;
   --udex-side-navigation-text-weight: var(--udexTypographyFontWeightMedium);
   --udex-side-navigation-selection-background-color: none;
-  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
+  --udex-side-navigation-hover-selection-background-color: var(--sapButton_Selected_Hover_Background, #D1EFFF);
 
   font-size: var(--udexTypographyNavigationMediumMFontSize);
 }
@@ -16,22 +18,46 @@
   font-family: var(--sapFontFamily);
 }
 
+.ui5-sn-item {
+  color: var(--udex-side-navigation-item-label-color);
+}
+
 .ui5-sn-item-ul {
-  overflow: auto;
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows 400ms ease-in, opacity 400ms ease-in;
 }
 
-.ui5-sn-item, :host(:not([in-popover])) .ui5-sn-item {
-  height: var(--udex-side-navigation-item-height);
-  padding-inline-end: var(--udexSpacer16);
-  margin-block-end: 0;
+.ui5-sn-item-ul > slot {
+  display: block;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ui5-sn-item[aria-expanded=false]~.ui5-sn-item-ul {
+  display: grid;
 }
 
-:host(:not([expanded])) .ui5-sn-item {
-  margin-block-end: var(--udexSpacer8, 8px);
+:host([expanded]) .ui5-sn-item-ul {
+  grid-template-rows: 1fr;
+  opacity: 1;
 }
 
-:host([expanded]) .ui5-sn-list-li {
-  margin-block-end: var(--udexSpacer8, 8px);
+.ui5-sn-item-external-link-icon {
+  display: none;
+}
+
+.ui5-sn-item, :host(:not([in-popover])) .ui5-sn-item {
+  height: auto;
+  min-height: 36px;
+  padding-inline-end: var(--udex-side-navigation-item-padding-inline-end);
+  margin-block-end: var(--udexSpacer4, 4px);
+  transition: background-color 300ms ease-in;
+}
+
+:host([variant="Content"]) .ui5-sn-item {
+  padding: var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);
 }
 
 .ui5-sn-item .ui5-sn-item-text {
@@ -43,12 +69,11 @@
   width: var(--udex-side-navigation-icon-font-size);
   min-width: var(--udex-side-navigation-icon-font-size);
   color: var(--udex-side-navigation-icon-color);
-  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+  padding-inline-end: var(--udexSpacer12);
   padding-inline-start: 0;
 }
 
 .ui5-sn-item-toggle-icon,
-.ui5-sn-item-external-link-icon,
 :host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
   height: 1rem;
   width: 1rem;
@@ -56,7 +81,23 @@
   margin: 0;
   padding: 0;
   color: var(--udex-side-navigation-icon-color);
-  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+.ui5-sn-item-toggle-icon-wrap {
+  padding-inline-start: var(--udex-side-navigation-item-icon-padding-inline-start);
+  display: flex;
+}
+
+.ui5-sn-item-toggle-icon {
+  transition: transform 400ms ease-in;
+}
+
+:host([expanded]) .ui5-sn-item-toggle-icon {
+  transform: rotate(90deg);
+}
+
+:host([expanded]:dir(rtl)) .ui5-sn-item-toggle-icon {
+  transform: rotate(-90deg);
 }
 
 :host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root) {
@@ -73,19 +114,25 @@
 .ui5-sn-item-level1,
 .ui5-sn-item-level1:not(:has(>.ui5-sn-item-icon)),
 .ui5-sn-item-level1.ui5-sn-item-selected:not(:has(>.ui5-sn-item-icon)) {
-  padding-inline-start: var(--udex-side-navigation-item-padding-left);
+  padding-inline-start: var(--udex-side-navigation-item-padding-inline-start);
+}
+
+:host([variant="Content"]) .ui5-sn-item-level1 {
+  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+:host([variant="Content"]) .ui5-sn-item .ui5-sn-item-text {
+  margin: 0;
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
-  color: var(--udex-side-navigation-item-color-selected-text);
   background: var(--udex-side-navigation-selection-background-color);
 }
 
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-  background: var(--udex-side-navigation-hover-selection-background-color);
+:host([selected]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
+  background-color: var(--udex-side-navigation-hover-selection-background-color);
 }
 
 .ui5-sn-item-selected .ui5-sn-item-selection-icon {
@@ -96,3 +143,34 @@
 .ui5-sn-item:focus-visible:after {
   inset: 0;
 }
+
+:host([selected]) .ui5-sn-item {
+  position: relative;
+  overflow: hidden;
+}
+
+:host([selected]) .ui5-sn-item::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background-color: var(--udexColorBlue8, #0057D2);
+  z-index: 1;
+}
+
+:host([selected]) .ui5-sn-item,
+:host([selected]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
+  background-color: var(--udexColorBlue1, #EBF8FF);
+  border-radius: var(--udexSpacer8, 8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui5-sn-item,
+  .ui5-sn-item-ul,
+  .ui5-sn-item-toggle-icon {
+    transition: none;
+  }
+}

package/src/themes/SideNavigationMobile.css

@@ -1,14 +1,14 @@
 :host {
-  --udex-side-navigation-item-height: 2.5rem;
-  --udex-side-navigation-item-bottom-margin: var(--udexSpacer8);
-  --udex-side-navigation-icon-font-size: 1.25rem;
-  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
-  --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
-  --udex-side-navigation-mobile-trigger-padding-horizontal: var(--udexSpacer16);
-  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-mobile-active-arrow-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-padding-vertical: var(--udexSpacer16);
+  --udex-side-navigation-item-bottom-margin: var(--udexSpacer8, 8px);
+  --udex-side-navigation-icon-size: 20px;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer16, 16px);
+  --udex-side-navigation-mobile-trigger-icon-padding-inline-start: var(--udexSpacer16, 16px);
   --udex-side-navigation-selected-item-text-weight: var(--udexTypographyFontWeightMedium);
+  --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
+  --udex-side-navigation-mobile-trigger-padding: 10px var(--udexSpacer16, 16px);
+  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue8, #0057D2);
+  --udex-side-navigation-mobile-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-side-navigation-mobile-item-label-color:  var(--udexColorGrey9, #223548);
 
   width: 100%;
   font-size: var(--udexTypographyNavigationMediumMFontSize);
@@ -23,38 +23,83 @@
   align-items: center;
   box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
   height: var(--udex-side-navigation-item-height);
-  padding-inline-start: var(--udex-side-navigation-mobile-trigger-padding-horizontal);
-  padding-inline-end: var(--udex-side-navigation-mobile-trigger-padding-horizontal);
+  padding: var(--udex-side-navigation-mobile-trigger-padding);
   cursor: pointer;
   position: relative;
 }
 
+.udex-side-navigation-mobile__trigger:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+}
+
 .udex-side-navigation-mobile__selected-item {
   display: flex;
   align-items: center;
   font-weight: var(--udex-side-navigation-selected-item-text-weight);
+  color: var(--udex-side-navigation-mobile-item-label-color);
 }
 
 .udex-side-navigation-mobile__selected-item-icon {
-  height: var(--udex-side-navigation-icon-font-size);
-  width: var(--udex-side-navigation-icon-font-size);
-  min-width: var(--udex-side-navigation-icon-font-size);
-  color: var(--udex-side-navigation-icon-color);
-  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+  width: var(--udex-side-navigation-icon-size);
+  height: var(--udex-side-navigation-icon-size);
+  min-width: var(--udex-side-navigation-icon-size);
+  color: var(--udex-side-navigation-mobile-icon-color);
+  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-size) - var(--udex-side-navigation-item-padding-left));
 }
 
 .udex-side-navigation-mobile__trigger-toggle-icon {
   height: 1rem;
   width: 1rem;
   min-width: 1rem;
-  color: var(--udex-side-navigation-icon-color);
+  color: var(--udex-side-navigation-mobile-icon-color);
+  padding-inline-start: var(--udex-side-navigation-mobile-trigger-icon-padding-inline-start);
 }
 
 .udex-side-navigation-mobile__trigger[active] {
   box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
-  border-bottom: 1px solid var(--udex-side-navigation-mobile-active-trigger-border-color);
+  position: relative;
+}
+
+.udex-side-navigation-mobile__trigger[active]:before {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--udex-side-navigation-mobile-active-trigger-border-color);
+}
+
+.udex-side-navigation-mobile__popover {
+  --udex-dropdown-vertical-distance: 0;
+  --udex-dropdown-border-radius: 0;
+  --udex-dropdown-border-width: 0;
+  --udex-dropdown-pane-max-width: 100%;
+  --udex-dropdown-pane-overflow: auto;
+  margin-top: 1px;
+}
+
+.udex-side-navigation-mobile__popover:before {
+  content: '';
+  width: 100%;
+  height: 40px;
+  bottom: 100%;
+  position: absolute;
+  box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
+}
+
+[udex-side-navigation] {
+  --udex-side-navigation-max-width: 100%;
+  padding-block: var(--udexSpacer16);
+}
+
+[udex-side-navigation-item] {
+  --udex-side-navigation-item-padding-inline-start: var(--udexSpacer16, 16px);
+  --udex-side-navigation-item-padding-inline-end: var(--udexSpacer16, 16px);
+  --udex-side-navigation-item-icon-padding-inline-start: var(--udex-side-navigation-mobile-trigger-icon-padding-inline-start);
 }
 
-.udex-side-navigation-mobile__trigger[active] .udex-side-navigation-mobile__trigger-toggle-icon {
-  color: var(--udex-side-navigation-mobile-active-arrow-color);
+[udex-side-navigation-sub-item] {
+  --udex-side-navigation-sub-item-padding-inline-start: 44px;
 }

package/src/themes/SideNavigationSubItem.css

@@ -1,70 +1,31 @@
 :host {
-  --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
-  --udex-side-navigation-item-bottom-margin: 0;
-  --udex-side-navigation-item-height: 2.5rem;
-  --udex-side-navigation-icon-font-size: 1.25rem;
-  --udex-side-navigation-item_color-selected-text: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-selection-indicator-display: none;
-  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
-  --udex-side-navigation-selection-background-color: none;
-  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
-
-  color: var(--udex-side-navigation-icon-color);
-  font-size: var(--udexTypographyNavigationMediumMFontSize);
-}
-
-:host(:not([hidden])) {
-  font-family: var(--sapFontFamily);
+  --udex-side-navigation-sub-item-padding-inline-start: var(--udexSpacer40, 40px);
+  --udex-side-navigation-sub-item-nested-padding-inline-start: var(--udexSpacer56, 56px);
+  --udex-side-navigation-sub-item-margin-block-end: var(--udexSpacer4, 4px);
+  --udex-side-navigation-sub-item-padding-block: var(--udexSpacer8, 8px);
+  --udex-side-navigation-sub-item-padding-inline: var(--udexSpacer40, 40px) var(--udexSpacer12, 12px);
 }
 
-:host(:not([in-popover])) .ui5-sn-item,
-.ui5-sn-item {
-  margin-block-end: var(--udex-side-navigation-item-bottom-margin);
-  height: var(--udex-side-navigation-item-height);
-  padding-inline-end: var(--udexSpacer16);
+.ui5-sn-item .ui5-sn-item-text {
+  font-weight: normal;
 }
 
-.ui5-sn-item-icon {
-  height: var(--udex-side-navigation-icon-font-size);
-  width: var(--udex-side-navigation-icon-font-size);
-  min-width: var(--udex-side-navigation-icon-font-size);
-  color: var(--udex-side-navigation-icon-color);
-  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+:host([variant="Content"]) .ui5-sn-item {
+  padding-block: var(--udex-side-navigation-sub-item-padding-block);
+  padding-inline: var(--udex-side-navigation-sub-item-padding-inline);
 }
 
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
-  color: var(--udex-side-navigation-item_color-selected-text);
-  background: var(--udex-side-navigation-selection-background-color);
-}
-
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-  background: var(--udex-side-navigation-hover-selection-background-color);
-}
-
-.ui5-sn-item-selected .ui5-sn-item-selection-icon {
-  display: var(--udex-side-navigation-selection-indicator-display);
+:host([variant="Content"][nested]) .ui5-sn-item,
+:host([nested]) .ui5-sn-item-level2 {
+  padding-inline-start: var(--udex-side-navigation-sub-item-nested-padding-inline-start);
 }
 
 :host([with-icon]) .ui5-sn-item-level2,
 .ui5-sn-item-level2 {
-  margin-block-end: 0;
+  margin-block-end: var(--udex-side-navigation-sub-item-margin-block-end);
 }
 
 .ui5-sn-item-level2:not(.ui5-sn-item-has-icon),
 .ui5-sn-item-level2 {
-  --udex-side-navigation-group-icon-width: 1.75rem;
-  padding-inline-start: var(--udex-side-navigation-group-icon-width);
-}
-
-:host([with-icon]) .ui5-sn-item-level2 {
-  --udex-side-navigation-group-icon-width: var(--udexSpacer48);
-  padding-inline-start: var(--udex-side-navigation-group-icon-width);
-}
-
-:host([desktop]) .ui5-sn-item:focus:after,
-.ui5-sn-item:focus-visible:after {
-  inset: 0;
+  padding-inline-start: var(--udex-side-navigation-sub-item-padding-inline-start);
 }

package/src/themes/TabNavigation.css

@@ -340,7 +340,7 @@
   display: none;
 }
 
-@media screen and (max-width: 979px) {
+@media screen and (width < 980px) {
   .udex-tab-navigation__content {
     padding-block-start: var(--udex-tab-navigation-content-padding-vertical-mobile);
   }
@@ -397,7 +397,7 @@
   border-inline-start: 1px solid var(--udexColorGrey3, #D5DADD);
 }
 
-@media screen and (max-width: 979px) {
+@media screen and (width < 980px) {
   :host([orientation="Vertical"]) .udex-tab-navigation__header-tabs {
     gap: var(--udexSpacer16, 16px);
   }

package/src/themes/Table.css

@@ -15,12 +15,18 @@
   display: block;
 }
 
+
 :host([sticky-header]) .udex-table__header-holder {
   position: sticky;
   top: 0;
   z-index: var( --udex-table-header-sticky-z-index);
 }
 
+:host([max-height]) .udex-table,
+:host(:not([sticky-header])) .udex-table  {
+  overflow: auto;
+}
+
 :host([loading]) .udex-table:after {
   content: '';
   inset: 0;
@@ -58,7 +64,6 @@
 
 .udex-table {
   display: grid;
-  overflow: auto;
   position: relative;
 }
 
@@ -99,7 +104,7 @@
   line-height: var(--udex-table-header-footnotes-line-height);
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-table-toolbar {
     flex-direction: column;
     align-items: flex-start;