@openeuropa/bcl-theme-default 0.4185.202512021245 → 0.4230.202512021730

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.4185.202512021245",
+  "version": "0.4230.202512021730",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^0.4185.202512021245",
-    "@openeuropa/bcl-builder": "^0.4185.202512021245",
-    "@openeuropa/bcl-twig-templates": "^0.4185.202512021245",
+    "@openeuropa/bcl-bootstrap": "^0.4230.202512021730",
+    "@openeuropa/bcl-builder": "^0.4230.202512021730",
+    "@openeuropa/bcl-twig-templates": "^0.4230.202512021730",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "795ad40621a91b0fbd8095b9ceed5f6ff30bb127"
+  "gitHead": "19735e328b2b53ccefbcc6829e2aaf149a2c438c"
 }

package/src/js/index.esm.js

@@ -23,7 +23,6 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
-import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export {
   Alert,
@@ -44,5 +43,4 @@ export {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
-  Header,
 };

package/src/js/index.umd.js

@@ -23,7 +23,6 @@ import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
 import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
-import Header from "@openeuropa/bcl-theme-default/src/js/header/header";
 
 export default {
   Alert,
@@ -44,5 +43,4 @@ export default {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
-  Header,
 };

package/src/scss/_header.scss

@@ -46,7 +46,6 @@ $header-link-active-background: #003776 !default;
 }
 
 .bcl-header {
-  --oel-mega-menu-offset-top: 0px;
   .notification {
     position: relative;
     padding-right: 0;
@@ -97,9 +96,10 @@ $header-link-active-background: #003776 !default;
   header:has(.bcl-header__navbar #main-navbar.show),
   header:has(.bcl-header__navbar.collapsing),
   header:has(.bcl-header__navbar.show) {
-    height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
+    height: 100vh;
     display: flex;
     flex-flow: column;
+    overflow: auto;
 
     > div:has(.breadcrumb) {
       display: none;
@@ -127,7 +127,6 @@ $header-link-active-background: #003776 !default;
     z-index: 1030;
     width: 100%;
     align-items: flex-start;
-    overflow: auto;
     .navbar-nav {
       width: 100%;
       margin-top: 1rem;

package/src/scss/_mega-menu.scss

@@ -275,6 +275,34 @@ ul.bcl-mega-menu__items {
         }
       }
     }
+
+    // The see-all link is at the bottom of the list.
+    &:has(> a.see-all-button) {
+      position: sticky;
+      inset-block-start: 100%;
+    }
+    > a.see-all-button {
+      border-top: none;
+      &:after {
+        background: $neutral-border-color;
+        content: "";
+        block-size: 1px;
+        inset-inline-start: 0;
+        position: absolute;
+        inset-block-start: 0;
+        // Replicate horizontal padding of parent element.
+        inset-inline: $mm-gutter-x;
+      }
+      > svg {
+        inline-size: 0.8rem;
+      }
+      > span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        white-space: nowrap;
+      }
+    }
   }
 }
 
@@ -286,21 +314,6 @@ ul.bcl-mega-menu__items {
     // Avoid a space between the parent menu and the submenu.
     @include padding-right(0);
   }
-  @include media-breakpoint-down(lg) {
-    > .bcl-mega-menu__items {
-      &:has(.bcl-mega-menu__submenu:not([hidden])) {
-        > .__leaf,
-        > .__parent {
-          display: none;
-        }
-      }
-      > .__parent {
-        &:has(.bcl-mega-menu__submenu:not([hidden])) {
-          display: block;
-        }
-      }
-    }
-  }
 }
 
 // Nested submenu.
@@ -359,42 +372,40 @@ ul.bcl-mega-menu__items {
       }
     }
   }
