@sapudex/web-components 0.138.0 → 0.143.0

package/src/themes/PhoneNumberField.css

@@ -47,8 +47,6 @@
   --udex-phone-number-field-flag-height: 20px;
   --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-min-width: 320px;
-  --udex-phone-number-field-min-width-xs-and-s :100%;
   --udex-phone-number-field-max-width: 100%;
   display: block;
   font-family: var(--sapFontFamily, sans-serif);
@@ -57,12 +55,6 @@
 
 }
 
-@media (width < 640px) {
-  .udex-phone-number-field{
-    min-width: var(--udex-phone-number-field-min-width-xs-and-s);
-  }
-}
-
 .udex-phone-number-field {
   position: relative;
   padding: var(--udex-phone-number-field-paddings);
@@ -71,7 +63,6 @@
   background: var(--udex-phone-number-field-color-standard-default-background);
   border-radius: var(--udex-phone-number-field-radius);
   border: 1px solid var(--udex-phone-number-field-color-standard-default-border);
-  min-width: var(--udex-phone-number-field-min-width);
   max-width: var(--udex-phone-number-field-max-width);
   width: 100%;
 }
@@ -120,13 +111,24 @@
   --udex-button-color-tertiary-standard-active-border: transparent;
   --udex-button-color-tertiary-standard-active-background: transparent;
 
+  min-width: fit-content;
   margin-block: var(--udex-phone-number-field-button-margins-vertical);
   margin-inline: var(--udex-phone-number-field-button-margins-horizontal);
-  padding: var(--udexSpacer4, 4px);
+  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;
 }
 
-.udex-phone-number-field__open-button {
-  z-index: 3;
+.udex-phone-number-field__open-button[focused]:not([active])::part(button):after,
+.udex-phone-number-field__open-button[focused][active]::part(button):before {
+  inset: 3px;
+  border-radius: 4px;
+}
+
+.udex-phone-number-field__open-button::part(button) {
+  padding: 11px;
 }
 
 :host([field-state="Success"]) .udex-phone-number-field__open-button {
@@ -204,7 +206,7 @@
 
 .udex-phone-number-field__input {
   font-weight: var(--udexTypographyFontWeightRegular, 400);
-  flex-grow: 1;
+  width: 100%;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -340,12 +342,6 @@
 }
 
 /* to do: maybe we will need to create separate component for control button */
-.udex-phone-number-field__open-button {
-  border-radius: var(--udex-phone-number-field-radius);
-  border-right: 1px solid transparent;
-}
-
-
 .udex-phone-number-field__open-button:hover {
   --udex-button-color-tertiary-standard-hover-border: transparent;
   border-right: 1px solid var(--udex-phone-number-field-button-color-tertiary-standard-hover-border);
@@ -361,5 +357,11 @@
 }
 
 udex-dropdown {
-  --udex-dropdown-pane-max-width: 100%;
+  --udex-dropdown-pane-min-width: var(--udex-phone-number-field-popover-min-width);
+}
+
+@media (width < 640px) {
+  udex-dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-phone-number-field-popover-min-width);
+  }
 }

package/src/themes/Search.css

@@ -141,6 +141,10 @@
   border-radius: var(--udex-input-radius);
 }
 
+:host([mode="Home Search"]:not([_is-touched])[active]) .udex-search__root:before {
+  z-index: -1;
+}
+
 .udex-search__field {
   display: block;
   width: 100%;

package/src/themes/SecondaryNavigationItem.css

@@ -82,17 +82,24 @@
   height: 14px;
 }
 
-.udex-secondary-navigation__dropdown {
+.udex-secondary-navigation__dropdown,
+.udex-secondary-navigation__dropdown[data-horizontal-align="left"]:dir(rtl) {
   position: absolute;
   top: 100%;
   margin-top: 1px;
   left: calc(var(--udexSpacer16) * -1);
+  right: auto;
   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);
   background: var(--udex-secondary-navigation-item-dropdown-background);
 }
 
+.udex-secondary-navigation__dropdown[data-horizontal-align="right"] {
+  left: auto;
+  right: calc(var(--udexSpacer16) * -1);
+}
+
 .udex-secondary-navigation__dropdown:dir(rtl) {
   right: calc(var(--udexSpacer16) * -1);
   left: auto;

package/src/themes/SelectBox.css

@@ -1,4 +1,5 @@
 :host {
+ --udex-select-box-popover-min-width: 0px;
   --udex-select-box-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
   --udex-select-box-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
   --udex-select-box-popover-border-width: var(--sapElement_BorderWidth, 1px);
@@ -259,12 +260,19 @@
 }
 
 .udex-select-box__dropdown {
+  --udex-dropdown-pane-min-width: var(--udex-select-box-popover-min-width);
   width: var(--udex-dropdown-pane-width);
   border: var(--udex-select-box-popover-border-width) solid var(--udex-select-box-popover-border-color);
   border-radius: var(--udex-select-box-popover-border-radius);
   box-shadow: var(--udex-select-box-popover-shadow);
 }
 
+@media (width < 640px) {
+  .udex-select-box__dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-select-box-popover-min-width);
+  }
+}
+
 .udex-no-result {
   font-family: var(--sapFontFamily);
   font-weight: var(--udexTypographyFontWeightRegular, 400);