@sapudex/web-components 0.192.4 → 0.224.0

package/src/themes/Badge.css

@@ -11,13 +11,13 @@
   --udex-info-badge-text-small-height: 1.625rem;
   --udex-info-badge-text-small-padding: var(--udexSpacer4) var(--udexSpacer8);
   --udex-info-badge-number-large-font-size: 0.875rem;
-  --udex-info-badge-number-large-line-height: 1.313rem;
-  --udex-info-badge-number-large-height: 1.813rem;
-  --udex-info-badge-number-large-padding: var(--udexSpacer4) var(--udexSpacer8);
+  --udex-info-badge-number-large-line-height: 1rem;
+  --udex-info-badge-number-large-height: 1rem;
+  --udex-info-badge-number-large-padding: 0 var(--udexSpacer4);
   --udex-info-badge-number-small-font-size: 0.75rem;
-  --udex-info-badge-number-small-line-height: 1.125rem;
-  --udex-info-badge-number-small-height: 1.625rem;
-  --udex-info-badge-number-small-padding: var(--udexSpacer4) var(--udexSpacer8);
+  --udex-info-badge-number-small-line-height: 0.875rem;
+  --udex-info-badge-number-small-height: 0.875rem;
+  --udex-info-badge-number-small-padding: 0 var(--udexSpacer4);
   --udex-badge-icon-color: inherit;
   --udex-badge-icon-size: var(--udexSpacer12, 12px);
 
