@ecl/site-header 5.0.0-RC2 → 5.0.0-RC3

package/_site-header-dropdown.scss

@@ -51,7 +51,7 @@ $language-list: null !default;
   box-shadow: map.get($language-switcher, 'shadow');
   color: map.get($language-list, 'color');
   font: var(--f-m);
-  left: 0;
+  inset-inline-start: 0;
   height: auto;
   margin-top: var(--s-m);
   padding-block-start: map.get(
@@ -73,8 +73,8 @@ $language-list: null !default;
     #{map.get($language-list, 'container-padding-mobile', 'inline-end')} +
       #{map.get($language-list, 'item-active-border-width')}
   );
+  inset-inline-end: 0;
   position: absolute;
-  right: 0;
   width: auto;
   z-index: map.get($theme, 'z-index', 'overlay');
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/site-header",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-RC2",
+  "version": "5.0.0-RC3",
   "description": "ECL Site Header",
   "publishConfig": {
     "access": "public"
@@ -10,22 +10,22 @@
   "main": "site-header.js",
   "module": "site-header.js",
   "dependencies": {
-    "@ecl/button": "5.0.0-RC2",
-    "@ecl/dom-utils": "5.0.0-RC2",
-    "@ecl/grid": "5.0.0-RC2",
-    "@ecl/icon": "5.0.0-RC2",
-    "@ecl/link": "5.0.0-RC2",
-    "@ecl/mega-menu": "5.0.0-RC2",
-    "@ecl/menu": "5.0.0-RC2",
-    "@ecl/mixins-typography": "5.0.0-RC2",
-    "@ecl/notification": "5.0.0-RC2",
-    "@ecl/picture": "5.0.0-RC2",
-    "@ecl/search-form": "5.0.0-RC2",
-    "focus-trap": "8.0.0"
+    "@ecl/button": "5.0.0-RC3",
+    "@ecl/dom-utils": "5.0.0-RC3",
+    "@ecl/icon": "5.0.0-RC3",
+    "@ecl/link": "5.0.0-RC3",
+    "@ecl/mega-menu": "5.0.0-RC3",
+    "@ecl/menu": "5.0.0-RC3",
+    "@ecl/notification": "5.0.0-RC3",
+    "@ecl/picture": "5.0.0-RC3",
+    "@ecl/search-form": "5.0.0-RC3",
+    "focus-trap": "8.0.1"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "5.0.0-RC2",
-    "@ecl/resources-eu-logo": "5.0.0-RC2"
+    "@ecl/grid": "5.0.0-RC3",
+    "@ecl/mixins-typography": "5.0.0-RC3",
+    "@ecl/resources-ec-logo": "5.0.0-RC3",
+    "@ecl/resources-eu-logo": "5.0.0-RC3"
   },
   "repository": {
     "type": "git",
@@ -41,5 +41,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "c6fea2445f9757307ca8d1de1a0f3de098a38abe"
+  "gitHead": "83f271fac12538193d99ae7444c5cbd3ab2c40a5"
 }

package/site-header-ec.scss

@@ -29,13 +29,8 @@ $language-list: null !default;
     bottom: 0;
     padding: 0;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     width: 100%;
-
-    &:dir(rtl) {
-      left: 0;
-      right: auto;
-    }
   }
 
   .ecl-menu__open,
@@ -45,10 +40,6 @@ $language-list: null !default;
     z-index: 54;
   }
 
-  .ecl-mega-menu--rtl .ecl-mega-menu__open {
-    margin-inline-start: var(--s-m);
-  }
-
   .ecl-site-header__cta {
     margin-top: var(--s-s);
     position: relative;
@@ -145,8 +136,8 @@ $language-list: null !default;
   }
 
   .ecl-indicator:not(:empty) {
-    left: -18px;
-    right: auto;
+    inset-inline-start: -18px;
+    inset-inline-end: auto;
   }
 }
 
@@ -180,8 +171,9 @@ $language-list: null !default;
   &::before {
     @include site-header-dropdown.arrow-up;
 
-    left: auto;
-    right: var(--ecl-login-arrow-position);
+    left: var(--ecl-login-arrow-position);
+    margin-left: 0;
+    right: auto;
   }
 
   &.ecl-site-header__login-box--active {
@@ -216,8 +208,9 @@ $language-list: null !default;
   &::before {
     @include site-header-dropdown.arrow-up;
 
-    left: auto;
-    right: var(--ecl-search-arrow-position);
+    left: var(--ecl-search-arrow-position);
+    margin-left: 0;
+    right: auto;
   }
 }
 
@@ -268,26 +261,16 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   bottom: auto;
   padding: 0;
   position: absolute;
-  right: 0;
   top: 2.5rem;
-  width: calc(44px + var(--s-l) * 2);
-}
 
-.ecl-site-header .ecl-mega-menu {
-  right: calc(-1 * var(--s-l));
+  // 44px as the other buttons
+  width: 2.75rem;
 
-  &:dir(rtl) {
-    left: calc(-1 * var(--s-l));
-    right: auto;
-  }
+  // container's padding inline end
+  inset-inline-end: var(--s-m);
 }
