@openeuropa/bcl-theme-default 0.4298.202511051800 → 0.4360.202601141610

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - title (string) (default: '')
@@ -22,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() %}
@@ -34,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 }}
 >
@@ -57,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')
@@ -110,35 +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 %}
-
-{% endapply %}
+{%- endif -%}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - message (string) (default: '')
   - heading (string) (default: '')
@@ -11,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 %}
@@ -19,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",
@@ -32,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>
@@ -75,9 +73,8 @@
     type="button"
     class="btn-close"
     data-bs-dismiss="alert"
-    aria-label="Close">
-  </button>
+    aria-label="Close"
+  ></button>
 {%- endif -%}
 </div>
-
-{% endapply %}
+{#--#}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {# Parameters:
   - label (string) (default: '')
   - background: (string) (default: 'primary')
@@ -13,7 +11,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _label = label|default('') %}
+{%- set _label = label|default('') %}
 {% set _background = background|default('primary') %}
 {% set _url = url|default('') %}
 {% set _title = title|default('') %}
@@ -24,18 +22,18 @@
 {% set _icon_path = icon_path|default('') %}
 {% set _classes = ['badge'] %}
 
-{% if _rounded_pill %}
-  {% set _classes = _classes|merge(['rounded-pill']) %}
+{%- if _rounded_pill %}
+  {%- set _classes = _classes|merge(['rounded-pill']) %}
 {% endif %}
 
-{% if _outline %}
-  {% set _classes = _classes|merge(['badge-outline-' ~ _background]) %}
+{%- if _outline %}
+  {%- set _classes = _classes|merge(['badge-outline-' ~ _background]) %}
 {% else %}
-  {% set _classes = _classes|merge(['text-bg-' ~ _background]) %}
+  {%- set _classes = _classes|merge(['text-bg-' ~ _background]) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
 {%- if _title is not empty -%}
@@ -44,7 +42,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-{% set _label %}
+{%- set _label %}
   {%- if _assistive_text is not empty -%}
   <span class="visually-hidden">
     {{- _assistive_text -}}
@@ -53,11 +51,11 @@
   {{- _label -}}
   {%- if _dismissible -%}
   <span class="icon--close" aria-hidden="true">
-    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
       name: "x-circle-fill",
       size: "xs",
       path: _icon_path,
-    } only %}
+    } only -%}
   </span>
   {%- endif -%}
 {% endset %}
@@ -75,5 +73,3 @@
   {{- _label -}}
 </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')
