@openeuropa/bcl-theme-default 1.10.7 → 1.10.9

package/src/scss/_mega-menu.scss

@@ -275,34 +275,6 @@ 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;
-      }
-    }
   }
 }
 
@@ -314,6 +286,21 @@ 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.
@@ -361,51 +348,53 @@ ul.bcl-mega-menu__items {
   > .__header {
     // The title only shows in mobile.
     > .__label {
-      @include media-breakpoint-up(lg) {
-        display: none;
-      }
       @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;
+      }
     }
   }
-}
-
-// 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) {
-      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;
-        }
+  @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"));
       }
     }
-    // The panel title only shows in mobile.
-    > .panel-title {
+  }
+  > .__see_all {
+    border-top: 1px solid $neutral-border-color;
+    @include media-breakpoint-up(lg) {
+      border-top: 1px solid $primary-border-subtle;
+      margin: 0 map-get($spacers, "4-25");
+    }
+    > .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) {
-        display: none;
+        padding: $mm-gutter-y map-get($spacers, "4-25");
+        margin: 0 -1.75rem;
       }
-      @include mm-item-padding(map-get($spacers, 3));
-      margin: 0;
-      color: $dark;
-      background: $primary-bg-subtle;
-      display: block;
-      font-size: 20px;
-    }
-    // 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");
+      &:hover {
+        background: $primary-bg-subtle;
+      }
+      > svg {
+        flex-shrink: 0;
+      }
+      > span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        white-space: nowrap;
       }
     }
   }

package/src/scss/_multiselect-2.scss

@@ -11,7 +11,7 @@
   --ss-font-color: #4d4d4d;
   --ss-font-placeholder-color: #212529;
   --ss-disabled-color: #dcdee2;
-  --ss-border-color: #dcdee2;
+  --ss-border-color: #6c757d;
   --ss-highlight-color: #fffb8c;
   --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
@@ -77,8 +77,8 @@
   overflow: hidden;
   min-height: 38px;
 
-  &:focus {
-    box-shadow: 0 0 5px var(--ss-focus-color);
+  &:focus-visible {
+    @include form-focus-ring();
   }
 
   &.form-select {
@@ -330,7 +330,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 5px var(--ss-focus-color);
+        @include form-focus-ring();
       }
     }
 
@@ -534,19 +534,41 @@
   }
 }
 
-.ss-main.multi-select.is-invalid,
-.was-validated .multi-select:invalid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-invalid,
+.was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
   border-color: $danger;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a51f2c' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $danger;
+  }
 }
-.ss-main.multi-select.is-valid,
-.was-validated .multi-select:valid + .ss-main.multi-select {
+.form-select.ss-main.multi-select.is-valid,
+.was-validated .multi-select:valid + .form-select.ss-main.multi-select {
   border-color: $success;
-  background-position: right 1.5rem center;
+  background-position: right 2.5rem center;
   background-repeat: no-repeat;
+  padding-right: 0.5rem;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $success;
+  }
+}
+
+.ss-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  overflow: hidden;
 }

package/src/scss/_pagination-v2.scss

