@sapudex/web-components 2.2.0 → 2.4.0

package/src/themes/EventRibbon.css

@@ -0,0 +1,411 @@
+:host {
+ --udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);
+ --udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);
+
+/*Backgrounds for dark text */
+/*Grey colors */
+  --udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);
+  --udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);
+
+  --udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);
+  --udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);
+
+  --udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);
+  --udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);
+
+  --udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);
+  --udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);
+
+/*Blue colors */
+  --udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);
+  --udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);
+
+  --udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);
+  --udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);
+
+  --udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);
+  --udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);
+
+  --udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);
+  --udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);
+
+/*Teal colors */
+  --udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);
+  --udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);
+
+  --udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);
+  --udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);
+
+  --udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);
+  --udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);
+
+  --udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);
+  --udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);
+
+/*Green colors */
+  --udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);
+  --udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);
+
+  --udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);
+  --udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);
+
+  --udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);
+  --udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);
+
+  --udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);
+  --udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);
+
+/*Mango colors */
+  --udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);
+  --udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);
+
+  --udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);
+  --udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);
+
+  --udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);
+  --udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);
+
+  --udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);
+  --udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);
+
+/*Red colors */
+  --udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);
+  --udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);
+
+  --udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);
+  --udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);
+
+  --udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);
+  --udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);
+
+  --udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);
+  --udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);
+
+/*Raspberry colors */
+  --udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);
+  --udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);
+
+  --udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);
+  --udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);
+
+  --udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);
+  --udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);
+
+  --udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);
+  --udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);
+
+/*Pink colors */
+  --udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);
+  --udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);
+
+  --udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);
+  --udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);
+
+  --udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);
+  --udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);
+
+  --udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);
+  --udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);
+
+/*Indigo colors */
+  --udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);
+  --udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);
+
+  --udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);
+  --udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);
+
+  --udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);
+  --udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);
+
+  --udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);
+  --udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);
+
+/*Backgrounds for light text */
+/*Grey colors */
+  --udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);
+  --udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);
+
+  --udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);
+  --udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);
+
+  --udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);
+  --udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);
+
+  --udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);
+  --udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);
+
+/*Blue colors */
+  --udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);
+  --udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);
+
+  --udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);
+  --udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);
+
+  --udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);
+  --udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);
+
+  --udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);
+  --udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);
+
+/*Teal colors */
+  --udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);
+  --udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);
+
+  --udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);
+  --udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);
+
+  --udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);
+  --udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);
+
+  --udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);
+  --udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);
+
+/*Green colors */
+  --udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);
+  --udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);
+
+  --udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);
+  --udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);
+
+  --udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);
+  --udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);
+
+  --udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);
+  --udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);
+
+/*Mango colors */
+  --udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);
+  --udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);
+
+  --udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);
+  --udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);
+
+  --udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);
+  --udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);
+
+  --udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);
+  --udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);
+
+/*Red colors */
+  --udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);
+  --udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);
+
+  --udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);
+  --udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);
+
+  --udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);
+  --udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);
+
+  --udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);
+  --udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);
+
+/*Raspberry colors */
+  --udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);
+  --udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);
+
+  --udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);
+  --udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);
+
+  --udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);
+  --udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);
+
+  --udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);
+  --udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);
+
+/*Pink colors */
+  --udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);
+  --udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);
+
+  --udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);
+  --udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);
+
+  --udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);
+  --udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);
+
+  --udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);
+  --udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);
+
+/*Indigo colors */
+  --udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);
+  --udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);
+
+  --udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);
+  --udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);
+
+  --udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);
+  --udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);
+
+  --udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);
+  --udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);
+
+  --udex-event-ribbon-background-color: transparent;
+  --udex-event-ribbon-hover-background-color: transparent;
+
+  --udex-event-ribbon-margin-xl: 84px;
+  --udex-event-ribbon-margin-m-l: 72px;
+  --udex-event-ribbon-margin-s: 48px;
+  --udex-event-ribbon-margin-xs: 24px;
+
+  --udex-event-ribbon-logo-width: auto;
+  --udex-event-ribbon-logo-height: auto;
+
+  --udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12);
+}
+
+.udex-event-ribbon__container {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  background-color: var(--udex-event-ribbon-background-color);
+  color: var(--udex-event-ribbon-light-text-color);
+  height: 70px;
+  font-family: var(--sapFontFamily, sans-serif);
+  border-radius: var(--udexSpacer12, 12px);
+  padding-block: var(--udexSpacer12, 12px);
+  padding-inline: var(--udexSpacer36, 36px);
+  margin-block: var(--udexSpacer56, 56px) 84px;
+  margin-inline: auto;
+  max-width: calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));
+  display: flex;
+  align-items: center;
+  gap: var(--udexSpacer32, 32px);
+}
+
+.udex-event-ribbon__container-with-background-image {
+  background-image: var(--udex-event-ribbon-background-image);
+  background-blend-mode: multiply;
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  transition: background ease-out 300ms;
+}
+
+.udex-event-ribbon__container:focus,
+.udex-event-ribbon__container:focus-visible {
+  outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
+  outline-offset: 2px;
+}
+
+.udex-event-ribbon__container:hover {
+  background-color: var(--udex-event-ribbon-hover-background-color);
+}
+
+.udex-event-ribbon__container-with-background-image:hover {
+  background-size: 112%;
+}
+
+:host([mode="dark"]) .udex-event-ribbon__container {
+  color: var(--udex-event-ribbon-dark-text-color);
+}
+
+.udex-event-ribbon__logo {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  width: calc((var(--udex-event-ribbon-column-width) * 3 + 3 * var(--udexGridXLGutters)) - 36px);
+}
+
+.udex-event-ribbon__logo img {
+  max-height: 42px;
+  height: var(--udex-event-ribbon-logo-height);
+  width: var(--udex-event-ribbon-logo-width);
+  max-width: 100%;
+}
+
+:host([mode="dark"]) .udex-event-ribbon__logo img {
+  filter: brightness(0) invert(1);
+}
+
+.udex-event-ribbon__text {
+  position: inherit;
+  margin: 0;
+  padding: 0;
+  font-size: var(--udexTypographyBodyXSFontSize);
+  line-height: 1.5;
+  width: calc(6 * var(--udex-event-ribbon-column-width) + 5 * var(--udexGridXLGutters));
+  max-height: 100%;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.udex-event-ribbon__link-container {
+  position: inherit;
+  display: flex;
+  align-items: center;
+  gap: var(--udexSpacer8, 8px)
+}
+
+.udex-event-ribbon__link-container span {
+  line-height: 1.5;
+  font-size: var(--udexTypographyBodyXSFontSize);
+}
+
+[ui5-icon] {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+@media (max-width: 1599px) {
+  :host {
+    --udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-m-l)) - (11 * var(--udexGridXLGutters))) / 12);
+  }
+  .udex-event-ribbon__container {
+    max-width: calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l));
+  }
+}
+
+@media (max-width: 1279px) {
+  .udex-event-ribbon__container {
+    margin-block: var(--udexSpacer40, 40px) 64px;
+    gap: var(--udexSpacer24, 24px);
+    padding-inline: var(--udexSpacer24, 24px);
+  }
+
+  .udex-event-ribbon__logo {
+    width: calc((var(--udex-event-ribbon-column-width) * 3 + 3 * var(--udexGridXLGutters)) - 24px);
+  }
+}
+
+@media (max-width: 979px) {
+  :host {
+    --udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-s)) - (11 * var(--udexGridSGutters))) / 12);
+  }
+
+  .udex-event-ribbon__container {
+    flex-direction: column;
+    height: fit-content;
+    padding-block: var(--udexSpacer16, 16px);
+    gap: var(--udexSpacer8, 8px);
+    align-items: flex-start;
+    margin-block: var(--udexSpacer40, 40px) 64px;
+    max-width: calc(100vw - 2 * var(--udex-event-ribbon-margin-s));
+  }
+
+  .udex-event-ribbon__text {
+    width: 100%;
+  }
+
+  .udex-event-ribbon__logo {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
+
+@media (max-width: 639px) {
+  :host {
+    --udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xs)) - (11 * var(--udexGridXSGutters))) / 12);
+  }
+
+  .udex-event-ribbon__container {
+    padding-inline: var(--udexSpacer16, 16px);
+    margin-block: var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);
+    max-width: calc(100vw - 2 * var(--udex-event-ribbon-margin-xs));
+  }
+}

package/src/themes/MastheadCountrySelector.css

@@ -7,18 +7,17 @@
   --udex-masthead-country-selector-desktop-max-height: 375px;
 }
 
-:host([_is-mobile-mode]) .udex-masthead-country-selector__list_countries {
-  max-height: initial;
-  overflow: initial;
-}
-
 :host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries {
   --udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
   border-bottom: 1px solid var(--udex-masthead-menu-item-border-color);
+  max-height: initial;
+  overflow: initial;
 }
 
 :host([_is-mobile-mode]) .udex-masthead-country-selector {
   padding: var(--udex-masthead-country-selector-padding-l);
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 .udex-masthead-country-selector {
@@ -79,6 +78,10 @@
   overflow: auto;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-country-selector__list_countries {
+  max-height: initial;
+}
+
 @media (max-width: 1279px) {
   .udex-masthead-country-selector {
     padding: var(--udex-masthead-country-selector-padding-l);

package/src/themes/MastheadItem.css

@@ -23,7 +23,8 @@
   --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-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);
+  --udex-masthead-item-dropdown-box-shadow-mobile: none;
   --udex-masthead-item-dropdown-zindex: 100;
   --udex-masthead-item-button-icon-size: 32px;
 
@@ -224,12 +225,18 @@
   --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%;
   display: flex;
   flex-direction: column;
 }
 
+:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),
+:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]) {
+  display: initial;
+}
+
 :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);