-// stylelint-enable no-descending-specificity
 
-.ecl-site-header .ecl-mega-menu--rtl,
-.ecl-site-header .ecl-menu--rtl {
-  left: 0;
-  right: auto;
-}
+// stylelint-enable no-descending-specificity
 
 .ecl-site-header .ecl-menu__overlay,
 .ecl-site-header .ecl-menu__inner,
@@ -351,9 +334,10 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
   /* stylelint-disable-next-line plugin/selector-bem-pattern */
   .ecl-site-header {
-    .ecl-mega-menu,
-    .ecl-menu {
-      width: calc(44px + var(--s-xl) * 2);
+    .ecl-menu,
+    .ecl-mega-menu {
+      // container's padding inline end
+      inset-inline-end: var(--s-xl);
     }
 
     .ecl-search-form {
@@ -390,12 +374,12 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
     .ecl-mega-menu {
       position: relative;
-      right: 0;
+      inset-inline-end: 0;
       top: 0;
       width: 100%;
 
       &.ecl-mega-menu--rtl {
-        right: 0;
+        inset-inline-end: 0;
       }
     }
 

package/site-header-eu.scss

@@ -41,13 +41,8 @@ $language-list: null !default;
     top: var(--s-m);
     padding: 0;
     position: absolute;
-    right: 0;
-    width: calc(44px + var(--s-m) * 2);
-
-    &:dir(rtl) {
-      left: 0;
-      right: auto;
-    }
+    inset-inline-end: var(--s-m);
+    width: 44px;
   }
 
   .ecl-site-header__cta {
@@ -110,10 +105,6 @@ $language-list: null !default;
     width: 1.5rem;
   }
 
-  .ecl-mega-menu__open {
-    margin-inline-start: var(--s-m);
-  }
-
   .ecl-menu[data-expanded] .ecl-menu__open,
   .ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
     background-color: var(--c-p-20);
@@ -209,8 +200,9 @@ $language-list: null !default;
   &::before {
     @include site-header-dropdown.arrow-up;
 
-    left: auto;
-    right: var(--ecl-login-arrow-position);
+    left: var(--ecl-login-arrow-position);
+    margin-left: 0;
+    right: auto;
   }
 
   &.ecl-site-header__login-box--active {
@@ -261,8 +253,8 @@ $language-list: null !default;
   }
 
   .ecl-indicator:not(:empty) {
-    left: -18px;
-    right: auto;
+    inset-inline-start: -18px;
+    inset-inline-end: auto;
   }
 }
 
@@ -274,8 +266,9 @@ $language-list: null !default;
     &::before {
       @include site-header-dropdown.arrow-up;
 
-      left: auto;
-      right: var(--ecl-search-arrow-position);
+      left: var(--ecl-search-arrow-position);
+      margin-left: 0;
+      right: auto;
     }
   }
 }
@@ -336,6 +329,14 @@ $language-list: null !default;
 }
 // stylelint-enable plugin/selector-bem-pattern
 
+@include breakpoints.up('m') {
+  .ecl-site-header .ecl-menu,
+  .ecl-site-header .ecl-mega-menu {
+    // container's padding-inline-end
+    inset-inline-end: var(--s-l);
+  }
+}
+
 @include breakpoints.down('l') {
   .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
@@ -406,12 +407,14 @@ $language-list: null !default;
       background: map.get($site-header, 'gradient-background');
       min-height: auto;
       position: static;
+      inset-inline-end: 0;
       width: 100%;
     }
 
     .ecl-mega-menu {
       background: map.get($site-header, 'gradient-background');
       position: relative;
+      inset-inline-end: 0;
       top: 0;
       width: 100%;
     }

package/site-header.js

@@ -570,12 +570,11 @@ export class SiteHeader {
 
   setLoginArrow() {
     const loginRect = this.loginBox.getBoundingClientRect();
-    if (loginRect.x === 0) {
+    const clientWidth = document.documentElement.clientWidth;
+    if (loginRect.width >= clientWidth - 1) {
       const loginToggleRect = this.loginToggle.getBoundingClientRect();
       const arrowPosition =
-        document.documentElement.clientWidth -
-        loginToggleRect.right +
-        loginToggleRect.width / 2;
+        loginToggleRect.left - loginRect.left + loginToggleRect.width / 2;
 
       this.loginBox.style.setProperty(
         '--ecl-login-arrow-position',
@@ -586,12 +585,11 @@ export class SiteHeader {
 
   setSearchArrow() {
     const searchRect = this.searchForm.getBoundingClientRect();
-    if (searchRect.x === 0) {
+    const clientWidth = document.documentElement.clientWidth;
+    if (searchRect.width >= clientWidth - 1) {
       const searchToggleRect = this.searchToggle.getBoundingClientRect();
       const arrowPosition =
-        document.documentElement.clientWidth -
-        searchToggleRect.right +
-        searchToggleRect.width / 2;
+        searchToggleRect.left - searchRect.left + searchToggleRect.width / 2;
 
       this.searchForm.style.setProperty(
         '--ecl-search-arrow-position',