@@ -0,0 +1,86 @@
+// Pagination V2 overrides scoped to `.pagination-v2`.
+.pagination-v2 {
+  // Keep the navigation landmark borderless to match Bootstrap defaults.
+  &.pager .pagination {
+    --bs-border-color: transparent;
+  }
+
+  .pagination {
+    // Minimal tweaks so buttons keep the square footprint used in the design
+    // while relying on Bootstrap’s native colour tokens.
+    --bs-pagination-border-color: transparent;
+    --bs-pagination-disabled-border-color: transparent;
+    --bs-pagination-item-size: 2.75rem;
+
+    --bs-pagination-hover-bg: #{$primary};
+    --bs-pagination-hover-color: #{$white};
+
+    @extend .pt-4;
+    border-top: 1px solid $pagination-border-color;
+
+    .page-item {
+      .page-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--bs-pagination-item-size);
+        min-height: var(--bs-pagination-item-size);
+        text-decoration: none;
+
+        // When the current page renders as a `div`, keep the hover state neutral.
+        &:is(div):hover {
+          background-color: transparent;
+          border-color: transparent;
+          color: $primary;
+        }
+      }
+      &.active {
+        .page-link {
+          cursor: default;
+          --bs-pagination-active-bg: #{$primary};
+          --bs-pagination-active-color: #{$white};
+
+          &:active,
+          &:hover {
+            --bs-pagination-active-bg: #{$primary};
+            color: var(--bs-pagination-active-color);
+            background-color: var(--bs-pagination-active-bg);
+            @include media-breakpoint-down(md) {
+              --bs-pagination-active-bg: $white;
+              --bs-pagination-active-color: $dark;
+              --bs-pagination-active-border-color: transparent;
+            }
+          }
+          @include media-breakpoint-down(md) {
+            --bs-pagination-active-bg: $white;
+            --bs-pagination-active-color: $dark;
+            --bs-pagination-active-border-color: transparent;
+          }
+        }
+      }
+    }
+    // Glossary variant.
+    &.pagination--glossary {
+      .page-item {
+        margin-right: inherit;
+        .page-link {
+          @extend .fw-normal;
+          border: 1px solid $gray-400;
+          padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+          @include focused-item();
+          &:hover {
+            @extend .text-decoration-none;
+            @extend .bg-light;
+          }
+        }
+      }
+    }
+  }
+
+  /* Outline the group when any pager control is focused for keyboard users. */
+  .pager__items:focus-within {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+}

package/src/scss/_pagination.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 .pagination {
+  flex-wrap: wrap;
   .page-item {
     .page-link {
       // Align icons vertically and focus styling

package/src/scss/_search-form.scss

@@ -39,6 +39,10 @@ $search-spacers: (
       padding-right: map-get($search-spacers, "submit-spacer-right");
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      &:focus-visible {
+        outline-offset: 2px;
+        outline-color: $primary;
+      }
     }
     .bcl-search-form__group {
       display: flex;

package/src/scss/base/_mixins.scss

@@ -11,3 +11,24 @@
     height: 0;
   }
 }
+
+@mixin form-focus-ring(
+  $outline-offset: 2px,
+  $outline-width: 2px,
+  $radius: 4px,
+  $outline-color: $primary
+) {
+  outline: $outline-width solid $outline-color;
+  box-shadow: none;
+  border-radius: $radius;
+  outline-offset: $outline-offset;
+}
+
+@mixin focused-item($width: 2px, $offset: 2px, $color: $primary) {
+  &:focus,
+  &:focus-visible {
+    box-shadow: none;
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}

package/src/scss/base/_utilities.scss

@@ -154,6 +154,14 @@ svg {
   border-color: $gray-300;
 }
 
+.border-top-subtle {
+  border-top: 1px solid $primary-border-subtle;
+}
+
+.border-bottom-subtle {
+  border-bottom: 1px solid $primary-border-subtle;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
 }

package/src/scss/base/_variables.scss

@@ -98,6 +98,9 @@ $card-start-col-large-size: 255px;
 $card-start-col-size: 160px;
 $card-start-col-small-size: 120px;
 
+// Pagination
+$pagination-border-color: $gray-400;
+
 // Z-index
 // Based on the webtools cookie banner consent, with z-index 100
 $zindex-dropdown: 40;

package/src/scss/oe-bcl-default.scss

@@ -87,3 +87,4 @@
 @import "@openeuropa/bcl-theme-default/src/scss/carousel";
 @import "@openeuropa/bcl-theme-default/src/scss/gallery";
 @import "@openeuropa/bcl-theme-default/src/scss/pagination";
+@import "@openeuropa/bcl-theme-default/src/scss/pagination-v2";

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-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-file/file.html.twig

@@ -139,7 +139,7 @@
           {% endif %}
         </div>
         {% set download_attributes = create_attribute()
-                                      .setAttribute('download', 'true')
+                                      .setAttribute('download', true)
                                       .setAttribute('target', '_blank')
                                       .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0', 'flex-shrink-0']) %}
         {% set _download = _download|merge({

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 -%}