@sapudex/web-components 0.199.3 → 0.224.0

package/src/themes/MastheadItem.css

@@ -3,10 +3,12 @@
   --udex-masthead-item-border: none;
   --udex-masthead-item-padding: 1.35rem;
   --udex-masthead-item-font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
-  --udex-masthead-item-color: var(--udexColorGrey8, #354A5F);
-  --udex-masthead-item-color-hover: var(--udexColorBlue7, #0070f2);
+  --udex-masthead-item-line-height: var(--udexTypographyEyebrowLineHeight, 1.1);
+  --udex-masthead-item-color: var(--udexColorGrey9, #223548);
+  --udex-masthead-item-font-family: var(--sapFontFamily);
+  --udex-masthead-item-color-hover: var(--udexColorBlue8, #0057D2);
   --udex-masthead-item-color-active: var(--udexColorBlue9, #0040B0);
-  --udex-masthead-item-border-color: var(--udexColorBlue7, #0070f2);
+  --udex-masthead-item-border-color: var(--udexColorBlue8, #0057D2);
   --udex-masthead-item-border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;
   --udex-masthead-item-border-width: 0.188rem;
   --udex-masthead-item-align-content: center;
@@ -18,17 +20,20 @@
   --udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
   --udex-masthead-item-dropdown-position-left: -55px;
   --udex-masthead-item-dropdown-position-right: -55px;
-  --udex-masthead-item-dropdown-mobile-width: 360px;
+  --udex-masthead-item-dropdown-mobile-min-width: 360px;
+  --udex-masthead-item-dropdown-select-box-min-width: 397px;
   --udex-masthead-item-dropdown-position: absolute;
   --udex-masthead-item-dropdown-height:  calc(100vh - 60px);
   --udex-masthead-item-dropdown-zindex: 100;
-  --udex-masthead-item-icon-size: 1.125rem;
   --udex-masthead-item-button-icon-size: 32px;
 
   display: var(--udex-masthead-item-display);
   align-items: var(--udex-masthead-item-align-content);
   justify-content: var(--udex-masthead-item-justify-content);
   position: relative;
+  font-family: var(--udex-masthead-item-font-family);
+  font-size: var(--udex-masthead-item-font-size);
+  line-height: var(--udex-masthead-item-line-height);
 }
 
 .udex-masthead-item__dropdown {
@@ -38,15 +43,19 @@
   z-index: var(--udex-masthead-item-dropdown-zindex);
 }
 
+.udex-masthead-item__button--country-selector + .udex-masthead-item__dropdown,
 .udex-masthead-item__button--profile + .udex-masthead-item__dropdown {
+  top: 46px;
   left: auto;
   right: 0;
-  top: 46px;
-  min-width: var(--udex-masthead-item-dropdown-mobile-width);
+  min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
+}
+
+.udex-masthead-item__button--country-selector + .udex-masthead-item__dropdown {
+  min-width: var(--udex-masthead-item-dropdown-select-box-min-width);
 }
 
 .udex-masthead-item__button--explore + .udex-masthead-item__dropdown {
-  position: absolute;
   top: 60px;
   inset-inline-start: 0;
   box-sizing: border-box;
@@ -63,8 +72,9 @@
 }
 
 .udex-masthead-item {
-  font-family: var(--sapFontFamily);
-  font-size: var(--udex-masthead-item-font-size);
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
   color: var(--udex-masthead-item-color);
   background: var(--udex-masthead-item-background);
   border: var(--udex-masthead-item-border);
@@ -98,16 +108,19 @@
 }
 
 :host([desktop]) .udex-masthead-item:focus .udex-masthead-item__text,
-:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,
+:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,
+:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,
 .udex-masthead-item:focus-visible .udex-masthead-item__text,
-.udex-masthead-item:focus-visible .udex-masthead-item__icon-container{
+.udex-masthead-item:focus-visible .udex-masthead-item__icon {
   outline: var(--udexRadiusXXS) solid var(--udex-masthead-item-outline-border-color);
   outline-offset: 2px;
   border-radius: var(--udexRadiusXXS);
 }
 
-:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon-container,
-.udex-masthead-item:focus .udex-masthead-item__icon-container {
+:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__image,
+:host([desktop]) .udex-masthead-item:focus .udex-masthead-item__icon,
+.udex-masthead-item:focus .udex-masthead-item__image,
+.udex-masthead-item:focus .udex-masthead-item__icon {
   outline-offset: 6px;
 }
 
@@ -124,6 +137,7 @@
 }
 
 :host(:hover) .udex-masthead-item,
+:host(:hover) .udex-masthead-item__image,
 :host(:hover) .udex-masthead-item__icon,
 :host(:hover) .udex-masthead-item__dropdown-icon {
   color: var(--udex-masthead-item-color-hover);
@@ -164,17 +178,14 @@
   right: 0;
 }
 
+:host([selected]) .udex-masthead-item__image,
+:host(:active) .udex-masthead-item__image,
 :host([selected]) .udex-masthead-item__icon,
 :host(:active) .udex-masthead-item__icon {
   color:var(--udex-masthead-item-color-active);
 }
 
-.udex-masthead-item__icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
+.udex-masthead-item__image,
 .udex-masthead-item__icon {
   width: var(--udex-masthead-item-icon-size);
   height: var(--udex-masthead-item-icon-size);
@@ -194,6 +205,7 @@
   left: auto;
 }
 
+:host(:dir(rtl)) .udex-masthead-item__button--country-selector + .udex-masthead-item__dropdown,
 :host(:dir(rtl)) .udex-masthead-item__button--explore + .udex-masthead-item__dropdown,
 :host(:dir(rtl)) .udex-masthead-item__button--profile + .udex-masthead-item__dropdown {
   left: 0;
@@ -212,11 +224,17 @@
   flex-direction: column;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,
+:host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown {
+  min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
+
+}
+
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown,
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown {
   position: var(--udex-masthead-item-dropdown-position);
   height: var(--udex-masthead-item-dropdown-height);
-  width: var(--udex-masthead-item-dropdown-mobile-width);
+  width: var(--udex-masthead-item-dropdown-mobile-min-width);
   top: 60px;
   right: 0;
   left: auto;
@@ -259,11 +277,14 @@
     display: initial;
   }
 
+  .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown {
+    min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
+  }
+
+  .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,
   .udex-masthead-item__button--profile+.udex-masthead-item__dropdown,
   .udex-masthead-item__dropdown {
     top: 60px;
-    right: 0;
-    left: auto;
   }
 
   :host(:dir(rtl)) .udex-masthead-item__dropdown {
@@ -274,7 +295,7 @@
   .udex-masthead-item__dropdown {
     position: var(--udex-masthead-item-dropdown-position);
     height: var(--udex-masthead-item-dropdown-height);
-    width: var(--udex-masthead-item-dropdown-mobile-width);
+    width: var(--udex-masthead-item-dropdown-mobile-min-width);
     top: 60px;
   }
 

package/src/themes/MastheadMenu.css

@@ -195,6 +195,12 @@
   display: block;
 }
 
+.udex-masthead-menu__item-divider {
+  padding: var(--udexSpacer4) 0;
+  width: 33%;
+  display: block;
+}
+
 @media (max-width: 1279px) {
   [udex-masthead-menu-item]::part(menu-item-link-badge),
   [udex-masthead-menu-item]::part(menu-item-link) {

package/src/themes/MastheadMenuItem.css

@@ -11,6 +11,8 @@
   --udex-masthead-menu-item-focus: var(--udexColorBlue10, #002A86);
   --udex-masthead-menu-item-font-family: var(--sapFontFamily, sans-serif);
   --udex-masthead-menu-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-masthead-menu-item-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  --udex-masthead-menu-item-font-weight: var(--udexTypographyFontWeightRegular, 400);
   --udex-masthead-menu-item-explore-background: var(--udexColorBlue7, #0070F2);
   --udex-masthead-menu-item-explore-background-hover: var(--udexColorBlue9, #0040B0);
   --udex-masthead-menu-item-explore-background-active: var(--udexColorNeutralWhite, #FFF);
@@ -82,8 +84,8 @@
 .udex-masthead-menu-item {
   font-family: var(--udex-masthead-menu-item-font-family);
   font-size: var(--udex-masthead-menu-item-font-size);
-  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  line-height: var(--udex-masthead-menu-item-line-height);
+  font-weight: var(--udex-masthead-menu-item-font-weight);
   color: var(--udex-masthead-menu-item-color);
   padding: var(--udex-masthead-menu-item-padding-desktop);
   text-decoration: none;
@@ -110,7 +112,7 @@ button.udex-masthead-menu-item {
 :host([desktop]) .udex-masthead-menu-item:focus ,
 .udex-masthead-menu-item:focus-visible {
   outline: var(--udexRadiusXXS) solid var(--udex-masthead-menu-item-focus);
-  outline-offset: - var(--udexSpacer2, 2px);
+  outline-offset: calc(-1 * var(--udexSpacer2, 2px));
   border-radius: var(--udexRadiusM, 8px);
 }
 
@@ -143,7 +145,6 @@ button.udex-masthead-menu-item {
   min-width: 14px;
   width: 14px;
   height: 14px;
-  margin-bottom: -3px;
 }
 
 .udex-masthead-menu-item_is-list {

package/src/themes/MastheadMobileMenu.css

@@ -25,6 +25,7 @@
 }
 
 .udex-masthead-mobile-menu__explore-btn {
+  --udex-masthead-menu-item-font-weight: var(--udexTypographyFontWeightMedium, 500);
   position: var(--udex-masthead-mobile-explore-btn-position);
   margin-block-start: auto;
   inset-block-end: 0;
@@ -59,7 +60,8 @@
 }
 
 .udex-masthead-mobile-menu__back-item::part(left) {
-  margin-inline-end: inherit;
+  margin-inline-end: var(--udexSpacer4);
+  margin-inline-start: 0;
 }
 
 @media (max-width: 979px) {

package/src/themes/MastheadShell.css

@@ -88,6 +88,7 @@
 
 .udex-masthead-shell__logo--link {
   cursor: pointer;
+  display: flex;
 }
 
 .udex-masthead-shell__logo--link:focus,
@@ -150,9 +151,7 @@
   margin-inline-end: var(--udex-masthead-shell-explore-margin);
 }
 
-.udex-masthead-shell__cart,
-.udex-masthead-shell__search-icon,
-.udex-masthead-shell__profile {
+.udex-masthead-shell__item_icon {
   display: flex;
   align-items: center;
 }
@@ -200,9 +199,7 @@
 
 :host([show-search-by-default]) .udex-masthead-shell__search-icon,
 :host([_is-search-opened]) .udex-masthead-shell__right-menu,
-:host([_is-mobile-mode]) .udex-masthead-shell__cart,
-:host([_is-mobile-mode]) .udex-masthead-shell__profile,
-:host([_is-mobile-mode]) .udex-masthead-shell__search-icon,
+:host([_is-mobile-mode]) .udex-masthead-shell__item_icon,
 :host([_is-mobile-mode]) .udex-masthead-shell__explore,
 :host([_is-mobile-mode]) .udex-masthead-shell__nav,
 .udex-masthead-shell__close-btn,
@@ -211,6 +208,7 @@
 }
 
 :host([_is-mobile-mode]) .udex-masthead-shell__menu-btn,
+:host([_is-mobile-menu-open]) .udex-masthead-shell__country-selector,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__cart,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__profile,
 :host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
@@ -279,9 +277,7 @@
     padding-inline-end: var(--udexSpacer32);
   }
 
-  .udex-masthead-shell__cart,
-  .udex-masthead-shell__profile,
-  .udex-masthead-shell__search-icon,
+  .udex-masthead-shell__item_icon,
   .udex-masthead-shell__explore,
   .udex-masthead-shell__nav {
     display: none;

package/src/themes/MediaPlayer.css

@@ -201,10 +201,18 @@
 }
 
 .video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
-  outline-color: rgb(0, 95, 204);
   text-shadow: 0 0 1em #fff
 }
 
+.video-js .vjs-control:focus,
+.video-js .vjs-control:focus-visible,
+.video-js .vjs-control:focus-visible:before,
+.video-js .vjs-control:focus:before,
+.video-js .vjs-volume-bar.vjs-slider-horizontal:focus-visible,
+.video-js .vjs-progress-control .vjs-progress-holder:focus-visible,
+.video-js .vjs-control > button:focus-visible {
+  outline-color: var(--udexColorBlue9);
+}
 
 @keyframes vjs-spinner-show {
   to {
@@ -448,8 +456,10 @@ body.vjs-pip-window .video-js {
   width: 1px;
 }
 
+.video-js .vjs-big-play-button:focus,
+.video-js .vjs-big-play-button:focus-within,
 .video-js .vjs-big-play-button:focus:not(:focus-visible) {
-  outline: rgb(0, 95, 204) auto 2px;
+  outline: var(--udexColorBlue9) auto 2px;
 }
 
 .video-js .vjs-big-play-button {
@@ -1829,6 +1839,31 @@ video::-webkit-media-text-track-display {
   margin-bottom: var(--udexSpacer16);
 }
 
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
+  position: relative;
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button:focus-within,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button:focus,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button:focus-within,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button:focus {
+  outline: none;
+  border-radius: var(--udexRadiusXS, 4px);
+}
+
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button:focus-within:after,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button:focus:after,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button:focus-within:after,
+.vjs-modal-dialog.vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button:focus:after {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  inset: 2px;
+  border: .125rem solid var(--udexColorBlue9);
+  border-radius: var(--udexRadiusXS, 4px);
+}
+
 .vjs-modal-dialog.vjs-text-track-settings .vjs-close-button.vjs-control.vjs-button {
   height: 24px;
   right: var(--udexSpacer32);
@@ -1844,6 +1879,11 @@ video::-webkit-media-text-track-display {
   margin: 0;
 }
 
+.vjs-modal-dialog.vjs-text-track-settings fieldset select:focus,
+.vjs-modal-dialog.vjs-text-track-settings fieldset select:focus-within {
+  outline-color: var(--udexColorBlue9);
+}
+
 .vjs-modal-dialog.vjs-text-track-settings fieldset {
   margin: 0;
   padding: 0;

package/src/themes/PhoneNumberField.css

@@ -43,8 +43,8 @@
   --udex-phone-number-field-button-margins-horizontal: -12px 8px;
   --udex-phone-number-field-radius: var(--udexRadiusXS, 4px);
   --udex-phone-number-field-flag-background: var(--udexColorGrey4, #A9B4BE);
-  --udex-phone-number-field-flag-width: 30px;
-  --udex-phone-number-field-flag-height: 20px;
+  --udex-phone-number-field-flag-width: 28px;
+  --udex-phone-number-field-flag-height: 18px;
   --udex-phone-number-field-button-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-button-color-tertiary-standard-hover-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-max-width: 100%;
@@ -52,7 +52,6 @@
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--sapFontSize, 16px);
   color: var(--udex-phone-number-field-color-standard-default-text);
-
 }
 
 .udex-phone-number-field {
@@ -96,6 +95,10 @@
   font-weight: normal;
 }
 
+.udex-phone-number-field__open-button::part(icon) {
+  margin-inline-start: var(--udexSpacer8, 8px);
+}
+
 .udex-phone-number-field__input-wrapper {
   display: flex;
   max-height: 22px;
@@ -110,13 +113,13 @@
   --udex-button-color-tertiary-standard-active-text-and-icon: var(--udex-phone-number-field-color-standard-active-icon);
   --udex-button-color-tertiary-standard-active-border: transparent;
   --udex-button-color-tertiary-standard-active-background: transparent;
+  --udex-button-icon-text-spacing-large-size: 0;
 
   min-width: fit-content;
   margin-block: var(--udex-phone-number-field-button-margins-vertical);
   margin-inline: var(--udex-phone-number-field-button-margins-horizontal);
   border-radius: var(--udex-phone-number-field-radius);
   border-right: 1px solid transparent;
-  margin-inline-start: -13px;
   padding: var(--udexSpacer2, 2px) 0;
   z-index: 3;
 }

package/src/themes/ProgressBar.css

@@ -2,7 +2,8 @@
     --udex-progress-bar-point-size: 0.375rem;
 }
 
-:host::part(remaining-bar):after {
-    width: var(--udex-progress-bar-point-size, 0.375rem);
-    height: var(--udex-progress-bar-point-size, 0.375rem);
-}
+.ui5-progress-indicator-remaining-bar::before,
+.ui5-progress-indicator-remaining-bar::after {
+  width: var(--udex-progress-bar-point-size, 0.375rem);
+  height: var(--udex-progress-bar-point-size, 0.375rem);
+}

package/src/themes/Search.css

@@ -18,7 +18,10 @@
   --udex-input-color-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));
   --udex-input-radius: var(--sapField_BorderCornerRadius, var(--udexRadiusXS));
   --udex-input-padding-horizontal: var(--udexSpacer12, 12px);
-  --udex-input-padding-vertical: var(--udexSpacer8, 8px);
+  --udex-input-padding-vertical: 8px;
+  --udex-home-input-padding-left: var(--udexSpacer12, 12px);
+  --udex-home-input-padding-right: var(--udexSpacer8, 8px);
+  --udex-home-input-padding-vertical: 8px;
 
   --udex-button-size: var(--sapFontHeader2Size, 28px);
   --udex-button-color: var(--sapAccentColor10, var(--udexColorGrey7));
@@ -28,8 +31,10 @@
   --udex-dropdown-border-width: auto;
 
   --udex-search-container-padding-inline-end: var(--udexSpacer12, 12px);
+  --udex-search-home-container-padding-inline-end: var(--udexSpacer8, 8px);
   --udex-search-label-inset-inline-start: var(--udexSpacer12, 12px);
-  --udex-search-icons-column-gap: var(--udexSpacer12, 12px);
+  --udex-search-icons-column-gap: 0;
+  --udex-search-home-icons-column-gap: var(--udexSpacer4, 4px);
 
   --udex-search-label-width: calc(
     100% -
@@ -139,6 +144,10 @@
   background-color: field;
 }
 
+.udex-search-mode-home-search .udex-search__container {
+  padding-inline-end: var(--udex-search-home-container-padding-inline-end);
+}
+
 .udex-search__container:not(.udex-search__container--focus):hover {
   border-color: var(--udex-input-color-hover-border);
 }
@@ -173,6 +182,10 @@
   background: var(--udex-input-color-background-light);
 }
 
+.udex-search-mode-home-search .udex-search__field {
+  padding: var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-right) var(--udex-home-input-padding-vertical) var(--udex-home-input-padding-left);
+}
+
 .udex-search__field::placeholder {
   color: var(--udexColorGrey7);
   font-family: var(--sapFontFamily, sans-serif);
@@ -238,6 +251,10 @@ input[type="search"]::-webkit-search-results-decoration {
   column-gap: var(--udex-search-icons-column-gap);
 }
 
+.udex-search-mode-home-search .udex-search__icons {
+  column-gap: var(--udex-search-home-icons-column-gap);
+}
+
 .udex-search__icon {
   margin-inline: 5px;
   background-color: transparent;
@@ -263,19 +280,29 @@ input[type="search"]::-webkit-search-results-decoration {
   overflow: visible;
 }
 
-[ui5-button].udex-search__voice-button--active {
-  color: #0040B0;
+[udex-control-button] {
+  --udex-control-button-large-height: 40px;
+  --udex-control-button-large-width: 40px;
+}
+
+[udex-control-button].udex-search__reset-button {
+  --sapButton_BorderWidth: 0px 1px 0 1px;
+}
+
+[udex-control-button].udex-search__submit-button {
+  margin: 0px calc((var(--udex-search-container-padding-inline-end)) * -1) 0px 0;
+  --sapButton_BorderWidth: 0 0 0 1px;
 }
 
-[ui5-button].udex-search__voice-button--active::before,
-[ui5-button].udex-search__button:focus::before {
+
+[ui5-button].udex-search__button::part(button):focus-visible::before {
   content: '';
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
   width: 28px;
   height: 28px;
-  border: 2px solid #0040B0;
+  border: 2px solid var(--udexColorBlue9, #0040B0);
   border-radius: 50%;
   box-sizing: border-box;
 }
@@ -302,32 +329,20 @@ input[type="search"]::-webkit-search-results-decoration {
   display: none;
 }
 
-[ui5-button].udex-search__button:hover {
-  background: transparent;
+[ui5-button].udex-search__button.udex-search__voice-button:hover {
+  background-color: rgba(0,0,0,0.1);
   border: none;
   box-shadow: none;
 }
 
-[ui5-button].udex-search__button:focus {
-  outline: none;
+[ui5-button].udex-search__button.udex-search__voice-button.udex-search__voice-button--active,
+[ui5-button][active].udex-search__button.udex-search__voice-button {
+  background: var(--udexColorBlue8, #0057D2);
+  color: var(--udexColorNeutralWhite, #FFFFFF);
 }
 
-[ui5-button].udex-search__submit-button--active {
-  position: relative;
-  z-index: 1;
-  color: #fff;
-}
-
-[ui5-button].udex-search__submit-button--active::before {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 28px;
-  height: 28px;
-  background-color: #0070F2;
-  border-radius: 50%;
+[ui5-button].udex-search__button:focus {
+  outline: none;
 }
 
 .udex-search__prefix {
@@ -429,3 +444,7 @@ input[type="search"]::-webkit-search-results-decoration {
 [udex-dropdown] {
   --udex-dropdown-pane-max-width: 100%;
 }
+
+.hidden {
+  display: none;
+}

package/src/themes/SearchSuggestions.css

@@ -138,14 +138,11 @@
     justify-content: normal;
 }
 
-.udex-search-suggestions__item-button [ui5-icon] {
-    margin-inline-end: 12px;
-    width: 18px;
-    height: 18px;
-}
-
 .udex-search-suggestions__item-button::part(icon) {
     color: var(--udex-button-icon-color);
+    margin-inline-end: 6px;
+    width: 18px;
+    height: 18px;
 }
 
 .udex-search-suggestions__item-button b {

package/src/themes/SearchableList.css

@@ -11,3 +11,13 @@
 .udex-searchable-list__header.udex-searchable-list__header_no-margin {
   margin-top: 0;
 }
+
+.udex-busy-indicator {
+  padding-block: var(--udexSpacer16, 16px);
+  margin: 0 auto;
+  display: block;
+}
+
+.udex-filter-menu__search + .udex-busy-indicator {
+  padding-top: 0;
+}

package/src/themes/SecondaryNavigation.css

@@ -164,6 +164,7 @@ a.udex-secondary-navigation__title:focus-visible {
   :host {
     border: none;
     padding: 0;
+    height: 100%
   }
 
   .udex-secondary-navigation__breadcrumbs,
@@ -176,7 +177,10 @@ a.udex-secondary-navigation__title:focus-visible {
   }
 
   .udex-secondary-navigation__root {
-    padding: 0;
+    padding: 0 0 var(--udexSpacer24) 0;
+    overflow: hidden;
+    height: 100%;
+    max-height: 100vh;
   }
 
   .udex-secondary-navigation__list {

package/src/themes/SecondaryNavigationItem.css

@@ -8,8 +8,10 @@
   --udex-secondary-navigation-item-active-border-color: var(--udexColorBlue7, #0070f2);
   --udex-secondary-navigation-item-dropdown-shadow: 0 10px 30px 0 #22364940;
   --udex-secondary-navigation-item-dropdown-background: #FFF;
+  --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-mobile-dropdown-shadow: 0 2px 8px 0 #2236494D;
   --udex-secondary-navigation-item-mobile-heading-shadow: 0 2px 4px 0 #22364933;
   --udex-secondary-navigation-item-mobile-title-color: var(--udexColorGrey9, #223548);
@@ -144,6 +146,8 @@
     left: initial;
     margin-top: initial;
     top: initial;
+    overflow-y: auto;
+    max-height: calc(var(--udex-secondary-navigation-item-dropdown-max-height) - var(--udexSpacer24));
   }
 
   .udex-secondary-navigation__dropdown:dir(rtl) {
@@ -160,11 +164,12 @@
     position: relative;
     box-sizing: border-box;
     white-space: normal;
-    min-height: 100%;
+    min-height: var(--udex-secondary-navigation-item-title-min-height);
     width: 100%;
     z-index: 1;
     display: flex;
     align-items: center;
+    height: fit-content;
   }
 
   .udex-secondary-navigation__item-sub-title {

package/src/themes/SegmentedButtonItem.css

@@ -155,7 +155,11 @@
   color: var(--udex-segmented-button-item-selected-color);
 }
 
-:host([active]), :host([active][focused]), :host([active][pressed]), :host([design="Default"][active]), :host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]), :host([design="Default"][active][focused]) {
+:host([active]),
+:host([active][pressed]),
+:host([design="Default"][active]),
+:host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]),
+:host([design="Default"][active]) {
   color: var(--udex-segmented-button-item-active-color);
   border-color: var(--udex-segmented-button-item-active-border-color);
   background-color: var(--udex-segmented-button-item-active-background-color);
@@ -215,7 +219,11 @@
   color: var(--udex-segmented-button-item-warning-active-color);
 }
 
-:host([disabled]), :host([disabled][focused]), :host([disabled][pressed]), :host([design="Default"][disabled]), :host([design="Transparent"][disabled]), :host([design="Emphasized"][disabled]) {
+:host([disabled]),
+:host([disabled][pressed]),
+:host([design="Default"][disabled]),
+:host([design="Transparent"][disabled]),
+:host([design="Emphasized"][disabled]) {
   color: var(--udex-segmented-button-item-color);
   border-color: transparent;
   background-color: var(--udex-segmented-button-item-background-color);