desy-html 7.0.1 → 7.1.1

package/README.md

@@ -11,7 +11,7 @@ See live examples of desy-html components: [https://desy.aragon.es/](https://des
 * Run `npm install` first.
 * Use `npm run dev` to generate CSS from `src/styles.css` to `/dist/styles.css`,  listen to changes in njk, css and html, and browser-sync reload.
 * Use `npm run prod` to generate CSS, Purge it and Minify it.
-* Dependencies: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS and CSSnano configed in PostCSS
+* Dependencies: Node.js v16.17.1, Tailwind CSS and AutoPrefixer configed in PostCSS
 
 ### How do I start a project that uses desy-html components? ###
 
@@ -26,7 +26,7 @@ To start a new project that uses desy-html as dependency, don't use this repo, u
 * desy-html is maintained by a team at SDA Servicios Digitales de Aragón (Spain). If you want to know more about desy-html, please email any of the commiters.
 
 ### Software license ###
-Unless stated otherwise, the codebase is released under the [https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12](EUPL-1.2 License). This covers both the codebase and any sample code in the documentation.
+Unless stated otherwise, the codebase is released under the [EUPL-1.2 License](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12). This covers both the codebase and any sample code in the documentation.
 
 ### Thanks ###
 

package/docs/index.html

@@ -38,6 +38,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.7.1.1</h3>
+  <ul class="text-sm">
+    <li>Fixed a bug in checkboxes and radios. Now the conditionals work properly.</li>
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.7.1.0</h3>
+  <ul class="text-sm">
+    <li>Added class to Tabs to better display them inline with scroll if needed in mobile.</li>
+  </ul>
   <h3>v.7.0.1</h3>
   <ul class="text-sm">
     <li>Accesibility and docs improvements.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/checkBoxes.js

@@ -0,0 +1,36 @@
+export function CheckBox(aria) {
+
+  class CheckBox {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
+        item.addEventListener('click', this.toggleConditional.bind(this))
+      })
+    }
+
+    toggleConditional(event) {
+      const { target: { nodeName, checked, type }, target } = event
+      if(nodeName === 'INPUT' && type === 'checkbox') {
+        this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
+          if(item.contains(target) && checked){
+            item.classList.remove('c-checkboxes__conditional-hidden')
+            item.classList.add('c-checkboxes__conditional-active')
+          }
+
+          if(item.contains(target) && !checked){
+            item.classList.remove('c-checkboxes__conditional-active')
+            item.classList.add('c-checkboxes__conditional-hidden')
+          }
+        })
+      }
+    }
+  }
+
+  const checkBoxesElements = document.querySelectorAll('[data-module="c-checkboxes"]');
+  checkBoxesElements.forEach((checkBoxElement) => {
+    if (checkBoxElement.querySelector('.c-checkboxes__conditional')) {
+      new CheckBox(checkBoxElement);
+    }
+  });
+
+}

package/src/js/aria/radioButton.js

@@ -0,0 +1,34 @@
+export function RadioButton(aria) {
+
+  class RadioButton {
+    constructor(domNode) {
+      this.rootEl = domNode;
+      this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
+        item.addEventListener('click', this.toggleConditional.bind(this))
+      })
+    }
+
+    toggleConditional(event) {
+      const { target: { nodeName, type }, target } = event
+      if(type === 'radio' && nodeName === 'INPUT') {
+        this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
+          if(item.contains(target)){
+            item.classList.remove('c-radios__conditional-hidden')
+            item.classList.add('c-radios__conditional-active')
+          } else {
+            item.classList.remove('c-radios__conditional-active')
+            item.classList.add('c-radios__conditional-hidden')
+          }
+        })
+      }
+    }
+  }
+
+  const radioElements = document.querySelectorAll('[data-module="c-radios"]');
+  radioElements.forEach((radioElement) => {
+    if (radioElement.querySelector('.c-radios__conditional')) {
+      new RadioButton(radioElement);
+    }
+  });
+
+}