@@ -127,17 +127,17 @@
 }
 
 .udex-badge--number.udex-badge--large {
-  padding: 0 var(--udexSpacer4);
-  height: 1rem;
-  line-height: 1rem;
-  font-size: 0.875rem;
+  padding: var(--udex-info-badge-number-large-padding);
+  height: var(--udex-info-badge-number-large-height);
+  line-height: var(--udex-info-badge-number-large-line-height);
+  font-size: var(--udex-info-badge-number-large-font-size);
 }
 
 .udex-badge--number.udex-badge--small {
-  padding: 0 0.1875rem;
-  height: 0.875rem;
-  font-size: 0.75rem;
-  line-height: 0.875rem;
+  padding: var(--udex-info-badge-number-small-padding);
+  height: var(--udex-info-badge-number-small-height);
+  font-size: var(--udex-info-badge-number-small-font-size);
+  line-height: var(--udex-info-badge-number-small-line-height);
 }
 
 .udex-badge--number.udex-badge--blue {

package/src/themes/Breadcrumbs.css

@@ -13,7 +13,7 @@
 
 .udex-breadcrumbs > ol {
   margin: 0;
-  padding: 2px 0;
+  padding: var(--udexSpacer2, 2px) 0;
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;

package/src/themes/Button.css

@@ -13,7 +13,7 @@
   --udex-button-icon-m-size: 16px;
   --udex-button-icon-l-size: 18px;
   --udex-button-icon-text-spacing-small-size: 4px;
-  --udex-button-icon-text-spacing-medium-size: 6px;
+  --udex-button-icon-text-spacing-medium-size: 8px;
   --udex-button-icon-text-spacing-large-size: 8px;
   --udexTypographyFontWeightMedium: 500;
 
@@ -238,25 +238,20 @@
   padding: var(--udex-button-padding-small);
 }
 
-:host([design="Primary"][focused]:not([active]):not([toggled]))::part(button):before {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
-  inset: .0625rem;
-  border: .125rem solid #fff;
-  border-radius: .375rem;
-  z-index: 1;
+:host([design="Primary"][desktop]:not([active])) .ui5-button-root:focus-within:after,
+:host([design="Primary"]:not([active])) .ui5-button-root:focus-visible:after {
+  border-color: var(--udexColorNeutralWhite, #fff);
 }
 
-:host([design="Invisible"][focused]:not([active]):not([toggled]))::part(button):after,
-:host([design="Invisible"][active]:not([toggled]))::part(button):before {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
+:host([design="Primary"][desktop][toggled]:not([active])) .ui5-button-root:focus-within:after,
+:host([design="Primary"][toggled]:not([active])) .ui5-button-root:focus-visible:after {
+  border-color: var(--udexColorBlue10, #002A86);
+}
+
+:host([design="Invisible"]:not([active])) .ui5-button-root:focus-visible:after,
+:host([design="Invisible"]:not([toggled])[desktop]) .ui5-button-root:focus-within:before,
+:host([design="Invisible"]:not([toggled])[desktop]) .ui5-button-root:focus-within:after {
   inset: var(--udex-button-invisible-focus-inset);
-  border: 2px solid var(--udexColorBlue10);
-  border-radius: .375rem;
-  z-index: 1;
 }
 
 :host,
@@ -293,6 +288,10 @@
   min-height: var(--udex-button-medium-size);
 }
 
+:host([icon-end]) .ui5-button-icon {
+  margin-inline-start: 0;
+}
+
 :host([size="Large"][icon-only]) {
   min-width: var(--udex-button-large-size);
   max-width: var(--udex-button-large-size);

package/src/themes/Checkbox.css

@@ -2,12 +2,25 @@
     --sapField_TextColor: var(--sapField_ReadOnly_BorderColor);
 }
 
-
 :host([display-only])::part(icon) {
   height: 24px;
   width: 24px;
 }
 
+:host([text]) .ui5-checkbox-root,
+.ui5-checkbox-root {
+  padding: 0;
+  padding-inline-end: var(--udexSpacer2, 2px)
+}
+
+.ui5-checkbox-inner {
+  margin: 9px;
+}
+
+.ui5-checkbox-root .ui5-checkbox-label {
+  margin-inline-start: 2px;
+}
+
 :host([readonly]) .ui5-checkbox-inner,
 :host([readonly][value-state="Warning"][value-state="Error"][value-state="Success"]) .ui5-checkbox-inner {
   background: var(--sapField_ReadOnly_Background);
@@ -16,13 +29,6 @@
 }
 
 :host([required]) .ui5-checkbox-label::after {
-  padding-left: var(--udexSpacer8);
-  padding-right: var(--udexSpacer2);
+  padding-inline: var(--udexSpacer8) var(--udexSpacer2);
   content: "*";
-}
-
-:host([required]) .ui5-checkbox-label:dir(rtl)::after {
-  padding-left: var(--udexSpacer2);
-  padding-right: var(--udexSpacer8);
-  content: "*";
-}
+}

package/src/themes/ControlButton.css

@@ -7,6 +7,7 @@
   --udex-control-button-with-text-small-padding: 4.5px; /* include 1px of border each side */
   --udex-control-button-with-text-medium-padding: 6px; /* include 1px of border each side */
   --udex-control-button-with-text-large-padding: 11px; /* include 1px of border each side */
+  --udex-control-button-icon-text-spacing-medium-size: 8px;
   --udex-control-button-small-height: 25px;
   --udex-control-button-small-width: 25px;
   --udex-control-button-medium-height: 32px;
@@ -62,7 +63,7 @@
 :host([design="Default"]),
 :host{
   background-color: var(--udex-control-button-background-color);
-  border-style: solid; 
+  border-style: solid;
   border-color: var(--udex-control-button-border-color);
   border-width: var(--sapButton_BorderWidth);
   color: var(--udex-control-button-color);
@@ -73,6 +74,10 @@
   line-height: var(--udex-control-button-line-height);
 }
 
+:host([has-icon]:not([icon-end])) .ui5-button-text {
+  margin-inline-start: var(--udex-control-button-icon-text-spacing-medium-size);
+}
+
 .ui5-button-root {
   padding: var(--udex-control-button-with-text-medium-padding);
 }
@@ -120,9 +125,9 @@
   padding: var(--udex-control-button-with-text-large-padding);
 }
 
-:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),  
-:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),  
-:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover), 
+:host([design="Success"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Error"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Warning"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover),
 :host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover), :host(:not([hidden]):not([disabled]).ui5_hovered),
 :host([design="Default"][pressed]:hover), :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
   background: var(--udex-control-button-hover-background-color);
