@openeuropa/bcl-theme-default 0.4185.202511191330 → 0.4185.202512021245

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.4185.202511191330",
+  "version": "0.4185.202512021245",
   "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.202511191330",
-    "@openeuropa/bcl-builder": "^0.4185.202511191330",
-    "@openeuropa/bcl-twig-templates": "^0.4185.202511191330",
+    "@openeuropa/bcl-bootstrap": "^0.4185.202512021245",
+    "@openeuropa/bcl-builder": "^0.4185.202512021245",
+    "@openeuropa/bcl-twig-templates": "^0.4185.202512021245",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "de7fc20600e88ea3b38e74c2ec1c6ffbb0b2a1b0"
+  "gitHead": "795ad40621a91b0fbd8095b9ceed5f6ff30bb127"
 }

package/src/js/header/header.js

@@ -0,0 +1,91 @@
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+
+const HEADER_SELECTOR = ".bcl-header";
+const TOGGLER_SELECTOR = ".bcl-navbar-toggler";
+const OFFSET_VARIABLE = "--oel-mega-menu-offset-top";
+
+class Header {
+  scheduleUpdate = () => {
+    if (this.frameRequest) {
+      return;
+    }
+
+    this.frameRequest = window.requestAnimationFrame(() => {
+      this.frameRequest = null;
+      this.updateOffset();
+    });
+  };
+
+  constructor(element) {
+    this.element = element;
+    this.frameRequest = null;
+    this.resizeObserver = null;
+
+    this.init();
+  }
+
+  init() {
+    this.updateOffset();
+
+    EventHandler.on(window, "resize", this.scheduleUpdate);
+    EventHandler.on(window, "orientationchange", this.scheduleUpdate);
+
+    const togglers = SelectorEngine.find(TOGGLER_SELECTOR, this.element);
+    togglers.forEach((toggler) => {
+      // Some layouts move the header when the nav toggler expands; keep offset in sync.
+      EventHandler.on(toggler, "click", this.scheduleUpdate);
+    });
+  }
+
+  updateOffset() {
+    if (!this.element) {
+      return;
+    }
+
+    const rect = this.element.getBoundingClientRect();
+    const offset = Math.max(0, rect.top);
+    const value = `${offset}px`;
+
+    if (this.element.style.getPropertyValue(OFFSET_VARIABLE) === value) {
+      return;
+    }
+
+    this.element.style.setProperty(OFFSET_VARIABLE, value);
+  }
+
+  static init(root) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return;
+    }
+
+    const resolvedRoot = root || document;
+    const context =
+      resolvedRoot instanceof Element
+        ? resolvedRoot
+        : resolvedRoot.documentElement || document.documentElement;
+
+    const headers = SelectorEngine.find(HEADER_SELECTOR, context);
+
+    headers.forEach((headerElement) => {
+      if (headerElement.dataset.headerOffsetInitialized === "true") {
+        return;
+      }
+
+      headerElement.dataset.headerOffsetInitialized = "true";
+      new Header(headerElement);
+    });
+  }
+}
+
+if (typeof document !== "undefined") {
+  const initializeHeaderOffset = () => Header.init();
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeHeaderOffset);
+  } else {
+    initializeHeaderOffset();
+  }
+}
+
+export default Header;

package/src/js/index.esm.js

@@ -23,6 +23,7 @@ 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,
@@ -43,4 +44,5 @@ export {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  Header,
 };

package/src/js/index.umd.js

@@ -23,6 +23,7 @@ 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,
@@ -43,4 +44,5 @@ export default {
   Gallery,
   AccessibleToggle,
   AccordionToggle,
+  Header,
 };

package/src/scss/_header.scss

@@ -46,6 +46,7 @@ $header-link-active-background: #003776 !default;
 }
 
 .bcl-header {
+  --oel-mega-menu-offset-top: 0px;
   .notification {
     position: relative;
     padding-right: 0;
@@ -96,7 +97,7 @@ $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: 100vh;
+    height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
     display: flex;
     flex-flow: column;
 

package/src/scss/_input.scss

@@ -1,15 +1,57 @@
 /* stylelint-disable no-duplicate-selectors, selector-no-qualifying-type, no-descending-specificity */
 
+$default-border-color: $gray-600;
+
 .form-select {
   padding-top: $input-padding-y-lg;
   padding-bottom: $input-padding-y-lg;
   padding-left: $input-padding-x-lg;
   font-size: $form-font-size-lg;
+  border-color: $default-border-color;
+  &:focus-visible {
+    border-color: $default-border-color;
+    box-shadow: none;
+    @include form-focus-ring();
+    &.is-valid {
+      outline-color: $success;
+      &:focus {
+        box-shadow: none;
+        border-color: $default-border-color;
+      }
+    }
+    &.is-invalid {
+      outline-color: $danger;
+      &:focus {
+        box-shadow: none;
+        border-color: $default-border-color;
+      }
+    }
+  }
+  &:focus {
+    box-shadow: none;
+    border-color: $default-border-color;
+  }
+  &.is-valid,
+  &.is-invalid {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.form-check-input {
+  border-color: $primary;
   &:focus-visible {
-    outline: 2px solid $primary;
+    &[type="radio"] {
+      border-radius: 50%;
+    }
+  }
+  &:focus {
+    border-color: $primary;
     box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
+  }
+  &:focus-visible {
+    @include form-focus-ring(1px);
   }
 }
 
@@ -18,16 +60,35 @@
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $form-font-size-lg;
   border-radius: 0.3rem;
+  border-color: $default-border-color;
   &::file-selector-button {
     padding: $input-padding-y-lg $input-padding-x-lg;
     margin: (-$input-padding-y-lg) $input-padding-x-lg (-$input-padding-y-lg)
       (-$input-padding-x-lg);
   }
-  &:focus-visible {
-    outline: 2px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
+  &:focus:focus-visible {
+    border-color: $default-border-color;
+    @include form-focus-ring();
+  }
+  &.is-valid,
+  &.is-invalid {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  &.is-valid {
+    &:focus:focus-visible {
+      transition: none;
+      border-color: $default-border-color;
+      @include form-focus-ring($outline-color: $success);
+    }
+  }
+  &.is-invalid {
+    &:focus:focus-visible {
+      transition: none;
+      border-color: $default-border-color;
+      @include form-focus-ring($outline-color: $danger);
+    }
   }
 }
 .form-check:not(.form-switch) {
@@ -41,20 +102,6 @@
     margin-top: 0.15rem;
   }
 }
-.form-check-input {
-  &:focus-visible {
-    outline: 4px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: 0;
-    &[type="radio"] {
-      border-radius: 50%;
-    }
-  }
-  &:checked:focus-visible {
-    border-color: $white;
-  }
-}
 
 @include media-breakpoint-up(md) {
   .form-check:not(.form-switch) {
@@ -90,24 +137,18 @@
 textarea.form-control,
 .form-control {
   &.is-invalid {
-    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 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='%23A51F2C'/%3E%3C/svg%3E%0A");
   }
   &.is-valid {
     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");
   }
 }
 
-.form-select:not([multiple]):not([size]) {
-  &:focus-visible {
-    outline: 2px solid $primary;
-    box-shadow: none;
-    border-radius: 4px;
-    outline-offset: -1px;
-  }
+select.form-select:not([multiple]):not([size]) {
   &.is-invalid {
     background-image:
       url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
-      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");
+      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='%23A51F2C'/%3E%3C/svg%3E%0A");
   }
   &.is-valid {
     background-image:

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,21 +534,31 @@
   }
 }
 
-.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 {

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

@@ -12,6 +12,18 @@
   }
 }
 
+@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 {

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

@@ -17,6 +17,8 @@
   - language_modal (object) (default: {})
   - light (boolean) (default: false)
   - modals (modal[]) (default: [])
+  - toggler_attributes (drupal attrs)
+  - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
 
@@ -30,6 +32,8 @@
 {% 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' %}
@@ -38,7 +42,7 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
 
 {% if site_name_classes is not empty %}
   {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
@@ -49,6 +53,33 @@
   {% 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 }}
 >
@@ -70,20 +101,17 @@
       {% 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>
+      {{ navbar_toggle_button }}
     </div>
   </nav>
 
+  <!-- site name -->
+  <div class="bcl-header__site-name" id="site-name-heading">
+    <div class="container">
+      <span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>
+    </div>
+  </div>
+
   <!-- navbar -->
   {% if _navbar is not empty %}
     {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({

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

@@ -56,7 +56,7 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(['pb-3', 'd-inline-block', 'standalone'])
+          attributes: _link.attributes.addClass(['mb-3', 'd-inline-block', 'standalone'])
         }) %}
         {% set _list_item_classes = 'list-unstyled' %}
         {% if _variant == 'horizontal' %}

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

@@ -7,7 +7,8 @@
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
-  - verticaly_centered (boolean) (default: false)
+  - vertically_centered (boolean) (default: false)
+  - verticaly_centered (boolean) (default: false) // deprecated typo
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
   - messages (block) (default: '')
@@ -29,7 +30,7 @@
 {% set _id = id|default('modal-' ~ random(10000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _static_backdrop = static_backdrop ?? false %}
-{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _vertically_centered = vertically_centered ?? verticaly_centered ?? false %}
 {% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _header_attributes = header_attributes ?: create_attribute() %}
@@ -63,7 +64,7 @@
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
-  {{- _verticaly_centered ? ' modal-dialog-centered' -}}
+  {{- _vertically_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
   >
     <div class="modal-content">