@openeuropa/bcl-theme-default 0.4230.202512021730 → 0.4360.202601141610

package/package.json

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

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/js/mega-menu/mega-menu.js

@@ -2,15 +2,33 @@ import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
 import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
 
+const SUBMENU_HEIGHT_VARIABLE = "--oel-mega-menu-submenu-height";
+const SUBMENU_BODY_SELECTOR = ".__submenu_body";
+
 class MegaMenu {
+  scheduleSubmenuHeightUpdate = () => {
+    if (this.submenuHeightFrame) {
+      return;
+    }
+
+    this.submenuHeightFrame = window.requestAnimationFrame(() => {
+      this.submenuHeightFrame = null;
+      this.updateSubmenuHeight();
+    });
+  };
 
   constructor(root) {
     this.root = root;
+    this.submenuHeightFrame = null;
+    this.submenuBodies = SelectorEngine.find(SUBMENU_BODY_SELECTOR, this.root);
 
     this.backButton = SelectorEngine.findOne(".back-button", this.root);
     this.trigger = SelectorEngine.findOne(':scope > .dropdown-toggle[data-bs-toggle="dropdown"]', this.root);
     this.ul = SelectorEngine.findOne('.bcl-mega-menu__items.__level-1', this.root);
 
+    EventHandler.on(window, "resize", this.scheduleSubmenuHeightUpdate);
+    EventHandler.on(window, "orientationchange", this.scheduleSubmenuHeightUpdate);
+
     this.addSubmenuTriggerListeners();
     this.addBackButtonListener();
     this.addTriggerListeners();
@@ -73,6 +91,7 @@ class MegaMenu {
 
     // When the mega menu is opened, focus the first item in the menu.
     EventHandler.on(this.trigger, 'shown.bs.dropdown', () => {
+      this.scheduleSubmenuHeightUpdate();
       const panelId = this.trigger.getAttribute('aria-controls');
       const panel = panelId ? document.getElementById(panelId) : null;
       const firstFocusable = panel ? this.getFocusableChildren(panel)[0] : null;
@@ -136,6 +155,7 @@ class MegaMenu {
     trigger.setAttribute('aria-expanded', 'true');
     const panel = this.getPanelForTrigger(trigger);
     if (panel) panel.hidden = false;
+    this.scheduleSubmenuHeightUpdate();
   }
 
   /**
@@ -164,6 +184,43 @@ class MegaMenu {
     if (panel) panel.hidden = true;
   }
 
+  updateSubmenuHeight() {
+    if (!this.trigger || this.trigger.getAttribute('aria-expanded') !== 'true') {
+      return;
+    }
+
+    if (!this.submenuBodies || this.submenuBodies.length === 0) {
+      return;
+    }
+
+    const viewportHeight =
+      (document.documentElement && document.documentElement.clientHeight) ||
+      window.innerHeight ||
+      0;
+
+    if (!viewportHeight) {
+      return;
+    }
+
+    this.submenuBodies.forEach((submenuBody) => {
+      if (!submenuBody.isConnected || submenuBody.closest('[hidden]')) {
+        return;
+      }
+
+      const rect = submenuBody.getBoundingClientRect();
+      const visibleTop = Math.max(rect.top, 0);
+      // Use the distance to the viewport bottom instead of the current element
+      // height. Nested submenus inherit the parent max-height, so relying on
+      // rect.bottom would keep the parent's value and never recalc for children.
+      const availableHeight = Math.max(0, viewportHeight - visibleTop);
+      const value = `${availableHeight}px`;
+
+      if (submenuBody.style.getPropertyValue(SUBMENU_HEIGHT_VARIABLE) !== value) {
+        submenuBody.style.setProperty(SUBMENU_HEIGHT_VARIABLE, value);
+      }
+    });
+  }
+
   static init(selector = ".bcl-mega-menu") {
     const megaMenus = SelectorEngine.find(selector);
     megaMenus.forEach((menuEl) => new MegaMenu(menuEl));

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,10 +97,9 @@ $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;
@@ -127,6 +127,10 @@ $header-link-active-background: #003776 !default;
     z-index: 1030;
     width: 100%;
     align-items: flex-start;
+    height: 100%;
+    &:not(:has(.bcl-mega-menu__container.show)) {
+      overflow: auto;
+    }
     .navbar-nav {
       width: 100%;
       margin-top: 1rem;

package/src/scss/_mega-menu.scss

@@ -193,6 +193,8 @@ ul.bcl-mega-menu__items {
   @include media-breakpoint-up(lg) {
     block-size: $mm-panel-height;
     overflow-y: auto;
+    scrollbar-color: $primary-bg-light-subtle transparent;
+    scrollbar-width: thin;
   }
   // Add space above in mobile viewport.
   @include media-breakpoint-down(lg) {
@@ -275,34 +277,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 +288,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.
@@ -372,40 +361,42 @@ ul.bcl-mega-menu__items {
       }
     }
   }
-}
-
-// 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 {
-      @include mm-item-padding(map-get($spacers, 3));
-      margin: 0;
-      color: $dark;
-      background: $primary-bg-subtle;
-      display: block;
-      font-size: 20px;
+  }
+  .__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;
       }
-    }
-    // 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;
       }
     }
   }
@@ -429,4 +420,12 @@ ul.bcl-mega-menu__items {
       transform: translateX(-50%);
     }
   }
+  .bcl-mega-menu {
+    .__submenu_body {
+      max-height: var(--oel-mega-menu-submenu-height);
+      overflow: auto;
+      scrollbar-color: $primary-bg-light-subtle transparent;
+      scrollbar-width: thin;
+    }
+  }
 }

package/src/scss/base/_colors.scss

@@ -25,6 +25,7 @@ $neutral-border-color: #b9c5e9;
 $table-hover-bg-factor: 0.1;
 
 // Background colors as before for Alerts and list-group
+$primary-bg-light-subtle: tint-color($primary, 70%);
 $primary-bg-subtle: tint-color($primary, 90%);
 $secondary-bg-subtle: tint-color($secondary, 90%);
 $success-bg-subtle: tint-color($success, 90%);

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

@@ -20,7 +20,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _title = title|default('') %}
+{%- set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
@@ -32,16 +32,16 @@
 {% set _open_item_id = open_item_id|default(0) %}
 {% set _classes = ['accordion'] %}
 {% if _flush %}
-  {% set _classes = _classes|merge(['accordion-flush']) %}
+  {%- set _classes = _classes|merge(['accordion-flush']) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes).setAttribute('id', 'accordion-' ~ _id) %}
+{%- set attributes = attributes.addClass(_classes).setAttribute('id', 'accordion-' ~ _id) %}
 
-{% if _items is not empty %}
+{%- if _items is not empty -%}
 <div
   {{ attributes }}
 >
@@ -55,52 +55,52 @@
   {%- endif -%}
 
   {% if _items|length > 1 and (_expand_button is not empty or _collapse_button is not empty) %}
-  {% set wrapper_attributes = create_attribute().addClass(['d-flex', 'justify-content-end', 'gap-3', 'mb-3']) %}
+  {%- set wrapper_attributes = create_attribute().addClass(['d-flex', 'justify-content-end', 'gap-3', 'mb-3']) -%}
   <div
     {{ wrapper_attributes }}
     >
-    {% if _expand_button is not empty %}
-      {% if _expand_button.attributes is empty %}
-        {% set _expand_button = _expand_button|merge({
+    {%- if _expand_button is not empty %}
+      {%- if _expand_button.attributes is empty %}
+        {%- set _expand_button = _expand_button|merge({
             attributes: create_attribute()
           })
         %}
-      {% endif %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with _expand_button|merge({
+      {%- endif %}
+      {%- include '@oe-bcl/bcl-button/button.html.twig' with _expand_button|merge({
         attributes: _expand_button.attributes
                     .setAttribute('data-target', 'accordion-' ~ _id)
                     .setAttribute('data-action', 'expand')
       }) only %}
-    {% endif %}
-    {% if _collapse_button is not empty %}
-      {% if _collapse_button.attributes is empty %}
-        {% set _collapse_button = _collapse_button|merge({
+    {%- endif %}
+    {%- if _collapse_button is not empty %}
+      {%- if _collapse_button.attributes is empty %}
+        {%- set _collapse_button = _collapse_button|merge({
             attributes: create_attribute()
           })
         %}
-      {% endif %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with _collapse_button|merge({
+      {%- endif %}
+      {%- include '@oe-bcl/bcl-button/button.html.twig' with _collapse_button|merge({
         attributes: _collapse_button.attributes
                     .setAttribute('data-target', 'accordion-' ~ _id)
                     .setAttribute('data-action', 'collapse')
       }) only %}
-    {% endif %}
+    {%- endif -%}
   </div>
-  {% endif %}
+  {%- endif -%}
   <div class="accordion-items-wrapper">
-    {% for _item in _items %}
-      {% set _open_item = _open_item_id == loop.index %}
-      {% set _button_classes = ['accordion-button'] %}
-      {% if not _open_item %}
-        {% set _button_classes = _button_classes|merge(['collapsed']) %}
-      {% endif %}
+    {%- for _item in _items %}
+      {%- set _open_item = _open_item_id == loop.index %}
+      {%- set _button_classes = ['accordion-button'] %}
+      {%- if not _open_item %}
+        {%- set _button_classes = _button_classes|merge(['collapsed']) %}
+      {%- endif -%}
       <div class="accordion-item">
-        {%- set _item_title_tag = _item.title_tag|default('h2') %}
-        <{{ _item_title_tag }} 
-          class="accordion-header" 
+        {%- set _item_title_tag = _item.title_tag|default('h2') -%}
+        <{{ _item_title_tag }}
+          class="accordion-header"
           id="heading-{{ _id }}-{{ loop.index }}"
         >
-          {% set button_attributes = create_attribute()
+          {%- set button_attributes = create_attribute()
                                     .addClass(_button_classes)
                                     .setAttribute('data-bs-toggle', 'collapse')
                                     .setAttribute('autocomplete', 'off')
@@ -108,34 +108,33 @@
                                     .setAttribute('aria-controls', 'collapse-' ~ _id ~ '-' ~ loop.index)
                                     .setAttribute('aria-expanded', open_item ? 'true' : 'false')
           %}
-          {% set item_title %}
+          {%- set item_title -%}
             <span>
               {{- _item.title -}}
             </span>
-          {% endset %}
-          {% include '@oe-bcl/bcl-button/button.html.twig' with {
+          {%- endset %}
+          {%- include '@oe-bcl/bcl-button/button.html.twig' with {
             label: item_title,
             clean_class: true,
             attributes: button_attributes
-          } only %}
-        </{{ _item_title_tag }}>
+          } only -%}
+        </{{ _item_title_tag }}>{# -#}
         <div
           id="collapse-{{ _id }}-{{ loop.index }}"
           class="accordion-collapse collapse{{ _open_item ? ' show' }}"
           aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
           role="region"
-        {% if not _item.stay_open and _expand_button is empty  %}
+        {% if not _item.stay_open and _expand_button is empty %}
           data-bs-parent="#accordion-{{ _id }}"
         {% endif %}
-        >
+        >{# -#}
           <div class="accordion-body">
             {%- set _content = _item.content|default('') %}
             {%- block content _content -%}
-          </div>
-        </div>
+          </div>{# -#}
+        </div>{# -#}
       </div>
-    {% endfor %}
-  </div>
+    {%- endfor -%}
+  </div>{# -#}
 </div>
-{% endif %}
-
+{%- endif -%}

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

@@ -9,7 +9,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _message = message|default('') %}
+{%- set _message = message|default('') %}
 {% set _heading = heading|default('') %}
 {% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
@@ -17,7 +17,7 @@
 {% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
 
-{% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
+{%- set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
     secondary: "info-circle-fill",
@@ -30,36 +30,36 @@
   }
 %}
 
-{% if _dismissible %}
-  {% set _classes = _classes|merge(['alert-dismissible']) %}
+{%- if _dismissible %}
+  {%- set _classes = _classes|merge(['alert-dismissible']) %}
 {% endif %}
 {% if _animated_dismiss %}
-  {% set _classes = _classes|merge(['fade', 'show']) %}
+  {%- set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
-{% set _classes = _classes|merge(['text-dark']) %}
+{%- set _classes = _classes|merge(['text-dark']) %}
 
-{% set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
+{%- set _icon_classes = ['flex-shrink-0 me-3 mt-1 align-self-start' ] %}
 
-{% if _variant != 'light' %}
-  {% set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
+{%- if _variant != 'light' %}
+  {%- set _icon_classes = _icon_classes|merge(['text-' ~ _variant]) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
+{%- set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') -%}
 
 <div {{ attributes }}>
-{% if _icon_path is not empty %}
-  {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+{%- if _icon_path is not empty %}
+  {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: _icon_name ?: _icon_names[_variant],
     size: 's',
     path: _icon_path,
     attributes: create_attribute().addClass(_icon_classes),
   } only %}
-{% endif %}
+{% endif -%}
   <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
     <div class="alert-heading h4">{{ _heading }}</div>
@@ -73,8 +73,8 @@
     type="button"
     class="btn-close"
     data-bs-dismiss="alert"
-    aria-label="Close">
-  </button>
+    aria-label="Close"
+  ></button>
 {%- endif -%}
 </div>
-
+{#--#}