@openeuropa/bcl-twig-templates 0.3791.202505281825 → 0.3821.202510100015

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-twig-templates",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.3791.202505281825",
+  "version": "0.3821.202510100015",
   "description": "OE Bcl Twig Templates",
   "publishConfig": {
     "access": "public"
@@ -11,69 +11,70 @@
     "hoistingLimits": "workspaces"
   },
   "devDependencies": {
-    "@openeuropa/bcl-accordion": "^0.3791.202505281825",
-    "@openeuropa/bcl-alert": "^0.3791.202505281825",
-    "@openeuropa/bcl-badge": "^0.3791.202505281825",
-    "@openeuropa/bcl-banner": "^0.3791.202505281825",
-    "@openeuropa/bcl-base-templates": "^0.3791.202505281825",
-    "@openeuropa/bcl-blockquote": "^0.3791.202505281825",
-    "@openeuropa/bcl-breadcrumb": "^0.3791.202505281825",
-    "@openeuropa/bcl-button": "^0.3791.202505281825",
-    "@openeuropa/bcl-button-group": "^0.3791.202505281825",
-    "@openeuropa/bcl-card": "^0.3791.202505281825",
-    "@openeuropa/bcl-card-layout": "^0.3791.202505281825",
-    "@openeuropa/bcl-carousel": "^0.3791.202505281825",
-    "@openeuropa/bcl-contact-form": "^0.3791.202505281825",
-    "@openeuropa/bcl-content-banner": "^0.3791.202505281825",
-    "@openeuropa/bcl-date-block": "^0.3791.202505281825",
-    "@openeuropa/bcl-description-list": "^0.3791.202505281825",
-    "@openeuropa/bcl-dropdown": "^0.3791.202505281825",
-    "@openeuropa/bcl-event": "^0.3791.202505281825",
-    "@openeuropa/bcl-fact-figures": "^0.3791.202505281825",
-    "@openeuropa/bcl-featured-media": "^0.3791.202505281825",
-    "@openeuropa/bcl-file": "^0.3791.202505281825",
-    "@openeuropa/bcl-footer": "^0.3791.202505281825",
-    "@openeuropa/bcl-form": "^0.3791.202505281825",
-    "@openeuropa/bcl-form-input": "^0.3791.202505281825",
-    "@openeuropa/bcl-gallery": "^0.3791.202505281825",
-    "@openeuropa/bcl-glossary": "^0.3791.202505281825",
-    "@openeuropa/bcl-group": "^0.3791.202505281825",
-    "@openeuropa/bcl-header": "^0.3791.202505281825",
-    "@openeuropa/bcl-heading": "^0.3791.202505281825",
-    "@openeuropa/bcl-icon": "^0.3791.202505281825",
-    "@openeuropa/bcl-inpage-navigation": "^0.3791.202505281825",
-    "@openeuropa/bcl-landing-page": "^0.3791.202505281825",
-    "@openeuropa/bcl-language-list": "^0.3791.202505281825",
-    "@openeuropa/bcl-language-switcher": "^0.3791.202505281825",
-    "@openeuropa/bcl-link": "^0.3791.202505281825",
-    "@openeuropa/bcl-links-block": "^0.3791.202505281825",
-    "@openeuropa/bcl-list-group": "^0.3791.202505281825",
-    "@openeuropa/bcl-listing": "^0.3791.202505281825",
-    "@openeuropa/bcl-modal": "^0.3791.202505281825",
-    "@openeuropa/bcl-multilingual": "^0.3791.202505281825",
-    "@openeuropa/bcl-navbar": "^0.3791.202505281825",
-    "@openeuropa/bcl-navigation": "^0.3791.202505281825",
-    "@openeuropa/bcl-news": "^0.3791.202505281825",
-    "@openeuropa/bcl-offcanvas": "^0.3791.202505281825",
-    "@openeuropa/bcl-page": "^0.3791.202505281825",
-    "@openeuropa/bcl-pagination": "^0.3791.202505281825",
-    "@openeuropa/bcl-person": "^0.3791.202505281825",
-    "@openeuropa/bcl-placeholder": "^0.3791.202505281825",
-    "@openeuropa/bcl-progress": "^0.3791.202505281825",
-    "@openeuropa/bcl-project": "^0.3791.202505281825",
-    "@openeuropa/bcl-project-status": "^0.3791.202505281825",
-    "@openeuropa/bcl-recent-activities": "^0.3791.202505281825",
-    "@openeuropa/bcl-search": "^0.3791.202505281825",
-    "@openeuropa/bcl-search-form": "^0.3791.202505281825",
-    "@openeuropa/bcl-select": "^0.3791.202505281825",
-    "@openeuropa/bcl-spinner": "^0.3791.202505281825",
-    "@openeuropa/bcl-subscription": "^0.3791.202505281825",
-    "@openeuropa/bcl-subscription-block": "^0.3791.202505281825",
-    "@openeuropa/bcl-table": "^0.3791.202505281825",
-    "@openeuropa/bcl-textarea": "^0.3791.202505281825",
-    "@openeuropa/bcl-timeline": "^0.3791.202505281825",
-    "@openeuropa/bcl-toast": "^0.3791.202505281825",
-    "@openeuropa/bcl-user": "^0.3791.202505281825",
+    "@openeuropa/bcl-accordion": "^0.3821.202510100015",
+    "@openeuropa/bcl-alert": "^0.3821.202510100015",
+    "@openeuropa/bcl-badge": "^0.3821.202510100015",
+    "@openeuropa/bcl-banner": "^0.3821.202510100015",
+    "@openeuropa/bcl-base-templates": "^0.3821.202510100015",
+    "@openeuropa/bcl-blockquote": "^0.3821.202510100015",
+    "@openeuropa/bcl-breadcrumb": "^0.3821.202510100015",
+    "@openeuropa/bcl-button": "^0.3821.202510100015",
+    "@openeuropa/bcl-button-group": "^0.3821.202510100015",
+    "@openeuropa/bcl-card": "^0.3821.202510100015",
+    "@openeuropa/bcl-card-layout": "^0.3821.202510100015",
+    "@openeuropa/bcl-carousel": "^0.3821.202510100015",
+    "@openeuropa/bcl-contact-form": "^0.3821.202510100015",
+    "@openeuropa/bcl-content-banner": "^0.3821.202510100015",
+    "@openeuropa/bcl-date-block": "^0.3821.202510100015",
+    "@openeuropa/bcl-description-list": "^0.3821.202510100015",
+    "@openeuropa/bcl-dropdown": "^0.3821.202510100015",
+    "@openeuropa/bcl-event": "^0.3821.202510100015",
+    "@openeuropa/bcl-fact-figures": "^0.3821.202510100015",
+    "@openeuropa/bcl-featured-media": "^0.3821.202510100015",
+    "@openeuropa/bcl-file": "^0.3821.202510100015",
+    "@openeuropa/bcl-footer": "^0.3821.202510100015",
+    "@openeuropa/bcl-form": "^0.3821.202510100015",
+    "@openeuropa/bcl-form-input": "^0.3821.202510100015",
+    "@openeuropa/bcl-gallery": "^0.3821.202510100015",
+    "@openeuropa/bcl-glossary": "^0.3821.202510100015",
+    "@openeuropa/bcl-group": "^0.3821.202510100015",
+    "@openeuropa/bcl-header": "^0.3821.202510100015",
+    "@openeuropa/bcl-heading": "^0.3821.202510100015",
+    "@openeuropa/bcl-icon": "^0.3821.202510100015",
+    "@openeuropa/bcl-inpage-navigation": "^0.3821.202510100015",
+    "@openeuropa/bcl-landing-page": "^0.3821.202510100015",
+    "@openeuropa/bcl-language-list": "^0.3821.202510100015",
+    "@openeuropa/bcl-language-switcher": "^0.3821.202510100015",
+    "@openeuropa/bcl-link": "^0.3821.202510100015",
+    "@openeuropa/bcl-links-block": "^0.3821.202510100015",
+    "@openeuropa/bcl-list-group": "^0.3821.202510100015",
+    "@openeuropa/bcl-listing": "^0.3821.202510100015",
+    "@openeuropa/bcl-mega-menu": "^0.3821.202510100015",
+    "@openeuropa/bcl-modal": "^0.3821.202510100015",
+    "@openeuropa/bcl-multilingual": "^0.3821.202510100015",
+    "@openeuropa/bcl-navbar": "^0.3821.202510100015",
+    "@openeuropa/bcl-navigation": "^0.3821.202510100015",
+    "@openeuropa/bcl-news": "^0.3821.202510100015",
+    "@openeuropa/bcl-offcanvas": "^0.3821.202510100015",
+    "@openeuropa/bcl-page": "^0.3821.202510100015",
+    "@openeuropa/bcl-pagination": "^0.3821.202510100015",
+    "@openeuropa/bcl-person": "^0.3821.202510100015",
+    "@openeuropa/bcl-placeholder": "^0.3821.202510100015",
+    "@openeuropa/bcl-progress": "^0.3821.202510100015",
+    "@openeuropa/bcl-project": "^0.3821.202510100015",
+    "@openeuropa/bcl-project-status": "^0.3821.202510100015",
+    "@openeuropa/bcl-recent-activities": "^0.3821.202510100015",
+    "@openeuropa/bcl-search": "^0.3821.202510100015",
+    "@openeuropa/bcl-search-form": "^0.3821.202510100015",
+    "@openeuropa/bcl-select": "^0.3821.202510100015",
+    "@openeuropa/bcl-spinner": "^0.3821.202510100015",
+    "@openeuropa/bcl-subscription": "^0.3821.202510100015",
+    "@openeuropa/bcl-subscription-block": "^0.3821.202510100015",
+    "@openeuropa/bcl-table": "^0.3821.202510100015",
+    "@openeuropa/bcl-textarea": "^0.3821.202510100015",
+    "@openeuropa/bcl-timeline": "^0.3821.202510100015",
+    "@openeuropa/bcl-toast": "^0.3821.202510100015",
+    "@openeuropa/bcl-user": "^0.3821.202510100015",
     "copyfiles": "2.4.1",
     "rimraf": "6.0.1"
   },