package/src/js/aria/tabs.js

@@ -278,13 +278,12 @@ export function tabs(aria) {
 
     function addActiveClass(element) {
       //Add active class to current tab
-      element.classList.add("lg:bg-white", "lg:border-neutral-base", "lg:border-b-0", "lg:rounded-t", "no-underline");
-
+      element.classList.add("c-tabs__link--is-active");
       element.firstElementChild.classList.add("text-black");
     }
 
     function removeActiveClass(element) {
-      element.classList.remove("lg:bg-white", "lg:border-neutral-base", "lg:border-b-0", "lg:rounded-t", "no-underline");
+      element.classList.remove("c-tabs__link--is-active");
       element.firstElementChild.classList.remove("text-black");
     }
   }

package/src/js/desy-html.js

@@ -15,6 +15,8 @@ import { Tree } from './aria/tree.js';
 import { Toggle } from './aria/toggle.js';
 import { Collapsible } from './aria/collapsible.js';
 import { notification } from './aria/notification.js';
+import { RadioButton } from './aria/radioButton.js';
+import { CheckBox } from './aria/checkBoxes.js';
 
 
 export function accordionComponent(aria) {
@@ -367,3 +369,11 @@ export function treeComponent(aria) {
 export function notificationComponent(aria) {
   notification(aria);
 }
+
+export function radioButtonComponent(aria) {
+  RadioButton(aria);
+}
+
+export function checkBoxComponent(aria) {
+  CheckBox(aria);
+}

package/src/js/index.js

@@ -17,7 +17,9 @@ import {
   tooltipComponent,
   toggleComponent,
   treeComponent,
-  notificationComponent
+  notificationComponent,
+  radioButtonComponent,
+  checkBoxComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -36,6 +38,8 @@ tooltipComponent(aria);
 toggleComponent(aria);
 treeComponent(aria);
 notificationComponent(aria);
+radioButtonComponent(aria);
+checkBoxComponent(aria);
 
 document.querySelectorAll('.c-code-snippet__button').forEach(button => {
   button.addEventListener('click', (event) => {

package/src/templates/components/checkboxes/_styles.checkboxes.css

@@ -16,4 +16,16 @@
       @apply h-base !important;
     }
   }
+
+  .c-checkboxes__conditional-active {
+    .c-checkboxes__conditional-item{
+      @apply block;
+    }
+  }
+
+  .c-checkboxes__conditional-hidden {
+    .c-checkboxes__conditional-item{
+      @apply hidden;
+    }
+  }
 }

package/src/templates/components/checkboxes/_template.checkboxes.njk

@@ -49,7 +49,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-checkboxes"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% for item in params.items %}
       {% if item %}
@@ -70,7 +70,7 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {% else %} c-checkboxes__conditional-hidden {% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
           <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
@@ -102,7 +102,7 @@
         </div>
       </div>
       {% if item.conditional.html %}
-        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
           {{ item.conditional.html | safe }}
         </div>
       {% endif %}

package/src/templates/components/notification/_template.notification.njk

@@ -59,7 +59,7 @@
     {% if params.isDismissible %}
       <div class="absolute top-0 right-0 p-sm">
         <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
-          <svg class="pointer-events-none " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+          <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
         </button>
       </div>
     {% endif %}

package/src/templates/components/radios/_examples.radios.njk

@@ -353,6 +353,7 @@
         {
           "value": "email",
           "text": "Email",
+          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
           }
@@ -389,6 +390,7 @@
         {
           "value": "email",
           "text": "Email",
+          "checked": true,
           "classes": "mr-sm",
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
@@ -434,7 +436,6 @@
         {
           "value": "phone",
           "text": "Phone",
-          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
           }
@@ -442,6 +443,7 @@
         {
           "value": "text",
           "text": "Text message",
+          "checked": true,
           "conditional": {
             "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
           }
@@ -514,4 +516,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/radios/_styles.radios.css

@@ -16,4 +16,16 @@
       @apply h-base !important;
     }
   }
+
+  .c-radios__conditional-active {
+    .c-radios__conditional-item {
+      @apply block;
+    }
+  }
+
+  .c-radios__conditional-hidden {
+    .c-radios__conditional-item {
+      @apply hidden;
+    }
+  }
 }

package/src/templates/components/radios/_template.radios.njk

@@ -43,11 +43,11 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
+  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
     {% for item in params.items %}
       {% if item %}
-        <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+        <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}{%- if item.conditional.html %} c-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
           {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
           {%- if item.id -%}
             {%- set id = item.id -%}
@@ -97,7 +97,7 @@
             </div>
           </div>
           {% if item.conditional.html %}
-          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base" id="{{ conditionalId }}">
+          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
             {{ item.conditional.html | safe }}
           </div>
           {% endif %}

package/src/templates/components/tabs/_examples.tabs.njk

@@ -169,6 +169,198 @@
       ]
     }
   },
+  {
+    "name": "with many items",
+    "data": {
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-example-many-items",
+      "items": [
+        {
+          "text": "Tab 1",
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 2",
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 3",
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 4",
+          "panel": {
+            "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 5",
+          "panel": {
+            "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 6",
+          "panel": {
+            "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 7",
+          "panel": {
+            "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 8",
+          "panel": {
+            "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 9",
+          "panel": {
+            "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 10",
+          "panel": {
+            "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 11",
+          "panel": {
+            "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 12",
+          "panel": {
+            "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with scroll in mobile",
+    "description": "Using .c-tabs--scroll makes the mobile appearance to be the same as desktop. See it in action in small breakpoints.",
+    "data": {
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-example-scroll-mobile",
+      "classes": "c-tabs--scroll",
+      "items": [
+        {
+          "text": "Tab 1",
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 2",
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 3",
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 4",
+          "panel": {
+            "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 5",
+          "panel": {
+            "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 6",
+          "panel": {
+            "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 7",
+          "panel": {
+            "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 8",
+          "panel": {
+            "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 9",
+          "panel": {
+            "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "text": "Tab 10",
+          "panel": {
+            "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 11",
+          "panel": {
+            "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "text": "Tab 12",
+          "panel": {
+            "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with html in tabs stacked",
+    "data": {
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-example-html-stacked",
+      "classes": "c-tabs--scroll",
+      "items": [
+        {
+          "html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z" fill="currentColor"/><path d="M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z" fill="currentColor"/></svg><span class="block mx-auto">Tab 1</span></span>',
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
+          }
+        },
+        {
+          "html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z" fill="currentColor"/><path d="M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z" fill="currentColor"/><path d="M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z" fill="currentColor"/></svg><span class="block mx-auto">Tab 2</span></span>',
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        },
+        {
+          "html": '<span class="block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-8 h-8 mx-auto mb-sm" aria-label="Archivo" role="img" focusable="false"><path d="M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z" fill="currentColor"/><path d="M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z" fill="currentColor"/><path d="M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z" fill="currentColor"/></svg><span class="block mx-auto">Tab 3</span></span>',
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "with classes applied",
     "description": "Show code to display the classes applied in html",

package/src/templates/components/tabs/_styles.tabs.css

@@ -3,8 +3,53 @@
    ========================================================================== */
 
 @layer components {
-  .c-tabs{
-    @apply -mb-0.5;
+  .c-tabs__heading {
+    @apply lg:sr-only mb-sm text-sm;
   }
 
+  .c-tabs__tabs {
+    @apply lg:relative lg:w-full lg:flex lg:snap-x lg:overflow-x-auto lg:-mb-0.5;
+  }
+
+  .c-tabs__link {
+    @apply relative flex-none flex items-center py-sm lg:px-lg lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent lg:snap-start;
+  }
+
+  .c-tabs__link--is-active {
+    @apply lg:bg-white lg:border-neutral-base lg:border-b-0 lg:rounded-t no-underline;
+  }
+
+  .c-tabs__panel {
+    @apply p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base;
+  }
+
+  .c-tabs__panel-heading {
+    @apply lg:sr-only;
+  }
+
+  .c-tabs--scroll {
+    .c-tabs__heading {
+      @apply sr-only;
+    }
+
+    .c-tabs__tabs {
+      @apply relative w-full flex snap-x overflow-x-auto -mb-0.5;
+    }
+
+    .c-tabs__link {
+      @apply snap-start py-sm px-lg py-base border;
+    }
+
+    .c-tabs__link--is-active {
+      @apply bg-white border-neutral-base border-b-0 rounded-t no-underline;
+    }
+
+    .c-tabs__panel {
+      @apply mt-0;
+    }
+
+    .c-tabs__panel-heading {
+      @apply sr-only;
+    }
+  }
 }

package/src/templates/components/tabs/_template.tabs.njk

@@ -4,27 +4,28 @@
 
 <!-- tabs -->
 <div {%- if params.id %} id="{{params.id}}"{% endif %} class="c-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="c-tabs">
-  {% if params.headingLevel == "1" %}
-    <h1 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h1>
-  {% elseif params.headingLevel == "2" %}
-    <h2 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h2>
-  {% elseif params.headingLevel == "3" %}
-    <h3 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h3>
-  {% elseif params.headingLevel == "4" %}
-    <h4 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h4>
-  {% elseif params.headingLevel == "5" %}
-    <h5 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h5>
-  {% else %}
-    <h2 class="lg:hidden mb-sm text-sm">{{ params.title | default ("Contenido") }}</h2>
-  {% endif %}
+  <div class="c-tabs__heading">
+    {% if params.headingLevel == "1" %}
+      <h1>{{ params.title | default ("Contenido") }}</h1>
+    {% elseif params.headingLevel == "2" %}
+      <h2>{{ params.title | default ("Contenido") }}</h2>
+    {% elseif params.headingLevel == "3" %}
+      <h3>{{ params.title | default ("Contenido") }}</h3>
+    {% elseif params.headingLevel == "4" %}
+      <h4>{{ params.title | default ("Contenido") }}</h4>
+    {% elseif params.headingLevel == "5" %}
+      <h5>{{ params.title | default ("Contenido") }}</h5>
+    {% else %}
+      <h2>{{ params.title | default ("Contenido") }}</h2>
+    {% endif %}
+  </div>
   {% if(params.items | length) %}
-  <div class="c-tabs lg:flex lg:flex-wrap" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
+  <div class="c-tabs__tabs" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
     {% for item in params.items %}
       {% if item %}
         {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
         {% set tabPanelId = "tab-" + id %}
-          <button class="c-tabs__link group relative flex items-center py-sm lg:px-lg lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent
-          {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
+          <button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
             role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
             {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
             {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
@@ -40,22 +41,24 @@
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
       {% set tabPanelId = "tab-" + id %}
-      <div class="p-base mt-base lg:mt-0 border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
+      <div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
         {%- if loop.index > 1 %} hidden=""{% endif %}
         {% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {% if params.headingLevel == "1" %}
-            <h2 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
-          {% elseif params.headingLevel == "2" %}
-            <h3 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
-          {% elseif params.headingLevel == "3" %}
-            <h4 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
-          {% elseif params.headingLevel == "4" %}
-            <h5 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
-          {% elseif params.headingLevel == "5" %}
-            <h6 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
-          {% else %}
-            <h3 class="lg:sr-only inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
-          {% endif %}
+          <div class="c-tabs__panel-heading">
+            {% if params.headingLevel == "1" %}
+              <h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
+            {% elseif params.headingLevel == "2" %}
+              <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
+            {% elseif params.headingLevel == "3" %}
+              <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
+            {% elseif params.headingLevel == "4" %}
+              <h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
+            {% elseif params.headingLevel == "5" %}
+              <h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
+            {% else %}
+              <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
+            {% endif %}
+          </div>
           {% if item.panel.html %}
             {{ item.panel.html | safe }}
           {% else %}