@sapudex/web-components 2.34.0 → 2.35.0

package/src/themes/BreadcrumbsPopover.css

@@ -3,11 +3,12 @@
   --udex-breadcrumbs-current-item-color:  var(--udexColorGrey9, #223548);
   --udex-breadcrumbs-dropdown-item-font-size:  var(--udexTypographyNavigationMediumXSFontSize, 12px);
   --udex-breadcrumbs-dropdown-item-line-height:  var(--udexTypographyNavigationLineHeight, 1.1);
-  --udex-breadcrumbs-dropdown-box-shadow: var(--sapContent_Shadow2, 0px 10px 30px 0px rgba(34, 54, 73, 0.25));
+  --udex-breadcrumbs-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 rgba(34, 54, 73, 0.25));
 }
 
 .udex-breadcrumbs__popover {
-  --udex-dropdown-vertical-distance: var(--udexSpacer4, 4px);
+  --udex-dropdown-vertical-distance: 0;
+  --udex-dropdown-horizontal-distance: -20px;
   --udex-dropdown-border-width: 0;
   --udex-dropdown-border-radius: 0;
   --udex-dropdown-pane-max-width: fit-content;
@@ -30,25 +31,39 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 12px;
 }
 
 .udex-breadcrumbs__popover-content li {
   display: flex;
 }
 
+.udex-breadcrumbs__popover-content .udex-breadcrumbs__item::part(root) {
+  padding: 6px 0;
+}
+
 .udex-breadcrumbs__popover-content .udex-breadcrumbs__item {
   font-size: var(--udex-breadcrumbs-dropdown-item-font-size);
   line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
   color: var(--udex-breadcrumbs-item-dropdown-color);
+  padding: 0;
   --udex-link-line-height: var(--udex-breadcrumbs-dropdown-item-line-height);
   --udex-link-icon-height: 12px;
   --udex-link-icon-width: 12px;
 }
 
+.udex-breadcrumbs__popover-content li:has(.udex-breadcrumbs__item--with-icon):dir(rtl)~li .udex-breadcrumbs__item {
+  padding-right: 0;
+}
+
+.udex-breadcrumbs__popover-content li:has(.udex-breadcrumbs__item--with-icon):dir(ltr)~li .udex-breadcrumbs__item {
+  padding-left: 0;
+}
+
 .udex-breadcrumbs__popover-content .udex-breadcrumbs__item--current {
   color: var(--udex-breadcrumbs-current-item-color);
   font-weight: var(--udexTypographyFontWeightMedium, 500);
+  display: block;
+  padding: 6px 0;
 }
 
 .udex-breadcrumbs__popover::part(content) {

package/src/themes/FilterMenu.css

@@ -172,24 +172,19 @@
 [ui5-popover]::part(footer) {
   justify-content: flex-start;
   border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
-  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  box-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 rgba(34,54,73,0.3));
 }
 
 ::slotted([slot="header"]) {
   width: 100%;
 }
 
-:host([show-search-input]) .udex-no-result {
+:host .udex-no-result {
   padding: 0 var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
 }
 
-.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: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
+[udex-search] + .hidden + [udex-busy-indicator] {
+  padding: var(--udexSpacer16, 16px) 0 var(--udexSpacer32, 32px);
 }
 
 @media (width < 640px) {

package/src/themes/ListGroupHeader.css

@@ -65,6 +65,17 @@
   pointer-events: none;
 }
 
+.udex-list__number {
+  margin-inline-end: var(--udexSpacer8, 8px);
+}
+
+.udex-list__circle {
+  display: block;
+  min-width: 20px;
+  height: 22px;
+  position: relative;
+}
+
 :host([mode="MultiSelect"]) .udex-list__group-header {
   border-bottom: 1px solid var(--udex-list-item-group-header-border-color);
 }

package/src/themes/MastheadItem.css

@@ -81,15 +81,43 @@
 
 .udex-masthead-item__button--explore + .udex-masthead-item__dropdown {
   top: 60px;
-  inset-inline-start: 0;
+  left: 50%;
+  transform: translateX(-50%);
   box-sizing: border-box;
-  inline-size: 100%;
+  width: 100cqw;
+  background: var(--sapShell_Navigation_Background, #FFF);
 }
 
+:host([_has-four-columns-menu]),
 :host([slot="exploreSAP"]) {
   position: inherit;
 }
 
+:host([_has-four-columns-menu]) .udex-masthead-item__dropdown {
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  inline-size: 100%;
+}
+
+:host([_has-four-columns-menu]) ::slotted([slot="dropdown"]) {
+  --udex-masthead-menu-padding-desktop: 32px var(--udexSpacer84);
+}
+
+:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]) {
+  --udex-masthead-menu-padding-desktop: 32px 0;
+}
+
+:host([_has-four-columns-menu]) ::slotted([slot="dropdown"]),
+:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]) {
+  --udex-masthead-menu-column-width: auto;
+  --udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4));
+}
+
+:host([slot="exploreSAP"]) .udex-masthead-item__dropdown-holder {
+  max-width: var(--udex-masthead-shell-container-xl-max-width, 1432px);
+  margin: 0 auto;
+}
+
 .udex-masthead-item__dropdown-holder {
   position: relative;
 }
@@ -286,7 +314,6 @@
 }
 
 :host(:dir(rtl)) .udex-masthead-item__button--explore + .udex-masthead-item__dropdown {
-  left: 0;
   right: auto;
 }
 
@@ -297,12 +324,6 @@
   right: auto;
 }
 
-:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]) {
-  --udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);
-  --udex-masthead-menu-column-width: auto;
-  --udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4));
-}
-
 :host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
 :host([slot="profile"]) ::slotted([slot="dropdown"]) {
   width: 100%;
@@ -362,6 +383,17 @@
   display: none;
 }
 
+@media (max-width: 1599px) {
+  :host([slot="exploreSAP"]) .udex-masthead-item__dropdown-holder {
+    max-width: var(--udex-masthead-shell-container-l-max-width, 1456px);
+    padding: 0 var(--udexSpacer72);
+  }
+
+  :host([_has-four-columns-menu]) ::slotted([slot="dropdown"]) {
+    --udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);
+  }
+}
+
 @media (max-width: 1279px) {
   :host {
     position: initial;

package/src/themes/MastheadMenu.css

@@ -20,7 +20,7 @@
   --udex-masthead-menu-sub-category-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
   --udex-masthead-menu-sub-category-padding: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer8);
   --udex-masthead-menu-sub-list-item-spacing: var(--udexSpacer4);
-  --udex-masthead-menu-sub-list-indent: var(--udexSpacer24, 24px);
+  --udex-masthead-menu-sub-list-indent: var(--udexSpacer12, 12px);
 }
 
 .udex-masthead-menu {
@@ -239,7 +239,7 @@
 }
 
 .udex-masthead-menu__sub-list [udex-masthead-menu-item] {
-  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) 0;
+  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udexSpacer12);
 }
 
 .udex-masthead-menu__sub-list li {

package/src/themes/MastheadMobileMenu.css

@@ -12,7 +12,7 @@
   --udex-masthead-menu-sub-category-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
   --udex-masthead-menu-sub-category-padding: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
   --udex-masthead-menu-sub-list-item-spacing: 0;
-  --udex-masthead-menu-sub-list-indent: var(--udexSpacer24, 24px);
+  --udex-masthead-menu-sub-list-indent: var(--udexSpacer12, 12px);
 }
 
 .udex-masthead-mobile-menu__list-search {
@@ -105,7 +105,7 @@ span.udex-masthead-mobile-menu__sub-category {
 }
 
 .udex-masthead-mobile-menu__sub-list [udex-masthead-menu-item] {
-  --udex-masthead-menu-item-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) 0;
+  --udex-masthead-menu-item-padding-mobile: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer12);
 }
 
 .udex-masthead-mobile-menu__sub-list li {

package/src/themes/SearchableList.css

@@ -17,7 +17,7 @@
 }
 
 .udex-busy-indicator {
-  padding-block: var(--udexSpacer16, 16px);
+  padding-block: var(--udexSpacer32, 32px);
   margin: 0 auto;
   display: block;
 }
@@ -28,11 +28,26 @@
 
 .hidden {
   position: absolute;
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
   padding: 0;
 }
+
+.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: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
+  text-align: center;
+}
+
+[ui5-illustrated-message] {
+  padding: 0 0 var(--udexSpacer4, 4px);
+  min-height: 0;
+}

package/src/themes/SecondaryNavigation.css

@@ -1,7 +1,7 @@
 :host {
   --udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-padding: 0 var(--udexSpacer84);
-  --udex-secondary-navigation-min-height: 72px;
+  --udex-secondary-navigation-min-height: 74px;
   --udex-secondary-navigation-z-index: 9;
   --udex-secondary-navigation-background: #FFF;
 

package/src/themes/SecondaryNavigationItem.css

@@ -11,7 +11,8 @@
   --udex-secondary-navigation-item-title-min-height: 64px;
   --udex-secondary-navigation-item-dropdown-min-width: 240px;
   --udex-secondary-navigation-item-dropdown-max-width: 360px;
-  --udex-secondary-navigation-item-dropdown-max-height: 100%;
+  --udex-secondary-navigation-item-dropdown-mobile-max-height: 100%;
+  --udex-secondary-navigation-item-dropdown-desktop-max-height: none;
   --udex-secondary-navigation-item-mobile-dropdown-shadow: 0 2px 8px 0 var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-item-mobile-heading-shadow: 0 2px 4px 0 var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-item-mobile-title-color: var(--udexColorGrey9, #223548);
@@ -94,6 +95,8 @@
   box-shadow: var(--udex-secondary-navigation-item-dropdown-shadow);
   min-width: var(--udex-secondary-navigation-item-dropdown-min-width);
   max-width: var(--udex-secondary-navigation-item-dropdown-max-width);
+  max-height: var(--udex-secondary-navigation-item-dropdown-desktop-max-height);
+  overflow-y: auto;
   background: var(--udex-secondary-navigation-item-dropdown-background);
 }
 
@@ -148,7 +151,7 @@
     margin-top: initial;
     top: initial;
     overflow-y: auto;
-    max-height: calc(var(--udex-secondary-navigation-item-dropdown-max-height) - var(--udexSpacer24));
+    max-height: calc(var(--udex-secondary-navigation-item-dropdown-mobile-max-height) - var(--udexSpacer24));
   }
 
   .udex-secondary-navigation__dropdown:dir(rtl) {

package/src/themes/SelectBase.css

@@ -197,15 +197,6 @@
   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: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
-}
-
 .udex-select-box__dropdown::part(content) {
   padding: 0;
   overflow: auto;

package/src/types/List.ts

@@ -7,6 +7,8 @@ export enum UDExListMode {
 
 export enum UDExListStyleType {
   None = "None",
+  Circle = "Circle",
+  Number = "Number",
   Icon = "Icon",
 }