@@ -238,7 +245,7 @@
 :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);
+  height: var(--udex-masthead-item-dropdown-mobile-height);
   width: var(--udex-masthead-item-dropdown-mobile-min-width);
   top: 60px;
   right: 0;
@@ -278,6 +285,7 @@
     position: initial;
   }
 
+  :host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
   :host([slot="profile"]) ::slotted([slot="dropdown"]) {
     display: initial;
   }
@@ -300,9 +308,9 @@
 
   .udex-masthead-item__dropdown {
     position: var(--udex-masthead-item-dropdown-position);
-    height: var(--udex-masthead-item-dropdown-height);
+    height: var(--udex-masthead-item-dropdown-mobile-height);
     width: var(--udex-masthead-item-dropdown-mobile-min-width);
-    box-shadow: none;
+    box-shadow: var(--udex-masthead-item-dropdown-box-shadow-mobile);
     top: 60px;
   }
 

package/src/themes/MastheadShell.css

@@ -1,4 +1,5 @@
 :host {
+  --udex-masthead-shell-height: 60px;
   --udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);
   --udex-masthead-shell-dropdown-shadow:  var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
   --udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);
@@ -23,6 +24,7 @@
   --udex-masthead-mobile-menu-buttons-width: 360px;
   --udex-masthead-right-menu-padding: var(--udexSpacer64);
   --udex-masthead-shell-explore-margin: var(--udexSpacer12);
