@sapudex/web-components 2.59.0 → 2.61.0

package/src/themes/Contact.css

@@ -167,7 +167,7 @@
   height: auto;
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   :host {
     bottom: var(--udexSpacer16);
     right: var(--udexSpacer16);

package/src/themes/EventRibbon.css

@@ -391,13 +391,13 @@
   display: none;
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   .udex-event-ribbon__container {
     max-width: calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l));
   }
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-event-ribbon__container {
     margin-block: var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);
     gap: var(--udexSpacer24, 24px);
@@ -405,7 +405,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-event-ribbon__container {
     flex-direction: column;
     height: fit-content;
@@ -431,7 +431,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-event-ribbon__container {
     padding-inline: var(--udexSpacer16, 16px);
     margin-block: var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);

package/src/themes/Feed.css

@@ -40,14 +40,14 @@
   margin-block-start: var(--udexSpacer24);
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-feed__pictogram {
     max-width: var(--udex-feed-pictogram-width-medium);
     max-height: var(--udex-feed-pictogram-height-medium);
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-feed__pictogram {
     max-width: var(--udex-feed-pictogram-width-small);
     max-height: var(--udex-feed-pictogram-height-small);

package/src/themes/FeedItem.css

@@ -35,6 +35,7 @@
 .udex-feed-item__icon {
   width: var(--udex-feed-item-icon-width);
   height: var(--udex-feed-item-icon-height);
+  flex-shrink: 0;
 }
 
 .udex-feed-item__date {
@@ -57,4 +58,4 @@
 
 .hidden-text {
   display: none;
-}
+}

package/src/themes/HeroBanner.css

@@ -169,7 +169,7 @@
   object-position: var(--udexHeroBannerHorizontalLayoutBackgroundImageAlignment, top right);
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   .udex-hero-banner__container {
     padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
     max-width: var(--udex-hero-banner-container-l-max-width);
@@ -188,7 +188,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-hero-banner__background-video,
   .udex-hero-banner__background-video-overlay,
   .udex-hero-banner__media-button {
@@ -222,7 +222,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-hero-banner__container {
     max-width: 100%;
     padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);

package/src/themes/ImageGridCloud.css

@@ -46,7 +46,7 @@
   margin-bottom: var(--udex-image-grid-cloud-item-gap-s);
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   :host {
     --udex-image-grid-cloud-item-width-l: var(--udex-image-grid-cloud-item-width-s);
     --udex-image-grid-cloud-item-height-l: var(--udex-image-grid-cloud-item-height-s);

package/src/themes/ImageGridTicker.css

@@ -96,7 +96,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-image-grid-ticker__track {
     min-height: auto;
     width: auto;

package/src/themes/ImageGridTickerItem.css

@@ -44,7 +44,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-image-grid-ticker-item {
     padding: 0 var(--udexSpacer8);
     margin-bottom: var(--udexSpacer16);

package/src/themes/LinkList.css

@@ -28,25 +28,25 @@
   --udex-link-list-row-gap: var(--udexSpacer40);
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   .udex-link-list {
     grid-template-columns: repeat(var(--udex-link-list-columns-l), 1fr);
   }
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-link-list {
     grid-template-columns: repeat(var(--udex-link-list-columns-m), 1fr);
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-link-list {
     grid-template-columns: repeat(var(--udex-link-list-columns-s), 1fr);
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-link-list {
     grid-template-columns: repeat(var(--udex-link-list-columns-xs), 1fr);
   }

package/src/themes/ListGroupHeader.css

@@ -40,8 +40,9 @@
 .udex-list__header,
 .udex-list__group-header {
   font-weight:  var(--udexTypographyFontWeightRegular, 400);
-  font-size: var(--udexTypographyHeadingRegularXXXSFontSize, 18px);
-  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  line-height: 24px;
+  color: var(--udexColorGrey9, #223548);
 }
 
 .udex-list__group-list.udex-list__sticky {
@@ -92,8 +93,9 @@
   border-top: 1px solid var(--udex-list-item-group-header-border-color);
 }
 
-.udex-list__group_large {
-  font-size: var(--udexTypographyBodyLFontSize, 20px);
+.udex-list__group_large .udex-list__header,
+.udex-list__group_large .udex-list__group-header {
+  font-size: var(--udexTypographyHeadingMediumXXSFontSize, 20px);
   line-height: var(--udexTypographyHeadingLineHeight, 22px);
   font-weight: var(--udexTypographyFontWeightMedium, 500);
 }

package/src/themes/MastheadCountrySelector.css

@@ -150,7 +150,7 @@
   right: 0;
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-masthead-country-selector__list-wrap {
     height: 100%;
     overflow: auto;

package/src/themes/MastheadItem.css

@@ -424,7 +424,7 @@
   top: -5px;
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   :host([slot="exploreSAP"]) .udex-masthead-item__dropdown-holder {
     max-width: var(--udex-masthead-shell-container-l-max-width, 1456px);
     padding: var(--udexSpacer32) var(--udexSpacer72);
@@ -436,7 +436,7 @@
   }
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   :host {
     position: initial;
   }
@@ -503,7 +503,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   :host([_is-mobile-mode]) .udex-masthead-item__dropdown,
   :host([part="menu-open-btn"]) .udex-masthead-item__dropdown,
   .udex-masthead-item__dropdown {
@@ -525,7 +525,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .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/MastheadMenu.css

@@ -241,7 +241,7 @@
   margin-bottom: var(--udex-masthead-menu-sub-list-item-spacing);
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   [udex-masthead-menu-item]::part(menu-item-link-badge) {
     border-bottom: 1px solid var(--udex-masthead-menu-item-mobile-border-color);
   }

package/src/themes/MastheadMenuItem.css

@@ -192,7 +192,7 @@ button.udex-masthead-menu-item {
   display: none;
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-masthead-menu-item {
     padding-block: var(--udex-masthead-menu-item-padding-block-mobile);
     padding-inline: var(--udex-masthead-menu-item-padding-inline-mobile);

package/src/themes/MastheadMobileMenu.css

@@ -115,13 +115,13 @@ span.udex-masthead-mobile-menu__sub-category {
   margin-bottom: var(--udex-masthead-menu-sub-list-item-spacing);
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-masthead-mobile-menu__nav-holder {
     padding: var(--udex-masthead-mobile-menu-padding-s);
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-masthead-mobile-menu__nav-holder {
     padding: var(--udex-masthead-mobile-menu-padding-xs);
   }

package/src/themes/MastheadProfileMenu.css

@@ -211,7 +211,7 @@
   padding-top: var(--udexSpacer32);
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-masthead-profile-menu__actions [udex-link] {
     padding: var(--udexSpacer16) var(--udexSpacer8);
     margin: 0;

package/src/themes/MastheadShell.css

@@ -268,7 +268,7 @@
   padding: 0;
 }
 
-@media (max-width: 1599px) {
+@media (width < 1600px) {
   .udex-masthead-shell {
     padding-left: var(--udexSpacer72);
     padding-right: var(--udexSpacer72);
@@ -289,7 +289,7 @@
   }
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   :host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu {
     width: var(--udex-masthead-mobile-menu-buttons-width);
   }
@@ -333,7 +333,7 @@
   }
 }
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   :host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__right-menu {
     width: 100%;
   }
@@ -371,7 +371,7 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   :host([_is-search-opened]) .udex-masthead-shell__main-content {
     display: none;
   }

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/Pagination.css

@@ -76,13 +76,22 @@
   line-height: var(--udex-pagination-item-line-height);
 }
 
-.udex-pagination__page:not([active]):hover {
-  background-color: var(--udex-pagination-item-active-background-color);
-  color: var(--udex-pagination-item-active-text-color);
-  border-radius: 4px;
+/* Gate hover visuals to devices that can actually hover (mouse).
+   On touch devices the browser keeps a "sticky" :hover on the last-tapped
+   position; because the page items are recentered after a tap, that leaves
+   the hover state stuck on whichever item lands under the finger. */
+@media (hover: hover) {
+  .udex-pagination__page:not([active]):hover {
+    background-color: var(--udex-pagination-item-active-background-color);
+    color: var(--udex-pagination-item-active-text-color);
+    border-radius: var(--udexRadiusXS, 4px);
+  }
+
+  .udex-pagination__page:hover {
+    color: var(--udex-pagination-item-text-color);
+  }
 }
 
-.udex-pagination__page:hover,
 .udex-pagination__page:visited {
   color: var(--udex-pagination-item-text-color);
 }

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