@@ -96,5 +97,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "8c5a67ad5d9387e87ba0f5ca576e8dee9b07a90d"
+  "gitHead": "6a890344c1b3fed3b4f049080c3e30cc55b42b9d"
 }

package/templates/bcl-base-templates/listing-page.html.twig

@@ -8,20 +8,16 @@
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
 #}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
-
-{% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h2') %}
-{% set _title_link = title_link|default({}) %}
-{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
-{% set _pagination = pagination|default({}) %}
-{% set _sidebar = sidebar|default({}) %}
-
-{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
-{% block content_top %}
+{%- block content_top %}
+  {% set _title = title|default('') %}
+  {% set _title_tag = title_tag|default('h2') %}
+  {% set _title_link = title_link|default({}) %}
+  {% set _title_attributes = title_attributes ?: create_attribute() %}
+  {% set _title_attributes = _title_attributes ?: create_attribute() %}
 {% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
 {% endif %}
@@ -29,7 +25,7 @@
     <div class="col-md-6 col-lg-8 align-self-center">
       {% if _title is not empty %}
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title: _title ~ ' (' ~ (_listing.items|length) ~ ')',
           title_tag: _title_tag,
           title_link: _title_link,
           attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
@@ -54,21 +50,23 @@
     </div>
   </div>
   <hr class="d-none d-md-block mb-4-75"/>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if _listing is not empty %}
     {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content_bottom %}
+{%- block content_bottom %}
+  {% set _pagination = pagination|default({}) %}
   {% if _pagination is not empty %}
     <hr class="d-none d-md-block mt-4-5">
     {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block sidebar %}
+{%- block sidebar %}
+  {% set _sidebar = sidebar|default({}) %}
   {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-button/button.html.twig

@@ -1,6 +1,6 @@
 {% apply spaceless %}
 
-{# 
+{#
   Parameters:
   - label (string) (default: '')
   - variant (string) (default: 'primary')
@@ -38,6 +38,7 @@
 {% set _spinner = spinner|default({}) %}
 {% set _show_spinner = show_spinner ?? false %}
 {% set _clean_class = clean_class ?? false %}
+{% set _remove_icon_spacers = remove_icon_spacers ?? false %}
 
 {% set _classes = [] %}
 {% if _clean_class == false %}
@@ -68,7 +69,7 @@
         size: "fluid",
       })
     %}
-  {% if _label is not empty %}
+  {% if _label is not empty and not _remove_icon_spacers %}
     {% if _icon.attributes is empty %}
       {% set _icon = _icon|merge({
           attributes: create_attribute()

package/templates/bcl-contact-form/contact-form.html.twig

@@ -1,5 +1,5 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-content-banner/content-banner.html.twig

@@ -92,6 +92,9 @@
 {% if _date is not empty %}
   {% set _left_col_classes = 'bcl-card-start-col' %}
   {% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
+  {% if _image is empty %}
+    {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-1-5 pb-0' %}
+  {% endif %}
 {% endif %}
 {% if _image is empty and _date is empty %}
   {% set _right_col_classes = 'col-lg-10 col-xl-9 col-xxl-8' %}

package/templates/bcl-dropdown/dropdown.html.twig

@@ -42,6 +42,7 @@
 {% set _alignment = alignment|default('') %}
 {% set _dark = dark ?? false %}
 {% set _remove_wrapper = remove_wrapper ?? false %}
+{% set _inside_navigation = inside_navigation ?? false %}
 {% set _items = items|default([]) %}
 
 {% set _class = 'dropdown' %}
@@ -75,14 +76,18 @@
                       .setAttribute('id', _id)
 }) %}
 
-{% if _link %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('role', 'button') 
-  }) %}
+{% if not _inside_navigation %}
+  {% if _link %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('role', 'button') 
+    }) %}
+  {% else %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
+    }) %}
+  {% endif %}
 {% else %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
-  }) %}
+  {% set attributes = attributes.setAttribute('aria-hidden', 'true').setAttribute('role', 'presentation') %}
 {% endif %}
 
 {% if not _remove_wrapper %}