@@ -16,7 +14,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _title = title|default('') %}
+{%- set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
@@ -29,68 +27,67 @@
 {% set _fixed_height = fixed_height ?? false %}
 {% set _content_classes = content_classes|default('') %}
 
-{% set _content_class = 'bcl-banner__content' %}
+{%- set _content_class = 'bcl-banner__content' %}
 {% if _content_classes is not empty %}
-  {% set _content_class = _content_class ~ " " ~ _content_classes %}
+  {%- set _content_class = _content_class ~ " " ~ _content_classes %}
 {% endif %}
 
-{% set _title_classes = ['display-6'] %}
+{%- set _title_classes = ['display-6'] %}
 {% if _description is not empty or _link is not empty %}
-  {% set _title_classes = _title_classes|merge(['mb-3']) %}
+  {%- set _title_classes = _title_classes|merge(['mb-3']) %}
 {% endif %}
 
-{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+{%- set _title_attributes = _title_attributes.addClass(_title_classes) %}
 
-{% set _classes = ['bcl-banner'] %}
+{%- set _classes = ['bcl-banner'] %}
 
-{% if _shade %}
-  {% set _classes = _classes|merge(['shade']) %}
+{%- if _shade %}
+  {%- set _classes = _classes|merge(['shade']) %}
 {% endif %}
 
-{% if _image and not _shade %}
-  {% set _classes = _classes|merge(['overlay']) %}
+{%- if _image and not _shade %}
+  {%- set _classes = _classes|merge(['overlay']) %}
 {% endif %}
 
-{% if _hero %}
-  {% set _classes = _classes|merge(['hero']) %}
+{%- if _hero %}
+  {%- set _classes = _classes|merge(['hero']) %}
 {% endif %}
 
-{% if _full_width %}
-  {% set _classes = _classes|merge(['full-width']) %}
+{%- if _full_width %}
+  {%- set _classes = _classes|merge(['full-width']) %}
 {% endif %}
 
-{% if _fixed_height %}
-  {% set _classes = _classes|merge(['fixed-height']) %}
+{%- if _fixed_height %}
+  {%- set _classes = _classes|merge(['fixed-height']) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+{%- set attributes = attributes.addClass(_classes) -%}
 
 <div {{ attributes }}>
-  {% if _image is not empty %}
+  {%- if _image is not empty -%}
     <div class="bcl-banner__image" style="background-image:url({{ _image }})"></div>
-  {% endif %}
-  <div class="container">
+  {%- endif -%}
+  <div class="container">{# -#}
     <div class="{{ _content_class }}">
-      {% if _title is not empty %}
-        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      {%- if _title is not empty %}
+        {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
           title: _title,
           title_tag: _title_tag,
           title_link: _title_link,
           attributes: _title_attributes,
         } only %}
-      {% endif %}
-    {% if _description is not empty %}
+      {%- endif %}
+    {%- if _description is not empty -%}
       <p class="mb-4">{{ _description }}</p>
-    {% endif %}
-    {% if _link.path %}
-      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
-    {% endif %}
-    </div>
-  </div>
+    {%- endif %}
+    {%- if _link.path %}
+      {%- include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+    {%- endif -%}
+    </div>{# -#}
+  </div>{# -#}
 </div>
-
-{% endapply %}
+{#--#}

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

@@ -1,5 +1,3 @@
-{% apply spaceless %}
-
 {#
   Parameters:
   - with_header (boolean) (default: false)
@@ -25,7 +23,7 @@
   - messages_area
 #}
 
-{% set _with_header = header ?? false %}
+{%- set _with_header = header ?? false %}
 {% set _with_footer = footer ?? false %}
 {% set _with_banner = banner ?? false %}
 {% set _with_sidebar = sidebar ?? false %}
@@ -34,8 +32,8 @@
 {% set _content_type = content_type|default('') %}
 {% set _classes = ['bcl-node-type'] %}
 
-{% if _with_sidebar %}
-  {% set _col_classes = {
+{%- if _with_sidebar %}
+  {%- set _col_classes = {
     left: [
       'col-12',
       'bcl-sidebar',
@@ -45,95 +43,93 @@
     ],
   } %}
 
-  {% if _sidebar_size == 'normal' %}
-    {% set _col_classes = _col_classes|merge({
+  {%- if _sidebar_size == 'normal' %}
+    {%- set _col_classes = _col_classes|merge({
       left: _col_classes.left|merge(['col-lg-3']),
       right: _col_classes.right|merge(['col-lg-9', 'col-xxl-8']),
     }) %}
-  {% endif %}
+  {%- endif %}
 
-  {% if _sidebar_size == 'large' %}
-    {% set _col_classes = _col_classes|merge({
+  {%- if _sidebar_size == 'large' %}
+    {%- set _col_classes = _col_classes|merge({
       left: _col_classes.left|merge(['col-lg-4']),
       right: _col_classes.right|merge(['col-lg-8']),
     }) %}
-  {% endif %}
+  {%- endif %}
 {% endif %}
 
-{% if _content_type is not empty %}
-  {% set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
+{%- if _content_type is not empty %}
+  {%- set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% if _with_header %}
-  {% include '@oe-bcl/bcl-header/header.html.twig' with header only %}
-{% endif %}
+{%- if _with_header %}
+  {%- include '@oe-bcl/bcl-header/header.html.twig' with header only %}
+{% endif -%}
 
 <main {{ attributes }}>
-{% if messages is defined and messages is not empty %}
-  {% block messages_area %}
+{%- if messages is defined and messages is not empty %}
+  {%- block messages_area -%}
   <div class="container">
-    {% for message in messages %}
-    {% set message_attributes = create_attribute().addClass(['mt-lg-5', 'mt-2']) %}
-      {% include '@oe-bcl/bcl-alert/alert.html.twig' with message|merge({
+    {%- for message in messages %}
+    {%- set message_attributes = create_attribute().addClass(['mt-lg-5', 'mt-2']) %}
+      {%- include '@oe-bcl/bcl-alert/alert.html.twig' with message|merge({
         attributes: message_attributes,
       }) only %}
-    {% endfor %}
+    {%- endfor -%}
   </div>
-  {% endblock %}
+  {%- endblock %}
 {% endif %}
 
-{% if _with_banner %}
-  {% block banner %}
-    {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
-  {% endblock %}
-{% endif %}
+{%- if _with_banner %}
+  {%- block banner %}
+    {%- include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
+  {%- endblock %}
+{% endif -%}
 
-  <div class="container mt-md-4-75 mt-4">
+  <div class="container mt-md-4-75 mt-4">{# -#}
     <div class="row">
-      {% block content_row %}
-        {{ content_row }}
-      {% endblock %}
-    {% if _with_sidebar %}
+      {%- block content_row %}
+        {{- content_row }}
+      {%- endblock %}
+    {%- if _with_sidebar -%}
       <div class="{{ _col_classes.left|join(' ') }}">
-        {% block sidebar %}{% endblock %}
-      </div>
+        {%- block sidebar %}{% endblock -%}
+      </div>{# -#}
       <div class="{{ _col_classes.right|join(' ') }}">
-    {% else %}
-      {% if _landing %}
+    {%- else %}
+      {%- if _landing -%}
       <div class="col-12">
-      {% else %}
+      {%- else -%}
       <div class="col-lg-10 col-xl-9 col-xxl-8">
-      {% endif %}
-    {% endif %}
-      {% block content_top %}
-        {{ content_top }}
-      {% endblock %}
-      {% block content %}
-        {{ content }}
-      {% endblock %}
-      {% block content_bottom %}
-        {{ content_bottom }}
-      {% endblock %}
-      {% block related %}
-        {{ related }}
-      {% endblock %}
-      {% block share %}
-        {{ share }}
-      {% endblock %}
-    </div>
-  </div>
+      {%- endif %}
+    {%- endif %}
+      {%- block content_top %}
+        {{- content_top }}
+      {%- endblock %}
+      {%- block content %}
+        {{- content }}
+      {%- endblock %}
+      {%- block content_bottom %}
+        {{- content_bottom }}
+      {%- endblock %}
+      {%- block related %}
+        {{- related }}
+      {%- endblock %}
+      {%- block share %}
+        {{- share }}
+      {%- endblock -%}
+    </div>{# -#}
+  </div>{# -#}
 </main>
 
-{% block feedback %}
-  {{ feedback }}
-{% endblock %}
-
-{% if _with_footer %}
-  {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
-{% endif %}
+{%- block feedback %}
+  {{- feedback }}
+{%- endblock %}
 
-{% endapply %}
+{%- if _with_footer %}
+  {%- include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
+{% endif -%}