desy-html 17.0.0 → 17.0.2

package/docs/ds/_ds.example.combobox.njk

@@ -1,90 +1,177 @@
 {% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
 
-<div class="grid lg:grid-cols-4 gap-xl mb-lg items-end">
+<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
   <div>
     {{ componentCombobox({
-      "id": "ds-combobox-default",
-      "name": "ds-combobox-default",
-      "label": {
-        "text": "Provincia"
-      },
-      "items": [
-        {
-          "text": "Huesca"
-        },
-        {
-          "text": "Zaragoza"
-        },
-        {
-          "text": "Teruel"
-        }
+      id: "ds-combobox-default",
+      name: "ds-combobox-default",
+      label: { text: "Esto es un label" },
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
       ]
     }) }}
   </div>
   <div>
     {{ componentCombobox({
-      "id": "ds-combobox-disabled",
-      "name": "ds-combobox-disabled",
-      "label": {
-        "text": "Provincia"
-      },
-      "disabled": true,
-      "items": [
-        {
-          "text": "Huesca"
-        },
-        {
-          "text": "Zaragoza"
-        },
-        {
-          "text": "Teruel"
-        }
+      id: "ds-combobox-disabled",
+      name: "ds-combobox-disabled",
+      label: { text: "Esto es un label" },
+      disabled: true,
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
       ]
     }) }}
   </div>
   <div>
     {{ componentCombobox({
-      "id": "ds-combobox-hint",
-      "name": "ds-combobox-hint",
-      "label": {
-        "text": "Provincia"
-      },
-      "hint": {
-        "text": "Selecciona tu provincia"
-      },
-      "items": [
-        {
-          "text": "Huesca"
-        },
-        {
-          "text": "Zaragoza"
-        },
-        {
-          "text": "Teruel"
-        }
+      id: "ds-combobox-hint",
+      name: "ds-combobox-hint",
+      label: { text: "Esto es un label" },
+      hint: { text: "Esto es un hint" },
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
       ]
     }) }}
   </div>
-  <div class="self-end">
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-error",
+      name: "ds-combobox-error",
+      label: { text: "Esto es un label" },
+      errorMessage: { text: "Esto es un mensaje de error" },
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-hint-error",
+      name: "ds-combobox-hint-error",
+      label: { text: "Esto es un label" },
+      hint: { text: "Esto es un hint" },
+      errorMessage: { text: "Esto es un mensaje de error" },
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+</div>
+
+<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-placeholder",
+      name: "ds-combobox-placeholder",
+      label: { text: "Esto es un label" },
+      placeholder: "Escribe para buscar...",
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-default-value",
+      name: "ds-combobox-default-value",
+      label: { text: "Esto es un label" },
+      defaultValue: "Zaragoza",
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza", selected: true },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-autocomplete-list",
+      name: "ds-combobox-autocomplete-list",
+      label: { text: "Esto es un label" },
+      autocomplete: "list",
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-multiselect",
+      name: "ds-combobox-multiselect[]",
+      label: { text: "Esto es un label" },
+      multiselect: true,
+      placeholder: "Selecciona opciones",
+      items: [
+        { text: "Huesca", selected: true },
+        { text: "Zaragoza", selected: true },
+        { text: "Teruel" }
+      ]
+    }) }}
+  </div>
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-sm",
+      name: "ds-combobox-sm",
+      classes: "c-combobox--sm",
+      label: { text: "Esto es un label", classes: "text-sm" },
+      items: [
+        { text: "Opción 1" },
+        { text: "Opción 2", selected: true },
+        { text: "Opción 3" }
+      ]
+    }) }}
+  </div>
+</div>
+
+<div class="grid lg:grid-cols-2 gap-xl mb-lg items-end">
+  <div>
+    {{ componentCombobox({
+      id: "ds-combobox-multiselect-extended",
+      name: "ds-combobox-multiselect-extended[]",
+      label: { text: "Esto es un label" },
+      multiselect: true,
+      autocomplete: "list",
+      placeholder: "Selecciona varias opciones",
+      items: [
+        { text: "Huesca", selected: true },
+        { text: "Zaragoza", selected: true },
+        { text: "Teruel" },
+        { text: "Barcelona" },
+        { text: "Madrid" },
+        { text: "Valencia" }
+      ]
+    }) }}
+  </div>
+  <div>
     {{ componentCombobox({
-      "id": "ds-combobox-error",
-      "name": "ds-combobox-error",
-      "label": {
-        "text": "Provincia"
+      id: "ds-combobox-inline",
+      name: "ds-combobox-inline",
+      classes: "lg:flex-1",
+      formGroup: {
+        classes: "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
-      "errorMessage": {
-        "text": "Selecciona una provincia válida"
+      label: {
+        text: "Esto es un label",
+        classes: "lg:py-sm lg:mt-sm"
       },
-      "items": [
-        {
-          "text": "Huesca"
-        },
-        {
-          "text": "Zaragoza"
-        },
-        {
-          "text": "Teruel"
-        }
+      items: [
+        { text: "Huesca" },
+        { text: "Zaragoza" },
+        { text: "Teruel" }
       ]
     }) }}
   </div>

package/docs/ds/_ds.section.forms.njk

@@ -61,13 +61,4 @@
   }) }}
   {% include "ds/_ds.example.tree.njk" %}
   <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Listbox por defecto"
-  }) }}
-  {% include "ds/_ds.example.listbox-default.njk" %}
-  <div class="pb-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Listbox variaciones"
-  }) }}
-  {% include "ds/_ds.example.listbox-variaciones.njk" %}
 </div>

package/docs/index.html

@@ -147,6 +147,16 @@ 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.2</h3>
+  <ul class="text-sm">
+    <li>Improvements in Combobox.</li>
+    <li>Removed Listbox from Catálogo as its deprecated.</li>
+  </ul>
+  <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.2",
   "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);
     }