@ecl/mega-menu 5.0.0-alpha.6 → 5.0.0-alpha.8

package/README.md

@@ -10,7 +10,6 @@ npm install --save @ecl/mega-menu
 
 - **"id"** (string) (default: random): Unique id
 - **"toggle"**: (associative array) (default: {}): Toggle (hamburger) button, using ECL button structure
-- **"title"** (string) (default: ''): Used as the inner container aria-label value
 - **"close"**: (associative array) (default: {}): Object, using ECL Button structure
 - **"aria_label"** (string): (default: ''): Main list aria label
 - **"second_level_aria_label"** (string): (default: ''): Second level list aria label
@@ -32,7 +31,7 @@ npm install --save @ecl/mega-menu
   "title": (string)
   "content": (string)
   "items": (associative array) Array of items with image and link
-  }
+  },
   "children": (associative array) (optional): [
   {
   "label": (string) (default: '')
@@ -56,7 +55,6 @@ npm install --save @ecl/mega-menu
 <!-- prettier-ignore -->
 ```twig
 {% include '@ecl/mega-menu/mega-menu.html.twig' with {
-  title: 'Menu',
   toggle: {
     link: {
       label: 'Menu',

package/mega-menu-featured-item.html.twig

@@ -0,0 +1,102 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - "label" (string) Label of the textual link
+  - "path" (string) Path or Url for the href of the link
+  - "icon_path": Path to the icons sprite
+  - "picture" (associative array) ECL picture
+    - "img" (associative array) (default: {}):
+    - "src" (string) (default: ''): Path to the image
+    - "alt" (string) (default: ''): Alt text, required in case of a link with only an image
+    - "sources" (array) (default: []): format: [
+      {
+        "src" (string) (default: ''): Path to the source image
+        "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string.
+        "type" (string) (default: ''): Type of this source
+      },
+      ...
+    ]
+  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
+  - "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
+    - "name" (string) Attribute name, eg. 'data-test'
+    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+#}
+
+{# Internal properties #}
+
+{% set _item_css_class = 'ecl-mega-menu__featured-list__item' %}
+{% set _css_class = 'ecl-mega-menu__featured-link' %}
+{% set _label = label|default('') %}
+{% set _path = path|default('') %}
+{% set _picture = picture|default({})  %}
+{% set _icon_path = icon_path|default('') %}
+{% set _external = external|default(false) %}
+{% set _sr_external = sr_external|default(false) %}
+{% set _extra_attributes = 'data-ecl-mega-menu-featured-link' %}
+
+{# Internal logic - Process properties #}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% if attr.value is defined %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
+    {% else %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% set _picture_markup = '' %}
+{% if _picture is not empty %}
+  {% set _picture_markup %}
+    {% include '@ecl/picture/picture.html.twig' with {
+      picture: _picture,
+      extra_classes: 'ecl-mega-menu__featured-picture',
+      extra_image_classes: 'ecl-mega-menu__featured-image',
+    } only %}
+  {% endset %}
+{% endif %}
+
+{% if _label is not empty and _picture_markup is not empty %}
+  {% set _item_css_class = _item_css_class ~ ' ecl-mega-menu__featured-list__item--combo' %}
+{% endif %}
+{% if _picture is not empty and _path is empty %}
+  {% set _item_css_class = _item_css_class ~ ' ecl-mega-menu__featured-list__item--image-only' %}
+{% endif %}
+
+<li class="{{  _item_css_class }}">
+  {# Link with image #}
+  {% if _path is not empty and _picture is not empty %}
+  <a 
+    class="ecl-link ecl-link--standalone {{ _css_class }}"
+    href="{{ _path }}"
+    {{ _extra_attributes|raw }}
+  >
+    {{- _picture_markup -}}{{- _label -}}
+  </a>
+  {# simple image #}
+  {% elseif _picture is not empty %}
+    {{- _picture_markup -}}
+  {#  textual link #}
+  {% elseif _path is not empty and _label is not empty  %}
+    {% include '@ecl/link/link.html.twig' with {
+      link: { 
+        path: _path,
+        type: 'standalone',
+        icon_path: _icon_path,
+        external: _external,
+        sr_external: _sr_external,
+        label: _label, 
+      },
+      extra_attributes: extra_attributes|default([])|merge([{ name: 'data-ecl-mega-menu-featured-link' }]),
+      extra_classes: _css_class,
+    } only %}
+  {% endif %}
+</li>
+
+{% endapply %}

package/mega-menu-item.html.twig

@@ -24,6 +24,7 @@
         - "path" (string) Path or Url for the href
         - "label" (string) Label of the item
         - "external" (boolean) Whether the link is external
+        - "icon_path" (string) Path to the icons sprite
         - "sr_external" (string) (default: '') Additional label for the external icon
         - "extra_attributes" (array)
           - "name" (string) Attribute name, eg. 'data-test'
@@ -191,10 +192,10 @@
             size: 'xs',
           },
           extra_classes: _info.link.extra_classes|default('') ~ ' ecl-mega-menu__info-link',
-          extra_attributes: [{
+          extra_attributes: _info.link.extra_attributes|default([])|merge([{
             name: 'aria-describedby', 
             value: _info_title_id,
-          }],
+          }]),
         }) only %}
       {%- endif -%}
       </div>
@@ -340,22 +341,7 @@
             aria-labelledby="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id }}"
           >
             {% for item in _featured.items %}
-              <li class="ecl-mega-menu__featured-list__item">
-              {% if item.picture is not empty %}
-                {% include '@ecl/picture/picture.html.twig' with {
-                  picture: item.picture,
-                  extra_classes: 'ecl-mega-menu__featured-picture',
-                  extra_image_classes: 'ecl-mega-menu__featured-image',
-                } only %}
-              {% endif %}
-              {% include '@ecl/link/link.html.twig' with {
-                link: item|merge({ type: 'standalone', icon_path: _icon_path }),
-                extra_attributes: [
-                  { name: 'data-ecl-mega-menu-featured-link' },
-                ]|merge(item.extra_attributes|default([])),
-                extra_classes: item.extra_classes|default(''),
-              } only %}
-              </li>
+              {% include '@ecl/mega-menu/mega-menu-featured-item.html.twig' with item|merge({ icon_path: _icon_path }) only %}
             {% endfor %}
           </ul>
         {%- endif -%}

package/mega-menu.html.twig

@@ -9,6 +9,7 @@
   - "aria_label" (string) (default: '') Aria label for the main nav
   - "second_level_aria_label" (string) (default: '') Aria label for the sub-lists, second level
   - "third_level_aria_label" (string) (default: '') Aria label for the sub-lists, third level
+  - "see_all_label": (string) (default: ''): Label for the "view all" link
   - "icon_path": (string) (default: ''): Path to the icon sprite
   - "items": (array) (default: []): The menu items - format: [
     {
@@ -35,7 +36,7 @@
           "path": (string) (default: '')
           "external": (boolean),
           "sr_external" (string) (default: '') Additional label for the external icon
-          "see_all" (boolean)
+          "see_all" (boolean) controls visibility of "View All" button
           "see_all_label" (string)
           "see_all_attributes" (optional) (array) (default: [])
             - "name" (string) Attribute name, eg. 'data-test'
@@ -47,7 +48,7 @@
       ]
     }
   ],
-  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
+  - "extra_classes" (string) (default: '') Extra classes (space separated) for the nav element
   - "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
     - "name" (string) Attribute name, eg. 'data-test'
     - "value" (optional) (string) Attribute value, eg: 'data-test-1'
@@ -63,6 +64,7 @@
 {% set _toggle = toggle|default({}) %}
 {% set _close = close|default({}) %}
 {% set _items = items|default([{}]) %}
+{% set _see_all_label = see_all_label|default('') %}
 {% set _css_class = 'ecl-mega-menu' %}
 {% set _extra_attributes = '' %}
 {% set _icon_path = icon_path|default('') %}

package/mega-menu.js

@@ -143,7 +143,6 @@ export class MegaMenu {
     this.infoLinks = null;
     this.seeAllLinks = null;
     this.featuredLinks = null;
-    this.featuredImages = null;
 
     // Bind `this` for use in callbacks
     this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
@@ -153,8 +152,6 @@ export class MegaMenu {
     this.handleClickGlobal = this.handleClickGlobal.bind(this);
     this.handleClickOnItem = this.handleClickOnItem.bind(this);
     this.handleClickOnSubitem = this.handleClickOnSubitem.bind(this);
-    this.handleClickOnFeaturedImage =
-      this.handleClickOnFeaturedImage.bind(this);
     this.handleFocusOut = this.handleFocusOut.bind(this);
     this.handleKeyboard = this.handleKeyboard.bind(this);
     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
@@ -197,10 +194,6 @@ export class MegaMenu {
     );
     this.toggleLabel = queryOne('.ecl-button__label', this.open);
     this.menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
-    this.featuredImages = queryAll(
-      '.ecl-mega-menu__featured-image',
-      this.element,
-    );
 
     // Check if we should use desktop display (it does not rely only on breakpoints)
     this.isDesktop = this.useDesktopDisplay();
@@ -218,12 +211,6 @@ export class MegaMenu {
         this.back.addEventListener('keyup', this.handleKeyboard);
       }
 
-      if (this.featuredImages) {
-        this.featuredImages.forEach((img) => {
-          img.addEventListener('click', this.handleClickOnFeaturedImage);
-        });
-      }
-
       // Global click
       if (this.attachClickListener) {
         document.addEventListener('click', this.handleClickGlobal);
@@ -374,12 +361,6 @@ export class MegaMenu {
         this.back.removeEventListener('click', this.handleClickOnBack);
       }
 
-      if (this.featuredImages) {
-        this.featuredImages.forEach((img) => {
-          img.removeEventListener('click', this.handleClickOnFeaturedImage);
-        });
-      }
-
       document.removeEventListener('click', this.handleClickGlobal);
     }
 
@@ -513,10 +494,15 @@ export class MegaMenu {
 
     // Remove display:none from the sublists
     if (subLists && viewport === 'mobile') {
-      const megaMenus = queryAll(
-        '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
+      const megaMenus = queryAll('[data-ecl-mega-menu-mega]', this.element);
+      const featuredPanels = queryAll(
+        '[data-ecl-mega-menu-featured]',
         this.element,
       );
+      if (featuredPanels.length) {
+        megaMenus.push(...featuredPanels);
+      }
+
       megaMenus.forEach((menu) => {
         menu.style.height = '';
       });
@@ -775,7 +761,8 @@ export class MegaMenu {
                 featuredHeight += child.offsetHeight + marginHeight;
               },
             );
-
+            // Add 5px to the featured panel height to prevent scrollbar on hover
+            featuredHeight += 5;
             heights.push(featuredHeight);
           }
         }
@@ -796,6 +783,7 @@ export class MegaMenu {
         if (wrapper) {
           wrapper.style.height = `${height}px`;
         }
+
         if (mainPanel && this.isLarge) {
           mainPanel.style.height = `${height}px`;
         } else if (mainPanel && infoPanel && this.isDesktop) {
@@ -1321,19 +1309,6 @@ export class MegaMenu {
     this.trigger('onBack', { level: level2 ? 2 : 1 });
   }
 
-  /**
-   * Programmatically click the related link when an image is clicked
-   *
-   * @param {Event} e
-   */
-  handleClickOnFeaturedImage(e) {
-    const featuredImage = e.target;
-    const featuredLink = featuredImage.parentElement.nextSibling;
-    if (featuredLink) {
-      featuredLink.click();
-    }
-  }
-
   /**
    * Show/hide the first panel
    *

package/mega-menu.scss

@@ -14,7 +14,8 @@ $mega-menu: null !default;
 
 @mixin with-scrollbar {
   overflow-y: auto;
-  scrollbar-color: var(--c-n) rgba(0, 0, 0, 0);
+  scrollbar-color: var(--cm-on-surface-neutral-medium, var(--c-n))
+    rgba(0, 0, 0, 0);
   scrollbar-width: thin;
 }
 
@@ -68,6 +69,7 @@ $mega-menu: null !default;
   }
 
   &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'open-background-hover');
     text-decoration: underline;
   }
 
@@ -83,6 +85,10 @@ $mega-menu: null !default;
 .ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
   background-color: map.get($mega-menu, 'mobile', 'open-background-active');
 
+  &:hover {
+    background-color: map.get($mega-menu, 'mobile', 'open-background-hover');
+  }
+
   .ecl-icon:first-of-type {
     display: none;
   }
@@ -114,7 +120,7 @@ $mega-menu: null !default;
     padding-top: 0;
 
     .ecl-container {
-      padding: 0 var(--s-m);
+      padding: 0 map.get($mega-menu, 'desktop', 'container-padding-horizontal');
     }
 
     .ecl-mega-menu__container {
@@ -315,7 +321,7 @@ $mega-menu: null !default;
 }
 
 .ecl-mega-menu__wrapper {
-  background: map.get($theme, 'color', 'white');
+  background: #fff;
   display: none;
   font: map.get($mega-menu, 'global', 'font');
   position: absolute;
@@ -394,8 +400,8 @@ $mega-menu: null !default;
     background: transparent;
     border-color: transparent;
     border-radius: 0px;
-    color: var(--c-d);
-    outline-color: var(--c-p);
+    color: var(--cm-on-surface-brand, var(--c-d));
+    outline-color: var(--cm-border-primary, var(--c-p));
     outline-offset: -2px;
     outline-width: 2px;
   }
@@ -415,11 +421,23 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu__featured-list__item .ecl-link {
-  border-bottom: 1px solid map.get($mega-menu, 'mobile', 'featured-link-border');
+.ecl-mega-menu__featured-list__item {
+  .ecl-link {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    border-bottom: 1px solid
+      map.get($mega-menu, 'mobile', 'featured-link-border');
 
-  &:hover {
-    border-color: map.get($mega-menu, 'mobile', 'featured-link-border');
+    .ecl-picture {
+      margin-inline: calc(-1 * var(--s-s)) calc(-1 * var(--s-2xl));
+    }
+
+    &:hover {
+      border-color: map.get($mega-menu, 'mobile', 'featured-link-border');
+    }
+  }
+
+  &--combo .ecl-mega-menu__featured-image {
+    margin-block-end: var(--s-xs);
   }
 }
 
@@ -440,7 +458,7 @@ $mega-menu: null !default;
     outline: none;
 
     .ecl-button__label {
-      outline: 2px solid var(--c-p);
+      outline: 2px solid var(--cm-border-primary, var(--c-p));
       outline-offset: 4px;
     }
   }
@@ -495,11 +513,11 @@ $mega-menu: null !default;
 .ecl-mega-menu__subitem {
   .ecl-mega-menu__sublink--level-2 {
     background: transparent;
-    color: var(--c-p);
+    color: var(--cm-on-surface-primary, var(--c-p));
 
     &:hover {
       box-shadow: none;
-      color: var(--c-p-140);
+      color: var(--cm-on-surface-primary-highest, var(--c-p-140));
     }
   }
 }
@@ -561,7 +579,7 @@ $mega-menu: null !default;
       z-index: 0;
 
       &:active {
-        color: map.get($theme, 'color', 'white');
+        color: #fff;
       }
 
       &:hover {
@@ -579,7 +597,7 @@ $mega-menu: null !default;
         );
         border-radius: 0;
         color: map.get($mega-menu, 'desktop', 'item-color-focus');
-        outline-color: map.get($theme, 'color', 'white');
+        outline-color: #fff;
         outline-offset: -8px;
         outline-width: map.get($mega-menu, 'desktop', 'outline-width');
       }
@@ -635,7 +653,7 @@ $mega-menu: null !default;
       }
 
       .ecl-mega-menu__link:focus-visible {
-        outline-color: var(--c-p);
+        outline-color: var(--cm-border-primary, var(--c-p));
       }
     }
   }
@@ -651,8 +669,8 @@ $mega-menu: null !default;
 
       &.ecl-mega-menu__item--expanded {
         .ecl-mega-menu__link {
-          background-color: map.get($theme, 'color', 'white');
-          color: var(--c-d);
+          background-color: #fff;
+          color: var(--cm-on-surface-brand, var(--c-d));
           z-index: map.get($theme, 'z-index', 'dropdown') + 1;
         }
       }
@@ -768,7 +786,7 @@ $mega-menu: null !default;
     .ecl-link {
       border-radius: 0;
       box-sizing: border-box;
-      color: var(--c-d);
+      color: var(--cm-on-surface-brand, var(--c-d));
       margin: 0 var(--s-l);
       padding: var(--s-xs) 0;
 
@@ -834,15 +852,15 @@ $mega-menu: null !default;
   }
 
   &--current {
-    background-color: var(--c-n-80);
-    box-shadow: inset 4px 0 0 0 var(--c-p);
+    background-color: var(--cm-surface-neutral-lowest, var(--c-n-80));
+    box-shadow: inset 4px 0 0 0 var(--cm-border-primary, var(--c-p));
   }
 
   &:focus-visible {
     background: transparent;
     border-color: transparent;
-    color: var(--c-d);
-    outline-color: var(--c-p);
+    color: var(--cm-on-surface-brand, var(--c-d));
+    outline-color: var(--cm-border-primary, var(--c-p));
     outline-offset: -2px;
     outline-width: 2px;
   }
@@ -870,14 +888,14 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu__sublink {
-    color: var(--c-p);
+    color: var(--cm-on-surface-primary, var(--c-p));
 
     &:hover {
       text-decoration: underline;
     }
 
     &:focus-visible {
-      color: var(--c-p) !important;
+      color: var(--cm-on-surface-primary, var(--c-p)) !important;
     }
 
     &.ecl-mega-menu__sublink--last {
@@ -896,16 +914,19 @@ $mega-menu: null !default;
 
 .ecl-mega-menu__featured {
   background-color: map.get($mega-menu, 'mobile', 'featured-background');
-  border-color: var(--c-n);
+  border-color: var(--cm-border-neutral, var(--c-n));
   border-width: 0.5px;
   flex-direction: column;
   padding: 0 var(--s-xs);
 
+  .ecl-mega-menu__featured-scrollable {
+    background-color: map.get($mega-menu, 'mobile', 'featured-background');
+  }
+
   .ecl-mega-menu__featured-picture {
     display: block;
 
     .ecl-mega-menu__featured-image {
-      cursor: pointer;
       aspect-ratio: 16/9;
       display: block;
       margin-inline-start: var(--s-l);
@@ -914,6 +935,10 @@ $mega-menu: null !default;
     }
   }
 
+  .ecl-link .ecl-mega-menu__featured-picture .ecl-mega-menu__featured-image {
+    margin-inline-start: var(--s-s);
+  }
+
   .ecl-mega-menu__featured-title {
     display: block;
     margin: calc(var(--s-xs) + 2px) var(--s-m) calc(var(--s-xs) + 2px)
@@ -933,16 +958,20 @@ $mega-menu: null !default;
       .ecl-link {
         border-radius: 0;
         box-sizing: border-box;
-        color: var(--c-p);
+        color: var(--cm-on-surface-primary, var(--c-p));
         display: block;
         outline-offset: -2px;
         padding: var(--s-m) var(--s-l);
         width: 100%;
 
         &:hover {
-          color: var(--c-p);
+          color: var(--cm-on-surface-primary, var(--c-p));
         }
       }
+
+      &--image-only {
+        margin-block-end: var(--s-xs);
+      }
     }
   }
 }
@@ -969,7 +998,7 @@ $mega-menu: null !default;
       width: 100vw;
 
       &::before {
-        background: #e3e3e3;
+        background: var(--cm-border-neutral, '#e3e3e3');
         content: ' ';
         display: block;
         height: 1px;
@@ -999,7 +1028,7 @@ $mega-menu: null !default;
       > .ecl-mega-menu__wrapper
       > .ecl-container
       > .ecl-mega-menu__info {
-      background-color: map.get($theme, 'color', 'white');
+      background-color: #fff;
       border: map.get($mega-menu, 'desktop', 'mega-border');
       border-radius: 0 0 map.get($mega-menu, 'global', 'border-radius')
         map.get($mega-menu, 'global', 'border-radius');
@@ -1049,7 +1078,7 @@ $mega-menu: null !default;
     }
 
     .ecl-mega-menu__item > .ecl-mega-menu__mega-container {
-      background-color: map.get($theme, 'color', 'white');
+      background-color: #fff;
       top: 100%;
       width: 100%;
 
@@ -1102,7 +1131,7 @@ $mega-menu: null !default;
       }
 
       .ecl-mega-menu__subitem--expanded .ecl-mega-menu__featured {
-        background: map.get($theme, 'color', 'white');
+        background: #fff;
         display: flex;
         margin-bottom: 0;
 
@@ -1122,7 +1151,7 @@ $mega-menu: null !default;
     }
 
     .ecl-mega-menu__sublist {
-      border-color: map.get($theme, 'color', 'white');
+      border-color: #fff;
       border-width: 2px;
       display: flex;
       flex-direction: column;
@@ -1211,7 +1240,7 @@ $mega-menu: null !default;
         }
 
         &:focus-visible {
-          outline-color: var(--c-p);
+          outline-color: var(--cm-border-primary, var(--c-p));
         }
       }
     }
@@ -1253,14 +1282,14 @@ $mega-menu: null !default;
 
       &:focus-visible {
         border-color: transparent;
-        color: var(--c-d);
-        outline-color: var(--c-p);
+        color: var(--cm-on-surface-brand, var(--c-d));
+        outline-color: var(--cm-border-primary, var(--c-p));
         outline-width: 2px;
       }
     }
 
     .ecl-mega-menu__subitem[aria-expanded] > .ecl-mega-menu__sublink:hover {
-      background-color: var(--c-n-40);
+      background-color: var(--cm-surface-neutral-lowest, var(--c-n-40));
       box-shadow: none;
       text-decoration: none;
     }
@@ -1274,7 +1303,7 @@ $mega-menu: null !default;
           'desktop',
           'sublink-current-background'
         );
-        border-color: var(--c-p);
+        border-color: var(--cm-border-primary, var(--c-p));
       }
     }
   }
@@ -1292,6 +1321,7 @@ $mega-menu: null !default;
     top: 0;
 
     .ecl-mega-menu__featured-scrollable {
+      background-color: transparent;
       height: 100%;
 
       @include with-scrollbar;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/mega-menu",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.8",
   "description": "ECL Mega Menu",
   "publishConfig": {
     "access": "public"
@@ -11,10 +11,11 @@
   "module": "mega-menu.js",
   "style": "mega-menu.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.6",
-    "@ecl/dom-utils": "5.0.0-alpha.6",
-    "@ecl/event-manager": "5.0.0-alpha.6",
-    "@ecl/link": "5.0.0-alpha.6",
+    "@ecl/button": "5.0.0-alpha.8",
+    "@ecl/dom-utils": "5.0.0-alpha.8",
+    "@ecl/event-manager": "5.0.0-alpha.8",
+    "@ecl/link": "5.0.0-alpha.8",
+    "@ecl/picture": "5.0.0-alpha.8",
     "bowser": "2.11.0",
     "focus-trap": "7.6.4"
   },
@@ -32,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "3a1f904e4fdd672e374de174cc24a2a92e1268c4"
+  "gitHead": "765d0f9f94ff5aebe563f8693bb682647cc4f8a8"
 }