desy-html 17.0.0 → 17.0.1

package/docs/index.html

@@ -147,6 +147,11 @@ cd desy-html</code></pre>
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.17.0.1</h3>
+  <ul class="text-sm">
+    <li>Security fixes from deepsec.</li>
+    <li>Fixed a bug that avoid using breakpoint variants in desy-html-starter.</li>
+  </ul>
   <h3>v.17.0.0</h3>
   <ul class="text-sm">
     <li>Added Combobox component.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -40,13 +40,13 @@
     "@floating-ui/dom": "^1.6.13",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.18",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.2",
     "autoprefixer": "^10.4.21",
     "cally": "^0.8.0",
     "chokidar": "^3.6.0",
     "hex-rgb": "^5.0.0",
     "js-yaml": "^4.1.0",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.2"
   },
   "devDependencies": {
     "cross-env": "^10.1.0",

package/src/js/aria/MenuHorizontal.js

@@ -36,18 +36,16 @@ export function MenuHorizontal(aria) {
     aria.MenuHorizontal.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
       elementDeactivated.classList.remove('c-menu-horizontal__active');
-      if(elementDeactivated.querySelector('strong')) {
-        const getStrong = elementDeactivated.querySelector('strong');
-        getStrong.classList.remove('font-bold');
-        const replaceStrong = elementDeactivated.innerHTML.replace('strong', 'span');
-        elementDeactivated.innerHTML = `${replaceStrong}`;
+      const getStrong = elementDeactivated.querySelector('strong');
+      if (getStrong) {
+        getStrong.replaceWith(...getStrong.childNodes);
       }
     };
 
     window.activateItemMenuHorizontal = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
       if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
         if (activeItem) {
           const menuInstance = new aria.MenuHorizontal(menu);
           menuInstance.activateElement(activeItemId);

package/src/js/aria/MenuNavigation.js

@@ -84,6 +84,9 @@ export function MenuNavigation(aria) {
     const getAllLiElements = this.rootNode.querySelectorAll('li');
     [...getAllLiElements].forEach((element) => {
       const getElement = element.querySelector('a');
+      if (!getElement) {
+        return;
+      }
       if (getElement.id === elementActive) {
         this.wrapActiveElement(getElement);
       } else {
@@ -93,7 +96,7 @@ export function MenuNavigation(aria) {
   };
 
   aria.MenuNavigation.prototype.activateSubElement = function (menuId, elementActive) {
-    const getAllLinks = this.rootNode.querySelectorAll(`#${menuId} ul li li a`);
+    const getAllLinks = this.rootNode.querySelectorAll(`#${CSS.escape(menuId)} ul li li a`);
     [...getAllLinks].forEach((link) => {
       if(link.id === elementActive) {
         link.setAttribute('aria-current', 'page');
@@ -104,10 +107,10 @@ export function MenuNavigation(aria) {
         getElementParent.removeAttribute('aria-current');
         const mainSpanParent2 = getElementParent.querySelector('span:not(.sr-only)');
         if (mainSpanParent2) {
-          mainSpanParent2.innerHTML = mainSpanParent2.textContent;
+          unwrapStrong(mainSpanParent2);
         }
         link.removeAttribute('aria-current');
-        link.innerHTML = `${link.textContent}`;
+        unwrapStrong(link);
       }
     });
     [...getAllLinks].forEach((link) => {
@@ -129,16 +132,29 @@ export function MenuNavigation(aria) {
     elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
   };
 
+  // Unwrap the <strong> of `node` in place, preserving the rest of its markup.
+  // If there is no <strong> (e.g. a never-activated sibling with its own
+  // icon/span), the node is left untouched instead of flattened to text.
+  function unwrapStrong(node) {
+    if (!node) return;
+    const strong = node.querySelector('strong');
+    if (!strong) return;
+    while (strong.firstChild) {
+      strong.parentNode.insertBefore(strong.firstChild, strong);
+    }
+    strong.remove();
+  }
+
   aria.MenuNavigation.prototype.deactivateElement = function (elementDeactivated) {
     elementDeactivated.removeAttribute('aria-current');
     elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
-    elementDeactivated.innerHTML = elementDeactivated.textContent;
+    unwrapStrong(elementDeactivated);
   };
 
   window.activateItemMenuNavigation = function (menuId, activeItemId) {
     const menu = document.getElementById(menuId);
     if (menu) {
-      const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+      const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
       if (activeItem) {
         const menuInstance = new aria.MenuNavigation(menu);
         menuInstance.activateElement(activeItemId);
@@ -156,7 +172,7 @@ export function MenuNavigation(aria) {
   window.activateSubItemMenuNavigation = function (menuId, activeSubItemId) {
     const menu = document.getElementById(menuId);
     if (menu) {
-      const activeSubItem = document.querySelector(`#${menuId} #${activeSubItemId}`);
+      const activeSubItem = menu.querySelector('#' + CSS.escape(activeSubItemId));
       if (activeSubItem) {
         const menuInstance = new aria.MenuNavigation(menu);
         menuInstance.activateSubElement(menuId, activeSubItemId);
@@ -327,51 +343,4 @@ export function MenuNavigation(aria) {
   aria.MenuNavigation.prototype.updateKeyControls = function (useArrowKeys) {
     this.useArrowKeys = useArrowKeys;
   };
-
-  window.addEventListener(
-    'load',
-    function () {
-      var menus = document.querySelectorAll('.disclosure-nav');
-      var disclosureMenus = [];
-
-      for (var i = 0; i < menus.length; i++) {
-        disclosureMenus[i] = new DisclosureNav(menus[i]);
-      }
-
-      // listen to arrow key checkbox
-      var arrowKeySwitch = document.getElementById('arrow-behavior-switch');
-      if (arrowKeySwitch) {
-        arrowKeySwitch.addEventListener('change', function () {
-          var checked = arrowKeySwitch.checked;
-          for (var i = 0; i < disclosureMenus.length; i++) {
-            disclosureMenus[i].updateKeyControls(checked);
-          }
-        });
-      }
-
-      // fake link behavior
-      disclosureMenus.forEach((disclosureNav, i) => {
-        var links = menus[i].querySelectorAll('[href="#mythical-page-content"]');
-        var examplePageHeading = document.getElementById('mythical-page-heading');
-        for (var k = 0; k < links.length; k++) {
-          // The codepen export script updates the internal link href with a full URL
-          // we're just manually fixing that behavior here
-          links[k].href = '#mythical-page-content';
-
-          links[k].addEventListener('click', (event) => {
-            // change the heading text to fake a page change
-            var pageTitle = event.target.innerText;
-            examplePageHeading.innerText = pageTitle;
-
-            // handle aria-current
-            for (var n = 0; n < links.length; n++) {
-              links[n].removeAttribute('aria-current');
-            }
-            event.target.setAttribute('aria-current', 'page');
-          });
-        }
-      });
-    },
-    false
-  );
 }

package/src/js/aria/MenuVertical.js

@@ -33,16 +33,16 @@ export function MenuVertical(aria) {
 
     aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
-      if(elementDeactivated.querySelector('strong')) {
-        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        elementDeactivated.innerHTML = `${replaceStrong}`;
+      const getStrong = elementDeactivated.querySelector('strong');
+      if (getStrong) {
+        getStrong.replaceWith(...getStrong.childNodes);
       }
     };
 
     window.activateItemMenuVertical = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
       if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
         if (activeItem) {
           const menuInstance = new aria.MenuVertical(menu);
           menuInstance.activateElement(activeItemId);

package/src/js/aria/MenubarAction.js

@@ -24,7 +24,7 @@ export function MenubarAction(aria) {
       var msgPrefix = 'Menubar constructor argument domNode ';
 
       // Check whether domNode is a DOM element
-      if (!domNode instanceof Element) {
+      if (!(domNode instanceof Element)) {
         throw new TypeError(msgPrefix + 'is not a DOM Element.');
       }
 
@@ -218,14 +218,14 @@ export function MenubarAction(aria) {
         if (!this.isItemDisabled(this.menubarItems[index])) {
           this.menubarItems[index].domNode.focus();
           this.menubarItems[index].domNode.tabIndex = 0;
-          currentItem.tabIndex = -1;
+          currentItem.domNode.tabIndex = -1;
         } else {
           // Find the next enabled item that starts with the same character
           var nextEnabledIndex = this.findNextEnabledItemWithChar(index, char);
           if (nextEnabledIndex !== -1) {
             this.menubarItems[nextEnabledIndex].domNode.focus();
             this.menubarItems[nextEnabledIndex].domNode.tabIndex = 0;
-            currentItem.tabIndex = -1;
+            currentItem.domNode.tabIndex = -1;
           }
         }
       }
@@ -293,7 +293,7 @@ export function MenubarAction(aria) {
     };
 
     aria.MenubarAction.prototype.activateElements = function (menuId, activateElements) {
-      const getAllElements = this.domNode.querySelectorAll(`#${menuId} ul > li `);
+      const getAllElements = this.domNode.querySelectorAll(`#${CSS.escape(menuId)} ul > li `);
       const filterElements = [...getAllElements].filter((element) => element.id !== '' && element.getAttribute('role') !== 'separator');
       [...filterElements].forEach((element) => {
         if(isActive(element)) {
@@ -305,7 +305,7 @@ export function MenubarAction(aria) {
             : element.parentElement.parentElement.querySelector('a');
 
           getElementParent.classList.remove('c-menubar__button--has-selection');
-          getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+          unwrapStrong(getElementParent.firstElementChild);
           element.setAttribute('aria-checked', 'false');
           element.innerHTML = `${element.textContent}`;
         }
@@ -316,10 +316,33 @@ export function MenubarAction(aria) {
             ? element.parentElement.parentElement.parentElement.parentElement.querySelector('a')
             : element.parentElement.parentElement.querySelector('a');
           getElementParent.classList.add('c-menubar__button--has-selection');
-          getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
+          wrapStrong(getElementParent.firstElementChild);
         }
       });
 
+      // Wrap the existing children of `node` in a <strong> in place, preserving
+      // any markup the consumer put in the label (icons, SVG, spans).
+      function wrapStrong(node) {
+        if (!node || node.querySelector('strong')) return;
+        const strong = document.createElement('strong');
+        strong.className = 'font-bold';
+        while (node.firstChild) {
+          strong.appendChild(node.firstChild);
+        }
+        node.appendChild(strong);
+      }
+
+      // Unwrap the <strong> of `node` in place, preserving the rest of its markup.
+      function unwrapStrong(node) {
+        if (!node) return;
+        const strong = node.querySelector('strong');
+        if (!strong) return;
+        while (strong.firstChild) {
+          strong.parentNode.insertBefore(strong.firstChild, strong);
+        }
+        strong.remove();
+      }
+
       function isActive(element){
         const { id } = element;
         return typeof activateElements === "string"

package/src/js/aria/MenubarItemAction.js

@@ -65,8 +65,7 @@ export function MenubarItemAction(aria) {
   };
 
   aria.MenubarItemAction.prototype.handleKeydown = function (event) {
-    var tgt = event.currentTarget,
-      char = event.key,
+    var char = event.key,
       flag = false;
 
     function isPrintableCharacter (str) {
@@ -127,13 +126,6 @@ export function MenubarItemAction(aria) {
         flag = true;
         break;
 
-      case this.keyCode.ESC:
-        if (this.popupMenu) {
-          this.popupMenu.close();
-        }
-        flag = true;
-        break;
-
       default:
         if (isPrintableCharacter(char)) {
           this.menubar.setFocusByFirstCharacter(this, char);

package/src/js/aria/Nav.js

@@ -33,16 +33,16 @@ export function Nav(aria) {
 
     aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
       elementDeactivated.removeAttribute('aria-current');
-      if(elementDeactivated.querySelector('strong')) {
-        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        elementDeactivated.innerHTML = `${replaceStrong}`;
+      const getStrong = elementDeactivated.querySelector('strong');
+      if (getStrong) {
+        getStrong.replaceWith(...getStrong.childNodes);
       }
     };
 
     window.activateItemNav = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
       if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
         if (activeItem) {
           const menuInstance = new aria.Nav(menu);
           menuInstance.activateElement(activeItemId);

package/src/js/aria/PopupMenuAction.js

@@ -35,7 +35,7 @@ export function PopupMenuAction(aria) {
       msgPrefix = 'PopupMenu constructor argument domNode ';
 
     // Check whether domNode is a DOM element
-    if (!domNode instanceof Element) {
+    if (!(domNode instanceof Element)) {
       throw new TypeError(msgPrefix + 'is not a DOM Element.');
     }
 
@@ -71,7 +71,7 @@ export function PopupMenuAction(aria) {
     this.domNode.setAttribute('role', 'menu');
 
     if (!this.domNode.getAttribute('aria-labelledby') && !this.domNode.getAttribute('aria-label') && !this.domNode.getAttribute('title')) {
-      label = this.controller.domNode.innerHTML;
+      label = this.controller.domNode.textContent.trim();
       this.domNode.setAttribute('aria-label', label);
     }
 

package/src/js/aria/accordion.js

@@ -159,7 +159,8 @@ export function accordion(aria) {
       const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
       const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
       const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
-      if(target.textContent.includes('Mostrar todo') || show === true) {
+      var shouldShow = (show === null) ? target.textContent.includes('Mostrar todo') : (show === true);
+      if(shouldShow) {
         getAllElementsShow.forEach(element => {
           element.classList.add('hidden')
         })
@@ -205,17 +206,33 @@ export function accordion(aria) {
 
     window.activateItemAccordion = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
-      if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
-        if (activeItem) {
+      if (!menu) {
+        console.log('There is no accordion with this id in the document.');
+        return null;
+      }
+
+      if (Array.isArray(activeItemId)) {
+        const activeItems = activeItemId.map(function (id) {
+          return document.getElementById(id);
+        });
+        const allInMenu = activeItems.every(function (item) {
+          return item && menu.contains(item);
+        });
+        if (allInMenu) {
           activateElement(menuId, activeItemId);
-          return [menu, activeItem]
+          return [menu, activeItems];
         } else {
           console.log('There is no item with this id in the menu.');
           return null;
         }
+      }
+
+      const activeItem = document.getElementById(activeItemId);
+      if (activeItem && menu.contains(activeItem)) {
+        activateElement(menuId, activeItemId);
+        return [menu, activeItem]
       } else {
-        console.log('There is no accordion with this id in the document.');
+        console.log('There is no item with this id in the menu.');
         return null;
       }
     };
@@ -232,10 +249,10 @@ export function accordion(aria) {
     };
 
     function activateElement(menu, activeItem) {
-      const getAccordion = document.querySelector(`#${menu}`);
+      const getAccordion = document.getElementById(menu);
       const allowMultiple = getAccordion.hasAttribute('data-allow-multiple');
-      const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
-      const selectAllTriggers = document.querySelectorAll(`#${menu} .c-accordion__trigger`);
+      const allowToggle = (allowMultiple) ? allowMultiple : getAccordion.hasAttribute('data-allow-toggle');
+      const selectAllTriggers = getAccordion.querySelectorAll('.c-accordion__trigger');
       [...selectAllTriggers].forEach((trigger) => {
         const getPanel = trigger.parentElement.parentElement.querySelector('.c-accordion__panel');
         const getShowMessage = trigger.querySelector('.c-accordion__show');
@@ -255,7 +272,7 @@ export function accordion(aria) {
 
       function isActive(element){
         const { id } = element;
-        return typeof activeItem === "object" && allowToggle
+        return Array.isArray(activeItem)
           ? activeItem.includes(id)
           : id === activeItem;
       }

package/src/js/aria/alert.js

@@ -5,8 +5,15 @@ export function alert(aria) {
         throw new Error('No element found with id="' + alertId + '".');
       }
 
+      var templateNode = document.getElementById('template-' + alertId);
+      if (templateNode === null) {
+        throw new Error('No template found with id="template-' + alertId + '".');
+      }
+
+      this.alertNode.innerHTML = templateNode.innerHTML;
 
-      document.getElementById(alertId).innerHTML = document.getElementById('template-' + alertId).innerHTML;
+      // Capture the previously focused element before moving focus below.
+      this.lastFocus = document.activeElement;
 
       if (typeof focusAfterClosed === 'string') {
         this.focusAfterClosed = document.getElementById(focusAfterClosed);
@@ -32,8 +39,6 @@ export function alert(aria) {
       if (this.focusFirst) {
         this.focusFirst.focus();
       }
-
-      this.lastFocus = document.activeElement;
   }; // end Alert constructor
 
   window.openAlert = function (alertId, focusAfterClosed, focusFirst) {

package/src/js/aria/combobox.js

@@ -147,9 +147,17 @@ export function combobox(aria) {
     }
 
     if (text.length === 0 && !this.multiselectable) {
+      var hadSelection = this.selectedValue || this.hiddenInputNode.value;
       for (var i = 0; i < this.allOptions.length; i++) {
         this.allOptions[i].node.setAttribute('aria-selected', 'false');
       }
+      this.selectedValue = '';
+      this.selectedId = '';
+      this.hiddenInputNode.value = '';
+      this.hiddenInputNode.setAttribute('value', '');
+      if (hadSelection) {
+        this.dispatchCustomEvent('combobox:clear', {});
+      }
     }
 
     this._isDeleting = false;
@@ -569,10 +577,15 @@ export function combobox(aria) {
 
     var inputNode = comboboxNode.querySelector('[data-module="c-combobox-input"]');
     if (inputNode && inputNode._comboboxInstance) {
-      if (inputNode._comboboxInstance.multiselectable) {
-        inputNode._comboboxInstance.toggleOption(option);
+      var instance = inputNode._comboboxInstance;
+      if (!instance.listboxNode.contains(option)) {
+        console.log('The option does not belong to the target combobox.');
+        return null;
+      }
+      if (instance.multiselectable) {
+        instance.toggleOption(option);
       } else {
-        inputNode._comboboxInstance.selectOption(option);
+        instance.selectOption(option);
       }
       return [comboboxNode, option];
     }

package/src/js/aria/dataGrid.js

@@ -524,33 +524,34 @@ export function dataGrid(aria) {
       sortType = aria.SortType.ASCENDING;
     }
 
-    var comparator = function (row1, row2) {
-      if(row1.children[columnIndex].classList.contains('align-top') || row2.children[columnIndex].classList.contains('align-top')) {
-        return
-      }
-      var row1Text = row1.children[columnIndex].innerText;
-      var row2Text = row2.children[columnIndex].innerText;
-      var row1Value = parseInt(row1Text) ? parseInt(row1Text.replace(/[^0-9\.]+/g, '')) : row1Text
-      var row2Value = parseInt(row2Text) ? parseInt(row2Text.replace(/[^0-9\.]+/g, '')) : row2Text
-
-      var orderValue = parseInt(row1Text) ? 'numbers' : 'strings'
-
-      if (sortType === aria.SortType.ASCENDING && orderValue === 'numbers') {
-        return row1Value - row2Value;
+    function parseNumeric(text) {
+      var cleaned = text.replace(/[^0-9.\-]+/g, ''); // conserva dígitos, punto y signo
+      if (cleaned === '' || cleaned === '-' || cleaned === '.') {
+        return NaN;
       }
+      return parseFloat(cleaned);
+    }
 
-      if (sortType === aria.SortType.DESCENDING && orderValue === 'numbers') {
-        return row2Value - row1Value;
+    var comparator = function (row1, row2) {
+      var cell1 = row1.children[columnIndex];
+      var cell2 = row2.children[columnIndex];
+      if (cell1.classList.contains('align-top') || cell2.classList.contains('align-top')) {
+        return 0;
       }
+      var row1Text = cell1.innerText;
+      var row2Text = cell2.innerText;
 
-      if (sortType === aria.SortType.ASCENDING && orderValue === 'strings') {
-        return row1Value.toString().localeCompare(row2Value);
-      }
+      var row1Value = parseNumeric(row1Text);
+      var row2Value = parseNumeric(row2Text);
 
-      if (sortType === aria.SortType.DESCENDING && orderValue === 'strings') {
-        return row2Value.toString().localeCompare(row1Value);
+      var result;
+      if (!isNaN(row1Value) && !isNaN(row2Value)) {
+        result = row1Value - row2Value; // signo y cero correctos
+      } else {
+        result = row1Text.toString().localeCompare(row2Text.toString()); // fallback string
       }
 
+      return (sortType === aria.SortType.ASCENDING) ? result : -result;
     };
 
     this.sortRows(comparator);
@@ -574,9 +575,11 @@ export function dataGrid(aria) {
    *  Comparison function to sort the rows
    */
   aria.Grid.prototype.sortRows = function (compareFn) {
-    var rows = this.gridNode.querySelectorAll("tbody tr");
+    var rows = Array.prototype.slice.call(this.gridNode.querySelectorAll("tbody tr"));
     var rowWrapper = this.gridNode.querySelector('tbody');
-    var dataRows = Array.prototype.slice.call(rows, 1);
+    // La fila de filtro contiene controles de búsqueda/selección; las filas de datos no.
+    var hasFilterRow = rows.length > 0 && rows[0].querySelector('input[type="search"], select');
+    var dataRows = hasFilterRow ? rows.slice(1) : rows;
 
     dataRows.sort(compareFn);
 

package/src/js/aria/linksList.js

@@ -31,12 +31,34 @@ export function LinksList(aria) {
 
   function wrapActiveElement(elementActive) {
     const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
-    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+    wrapStrong(getText);
   };
 
   function deactivateElement(elementDeactivated) {
     const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
-    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-    getText.textContent = `${replaceStrong}`;
+    unwrapStrong(getText);
+  };
+
+  // Wrap the existing children of `node` in a <strong> in place, preserving
+  // any markup the consumer passed in item.html (icons, spans, etc.).
+  function wrapStrong(node) {
+    if (!node || node.querySelector('strong')) return;
+    const strong = document.createElement('strong');
+    strong.className = 'font-bold';
+    while (node.firstChild) {
+      strong.appendChild(node.firstChild);
+    }
+    node.appendChild(strong);
+  };
+
+  // Unwrap the <strong> of `node` in place, preserving the rest of its markup.
+  function unwrapStrong(node) {
+    if (!node) return;
+    const strong = node.querySelector('strong');
+    if (!strong) return;
+    while (strong.firstChild) {
+      strong.parentNode.insertBefore(strong.firstChild, strong);
+    }
+    strong.remove();
   };
 }

package/src/js/aria/listbox.js

@@ -463,7 +463,7 @@ export function listbox(aria) {
       return;
     }
 
-    currentItem = document.getElementById(this.activeDescendant);
+    var currentItem = document.getElementById(this.activeDescendant);
     previousItem = currentItem.previousElementSibling;
 
     if (previousItem) {
@@ -486,7 +486,7 @@ export function listbox(aria) {
       return;
     }
 
-    currentItem = document.getElementById(this.activeDescendant);
+    var currentItem = document.getElementById(this.activeDescendant);
     nextItem = currentItem.nextElementSibling;
 
     if (nextItem) {
@@ -565,7 +565,7 @@ export function listbox(aria) {
       if (isActive(element, activeItem)) {
         element.setAttribute('aria-selected', 'true');
         if (!allowMultiple && getListBoxButton.dataset.change) {
-          getListBoxButtonText.innerHTML = element.textContent;
+          getListBoxButtonText.textContent = element.textContent;
         }
       } else {
         element.setAttribute('aria-selected', 'false');

package/src/js/aria/tabs.js

@@ -229,7 +229,7 @@ export function tabs(aria) {
 
     // Detect if a tab is deletable
     function determineDeletable (event) {
-      target = event.target;
+      var target = event.target;
 
       if (target.getAttribute('data-deletable') !== null) {
         // Delete target tab
@@ -251,7 +251,8 @@ export function tabs(aria) {
     // Deletes a tab and its panel
     function deleteTab (event) {
       var target = event.target;
-      var panel = elem.getElementById(target.getAttribute('aria-controls'));
+      var controls = target.getAttribute('aria-controls');
+      var panel = elem.querySelector('#' + controls);
 
       target.parentElement.removeChild(target);
       panel.parentElement.removeChild(panel);
@@ -281,17 +282,30 @@ export function tabs(aria) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
       element.setAttribute('role', 'tab');
+      // Wrap the existing children in a <strong> in place, preserving any
+      // markup the consumer put in the label (icons, SVG, spans).
       if(element.querySelector('strong') === null) {
-        element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
+        const strong = document.createElement('strong');
+        strong.className = 'font-bold';
+        while (element.firstChild) {
+          strong.appendChild(element.firstChild);
+        }
+        element.appendChild(strong);
       }
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
       element.removeAttribute('role');
-      if(element.querySelector('strong')) {
-        const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        element.innerHTML = `${replaceStrong}`;
+      // Unwrap only the <strong> we added (direct child with font-bold),
+      // replacing it with its children. A consumer-provided <strong> nested
+      // in the label is left untouched.
+      const strong = element.querySelector(':scope > strong.font-bold');
+      if (strong) {
+        while (strong.firstChild) {
+          element.insertBefore(strong.firstChild, strong);
+        }
+        strong.remove();
       }
     }
 

package/src/js/aria/tree.js

@@ -1,3 +1,5 @@
+import { escapeHtml, safeHref } from './utils.js';
+
 export function Tree(aria) {
   /*
 *   This content is licensed according to the W3C Software License at
@@ -49,7 +51,7 @@ export function Tree(aria) {
       if (paramsRaw) {
         this.params = JSON.parse(paramsRaw);
         this.describedBy = this.params.describedBy ?? "";
-        if (this.params.fieldset.describedBy)
+        if (this.params.fieldset?.describedBy)
           this.describedBy = this.params.fieldset.describedBy;
         this.hasFieldset = this.params.fieldset ?? false;
       }
@@ -95,6 +97,32 @@ export function Tree(aria) {
     }
   };
 
+  // Serializes dynamic attributes with a strict allow-list: only well-formed data-*/aria-*
+  // names or exactly {title, role, id, class}. The [a-z0-9-] pattern rejects keys with spaces,
+  // '=', quotes, '<', '>' or '/', closing the "data-x onmouseover=..." bypass. Both the name
+  // and the value are escaped.
+  function safeAttrs(obj) {
+    var out = '';
+    var dataAria = /^(data|aria)-[a-z0-9-]+$/;
+    var exact = { title: true, role: true, id: true, class: true };
+    for (var a in obj || {}) {
+      var key = String(a).toLowerCase();
+      if (!dataAria.test(key) && exact[key] !== true) continue;
+      out += ' ' + escapeHtml(a) + '="' + escapeHtml(obj[a]) + '"';
+    }
+    return out;
+  }
+
+  // Returns the consumer's intentional HTML (node.html) or, otherwise, the escaped text.
+  function htmlOrText(node) {
+    return node.html ? node.html : escapeHtml(node.text || '');
+  }
+
+  // Suffix ' escaped-class' to concatenate after fixed classes, or '' if none.
+  function optClasses(cls) {
+    return cls ? ' ' + escapeHtml(cls) : '';
+  }
+
   function checkboxItem(item, id, name, type, params, describedBy, hasFieldset) {
     name = name || item.name || '';
     var hasHint = item.hint && (item.hint.text || item.hint.html);
@@ -105,7 +133,7 @@ export function Tree(aria) {
     // Wrapper
     var html = '<div' +
       ((params.hasDividers ? ' class="border-t border-b border-neutral-base -mb-px' : '') +
-        (item.classes ? ' ' + item.classes : '') + '"').replace('""', '') +
+        optClasses(item.classes) + '"').replace('""', '') +
       '>' +
       '<div class="relative flex items-start py-xs">';
 
@@ -120,13 +148,13 @@ export function Tree(aria) {
         ((item.isIndeterminate && item.indeterminateChecked)
           ? ' c-checkboxes__indeterminate-active'
           : '') + '"' +
-        ' id="' + id + '-input"' +
-        ' name="' + name + '"' +
+        ' id="' + escapeHtml(id) + '-input"' +
+        ' name="' + escapeHtml(name) + '"' +
         (type === 'checkbox' ? ' type="checkbox" role="checkbox"' : ' type="radio"') +
-        ' value="' + (item.value || '') + '"' +
+        ' value="' + escapeHtml(item.value || '') + '"' +
         (item.checked ? ' checked' : '') +
         (item.disabled ? ' disabled' : '') +
-        (itemDescribed ? ' aria-describedby="' + itemDescribed + '"' : '') +
+        (itemDescribed ? ' aria-describedby="' + escapeHtml(itemDescribed) + '"' : '') +
         (params.errorMessage ? ' aria-invalid="true"' : '');
 
       if (item.isIndeterminate || item.indeterminateChecked) {
@@ -136,62 +164,58 @@ export function Tree(aria) {
           '"';
       }
       html += '>' +
-        '</div>' +            // cierre flex items-center
+        '</div>' +            // closes flex items-center
         '<div class="flex-1 pt-0.5 leading-5">';
 
       // Label
       var lblCls = (item.label && item.label.classes)
         ? item.label.classes
         : 'block relative -top-xs -left-8 pl-8 py-xs';
-      html += '<label for="' + id + '-input" class="' + lblCls + '">';
-      html += item.html ? item.html : (item.text || '');
+      html += '<label for="' + escapeHtml(id) + '-input" class="' + escapeHtml(lblCls) + '">';
+      html += htmlOrText(item);
       html += '</label>';
 
       // Hint
       if (hasHint) {
-        html += '<div id="' + itemHintId + '"' +
-          (item.hint.classes ? ' class="' + item.hint.classes + '"' : '') +
+        html += '<div id="' + escapeHtml(itemHintId) + '"' +
+          (item.hint.classes ? ' class="' + escapeHtml(item.hint.classes) + '"' : '') +
           '>';
-        html += item.hint.html || item.hint.text;
+        html += htmlOrText(item.hint);
         html += '</div>';
       }
-      html += '</div>';  // cierre flex-1
+      html += '</div>';  // closes flex-1
     }
 
     // Navigation branch
     if (type === 'navigation') {
       if (item.href) {
         html += '<a' +
-          (id ? ' id="' + id + '-link"' : '') +
-          ' href="' + item.href + '"' +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
+          ' href="' + escapeHtml(safeHref(item.href)) + '"' +
           ' class="block px-xs focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black' +
-          (item.classes ? ' ' + item.classes : '') +
+          optClasses(item.classes) +
           (!item.disabled ? ' hover:text-primary-base hover:underline'
             : ' no-underline pointer-events-none') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           (item.active ? ' aria-current="page"' : '') +
           (item.disabled ? ' aria-disabled="true" tabindex="-1"' : '') +
-          (item.target ? ' target="' + item.target + '"' : '') +
+          (item.target ? ' target="' + escapeHtml(item.target) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</a>';
       } else {
         html += '<span' +
-          (id ? ' id="' + id + '-link"' : '') +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
           ' class="block px-xs' +
-          (item.classes ? ' ' + item.classes : '') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          optClasses(item.classes) + '"' +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</span>';
       }
     }
@@ -209,10 +233,8 @@ export function Tree(aria) {
           '<div class="flex items-center relative ' +
           'focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black text-left' +
-          (itemNode.classes ? ' ' + itemNode.classes : '') + '"';
-        for (var a in itemNode.attributes || {}) {
-          html += ' ' + a + '="' + itemNode.attributes[a] + '"';
-        }
+          optClasses(itemNode.classes) + '"';
+        html += safeAttrs(itemNode.attributes);
         html += '>' +
           '<span class="c-tree__icon absolute top-3 -left-4 flex items-center ' +
           'w-4 h-2.5 text-primary-base font-bold ' +
@@ -238,10 +260,8 @@ export function Tree(aria) {
 
     if (itemNode.sub && itemNode.sub.items) {
       html += '<ul role="group" class="c-tree__itemgroup' +
-        (itemNode.sub.classes ? ' ' + itemNode.sub.classes : '') + '"';
-      for (var b in itemNode.sub.attributes || {}) {
-        html += ' ' + b + '="' + itemNode.sub.attributes[b] + '"';
-      }
+        optClasses(itemNode.sub.classes) + '"';
+      html += safeAttrs(itemNode.sub.attributes);
       html += '>';
 
       if (!lazyRendering || onlySub) {
@@ -259,7 +279,7 @@ export function Tree(aria) {
             : '';
 
           html += '<li class="' + clsBase + '" ' +
-            'id="' + subId + '" ' +
+            'id="' + escapeHtml(subId) + '" ' +
             'role="treeitem" ' +
             'data-module="c-tree__item"' +
             expanded +
@@ -279,10 +299,10 @@ export function Tree(aria) {
             );
           } else {
             html += '<div class="block' +
-              (subitem.classes ? ' ' + subitem.classes : '') +
+              optClasses(subitem.classes) +
               (subitem.active ? ' font-bold' : '') +
               '"' +
-              (subitem.title ? ' title="' + subitem.title + '"' : '') +
+              (subitem.title ? ' title="' + escapeHtml(subitem.title) + '"' : '') +
               (subitem.active ? ' aria-current="page"' : '') +
               '>';
             if (subitem.active) {

package/src/js/aria/treeitem.js

@@ -149,7 +149,7 @@ export function Treeitem(aria) {
       return;
     }
 
-    if (event.shift) {
+    if (event.shiftKey) {
       if (isPrintableCharacter(char)) {
         printableCharacter(this);
       }
@@ -158,14 +158,18 @@ export function Treeitem(aria) {
       switch (event.keyCode) {
         case this.keyCode.SPACE:
         case this.keyCode.RETURN:
-          const typeOfInput = getCurrentCheckbox.type
-          if (typeOfInput === 'radio') {
-            for (let item of getAllChildrenOfTree) {
-              item.checked = false
+          // Navigation trees have no checkbox/radio: skip the toggle but still
+          // swallow the key so it doesn't propagate.
+          if (getCurrentCheckbox) {
+            const typeOfInput = getCurrentCheckbox.type
+            if (typeOfInput === 'radio') {
+              for (let item of getAllChildrenOfTree) {
+                item.checked = false
+              }
             }
+            getCurrentCheckbox.checked = getCurrentCheckbox.checked === true ? false : true
+            targetElement.setAttribute('aria-checked', getCurrentCheckbox.checked ? 'true' : 'false');
           }
-          getCurrentCheckbox.checked = getCurrentCheckbox.checked === true ? false : true
-          targetElement.setAttribute('aria-checked', getCurrentCheckbox.checked ? 'true' : 'false');
           flag = true;
           break;
 
@@ -279,11 +283,16 @@ export function Treeitem(aria) {
   };
 
   function arrayOrSingleElement(elementId, itemsIds, open) {
+    // Resolve the navigation flag once so every branch (array and single) treats
+    // tree-navigation items consistently.
+    const getElement = document.getElementById(elementId);
+    const isTreeNavigation = getElement ? getElement.hasAttribute('data-tree-navigation') : false;
+
     if (typeof itemsIds === 'object' && open !== null) {
       itemsIds.forEach((item) => {
         const selectItem = document.querySelector(`#${elementId} #${item}`)
         if (selectItem) {
-          activateElement(selectItem, open)
+          activateElement(selectItem, open, isTreeNavigation)
         } else {
           returnMessage()
         }
@@ -291,8 +300,6 @@ export function Treeitem(aria) {
     }
 
     if (typeof itemsIds !== 'object' && open !== null) {
-      const getElement = document.querySelector(`#${elementId}`);
-      const isTreeNavigation = getElement.hasAttribute('data-tree-navigation');
       const selectItem = document.querySelector(`#${elementId} #${itemsIds}`)
       if (selectItem) {
         activateElement(selectItem, open, isTreeNavigation)
@@ -305,7 +312,7 @@ export function Treeitem(aria) {
       itemsIds.forEach((item) => {
         const selectItem = document.querySelector(`#${elementId} #${item[0]}`)
         if (selectItem) {
-          activateElement(selectItem, item[1])
+          activateElement(selectItem, item[1], isTreeNavigation)
         } else {
           console.log('There is no item with this id in the document.');
           return null;
@@ -319,8 +326,10 @@ export function Treeitem(aria) {
       item.setAttribute('aria-expanded', 'true');
       if (treeNav) {
         const getLink = item.querySelector('a')
-        getLink.setAttribute("aria-current", "page");
-        getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+        if (getLink) {
+          getLink.setAttribute("aria-current", "page");
+          getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+        }
       }
       recursiveParent(item)
     } else {

package/src/js/aria/utils.js

@@ -125,6 +125,27 @@ export function utils(aria) {
   };
 }
 
+var HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+// Escapes & " ' < > for safe use in HTML content and attributes. null/undefined -> ''.
+export function escapeHtml(value) {
+  if (value === null || value === undefined) return '';
+  return String(value).replace(/[&<>"']/g, function (c) { return HTML_ESCAPES[c]; });
+}
+
+// Neutralizes dangerous schemes in href via an allow-list: relative URLs or http/https/mailto/tel.
+// Strips C0 control chars (tab/LF/CR included) before probing, since the browser's URL parser would
+// remove them and reconstruct schemes like "java\tscript:". Any other scheme returns '#'.
+export function safeHref(value) {
+  if (value === null || value === undefined) return '';
+  var v = String(value);
+  var probe = v.replace(/[\u0000-\u001F]/g, '').trim().toLowerCase();
+  var scheme = probe.match(/^([a-z][a-z0-9+.-]*):/);
+  if (!scheme) return v;
+  var allowed = { http: true, https: true, mailto: true, tel: true };
+  return allowed[scheme[1]] === true ? v : '#';
+}
+
 // Function to convert ISO date(s) to DD-MM-YYYY format
 export function formatDateToDDMMYYYY(isoDate) {
   if (!isoDate) return '';

package/vite.config.js

@@ -40,6 +40,13 @@ function serveFileWithMimeType(filePath, res) {
   return true;
 }
 
+// Checks that the resolved filePath stays inside baseDir (defense against path traversal)
+function isPathInside(filePath, baseDir) {
+  if (!filePath) return false;
+  const resolved = path.resolve(filePath);
+  return resolved === baseDir || resolved.startsWith(baseDir + path.sep);
+}
+
 // Helper functions
 function kebabCaseToPascalCase(value) {
   return value
@@ -705,10 +712,34 @@ function customNunjucksPlugin() {
         });
       });
 
+      // Per-asset base directories used to validate containment of served
+      // paths. Each middleware confines requests to its own folder (not cwd),
+      // so a `..` in the URL cannot escape into sensitive files.
+      const brandingDir = path.resolve(process.cwd(), 'branding');
+      const publicImagesDir = path.resolve(process.cwd(), 'public/images');
+      const brandingLogosDir = path.resolve(process.cwd(), 'branding/logos');
+      const brandingImagesDir = path.resolve(process.cwd(), 'branding/images');
+
       // Middleware to serve branding assets in development
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/')) {
-          const filePath = path.join(process.cwd(), req.url);
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);             // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
+          }
+          // Strip the /branding/ prefix and resolve relative to brandingDir,
+          // so any `..` is contained to the branding folder (not cwd).
+          const relPath = decodedUrl.slice('/branding/'.length);
+          const filePath = path.resolve(brandingDir, '.' + path.sep + relPath);
+          if (!isPathInside(filePath, brandingDir)) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
+          }
           if (serveFileWithMimeType(filePath, res)) return;
         }
         next();
@@ -733,30 +764,37 @@ function customNunjucksPlugin() {
       // Middleware to serve branding assets from /images/ in development
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/images/')) {
-          let filePath = path.join(process.cwd(), 'public', req.url);
-
-          if (!fs.existsSync(filePath)) {
-            const fileName = path.basename(req.url);
-            
-            // Search in branding/logos (including subdirectories like eu/)
-            const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-            const foundInLogos = findFileRecursive(brandingLogosPath, fileName);
-            
-            if (foundInLogos) {
-              filePath = foundInLogos;
-            } else {
-              // Search in branding/images
-              const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-              const foundInImages = findFileRecursive(brandingImagesPath, fileName);
-              if (foundInImages) {
-                filePath = foundInImages;
-              }
-            }
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);            // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
           }
-
-          if (fs.existsSync(filePath)) {
-            if (serveFileWithMimeType(filePath, res)) return;
+          // connect does not normalize req.url, so reject any literal `..`
+          // before touching the filesystem.
+          if (decodedUrl.includes('..')) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
           }
+
+          // Primary lookup: strip the /images/ prefix, resolve under
+          // public/images and validate containment there.
+          const relPath = decodedUrl.slice('/images/'.length);
+          let filePath = path.resolve(publicImagesDir, '.' + path.sep + relPath);
+          if (isPathInside(filePath, publicImagesDir) && serveFileWithMimeType(filePath, res)) return;
+
+          // Fallbacks: search branding folders by basename, each candidate
+          // validated against its own base before serving.
+          const fileName = path.basename(decodedUrl);
+
+          const foundInLogos = findFileRecursive(brandingLogosDir, fileName);
+          if (foundInLogos && isPathInside(foundInLogos, brandingLogosDir) && serveFileWithMimeType(foundInLogos, res)) return;
+
+          const foundInImages = findFileRecursive(brandingImagesDir, fileName);
+          if (foundInImages && isPathInside(foundInImages, brandingImagesDir) && serveFileWithMimeType(foundInImages, res)) return;
         }
         next();
       });
@@ -765,10 +803,9 @@ function customNunjucksPlugin() {
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/logos/')) {
           const fileName = path.basename(req.url);
-          const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-          const filePath = findFileRecursive(brandingLogosPath, fileName);
+          const filePath = findFileRecursive(brandingLogosDir, fileName);
 
-          if (serveFileWithMimeType(filePath, res)) return;
+          if (isPathInside(filePath, brandingLogosDir) && serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -777,10 +814,9 @@ function customNunjucksPlugin() {
       middlewares.use(async (req, res, next) => {
         if (req.url.startsWith('/branding/images/')) {
           const fileName = path.basename(req.url);
-          const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-          const filePath = findFileRecursive(brandingImagesPath, fileName);
+          const filePath = findFileRecursive(brandingImagesDir, fileName);
 
-          if (serveFileWithMimeType(filePath, res)) return;
+          if (isPathInside(filePath, brandingImagesDir) && serveFileWithMimeType(filePath, res)) return;
         }
         next();
       });
@@ -959,7 +995,10 @@ export default defineConfig({
     watch: {
       ignored: ['!**/docs/**', '!**/src/templates/**']
     },
-    host: '0.0.0.0',
+    // 0.0.0.0 exposes the dev-server to the whole network; default to localhost
+    // only. Set DEV_HOST=0.0.0.0 in environments like Replit, where allowedHosts
+    // includes the specific *.replit.dev host needed for that public access.
+    host: process.env.DEV_HOST || '127.0.0.1',
     allowedHosts: [
       '82c7d68c-1131-4db5-bf36-165d8f8b1d98-00-2b55tnaqky432.worf.replit.dev',
       'localhost'