-  @include media-breakpoint-up(lg) {
-    > .bcl-mega-menu__items {
-      flex: 1 1 0;
-      overflow-y: auto;
-      > li > :is(span, a, button) {
-        @include mm-item-padding($px: map-get($spacers, "4-25"));
-      }
-    }
-  }
-  > .__see_all {
-    border-top: 1px solid $neutral-border-color;
+}
+
+// Second level items column.
+.bcl-mega-menu__second-submenu {
+  > .tab-content > .tab-pane {
+    // In desktop, the entire second-level list has a light blue background.
     @include media-breakpoint-up(lg) {
-      border-top: 1px solid $primary-border-subtle;
-      margin: 0 map-get($spacers, "4-25");
+      background: $primary-bg-subtle;
     }
-    > .see-all-button {
-      @include mm-item-padding();
-      // Use flex for icon spacing.
-      display: flex;
-      align-items: center;
-      color: $link-color;
-      @include media-breakpoint-up(lg) {
-        padding: $mm-gutter-y map-get($spacers, "4-25");
-        margin: 0 -1.75rem;
-      }
-      &:hover {
-        background: $primary-bg-subtle;
+    // Hide other parts of the mega menu in mobile, when a sub-submenu is open.
+    @include media-breakpoint-down(lg) {
+      .bcl-mega-menu__container:has(&.active) {
+        .bcl-mega-menu__info,
+        .bcl-mega-menu__first-submenu {
+          display: none;
+        }
       }
-      > svg {
-        flex-shrink: 0;
+    }
+    // The panel title only shows in mobile.
+    > .panel-title {
+      @include mm-item-padding(map-get($spacers, 3));
+      margin: 0;
+      color: $dark;
+      background: $primary-bg-subtle;
+      display: block;
+      font-size: 20px;
+      @include media-breakpoint-up(lg) {
+        display: none;
       }
-      > span {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: block;
-        white-space: nowrap;
+    }
+    // Items get a bit more space to the sides in xl viewport.
+    @include media-breakpoint-up(xl) {
+      > ul > li > * {
+        margin: 0 map-get($spacers, "2-5");
       }
     }
   }

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - title (string) (default: '')
@@ -141,4 +139,3 @@
 </div>
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - message (string) (default: '')
   - heading (string) (default: '')
@@ -80,4 +78,3 @@
 {%- endif -%}
 </div>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - label (string) (default: '')
   - background: (string) (default: 'primary')
@@ -76,4 +74,3 @@
 </span>
 {%- endif -%}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'div')
@@ -93,4 +91,3 @@
   </div>
 </div>
 
-{% endapply %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - with_header (boolean) (default: false)
@@ -136,4 +134,3 @@
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
@@ -70,4 +68,3 @@
 {% endif %}
 </figure>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - links (link[]) (default: [])
   - icon_path (string) (default: '')
@@ -59,4 +57,3 @@
 </nav>
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - label (string) (default: '')
@@ -111,4 +109,3 @@
 {%- endif -%}
 </button>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - vertical (boolean) (default: false)
   - size (string) (default: 'md')
@@ -64,4 +62,3 @@
   </div>
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h1')
@@ -272,4 +270,3 @@
 {% endif %}
 </article>
 
-{% endapply %}

package/templates/bcl-card-layout/card-layout.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - type (string) (default: 'group')
     options: ['group', 'grid', 'masonry']
@@ -84,4 +82,3 @@
 {% endif %}
 </div>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
@@ -177,4 +175,3 @@
 {% endif %}
 </div>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
     - title: (string) (default: '')
@@ -136,4 +134,3 @@
   </div>
 </div>
 
-{% endapply %}

package/templates/bcl-date-block/date-block.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
     - day (integer) (default: '')
@@ -77,4 +75,3 @@
   </div>
 </time>
 
-{% endapply %}

package/templates/bcl-description-list/description-list-details.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - button: (button object) (default: {})
@@ -41,4 +39,3 @@
 {% endblock %}
 </dd>
 
-{% endapply %}

package/templates/bcl-description-list/description-list-title.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - icon: (icon object) (default: {})
@@ -30,4 +28,3 @@
   </div>
 </dt>
 
-{% endapply %}

package/templates/bcl-description-list/description-list.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - title: (string) (default: '')
@@ -118,4 +116,3 @@
 </div>
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - id (string) (default: dropdown-random(10000))
   - trigger (link or button)
@@ -132,4 +130,3 @@
 </div>
 {% endif %}
 
-{% endapply %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - title (string) (default: '')
@@ -125,4 +123,3 @@
   </div>
 </div>
 
-{% endapply %}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
@@ -169,4 +167,3 @@
 </div>
 {% endif %}
 
-{% endapply %}

package/templates/bcl-file/file-translations.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - id (string) (default: language-dropdown-random(10000))
   - label (string) (default: '')
@@ -93,4 +91,3 @@
   {% endif %}
 </div>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - title (string) (default: '')
@@ -162,4 +160,3 @@
   {% endif %}
 </div>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - variant (string) (default: 'neutral')
     - options: ['eu', 'ec', 'neutral']
@@ -87,4 +85,3 @@
   </div>
 </footer>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
@@ -147,4 +145,3 @@
 {% endif %}
 </form>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - id (string) (default: '')
@@ -180,4 +178,3 @@
 </div>
 {% endif %}
 
-{% endapply %}

package/templates/bcl-gallery/gallery-item.html.twig

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
 Parameters:
   - item (object) (default: {})
@@ -62,4 +60,3 @@ Parameters:
   {{ _item.thumbnail }}
 </a>
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
 Parameters:
   - id (string) (default: gallery-random(10000))
@@ -192,4 +190,3 @@ Parameters:
 </div>
 {% endif %}
 
-{% endapply %}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - variant (string) (default: 'neutral')
     - options: ['ec', 'eu', 'neutral']
@@ -17,8 +15,6 @@
   - language_modal (object) (default: {})
   - light (boolean) (default: false)
   - modals (modal[]) (default: [])
-  - toggler_attributes (drupal attrs)
-  - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
 
@@ -32,8 +28,6 @@
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
 {% set _light = light ?? false %}
-{% set _toggler_attributes = toggler_attributes ?: create_attribute() %}
-{% set _icon_path = icon_path|default('') %}
 {% set _modals = modals|default([]) %}
 
 {% set _site_name_classes = 'bcl-header__site-name' %}
@@ -42,7 +36,7 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
 
 {% if site_name_classes is not empty %}
   {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
@@ -53,33 +47,6 @@
   {% set _project_classes = _project_classes ~ ' light' %}
 {% endif %}
 
-{% set toggler_attributes = _toggler_attributes.addClass(['bcl-navbar-toggler', 'd-lg-none'])
-  .setAttribute('type', 'button')
-  .setAttribute('data-bs-toggle', 'collapse')
-  .setAttribute('data-bs-target', '#' ~ navbar_id)
-  .setAttribute('aria-controls', navbar_id)
-  .setAttribute('aria-expanded', 'false')
-%}
-
-{% set navbar_toggle_button %}
-  <button
-    {{ toggler_attributes }}
-  >
-    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-      name: 'list',
-      size: 'fluid',
-      path: _icon_path,
-      attributes: create_attribute().addClass(['default-icon']),
-    } only %}
-    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-      name: 'x',
-      size: 'fluid',
-      path: _icon_path,
-      attributes: create_attribute().addClass(['active-icon']),
-    } only %}
-  </button>
-{% endset %}
-
 <header
   {{ attributes }}
 >
@@ -101,16 +68,54 @@
       {% endfor %}
       </a>
     {% endif %}
-      {{ navbar_toggle_button }}
+      <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>
 
-  <!-- site name -->
-  <div class="bcl-header__site-name" id="site-name-heading">
+
+  <!-- project name -->
+  {% if _project_logo is not empty or _site_name is not empty %}
+  <div class="{{ _project_classes  }}">
     <div class="container">
-      <span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>
+    {% if _project_link is not empty %}
+      <a
+        href="{{ _project_link }}"
+      >
+    {% endif %}
+      {% if _project_logo is not empty %}
+        <img
+        {% if _project_logo.path is not empty %}
+          src="{{ _project_logo.path }}"
+        {% endif %}
+        {% if _project_logo.alt is not empty %}
+          alt="{{ _project_logo.alt }}"
+        {% endif %}
+        {% if _project_logo.classes is not empty %}
+          class="{{ _project_logo.classes }}"
+        {% endif %}
+        />
+      {% endif %}
+      {% if _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
+      {% endif %}
+    {% if _project_link is not empty %}
+      </a>
+    {% endif %}
     </div>
   </div>
+  {% endif %}
 
   <!-- navbar -->
   {% if _navbar is not empty %}
@@ -119,14 +124,14 @@
       attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
     }) only %}
   {% endif %}
-</header>
 
-<!-- breadcrumbs -->
-{% if _breadcrumbs is not empty %}
-  <div class="container">
-    {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
-  </div>
-{% endif %}
+  <!-- breadcrumbs -->
+  {% if _breadcrumbs is not empty %}
+    <div class="container">
+      {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
+    </div>
+  {% endif %}
+</header>
 
 {% for modal in _modals %}
   {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
@@ -136,4 +141,3 @@
   {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
 {% endif %}
 
-{% endapply %}