package/templates/bcl-event/event.html.twig

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
 
   <h2 id="item-1" class="my-4">Description</h2>
@@ -21,4 +21,4 @@
   <h2 id="item-2" class="my-4">Related documents</h2>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-detail.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block  content %}
+{%- block  content %}
 	{% include  '@oe-bcl/bcl-heading/heading.html.twig' with {
 		title: 'Description',
 		title_tag: 'h2',
@@ -38,6 +38,5 @@
     <div {{ file_classes ? 'class="' ~ file_classes ~ '"' }}>
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     </div>
-  {% endfor %}
-
-{% endblock %}
+	{% endfor %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-listing.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' -%}
 
-{% block content_row %}
+{%- block content_row %}
 		{% include '@oe-bcl/bcl-pagination/pagination.html.twig' with glossary only %}
 	<div class="col-12">
 	  <div class="d-md-flex justify-content-end mb-md-4-75 align-items-center border-bottom-md border-top-md border-gray-300 py-3">
@@ -8,12 +8,12 @@
 	    {% include '@oe-bcl/bcl-select/select.html.twig' with itemsPerPage only %}
 	  </div>
   </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content_top %}
+{%- block content_top %}
 	{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
 	  title: 'Starting with "A" (48)',
 	  title_tag: 'h2',
 	} only %}
 
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-group/group-landing.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container">
   {% if banner is not empty %}
   <div class="mt-4 mt-md-5">
@@ -70,9 +70,9 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
@@ -98,4 +98,4 @@
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-group/group.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container mt-4 mt-md-5">
   <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
@@ -24,4 +24,4 @@
   {% endif %}
   </div>
 </div>
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-header/header.html.twig

@@ -25,6 +25,7 @@
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
 {% set _project_link = project_link|default('') %}
+{% set _navbar_id = navbar_id|default('header-navbar-' ~ random(100)) %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
@@ -51,10 +52,38 @@
 <header
   {{ attributes }}
 >
-  <!-- navbar_settings -->
-  {% if _head is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _head only %}
-  {% endif %}
+  <nav
+    {{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>
+    <div class='container'>
+    {% if _head.brand is not empty %}
+      <a class='navbar-brand' href='{{ _head.brand.link }}'>
+      {% for logo in _head.brand.logos %}
+        <img
+          src='{{ logo.src }}'
+          {% if logo.alt is not empty %}
+          alt='{{ logo.alt }}'
+          {% endif %}
+          {% if logo.class is not empty %}
+          class='{{ logo.class }}'
+          {% endif %}
+        />
+      {% endfor %}
+      </a>
+    {% endif %}
+      <button
+        class="navbar-toggler bcl-navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target='#{{ _navbar_id }}'
+        aria-controls='{{ _navbar_id }}'
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    </div>
+  </nav>
+
 
   <!-- project name -->
   {% if _project_logo is not empty or _site_name is not empty %}
@@ -62,7 +91,6 @@
     <div class="container">
     {% if _project_link is not empty %}
       <a
-        class="d-inline-block"
         href="{{ _project_link }}"
       >
     {% endif %}
@@ -93,7 +121,10 @@
 
   <!-- navbar -->
   {% if _navbar is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar only %}
+    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
+      disable_collapse: true,
+      attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
+    }) only %}
   {% endif %}
 
   <!-- breadcrumbs -->

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -29,6 +29,11 @@ Parameters:
 {% endif %}
 
 {% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
+
+{% if not attributes.hasAttribute('aria-label') and not attributes.hasAttribute('aria-labelledby') %}
+  {% set attributes = attributes.setAttribute('aria-labelledby', _dropdown_id) %}
+{% endif %}
+
 {% set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
 {% set _button_content %}
   {{ _title }}
@@ -45,7 +50,7 @@ Parameters:
   {% set _classes = _classes|merge(['dynamic-active']) %}
 {% endif %}
 
-<nav {{ attributes.addClass(_classes) }}>
+<nav{{ attributes.addClass(_classes) }}>
   {% set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')
@@ -63,7 +68,7 @@ Parameters:
     title_link: _title_link,
     attributes: _title_attributes,
   } only %}
-  <div class="dropdown-menu" aria-labelledby="{{ _dropdown_id }}">
+  <div class="dropdown-menu">
     {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
       'pills': true,
       'vertical': true,

package/templates/bcl-landing-page/landing-page.html.twig

@@ -1,13 +1,11 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
   {% if banner is defined %}
     {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
   {% endif %}
-{% endblock %}
-
-{% block content %}
-
+{%- endblock -%}
+{%- block content %}
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
@@ -55,5 +53,4 @@
     </div>
   {% endif %}
 </div>
-
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-mega-menu/mega-menu-items.html.twig

@@ -0,0 +1,35 @@
+{% apply spaceless %}
+
+{% set _label = label ?? null %}
+{% set _items = items ?? [] %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 1 %}
+{% set _see_all = see_all ?? null %}
+
+<ul class="bcl-mega-menu__items __level-{{ _level }}">
+  {% for _item in _items %}
+    {% set _li_attributes = _item.li_attributes ?? create_attribute() %}
+    {% if _item.items is defined and _item.items is not empty %}
+      {# This is a parent item. #}
+      <li{{ _li_attributes.addClass('__parent') }}>
+        {% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
+          icon_path: _icon_path,
+          level: _level + 1,
+        }) only %}
+      </li>
+    {% else %}
+      {# This is a leaf item. #}
+      <li{{ _li_attributes.addClass('__leaf') }}>
+        {% if _item.path is empty %}
+          {# This is a nolink item. #}
+          <span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
+        {% else %}
+          {# This is a link. #}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+
+{% endapply %}

package/templates/bcl-mega-menu/mega-menu-submenu.html.twig

@@ -0,0 +1,65 @@
+{% apply spaceless %}
+
+{% set _items = items ?? [] %}
+{% set _trigger = trigger ?? null %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 2 %}
+{% set _see_all = see_all ?? null %}
+
+{% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
+{% set _panel_id = 'mm-panel-' ~ _trigger_id %}
+
+{% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger_attributes
+    .setAttribute('id', _trigger_id)
+    .setAttribute('aria-controls', _panel_id)
+    .setAttribute('aria-expanded', 'false')
+    .setAttribute('aria-haspopup', 'menu'),
+  remove_icon_spacers: true,
+  clean_class: true,
+}) %}
+{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+
+{# Add an optional "See all" link as last item. #}
+{% if _see_all is not empty %}
+  {# Wrap the label for an ellipsis. #}
+  {% set _see_all_label %}
+    <span>{{- _see_all.label -}}</span>
+  {% endset %}
+  {% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
+  {% set _see_all = _see_all|merge({
+    label: _see_all_label,
+    icon: {
+      name: 'arrow-right',
+      path: _icon_path,
+    },
+    li_attributes: create_attribute()
+      .addClass('__see_all'),
+    attributes: _see_all_attr
+      .addClass(['see-all-button'])
+      .setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
+  }) %}
+  {% set _items = _items|merge([_see_all]) %}
+{% endif %}
+{% set submenu_attributes = create_attribute()
+  .setAttribute('id', _panel_id)
+  .setAttribute('hidden', '')
+  .setAttribute('role', 'group')
+  .setAttribute('aria-labelledby', _trigger_id)
+  .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
+%}
+<div{{ submenu_attributes }}>
+  {% if _trigger %}
+  <div class="__header">
+      <p class="__label">{{ _trigger.label }}</p>
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
+    items: _items,
+    icon_path: _icon_path,
+    level: _level,
+  } only %}
+</div>
+
+{% endapply %}

package/templates/bcl-mega-menu/mega-menu.html.twig

@@ -0,0 +1,115 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: dropdown-random(1000))
+  - link (boolean) (default: false) - sets trigger to link, default is button
+  - trigger (link or button)
+  - content_block (block) (default: '')
+  - content_link (link)
+  - icon_path (string) (default: '')
+  - min_height (string) (default: '300px')
+    ! set min-height of mega-menu
+  - items (object[])
+    format: [
+      {
+        - link or dropdown
+      }
+    ]
+  - back_button_label (string) (default: 'Back')
+  - icon_path (string) (default: '')
+#}
+
+{% set _id = id|default('dropdown-' ~ random(1000)) %}
+{% set _link = link ?? false %}
+{% set _trigger = trigger|default({}) %}
+{% set _content_block = content_block|default('') %}
+{% set _content_link = content_link|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _items = items|default([]) %}
+{% set _back_button_label = back_button_label|default('Back') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _menu_id = 'mega-menu-' ~ _id %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = ['bcl-mega-menu'] %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _trigger.attributes is empty %}
+  {% set _trigger = _trigger|merge({
+    attributes: create_attribute()
+  }) %}
+{% endif %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger.attributes.addClass(['dropdown-toggle', 'nav-link'])
+                      .setAttribute('aria-expanded', 'false')
+                      .setAttribute('aria-haspopup', 'menu')
+                      .setAttribute('aria-controls', _menu_id)
+                      .setAttribute('data-bs-toggle', 'dropdown')
+                      .setAttribute('data-bs-auto-close', 'outside')
+                      .setAttribute('id', _id)
+}) %}
+
+<div {{ attributes }}>
+  {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger|merge({
+    variant: 'link',
+    clean_class: true,
+  }) only %}
+  {# Mega menu panel. #}
+  <nav id="{{ _menu_id }}" class="bcl-mega-menu__container dropdown-menu" aria-labelledby="{{ _id }}" aria-label="Main mega menu">
+    <div class="container">
+      {# Mobile back button. #}
+      <div class="container d-lg-none bcl-mega-menu__back-button-block">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          label: _back_button_label,
+          icon_position: "before",
+          variant: 'link',
+          icon: {
+            path: _icon_path,
+            name: "arrow-left",
+          },
+          attributes: create_attribute().addClass(['back-button']).setAttribute('aria-label', 'Back to main menu')
+        } only %}
+      </div>
+      {# Info/summary and submenu columns. #}
+      <div class="position-relative">
+        <div class="row">
+          {# Content / summary column. #}
+          {% if content_block is defined %}
+            <div class="col-md-12 col-xl-3 position-relative bcl-mega-menu__info">
+              <div class="content-block">
+                {%- block content_block -%}
+                  {{ _content_block }}
+                {%- endblock -%}
+                {% if _content_link.path is not empty %}
+                  {% set _content_link = _content_link|merge({
+                    icon: _content_link.icon|default({})|merge({
+                      path: _icon_path
+                    }),
+                    attributes: (_content_link.attributes is defined
+                      ? _content_link.attributes
+                      : create_attribute()
+                    ).addClass('content-link')
+                  }) %}
+                  <p class="m-0">{% include '@oe-bcl/bcl-link/link.html.twig' with _content_link only %}</p>
+                {% endif %}
+              </div>
+              <div class="shadow-container">
+                <span class="shadow-bg"></span>
+              </div>
+            </div>
+          {% endif %}
+          {# Submenu column. #}
+          <div class="col-md-12 col-lg-4 col-xl-3 bcl-mega-menu__menu">
+            {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</div>
+
+{% endapply %}

package/templates/bcl-navigation/navigation.html.twig

@@ -91,7 +91,7 @@
           {% set _nav_class = _nav_class ~ ' dropdown' %}
           {% set _item = _item|merge({remove_wrapper: true}) %}
         {% endif %}
-        {% if _item.dropdown %}
+        {% if _item.dropdown or _item.mega_menu %}
           {% set _item_classes = [] %}
         {% else %}
           {% set _item_classes = ['nav-link'] %}
@@ -121,9 +121,19 @@
           %}
         {% endif %}
         {% if _item.dropdown is defined %}
+            {% if _tabs %}
+              {% set _item = _item|merge({
+                inside_navigation: true,
+                trigger: _item.trigger|merge({
+                  attributes: _item.trigger.attributes.setAttribute("role", "tab"),
+                }),
+              }) %}
+            {% endif %}
           {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
         {% elseif _item.button is defined %}
           {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% elseif _item.mega_menu is defined %}
+          {% include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %}
         {% else %}
           {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
         {% endif %}

package/templates/bcl-offcanvas/offcanvas.html.twig

@@ -25,7 +25,7 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _placement = placement|default('') %}
-{% set _id = id|default('') %}
+{% set _id = id|default('bcl-offcanvas-' ~ random(10000)) %}
 {% set _body = body|default('') %}
 {% set _with_body_scroll = with_body_scroll ?? false %}
 {% set _with_backdrop = with_backdrop ?? true %}
@@ -57,14 +57,12 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set attributes = attributes.setAttribute('id', _id) %}
+
 {% if _aria_labelled is defined and _aria_labelled is not empty %}
   {% set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
 {% endif %}
 
-{% if _id is not empty %}
- {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
-
 {% if _with_body_scroll %}
  {% set attributes = attributes.setAttribute('data-bs-scroll', 'true') %}
 {% endif %}
@@ -73,6 +71,10 @@
  {% set attributes = attributes.setAttribute('data-bs-backdrop', 'false') %}
 {% endif %}
 
+{% if _title is not empty %}
+ {% set attributes = attributes.setAttribute('aria-labelledby', _id ~ '-title') %}
+{% endif %}
+
 {% set attributes = attributes.setAttribute('tabindex', '-1').addClass(_classes) %}
 
 <div
@@ -85,7 +87,7 @@
       title: _title,
       title_tag: _title_tag,
       title_link: _title_link,
-      attributes: _title_attributes.addClass(['offcanvas-title']),
+      attributes: _title_attributes.setAttribute('id', _id ~ '-title').addClass(['offcanvas-title']),
     } only %}
   {% endif %}
   {% if _with_close %}
@@ -94,6 +96,7 @@
                               .setAttribute('data-bs-dismiss', 'offcanvas')
                               .setAttribute('data-bs-target', '#' ~ _id)
                               .setAttribute('aria-label', _close_aria_label)
+                              .setAttribute('aria-controls', _id)
     %}
     {% if _extra_classes_close is not empty %}
       {% set button_attributes = button_attributes.addClass(_extra_classes_close) %}

package/templates/bcl-page/page.html.twig

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   <p id="content">{{ get_dummy_text(6) }}
   </p>
   <h2 id="item-1" class="my-4">Section 1</h2>
@@ -42,4 +42,4 @@
 
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-person/person.html.twig

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if information.main_title is not empty %}
     <h2
       class="mb-4"
@@ -26,4 +26,4 @@
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     {% endfor %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-project/project.html.twig

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if project_status is not empty %}
     {% if project_status_title is not empty %}
       {% set _project_title_attributes = create_attribute().addClass(['mb-4']) %}
@@ -62,11 +62,11 @@
   {% endif %}
 
   {% if social_block is not empty %}
-    {% block social_block %}
+    {%- block social_block %}
       {{ social_buttons }}
       {% include '@oe-bcl/bcl-button/button.html.twig' with button_social_modal only %}
       {% include '@oe-bcl/bcl-modal/modal.html.twig' with social_modal only %}
-    {% endblock %}
+    {%- endblock -%}
   {% endif %}
 
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-project-status/project-contributions.html.twig

@@ -28,7 +28,7 @@
 <div {{ attributes }}>
   <div class="row">
 
-  {% if _chart is not empty %}
+  {% if _chart %}
     <div class="bcl-project-contributions-chart col-5 col-md-3">
     {% block project_status_contrib_chart %}
       <div class="circular-progress" data-percentage="{{ _corporate_contributions }}">

package/templates/bcl-search/search.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 {% if banner.search_bar is defined %}
   <div class="bg-lighter pt-3 pb-4 pb-lg-3">
     <div class="container">
@@ -19,4 +19,4 @@
     </div>
   </div>
 {% endif %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-subscription/subscription.html.twig

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content_bottom %}
+{%- block content_bottom %}
   {% include '@oe-bcl/bcl-subscription-block/subscription-block.html.twig' with subscription only %}
   {% include '@oe-bcl/bcl-subscription/subscription-modal.html.twig' with modal only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-user/user-terms.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block content %}
+{%- block content %}
   {{ get_dummy_text(4, true) }}
   <ul class="mb-4-5">
     <li>{{ get_dummy_text() }}</li>
@@ -8,4 +8,4 @@
     <li>{{ get_dummy_text() }}</li>
   </ul>
   {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-user/user.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block content %}
+{%- block content %}
   {% include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only %}
   <div class="tab-content">
     <div class="tab-pane fade show active" id="view" role="tabpanel" aria-labelledby="view-tab">
@@ -134,4 +134,4 @@
       {% include '@oe-bcl/bcl-form/form.html.twig' with cancel.form only %}
     </div>
   </div>
-{% endblock %}
+{%- endblock -%}