@@ -147,7 +152,7 @@
 }
 
 :host([pressed]), :host([design="Default"][pressed]),
-:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])), 
+:host([pressed]:not([active]):not([non-interactive]):not([_is-touch])),
 :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) {
   background: var(--udex-control-button-selected-background-color);
   border-color: var(--udex-control-button-selected-border-color);
@@ -155,7 +160,10 @@
   color: var(--udex-control-button-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]) {
   color: var(--udex-control-button-active-color);
   border-color: var(--udex-control-button-active-border-color);
   background-color: var(--udex-control-button-active-background-color);
@@ -215,7 +223,11 @@
   color: var(--udex-control-button-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-control-button-color);
   border-color: transparent;
   background-color: var(--udex-control-button-background-color);
@@ -229,4 +241,4 @@
 .ui5-button-text bdi {
   display: flex;
   align-items: center;
-}
+}

package/src/themes/CountrySelector.css

@@ -35,6 +35,7 @@
   width: 100%;
 }
 
+:host([hide-flag-images])::part(textfield-input),
 .udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item) {
   padding-left: var(--udexSpacer12);
   padding-right: var(--udexSpacer12);

package/src/themes/Footer.css

@@ -2,7 +2,7 @@
   --udex-footer-container-xl-max-width: 1432px;
   --udex-footer-container-l-max-width: 1456px;
   --udex-footer-background-color: var(--udexCoreSurfaceHigher, #EAECEE);
-  --udex-footer-icon-color: var(--sapShell_InteractiveTextColor, #354A5F);
+  --udex-footer-icon-color: var(--udexColorGrey9, #223548);
   --udex-footer-text-color: var(--sapShell_NeutralColor, #475E75);
   --udex-footer-expandable-link-text-color: var(--sapTitleColor, #000);
   --udex-footer-expandable-link-underline-border: var(--sapNeutralBorderColor, #A9B4BE);
@@ -19,8 +19,7 @@
   color: var(--udex-footer-link-color);
 }
 
-:host a:hover,
-.udex-footer__remark a {
+:host a:hover {
   text-decoration: underline;
 }
 
@@ -49,7 +48,7 @@
 
 .udex-footer__back-to-top-button {
   position: absolute;
-  top: var(--udexSpacer40);
+  top: var(--udexSpacer48);
   right: var(--udexSpacer24);
   left: auto;
   bottom: auto;
@@ -115,19 +114,12 @@
   line-height: 22px;
 }
 
-.udex-footer__remark {
+.udex-footer__remark,
+.udex-footer__remark-link{
   font-size: var(--udexTypographyBodyXXSFontSize);
   line-height: 18px;
 }
 
-.udex-footer__remark a:hover {
-  color: var(--udexColorGrey11);
-}
-
-.udex-footer__remark a:active {
-  color: var(--udexColorBlue9);
-}
-
 .udex-footer__country {
   margin: 0 0 var(--udexSpacer2);
 }
@@ -153,12 +145,13 @@
   column-gap: var(--udexSpacer12);
 }
 
-.udex-footer__social-icon {
+a.udex-footer__social-icon {
   display: flex;
   width: 32px;
   height: 32px;
   border-radius: var(--udexRadiusXS);
   background-color: var(--udexColorNeutralWhite);
+  color: var(--udex-footer-icon-color);
 }
 
 .udex-footer__social-icon > img {
@@ -196,13 +189,13 @@ h3 {
   margin: 0 0 var(--udexSpacer20);
 }
 
-.udex-footer__links-list li {
-  padding: var(--udexSpacer8) 0;
-}
-
 .udex-footer__links-list li a {
+  padding: var(--udexSpacer8) 0;
   font-size: var(--udexTypographyBodyXSFontSize);
-  line-height: 21px;
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  display: inline-block;
+  box-sizing: border-box;
+  min-height: 38px;
 }
 
 :host([desktop]) .udex-footer a:focus,
@@ -230,14 +223,23 @@ h3 {
 
 @media (max-width: 1599px) {
   .udex-footer {
-    padding: var(--udexSpacer40) var(--udexSpacer72);
+    padding: var(--udexSpacer72);
   }
+
   .udex-footer__content {
     max-width: var(--udex-footer-container-l-max-width);
   }
 }
 
 @media (max-width: 1279px) {
+  .udex-footer__back-to-top-button {
+    top: var(--udexSpacer40);
+  }
+
+  .udex-footer{
+    padding: var(--udexSpacer40) var(--udexSpacer84);
+  }
+
   .udex-footer__copyright {
     padding-top: 0;
   }
@@ -299,14 +301,14 @@ h3 {
   }
 
   .udex-footer__back-to-top-button {
-    bottom: var(--udexSpacer40);
+    bottom: 38px;
     left: var(--udexSpacer48);
     top: auto;
     right: auto;
   }
 
   .udex-footer__back-to-top-button:dir(rtl) {
-    bottom: var(--udexSpacer40);
+    bottom: 38px;
     right: var(--udexSpacer48);
     top: auto;
     left: auto;
@@ -323,7 +325,7 @@ h3 {
 
   .udex-footer__action-item {
     --udex-accordion-border-width: 1px;
-    --udex-accordion-title-font-weight: var(--udexTypographyFontWeightRegular);
+    --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightRegular);
     --udex-accordion-item-headline-font-size: var(--udexTypographyHeadingRegularXXXXSFontSize);
     --udex-accordion-item-header-padding: var(--udexSpacer4) var(--udexSpacer12) var(--udexSpacer4) var(--udexSpacer8);
     --udex-accordion-item-headline-color: var(--udex-footer-expandable-link-text-color);

package/src/themes/Link.css

@@ -5,9 +5,16 @@
   --udex-link-focus-text-decoration: underline;
   --udex-link-emphasized-text-decoration: none;
   --udex-link-icon-height: 24px;
-  --udex-link-icon-width:var(--sapFontSize);
+  --udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  --udex-link-color: var(--udexColorBlue8);
+  --udex-link-hover-color: var(--udexColorBlue10);
+  --udex-link-active-color: var(--udexColorBlue11);
+  --udex-link-icon-width: var(--sapFontSize);
   --udex-link-white-space: break-spaces;
-
+  --udex-link-subtle-color: var(--udexColorGrey8, #354A5F);
+  --udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);
+  --udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);
+  --udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);
   white-space: normal;
 }
 
@@ -16,6 +23,15 @@
 :host([focused]:hover:not(:active)),
 :host(:hover) {
   text-decoration: none;
+  color: var(--udex-link-hover-color);
+}
+
+:host(:active) {
+  color: var(--udex-link-active-color);
+}
+
+:host, :host(:visited) {
+  color: var(--udex-link-color);
 }
 
 :host([focused]) slot {
@@ -35,8 +51,30 @@
   font-weight: var(--udexTypographyFontWeightBold);
 }
 
+:host([design="Subtle"]) {
+  color: var(--udex-link-subtle-color);
+}
+
+:host([design="Subtle"][focused]),
+:host([design="Subtle"]:hover:not(:active)) {
+  color: var(--udex-link-subtle-hover-color);
+}
+
+:host([design="Subtle"]:active) {
+  color: var(--udex-link-subtle-active-color);
+}
+
+:host([design="Subtle"]:visited) {
+  color: var(--udex-link-subtle-visited-color);
+}
+
+:host([design="Subtle"]) .ui5-link-root:hover {
+  text-decoration: var(--udex-link-hover-text-decoration);
+}
+
 .ui5-link-root {
   overflow: visible;
+  line-height: var(--udex-link-line-height);
 }
 
 [ui5-link][disabled] .linkIcon {
@@ -48,10 +86,6 @@
   display: inline;
 }
 
-.udex-link:hover slot {
-  text-decoration: var(--udex-link-hover-text-decoration);
-}
-
 :host([design="Emphasized"]:active),
 :host([design="Emphasized"][focused]) .udex-link:hover slot,
 :host([design="Emphasized"][focused]) .udex-link slot,
@@ -60,6 +94,7 @@
   text-decoration: var(--udex-link-emphasized-text-decoration);
 }
 
+.udex-link:hover slot,
 .udex-link--with-icon:hover slot,
 .udex-link--with-icon:active slot{
   text-decoration: var(--udex-link-hover-text-decoration);
@@ -82,8 +117,8 @@
   height: var(--udex-link-icon-height);
 }
 
-[ui5-link][focused] {
-  color: var(--sapLinkColor);
+:host .ui5-link-root {
+  outline-offset: 0;
 }
 
 :host([focused]) .ui5-link-root,
@@ -94,6 +129,7 @@
     var(--sapContent_FocusWidth, 0.125rem);
 }
 
+[ui5-link],
 .udex-link__icon,
 [ui5-link]:active .udex-link__icon,
 [ui5-link][focused] .udex-link__icon {

package/src/themes/MastheadCountrySelector.css

@@ -0,0 +1,110 @@
+:host {
+  --udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);
+  --udex-masthead-country-selector-padding-xl: var(--udexSpacer32) 52px 52px;
+  --udex-masthead-country-selector-padding-l: var(--udexSpacer24);
+  --udex-masthead-country-selector-padding-m: var(--udexSpacer24) var(--udexSpacer48);
+  --udex-masthead-country-selector-padding-xs: var(--udexSpacer24);
+  --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);
+}
+
+:host([_is-mobile-mode]) .udex-masthead-country-selector {
+  padding: var(--udex-masthead-country-selector-padding-l);
+}
+
+.udex-masthead-country-selector {
+  padding: var(--udex-masthead-country-selector-padding-xl);
+  background: var(--udex-masthead-country-selector-background);
+}
+
+.udex-masthead-country-selector__title {
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightMedium);
+  font-size: var(--udexTypographyBodyXSFontSize);
+  line-height: var(--udexTypographyHeadingLineHeight);
+  color: var(--sapTitleColor);
+  padding: var(--udexSpacer16) 0;
+  display: block;
+  text-align: center;
+}
+
+.udex-masthead-country-selector__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.udex-masthead-country-selector__search {
+  margin: var(--udexSpacer2) 0 var(--udexSpacer16);
+}
+
+.udex-masthead-country-selector__region-back-item::part(menu-item-button) {
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  justify-content: space-between;
+}
+
+.udex-masthead-country-selector__region-back-item::part(left) {
+  margin-inline-end: var(--udexSpacer4);
+  margin-inline-start: 0;
+}
+
+.udex-masthead-country-selector__region-back-item::part(menu-item-button):after {
+  content: "";
+}
+
+.udex-masthead-country-selector__region-back-item,
+.udex-masthead-country-selector__item {
+  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer16) var(--udexSpacer12) var(--udexSpacer16) var(--udexSpacer8);
+}
+
+.udex-masthead-country-selector__item_countries {
+  --udex-masthead-menu-item-padding-desktop: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8);
+}
+
+.udex-masthead-country-selector__item::part(menu-item-link) {
+  width: 100%;
+}
+
+.udex-masthead-country-selector__list_countries {
+  max-height: var(--udex-masthead-country-selector-desktop-max-height);
+  overflow: auto;
+}
+
+@media (max-width: 1279px) {
+  .udex-masthead-country-selector {
+    padding: var(--udex-masthead-country-selector-padding-l);
+    min-height: 100%;
+    box-sizing: border-box;
+  }
+
+  .udex-masthead-country-selector__list_countries {
+    max-height: initial;
+    overflow: initial;
+  }
+
+  .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);
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-masthead-country-selector {
+    padding: var(--udex-masthead-country-selector-padding-m);
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-masthead-country-selector {
+    padding: var(--udex-masthead-country-selector-padding-xs);
+  }
+}