@ecl/mega-menu 5.0.0-alpha.1 → 5.0.0-alpha.10

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
@@ -31,8 +30,8 @@ npm install --save @ecl/mega-menu
   "featured" (object) (optional) {
   "title": (string)
   "content": (string)
-  "items": (associative array)
-  }
+  "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

@@ -20,9 +20,11 @@
       - "title" (string) Title of the featured panel
       - "content" (string) Content of the featured panel
       - "items" (associative array) Array of items
+        - "picture": (object) (default: {}) Object of type Picture
         - "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'
@@ -190,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>
@@ -247,7 +249,7 @@
         {% endif %}
         <li
           class="{{ _subitem_class }}"
-          {{- _subitem_attrs|raw -}}
+          {{ _subitem_attrs|raw }}
         >
         {%- if child.children is defined and child.children is not empty -%}
           {# Children, 2nd level #}
@@ -322,13 +324,6 @@
         data-ecl-mega-menu-featured
       >
         <div class="ecl-mega-menu__featured-scrollable">
-      {% if _featured.picture is not empty %}
-        {% include '@ecl/picture/picture.html.twig' with {
-          picture: _featured.picture,
-          extra_classes: 'ecl-mega-menu__featured-picture',
-          extra_image_classes: 'ecl-mega-menu__featured-image',
-        } only %}
-      {% endif %}
       {% if _featured.title is not empty %}
         <span
           class="ecl-mega-menu__featured-title"
@@ -346,15 +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">
-              {% 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: [
     {
@@ -27,7 +28,7 @@
       "featured" (oject) (optional) {
         - "title": (string) Title of the featured panel
         - "content": (string) Top content of the featured panel
-        - "items": (associative array) (optional) Object of type ECL link
+        - "items": (associative array) (optional) Array of items with image and link
       }
       "children": (associative array) (optional): [
         {
@@ -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('') %}
@@ -93,7 +95,6 @@
   {%- if _close is not empty and _close.label is defined and _close.label is not empty -%}
     data-ecl-mega-menu-label-close="{{ _close.label }}"
   {%- endif -%}
-  aria-expanded="false"
   role="navigation"
   id={{ _id }}
   {%- if _aria_label is not empty %}

package/mega-menu.js

@@ -2,8 +2,8 @@
 
 import { queryOne, queryAll } from '@ecl/dom-utils';
 import EventManager from '@ecl/event-manager';
-import isMobile from 'mobile-device-detect';
 import { createFocusTrap } from 'focus-trap';
+import Bowser from 'bowser';
 
 /**
  * @param {HTMLElement} element DOM element for component instantiation and scope
@@ -361,9 +361,7 @@ export class MegaMenu {
         this.back.removeEventListener('click', this.handleClickOnBack);
       }
 
-      if (this.attachClickListener) {
-        document.removeEventListener('click', this.handleClickGlobal);
-      }
+      document.removeEventListener('click', this.handleClickGlobal);
     }
 
     if (this.links) {
@@ -460,13 +458,17 @@ export class MegaMenu {
    * - not having hamburger menu on screen
    */
   useDesktopDisplay() {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    const isMobile = browser.getPlatformType() === 'mobile';
+    const isTablet = browser.getPlatformType() === 'tablet';
+
     // Detect mobile devices
-    if (isMobile.isMobileOnly) {
+    if (isMobile) {
       return false;
     }
 
     // Force mobile display on tablet
-    if (isMobile.isTablet) {
+    if (isTablet) {
       this.element.classList.add('ecl-mega-menu--forced-mobile');
       return false;
     }
@@ -492,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 = '';
       });
@@ -578,7 +585,6 @@ export class MegaMenu {
           this.checkDropdownHeight(current);
         });
       } else {
-        this.element.setAttribute('aria-expanded', 'false');
         this.element.removeAttribute('data-expanded');
         this.open.setAttribute('aria-expanded', 'false');
         this.enableScroll();
@@ -663,6 +669,11 @@ export class MegaMenu {
   checkDropdownHeight(menuItem, hide = true) {
     const infoPanel = queryOne('.ecl-mega-menu__info', menuItem);
     const mainPanel = queryOne('.ecl-mega-menu__mega', menuItem);
+    const expanded = queryOne('.ecl-mega-menu__subitem--expanded', menuItem);
+    let secondPanel = null;
+    if (expanded) {
+      secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
+    }
     // Hide the panels while calculating their heights
     if (mainPanel && this.isDesktop && hide) {
       mainPanel.style.opacity = 0;
@@ -670,6 +681,10 @@ export class MegaMenu {
     if (infoPanel && this.isDesktop && hide) {
       infoPanel.style.opacity = 0;
     }
+    // Second panel has already zero opacity in reality, this is for consistency
+    if (secondPanel && this.isDesktop && hide) {
+      secondPanel.opacity = 0;
+    }
     setTimeout(() => {
       const viewportHeight = window.innerHeight;
       let infoPanelHeight = 0;
@@ -677,7 +692,6 @@ export class MegaMenu {
       if (this.isDesktop) {
         const heights = [];
         let height = 0;
-        let secondPanel = null;
         let featuredPanel = null;
         let itemsHeight = 0;
         let subItemsHeight = 0;
@@ -724,38 +738,32 @@ export class MegaMenu {
             }
           }
         }
-        const expanded = queryOne(
-          '.ecl-mega-menu__subitem--expanded',
-          menuItem,
-        );
-
-        if (expanded) {
-          secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
-          if (secondPanel) {
-            secondPanel.style.height = '';
-            const subItems = queryAll(`${this.subItemSelector}`, secondPanel);
-            if (subItems.length > 0) {
-              subItems.forEach((item) => {
-                subItemsHeight += item.getBoundingClientRect().height;
-              });
-            }
-            heights.push(subItemsHeight);
-            // Featured panel calculations.
-            featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
-            if (featuredPanel) {
-              // Get the elements inside the scrollable container and calculate their heights.
-              Array.from(featuredPanel.firstElementChild.children).forEach(
-                (child) => {
-                  const elStyle = window.getComputedStyle(child);
-                  const marginHeight =
-                    parseFloat(elStyle.marginTop) +
-                    parseFloat(elStyle.marginBottom);
-                  featuredHeight += child.offsetHeight + marginHeight;
-                },
-              );
 
-              heights.push(featuredHeight);
-            }
+        if (secondPanel) {
+          secondPanel.style.height = '';
+          const subItems = queryAll(`${this.subItemSelector}`, secondPanel);
+          if (subItems.length > 0) {
+            subItems.forEach((item) => {
+              subItemsHeight += item.getBoundingClientRect().height;
+            });
+          }
+          heights.push(subItemsHeight);
+          // Featured panel calculations.
+          featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
+          if (featuredPanel) {
+            // Get the elements inside the scrollable container and calculate their heights.
+            Array.from(featuredPanel.firstElementChild.children).forEach(
+              (child) => {
+                const elStyle = window.getComputedStyle(child);
+                const marginHeight =
+                  parseFloat(elStyle.marginTop) +
+                  parseFloat(elStyle.marginBottom);
+                featuredHeight += child.offsetHeight + marginHeight;
+              },
+            );
+            // Add 5px to the featured panel height to prevent scrollbar on hover
+            featuredHeight += 5;
+            heights.push(featuredHeight);
           }
         }
 
@@ -775,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) {
@@ -800,6 +809,9 @@ export class MegaMenu {
       if (infoPanel && this.isDesktop) {
         infoPanel.style.opacity = 1;
       }
+      if (secondPanel && this.isDesktop) {
+        secondPanel.style.opacity = 1;
+      }
     }, 100);
   }
 
@@ -903,7 +915,7 @@ export class MegaMenu {
   handleKeyboard(e) {
     const element = e.target;
     const cList = element.classList;
-    const menuExpanded = this.element.getAttribute('aria-expanded');
+    const menuExpanded = this.element.getAttribute('data-expanded');
 
     // Detect press on Escape
     if (e.key === 'Escape' || e.key === 'Esc') {
@@ -911,7 +923,7 @@ export class MegaMenu {
         element.blur();
       }
 
-      if (menuExpanded === 'false') {
+      if (!menuExpanded) {
         this.closeOpenDropdown();
       }
       return;
@@ -1155,7 +1167,7 @@ export class MegaMenu {
     } else {
       e.preventDefault();
       this.disableScroll();
-      this.element.setAttribute('aria-expanded', 'true');
+      this.element.setAttribute('data-expanded', true);
       this.element.classList.add('ecl-mega-menu--start-panel');
       this.element.classList.remove(
         'ecl-mega-menu--one-panel',
@@ -1197,7 +1209,7 @@ export class MegaMenu {
    * @fires Menu#onClose
    */
   handleClickOnClose(e) {
-    if (this.element.getAttribute('aria-expanded') === 'true') {
+    if (this.element.getAttribute('data-expanded')) {
       this.focusTrap.deactivate();
       this.closeOpenDropdown();
       this.trigger('onClose', e);
@@ -1312,7 +1324,6 @@ export class MegaMenu {
         this.positionMenuOverlay();
         this.checkDropdownHeight(menuItem);
         this.element.setAttribute('data-expanded', true);
-        this.element.setAttribute('aria-expanded', 'true');
         this.element.classList.add('ecl-mega-menu--one-panel');
         this.element.classList.remove('ecl-mega-menu--start-panel');
         this.open.setAttribute('aria-expanded', 'true');
@@ -1360,19 +1371,6 @@ export class MegaMenu {
         };
         const details = { panel: 1, item: menuItem };
         this.trigger('OnOpenPanel', details);
-        if (this.isDesktop) {
-          const list = queryOne('.ecl-mega-menu__sublist', menuItem);
-          if (list) {
-            // Expand the item in the sublist if it contains children.
-            const firstExpandedChild = Array.from(list.children).find((child) =>
-              child.firstElementChild?.hasAttribute('aria-expanded'),
-            );
-
-            if (firstExpandedChild) {
-              this.handleSecondPanel(firstExpandedChild, 'expand', true);
-            }
-          }
-        }
         break;
       }
 
@@ -1392,7 +1390,7 @@ export class MegaMenu {
    *
    * @fires MegaMenu#onOpenPanel
    */
-  handleSecondPanel(menuItem, op, noCheck = false) {
+  handleSecondPanel(menuItem, op) {
     const infoPanel = queryOne(
       '.ecl-mega-menu__info',
       menuItem.closest('.ecl-container'),
@@ -1410,13 +1408,16 @@ export class MegaMenu {
           if (item === menuItem) {
             if (itemLink && itemLink.hasAttribute('aria-expanded')) {
               itemLink.setAttribute('aria-expanded', 'true');
-
+              const mega = queryOne('.ecl-mega-menu__mega', item);
               if (!this.isDesktop) {
                 // We use this class mainly to recover the default behavior of the link.
                 itemLink.classList.add('ecl-mega-menu__parent-link');
                 if (this.back) {
                   this.back.focus();
                 }
+              } else {
+                // Hide the panel since it will be resized later.
+                mega.style.opacity = 0;
               }
               item.classList.add('ecl-mega-menu__subitem--expanded');
             }
@@ -1450,12 +1451,11 @@ export class MegaMenu {
           });
         }
         this.positionMenuOverlay();
-        if (!noCheck) {
-          this.checkDropdownHeight(
-            menuItem.closest('.ecl-mega-menu__item'),
-            false,
-          );
-        }
+        this.checkDropdownHeight(
+          menuItem.closest('.ecl-mega-menu__item'),
+          false,
+        );
+
         const details = { panel: 2, item: menuItem };
         this.trigger('OnOpenPanel', details);
         break;
@@ -1573,7 +1573,6 @@ export class MegaMenu {
       }
     }
     this.enableScroll();
-    this.element.setAttribute('aria-expanded', 'false');
     this.element.removeAttribute('data-expanded');
     this.element.classList.remove(
       'ecl-mega-menu--start-panel',
@@ -1660,11 +1659,11 @@ export class MegaMenu {
    */
   handleFocusOut(e) {
     const element = e.target;
-    const menuExpanded = this.element.getAttribute('aria-expanded');
+    const menuExpanded = this.element.getAttribute('data-expanded');
 
     // Specific focus action for mobile menu
     // Loop through the items and go back to close button
-    if (menuExpanded === 'true' && !this.isDesktop) {
+    if (menuExpanded && !this.isDesktop) {
       const nextItem = element.parentElement.nextSibling;
 
       if (!nextItem) {

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;
   }
 
@@ -80,9 +82,13 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+.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 {
@@ -164,7 +170,7 @@ $mega-menu: null !default;
 }
 
 // Expanded
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__inner {
+.ecl-mega-menu[data-expanded] .ecl-mega-menu__inner {
   display: block;
   right: 0;
 }
@@ -275,8 +281,7 @@ $mega-menu: null !default;
   z-index: -1;
 }
 
-.ecl-mega-menu[aria-expanded='true'],
-.ecl-mega-menu[data-expanded='true'] {
+.ecl-mega-menu[data-expanded] {
   .ecl-mega-menu__overlay {
     display: block;
   }
@@ -316,8 +321,9 @@ $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;
   height: 100%;
   left: 0;
@@ -358,12 +364,14 @@ $mega-menu: null !default;
 .ecl-mega-menu__featured-list__item .ecl-link {
   align-items: center;
   background: transparent;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   box-sizing: border-box;
   color: map.get($mega-menu, 'mobile', 'item-color');
   display: inline-flex;
+  font: map.get($mega-menu, 'global', 'font');
   line-height: map.get($theme, 'line-height-ui', 'xs');
   padding: map.get($mega-menu, 'mobile', 'item-padding');
   position: relative;
@@ -392,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;
   }
@@ -413,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);
   }
 }
 
@@ -438,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;
     }
   }
@@ -468,7 +488,6 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu__info-content {
-    font: var(--f-m);
     max-width: var(--max-w);
   }
 }
@@ -494,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));
     }
   }
 }
@@ -553,7 +572,6 @@ $mega-menu: null !default;
       border-radius: 0;
       color: map.get($mega-menu, 'desktop', 'item-color');
       display: inline-flex;
-      font: var(--f-m);
       height: 100%;
       line-height: map.get($mega-menu, 'desktop', 'link-line-height');
       padding: map.get($mega-menu, 'desktop', 'link-padding');
@@ -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;
         }
       }
@@ -686,8 +704,6 @@ $mega-menu: null !default;
     background-color: map.get($mega-menu, 'global', 'greysh-background');
     box-shadow: none;
     display: none;
-    font: map.get($mega-menu, 'mobile', 'subtitle-font');
-    font-weight: map.get($mega-menu, 'mobile', 'subtitle-font-weight');
   }
 }
 
@@ -770,8 +786,7 @@ $mega-menu: null !default;
     .ecl-link {
       border-radius: 0;
       box-sizing: border-box;
-      color: var(--c-d);
-      font: var(--f-m);
+      color: var(--cm-on-surface-brand, var(--c-d));
       margin: 0 var(--s-l);
       padding: var(--s-xs) 0;
 
@@ -798,10 +813,12 @@ $mega-menu: null !default;
 .ecl-mega-menu__sublink {
   background: transparent;
   box-sizing: border-box;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1.5px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   color: map.get($mega-menu, 'mobile', 'item-color');
+  font: map.get($mega-menu, 'global', 'font');
   padding: map.get($mega-menu, 'mobile', 'subitem-padding');
   position: relative;
   line-height: map.get($theme, 'line-height-ui', 'xs');
@@ -835,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;
   }
@@ -871,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 {
@@ -897,27 +914,36 @@ $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 {
-      aspect-ratio: 21/9;
+      aspect-ratio: 16/9;
       display: block;
       margin-inline-start: var(--s-l);
+      margin-block-start: var(--s-m);
       max-width: 15.25rem;
     }
   }
 
+  .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)
       var(--s-l);
-    font: var(--f-l);
+    font: var(--f-m);
   }
 
   .ecl-mega-menu__featured-content {
@@ -932,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);
+      }
     }
   }
 }
@@ -968,7 +998,7 @@ $mega-menu: null !default;
       width: 100vw;
 
       &::before {
-        background: #e3e3e3;
+        background: var(--cm-border-neutral, '#e3e3e3');
         content: ' ';
         display: block;
         height: 1px;
@@ -998,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');
@@ -1048,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%;
 
@@ -1101,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;
 
@@ -1121,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;
@@ -1210,7 +1240,7 @@ $mega-menu: null !default;
         }
 
         &:focus-visible {
-          outline-color: var(--c-p);
+          outline-color: var(--cm-border-primary, var(--c-p));
         }
       }
     }
@@ -1252,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;
     }
@@ -1273,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));
       }
     }
   }
@@ -1291,6 +1321,9 @@ $mega-menu: null !default;
     top: 0;
 
     .ecl-mega-menu__featured-scrollable {
+      background-color: transparent;
+      height: 100%;
+
       @include with-scrollbar;
     }
 
@@ -1298,8 +1331,9 @@ $mega-menu: null !default;
       display: block;
 
       .ecl-mega-menu__featured-image {
-        aspect-ratio: 21/9;
+        aspect-ratio: 16/9;
         display: block;
+        margin-block-start: 0;
         margin-inline-start: var(--s-s);
         max-width: calc(100% - var(--s-s));
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/mega-menu",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.10",
   "description": "ECL Mega Menu",
   "publishConfig": {
     "access": "public"
@@ -11,12 +11,13 @@
   "module": "mega-menu.js",
   "style": "mega-menu.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.1",
-    "@ecl/dom-utils": "5.0.0-alpha.1",
-    "@ecl/event-manager": "5.0.0-alpha.1",
-    "@ecl/link": "5.0.0-alpha.1",
-    "focus-trap": "7.6.4",
-    "mobile-device-detect": "0.4.3"
+    "@ecl/button": "5.0.0-alpha.10",
+    "@ecl/dom-utils": "5.0.0-alpha.10",
+    "@ecl/event-manager": "5.0.0-alpha.10",
+    "@ecl/link": "5.0.0-alpha.10",
+    "@ecl/picture": "5.0.0-alpha.10",
+    "bowser": "2.11.0",
+    "focus-trap": "7.6.4"
   },
   "repository": {
     "type": "git",
@@ -32,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "f800b6d2de209fcfe182aadca5f7e45ad497b23a"
+  "gitHead": "8f085d9bbc9ebe568932bc297fdcf7f7a47da47b"
 }