+  --udex-masthead-shell-mobile-menu-height: 100%;
 }
 
 :host {
@@ -74,7 +76,7 @@
   padding: 0 var(--udexSpacer84);
   max-width: var(--udex-masthead-shell-container-xl-max-width);
   margin: 0 auto;
-  height: 60px;
+  height: var(--udex-masthead-shell-height);
 }
 
 .udex-masthead-shell__logo {

package/src/themes/Modal.css

@@ -27,8 +27,8 @@
 }
 
 :host .ui5-popup-root .ui5-popup-content  {
-	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
-  scrollbar-gutter: auto;
+	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+  scrollbar-gutter: stable;
 }
 
 :host([type="basic"]) {
@@ -37,8 +37,12 @@
 }
 
 :host([type="basic"]) .ui5-popup-root .ui5-popup-content {
-	padding: 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
-  scrollbar-gutter: auto;
+  padding: 0 calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+  scrollbar-gutter: stable;
+}
+
+:host ::slotted([slot="header"][ui5-bar]) {
+  height: 32px;
 }
 
 :host ::slotted([slot="footer"]) {

package/src/themes/Pagination.css

@@ -122,3 +122,22 @@
 .udex-pagination__item--short-value {
   padding: var(--udex-pagination-short-item-paddings);
 }
+
+[udex-button][aria-disabled="true"]:focus,
+[udex-button][aria-disabled="true"]:focus-visible,
+[udex-button][_aria-disabled]:focus,
+[udex-button][_aria-disabled]:focus-visible {
+  outline: 2px solid #002A86;
+  outline-offset: -4px;
+}
+
+.hidden {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  padding: 0;
+}

package/src/themes/TextField.css

@@ -262,23 +262,12 @@
   --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host([active]) [active].udex-text-field_icon-container,
-:host([active]) [active].udex-text-field_icon-container,
-:host([active]) [active].udex-text-field_icon-container {
-  border-color: transparent;
-  color: var(--udexColorGrey7, #475E75);
-}
-
-:host [active].udex-text-field_icon-container,
-:host [active].udex-text-field_icon-container,
-:host [active].udex-text-field_icon-container {
+:host([icon-active]) .udex-text-field_icon-container {
   border-color: var(--udexColorBlue4, #89D1FF);
   color: var(--udexColorBlue9, #0040B0);
 }
 
-:host([active]) .udex-text-field_icon-container:hover,
-:host([active]) .udex-text-field_icon-container:hover,
-:host([active]) .udex-text-field_icon-container:hover {
+:host([icon-active]) .udex-text-field_icon-container:hover {
   border-color: var(--udexColorGrey7, #475E75);
   color: var(--udexColorGrey7, #475E75);
 }

package/src/types/ContactItemIcon.ts

@@ -0,0 +1,7 @@
+export enum UDExContactItemIcon {
+  "Email" = "Email",
+  "Headset" = "Headset",
+  "Discussion-2" = "Discussion-2",
+}
+
+export default UDExContactItemIcon;

package/src/types/EventRibbon.ts

@@ -0,0 +1,51 @@
+export const eventRibbonBackgroundColors = ["Mango1", "Mango2", "Mango3", "Mango4", "Red1", "Red2", "Red3", "Red4", "Raspberry1", "Raspberry2", "Raspberry3", "Raspberry4", "Pink1", "Pink2", "Pink3", "Pink4", "Indigo1", "Indigo2", "Indigo3", "Indigo4", "Blue1", "Blue2", "Blue3", "Blue4", "Teal1", "Teal2", "Teal3", "Teal4", "Green1", "Green2", "Green3", "Green4", "Grey1", "Grey2", "Grey3", "Grey4"];
+
+export enum UDExEventRibbonIcon {
+  addCalendar = "add-calendar",
+  mediaPlay = "media-play"
+}
+
+export enum UDExEventRibbonMode {
+  dark = "dark",
+  light = "light"
+}
+
+enum UDExEventRibbonColors {
+  Mango = "Mango",
+  Red = "Red",
+  Raspberry = "Raspberry",
+  Pink = "Pink",
+  Indigo = "Indigo",
+  Blue = "Blue",
+  Teal = "Teal",
+  Green = "Green",
+  Grey = "Grey",
+}
+
+export enum UDExEventRibbonLogo {
+  sapphire = "sapphire",
+  sapphireStacked = "sapphire-stacked",
+  connect = "connect",
+  connectStacked = "connect-stacked",
+  teched = "teched",
+  techedStacked = "teched-stacked",
+  now = "now"
+}
+
+export type UDExEventRibbonColorSheme = `${UDExEventRibbonColors}${1|2|3|4}`;
+
+export type UDExEventRibbonLink = {
+  target: string,
+  url: string,
+  text: string,
+}
+
+export const eventLogoText: Record<UDExEventRibbonLogo, string> = {
+  [UDExEventRibbonLogo.connect]: "SAP Connect",
+  [UDExEventRibbonLogo.connectStacked]: "SAP Connect",
+  [UDExEventRibbonLogo.sapphire]: "SAP Sapphire",
+  [UDExEventRibbonLogo.sapphireStacked]: "SAP Sapphire",
+  [UDExEventRibbonLogo.teched]: "SAP TechEd",
+  [UDExEventRibbonLogo.techedStacked]: "SAP TechEd",
+  [UDExEventRibbonLogo.now]: "SAP Now",
+};

package/src/utils/parseArrayFromString.ts

@@ -0,0 +1,5 @@
+function parseArrayFromString<T>(string: string): T[] {
+  return string ? JSON.parse(string) as T[] : [];
+}
+
+export default parseArrayFromString;

package/swap-component-imports.js

@@ -0,0 +1,18 @@
+import fs from "fs";
+import path from "path";
+
+const useInstrumented = process.env.USE_INSTRUMENTED === "1";
+
+const base = path.resolve("cypress/support");
+
+const source = useInstrumented
+  ? `${base}/component-imports.instrumented.ts`
+  : `${base}/component-imports.src.ts`;
+
+const target = `${base}/component-imports.ts`;
+
+if (!fs.existsSync(source)) {
+  process.exit(1);
+}
+
+fs.copyFileSync(source, target);