@openeuropa/bcl-theme-default 1.10.7 → 1.10.9

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.7",
+  "version": "1.10.9",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,14 +22,14 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.10.7",
-    "@openeuropa/bcl-builder": "^1.10.7",
-    "@openeuropa/bcl-twig-templates": "^1.10.7",
+    "@openeuropa/bcl-bootstrap": "^1.10.9",
+    "@openeuropa/bcl-builder": "^1.10.9",
+    "@openeuropa/bcl-twig-templates": "^1.10.9",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
-    "cross-env": "7.0.3",
+    "cross-env": "10.1.0",
     "flag-icons": "6.9.2",
-    "glob": "11.0.1",
+    "glob": "11.0.3",
     "npm-run-all": "4.1.5",
     "slim-select": "1.27.1",
     "slim-select-2": "github:tibi2303/slim-select#master"
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "5f7e5c2fd90eceb81c0ffcf52dcf8e3921c3acae"
+  "gitHead": "cb9864341bfc98404071520d61568bd18e17e1fe"
 }

package/src/icons/icons.js

@@ -56,6 +56,7 @@ module.exports = [
   "exclamation-lg.svg",
   "question-lg.svg",
   "info-lg.svg",
+  "x.svg",
   "x-lg.svg",
   "plus-lg.svg",
   "dash-lg.svg",
@@ -115,6 +116,7 @@ module.exports = [
   "trash.svg",
   "trash-fill.svg",
   "link.svg",
+  "list.svg",
 
   // Social.svg
   "skype.svg",

package/src/js/accordion-toggle/accordion-toggle.js

@@ -3,8 +3,6 @@ import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
 import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
 
 class AccordionToggle {
-  static isInitialized = false;
-
   constructor(buttonElement) {
     this.buttonElement = buttonElement;
     this.targetAccordionId = buttonElement.getAttribute("data-target");
@@ -36,16 +34,33 @@ class AccordionToggle {
     });
   }
 
-  static init() {
-    if (AccordionToggle.isInitialized) {
-      return;
-    }
+  static init(root = document.documentElement) {
+    const context = root instanceof Document ? root.documentElement : root;
+
+    const toggleButtons =
+      context instanceof Element
+        ? SelectorEngine.find('[data-action][data-target]', context)
+        : context && typeof context.querySelectorAll === "function"
+          ? Array.from(context.querySelectorAll('[data-action][data-target]'))
+          : SelectorEngine.find('[data-action][data-target]');
 
-    const toggleButtons = SelectorEngine.find('[data-action][data-target]');
-    toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement));
+    toggleButtons.forEach((buttonElement) => {
+      if (buttonElement.dataset.accordionToggleInitialized === "true") {
+        return;
+      }
 
-    AccordionToggle.isInitialized = true;
+      new AccordionToggle(buttonElement);
+      buttonElement.dataset.accordionToggleInitialized = "true";
+    });
   }
 }
 
+const initializeAccordionToggle = () => AccordionToggle.init();
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeAccordionToggle);
+} else {
+  initializeAccordionToggle();
+}
+
 export default AccordionToggle;

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

@@ -4,25 +4,37 @@ $header-background-start: #039 !default;
 $header-background-end: #1b4ac3 !default;
 $header-link-active-background: #003776 !default;
 
-.bcl-header__project {
-  background: linear-gradient(
-    90deg,
-    $header-background-start 0%,
-    $header-background-end 100%
-  );
-}
-
 .bcl-header .nav-link {
   color: $eu-blue;
   display: flex;
   align-items: center;
 }
 
+.bcl-navbar-toggler {
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-sm);
+  padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+  color: $link-color;
+  line-height: 1;
+  @extend .rounded-2;
+  .active-icon {
+    display: none;
+  }
+  &[aria-expanded="true"] {
+    background-color: $primary;
+    color: $white;
+    .active-icon {
+      display: block;
+    }
+    .default-icon {
+      display: none;
+    }
+  }
+}
+
 .bcl-header--ec,
 .ec__header {
-  .bcl-header__project {
-    background: $header-background;
-  }
   /* stylelint-disable-next-line no-descending-specificity */
   .nav-link {
     color: $ec-blue;
@@ -33,21 +45,8 @@ $header-link-active-background: #003776 !default;
   align-items: flex-end;
 }
 
-.bcl-header--neutral {
-  .bcl-header__project {
-    background: $gray-700;
-  }
-}
-
-.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-  padding-top: map-get($spacers, 3);
-}
-
 .bcl-header {
-  .navbar-brand img {
-    width: 100px;
-  }
-
+  --oel-mega-menu-offset-top: 0px;
   .notification {
     position: relative;
     padding-right: 0;
@@ -64,16 +63,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-.bcl-header__project .bcl-header__site-name {
-  display: inline-block;
-  margin-bottom: 0;
-  font-size: 1.3rem;
-  font-weight: 300;
-  color: $white;
-  vertical-align: middle;
-  max-width: 80%;
-}
-
 .bcl-header__navbar.navbar {
   padding: 0;
   .dropdown-toggle,
@@ -87,12 +76,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-@media only screen and (max-width: 400px) {
-  .bcl-header--neutral .bcl-header__project-logo {
-    display: none;
-  }
-}
-
 @include media-breakpoint-up(md) {
   .bcl-header--ec,
   .ec__header {
@@ -114,33 +97,17 @@ $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;
-    overflow: auto;
 
     > div:has(.breadcrumb) {
       display: none;
     }
   }
 
-  .bcl-header__project {
-    padding: map-get($spacers, 3) 0;
-  }
-
   .bcl-header {
-    .bcl-header__project {
-      z-index: 1040; // Make sure project bar is above the mega menu
-      position: relative;
-      box-shadow: var(--bs-box-shadow);
-      flex-shrink: 0;
-    }
-  }
-
-  .bcl-header:not(:has(.bcl-header__project)) {
-    > .navbar:first-child {
-      box-shadow: var(--bs-box-shadow);
-    }
+    box-shadow: var(--bs-box-shadow);
   }
 
   .bcl-header nav + nav {
@@ -160,6 +127,7 @@ $header-link-active-background: #003776 !default;
     z-index: 1030;
     width: 100%;
     align-items: flex-start;
+    overflow: auto;
     .navbar-nav {
       width: 100%;
       margin-top: 1rem;
@@ -225,12 +193,6 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-up(lg) {
-  .bcl-header__project.light,
-  .bcl-header--ec .bcl-header__project.light,
-  .ec__header .bcl-header__project.light {
-    background: $white;
-  }
-
   .bcl-header__navbar {
     background: linear-gradient(
       90deg,
@@ -256,33 +218,16 @@ $header-link-active-background: #003776 !default;
     }
   }
 
-  .bcl-header__site-name {
-    margin-left: map-get($spacers, 4);
-    font-weight: 500;
-  }
-
-  .bcl-header__project.light .bcl-header__site-name {
-    color: $black;
-  }
-
   .bcl-header .navbar-toggler {
     position: relative;
     right: 0;
     bottom: 0;
   }
 
-  .bcl-header .navbar-brand img {
-    width: auto;
-  }
-
   .bcl-header__navbar .bcl-mega-menu {
     --bcl-mega-menu-zindex: 1050; // Make sure dropdown overlaps the search offcanvas
   }
 
-  .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-    padding-bottom: map-get($spacers, 3);
-  }
-
   .bcl-header__navbar.collapse {
     display: block;
   }

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: