desy-html 11.0.2 → 11.0.4

package/config/tailwind.config.js

@@ -1,5 +1,6 @@
 import { fontFamily as _fontFamily } from 'tailwindcss/defaultTheme'
 
+
 // Helper funcions from: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
 const round = (num) =>
   num

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

@@ -2,10 +2,7 @@
 <!--  _ds.section.color.njk -->
 
 <div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Color"
-  }) }}
+  
   <div class="grid lg:grid-cols-4 grid-rows-12 gap-base">
 
     {# 1 #}

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

@@ -2,14 +2,11 @@
 <!--  _ds.section.spacing.njk -->
 
 <div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Espaciado"
-  }) }}
+  
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Espaciado preferido de desy-html"
+    title: "Espaciado para elementos"
   }) }}
   <div class="prose">
     <p>
@@ -130,7 +127,7 @@
   <div class="pb-xl"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Espaciado preferido de desy-html para width"
+    title: "Espaciado para anchuras"
   }) }}
   <div class="prose max-w-none">
     <p>
@@ -225,13 +222,13 @@
   <div class="pb-xl"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Espaciado adicional de desy-html para max-width y max-height"
+    title: "Espaciado máximo"
   }) }}
   <div class="prose max-w-none">
     <p>
       desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
     </p>
-    <table>
+    <table class="text-left">
       <thead>
         <tr>
           <th>Nombre</th>

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

@@ -5,9 +5,7 @@
 
 <div class="container mx-auto">
   {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Breakpoints y retícula"
-  }) }}
+
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
@@ -35,10 +33,7 @@
   }) }}
   <p class="c-paragraph-base">Usamos un sistema basado en 4 columnas, con un espacio de <code>gap-lg</code> - <code>1.75rem</code> - <code>28px / 16px</code>. Utiliza las combinaciones reflejadas a continuación. Evita utilizar el layout a una columna (100%) para textos en pantallas de gran tamaño, afectaría negativamente a la legibilidad.</p>
   <div class="pb-lg"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Pantallas grandes. Escritorio"
-  }) }}
+  <h3 class="c-h4">Pantallas grandes. Escritorio</h3>
   {% call componentExample()  %}
     {% include "ds/_ds.example.layout-sidebar.njk" %}
   {% endcall %}
@@ -50,10 +45,8 @@
   {{ showHtmlFromFile("ds/_ds.example.layout-escritorio.njk") }}
   <div class="pb-xl"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Pantallas pequeñas. Móvil"
-  }) }}
-  <div class="grid lg:grid-cols-2 gap-xl -mt-base">
+  <h3 class="c-h4">Pantallas pequeñas. Móvil</h3>
+  <div class="grid lg:grid-cols-2 gap-xl">
     {% call componentExample()  %}
       {% include "ds/_ds.example.layout-movil.njk" %}
     {% endcall %}

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

@@ -4,23 +4,20 @@
 <!--  _ds.section.textos.njk -->
 
 <div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Textos"
-  }) }}
+  
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Fuentes"
   }) }}
   <p>La tipografía principal es <a class="c-link" href="https://fonts.google.com/specimen/Open+Sans?sidebar.open&selection.family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700">Open Sans</a> en sus pesos Bold, Semibold y Regular. Utilizar en la medida de lo posible, el código que ofrece Google Fonts para integrarlo.</p>
-  <div class="pb-lg"></div>
+  <div class="pb-2xl"></div>
   {{ DSSubsectionTitle({
     title: "Estilos de base"
   }) }}
-  <ul>
+  <ul class="divide-y divide-neutral-base ">
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
         <dt>
           <p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
         </dt>
@@ -30,7 +27,7 @@
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
         <dt>
           <p>Esto es un <strong>strong</strong> en un texto.</p>
         </dt>
@@ -40,7 +37,7 @@
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
         <dt>
           <p>Esto es un <em>em</em> en un texto.</p>
         </dt>
@@ -50,15 +47,17 @@
       </dl>
     </li>
   </ul>
+  <div class="pb-2xl"></div>
+
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Encabezados"
   }) }}
-  <ul>
+  <ul class="divide-y divide-neutral-base">
     <li>
-      <dl class="flex flex-wrap items-center mb-8">
+      <dl class="flex flex-wrap items-center my-base">
         <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h0">Encabezado 0 (h1)</p>
+          <p class="c-h0 mb-base">Encabezado 0 (h1)</p>
         </dt>
         <dd class="lg:flex-1">
           <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>50px</code> - margin-bottom: <code>.mb-8</code> - <code>2rem</code> - <code>32px</code></p>
@@ -66,9 +65,9 @@
       </dl>
     </li>
     <li>
-      <dl class="flex flex-wrap items-center mb-8">
+      <dl class="flex flex-wrap items-center my-base">
         <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h1">Encabezado 1 (h1)</p>
+          <p class="c-h1 mb-base">Encabezado 1 (h1)</p>
         </dt>
         <dd class="lg:flex-1">
           <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>37.5px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
@@ -76,9 +75,9 @@
       </dl>
     </li>
     <li>
-      <dl class="flex flex-wrap items-center mb-8">
+      <dl class="flex flex-wrap items-center my-base">
         <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h2">Encabezado 2 (h2)</p>
+          <p class="c-h2 mb-base">Encabezado 2 (h2)</p>
         </dt>
         <dd class="lg:flex-1">
           <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>30px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
@@ -86,9 +85,9 @@
       </dl>
     </li>
     <li>
-      <dl class="flex flex-wrap items-center mb-8">
+      <dl class="flex flex-wrap items-center my-base">
         <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h3">Encabezado 3 (h3)</p>
+          <p class="c-h3 mb-base">Encabezado 3 (h3)</p>
         </dt>
         <dd class="lg:flex-1">
           <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>22.5px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5rem</code> - <code>8px</code></p>
@@ -96,9 +95,9 @@
       </dl>
     </li>
     <li>
-      <dl class="flex flex-wrap items-center mb-8">
+      <dl class="flex flex-wrap items-center my-4">
         <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h4">Encabezado 4 (h4)</p>
+          <p class="c-h4 mb-base">Encabezado 4 (h4)</p>
         </dt>
         <dd class="lg:flex-1">
           <p class="text-neutral-dark text-sm"><code>.c-h4</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
@@ -106,98 +105,102 @@
       </dl>
     </li>
   </ul>
+  <div class="pb-2xl"></div>
+
   {{ DSSubsectionTitle({
     title: "Enlaces"
   }) }}
-  <ul>
+  <ul class="divide-y divide-neutral-base">
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p>Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
-          <a href="#" class="c-link c-link--full">Contenedor con enlace</a>
+          <a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
         </dd>
       </dl>
     </li>
   </ul>
+  <div class="pb-2xl"></div>
+
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Párrafos"
   }) }}
-  <ul>
+  <ul class="divide-y divide-neutral-base">
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Párrafo destacados. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
+        <dd class="col-span-2 lg:col-span-2">
           <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
         </dd>
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2">
           <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
         </dt>
@@ -207,13 +210,15 @@
       </dl>
     </li>
   </ul>
+  <div class="pb-2xl"></div>
+
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Listas"
   }) }}
-  <ul>
+  <ul class="divide-y divide-neutral-base">
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
         <dt class="col-span-2 lg:col-span-2">
           <ul class="c-ul">
             <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
@@ -227,7 +232,7 @@
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
         <dt class="col-span-2 lg:col-span-2">
           <ul class="c-ul c-ul--no-bullets">
             <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
@@ -241,7 +246,7 @@
       </dl>
     </li>
     <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
         <dt class="col-span-2 lg:col-span-2">
           <ul class="c-ol">
             <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
@@ -255,5 +260,7 @@
       </dl>
     </li>
   </ul>
+  <div class="pb-2xl"></div>
+
   {{ showHtmlFromFile("ds/_ds.example.textos.njk") }}
 </div>

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

@@ -4,10 +4,7 @@
 <!--  _ds.section.typography.njk -->
 
 <div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Tipografía en texto renderizado"
-  }) }}
+
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({

package/docs/estilos.html

@@ -2,18 +2,36 @@
 {% set activePage = "page-estilos" %}
 {% extends "_template.default.njk" %}
 
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+
+
 {% block contentBlock %}
 <div class="pb-lg"></div>
 <div class="c-h1">Estilos</div>
 <div class="pb-lg"></div>
+{{ DSSectionTitle({
+  title: "Color"
+}) }}
 {% include "ds/_ds.section.color.njk" %}
 <div class="pb-2xl"></div>
+{{ DSSectionTitle({
+  title: "Espaciado"
+}) }}
 {% include "ds/_ds.section.espaciado.njk" %}
 <div class="pb-2xl"></div>
+{{ DSSectionTitle({
+  title: "Breakpoints y retícula"
+}) }}
 {% include "ds/_ds.section.layout.njk" %}
 <div class="pb-2xl"></div>
+{{ DSSectionTitle({
+  title: "Textos"
+}) }}
 {% include "ds/_ds.section.textos.njk" %}
 <div class="pb-2xl"></div>
+{{ DSSectionTitle({
+  title: "Tipografía en texto renderizado"
+}) }}
 {% include "ds/_ds.section.typography.njk" %}
 <div class="pb-2xl"></div>
 {% endblock %}

package/docs/index.html

@@ -38,6 +38,17 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.11.0.4</h3>
+  <ul class="text-sm">
+    <li>Fixed previous responsive with Tailwind CSS breakpoint prefixes.</li>
+    <li>Changed footer text size in mobile.</li>
+  </ul>
+  <h3>v.11.0.3</h3>
+  <ul class="text-sm">
+    <li>Text styles are now responsive with Tailwind CSS breakpoint prefixes.</li>
+    <li>Added Table modifier to not stack cells in mobile.</li>
+    <li>Accessibility fixes.</li>
+  </ul>
   <h3>v.11.0.2</h3>
   <ul class="text-sm">
     <li>Accessibility fixes.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.0.2",
+  "version": "11.0.4",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

package/src/css/component.text.css

@@ -2,156 +2,157 @@
    text.css
    ========================================================================== */
 
-@layer components {
-  .c-h0 {
-    @apply mb-8;
-    font-size: 2.5rem;
-    @apply font-bold;
-    @apply leading-tight;
-  }
-
-  .c-h1 {
-    @apply mb-lg;
-    @apply text-3xl;
-    @apply font-bold;
-    @apply leading-tight;
-  }
-
-  .c-h2 {
-    @apply mb-base;
-    @apply text-2xl;
-    @apply font-bold;
-    @apply leading-tight;
-  }
-
-  .c-h3 {
-    @apply mb-sm;
-    @apply text-lg;
-    @apply font-bold;
-    @apply leading-tight;
-  }
-
-  .c-h4 {
-    @apply mb-sm;
-    @apply text-base;
-    @apply font-bold;
-    @apply leading-tight;
-  }
-
-  .c-link {
-    @apply text-primary-base;
-    @apply underline;
-
-    &:hover {
-      @apply text-primary-dark;
+   @layer components {
+    .c-h0 {
+      @apply mb-8;
+      font-size: 2.5rem;
+      @apply font-bold;
+      @apply leading-tight;
     }
-
-    &:focus {
-      @apply bg-warning-base;
-      @apply shadow-outline-focus;
-      @apply outline-none;
-      @apply text-black;
+  
+    .c-h1 {
+      @apply mb-lg;
+      @apply text-3xl;
+      @apply font-bold;
+      @apply leading-tight;
     }
-  }
-
-  .c-link--alert {
-    @apply text-alert-base;
-    @apply underline;
-    @apply font-semibold;
-
-    &:hover {
-      @apply text-alert-dark;
+  
+    .c-h2 {
+      @apply mb-base;
+      @apply text-2xl;
+      @apply font-bold;
+      @apply leading-tight;
     }
-  }
-
-  .c-link--neutral {
-    @apply text-neutral-dark;
-    @apply underline;
-
-    &:hover {
-      @apply text-black;
+  
+    .c-h3 {
+      @apply mb-sm;
+      @apply text-lg;
+      @apply font-bold;
+      @apply leading-tight;
     }
-  }
-
-  .c-link--full {
-    &::after {
-      content:"";
-      @apply absolute;
-      @apply inset-0;
+  
+    .c-h4 {
+      @apply mb-sm;
+      @apply text-base;
+      @apply font-bold;
+      @apply leading-tight;
     }
-  }
-
-  .c-paragraph-lg {
-    @apply mb-lg;
-    @apply text-lg;
-  }
-
-  .c-paragraph-base {
-    @apply mb-base;
-    @apply text-base;
-  }
-
-  .c-paragraph-sm {
-    @apply mb-sm;
-    @apply text-sm;
-  }
-
-  .c-ul {
-    @apply mb-base;
-    @apply list-none;
-
-    li {
-      @apply relative;
-      @apply mb-base;
-      @apply pl-8;
-
-      &::before {
-        content: "";
-        @apply absolute;
-        top: .625rem;
-        left: .25rem;
-        @apply w-1.5;
-        @apply h-1.5;
-        @apply bg-black;
-        @apply rounded-full;
+  
+    .c-link {
+      @apply text-primary-base;
+      @apply underline;
+  
+      &:hover {
+        @apply text-primary-dark;
       }
-
-      &:last-of-type {
-        @apply mb-0;
+  
+      &:focus {
+        @apply bg-warning-base;
+        @apply shadow-outline-focus;
+        @apply outline-none;
+        @apply text-black;
       }
     }
-  }
-
-  .c-ul--no-bullets {
-    li {
-      @apply pl-0;
-
-      &::before {
-        @apply hidden;
+  
+    .c-link--alert {
+      @apply text-alert-base;
+      @apply underline;
+      @apply font-semibold;
+  
+      &:hover {
+        @apply text-alert-dark;
       }
     }
-  }
-
-  .c-ol {
-    @apply mb-base;
-    counter-reset: list-counter;
-
-    li {
-      @apply relative;
-      @apply mb-base;
-      @apply pl-8;
-
-      &::before {
-        counter-increment: list-counter;
-        content: counter(list-counter) ".";
-        @apply absolute;
-        left: .25rem;
+  
+    .c-link--neutral {
+      @apply text-neutral-dark;
+      @apply underline;
+  
+      &:hover {
         @apply text-black;
       }
-
-      &:last-of-type {
-        @apply mb-0;
+    }
+  
+    .c-link--full {
+      &::after {
+        content:"";
+        @apply absolute;
+        @apply inset-0;
+      }
+    }
+  
+    .c-paragraph-lg {
+      @apply mb-lg;
+      @apply text-lg;
+    }
+  
+    .c-paragraph-base {
+      @apply mb-base;
+      @apply text-base;
+    }
+  
+    .c-paragraph-sm {
+      @apply mb-sm;
+      @apply text-sm;
+    }
+  
+    .c-ul {
+      @apply mb-base;
+      @apply list-none;
+  
+      li {
+        @apply relative;
+        @apply mb-base;
+        @apply pl-8;
+  
+        &::before {
+          content: "";
+          @apply absolute;
+          top: .625rem;
+          left: .25rem;
+          @apply w-1.5;
+          @apply h-1.5;
+          @apply bg-black;
+          @apply rounded-full;
+        }
+  
+        &:last-of-type {
+          @apply mb-0;
+        }
+      }
+    }
+  
+    .c-ul--no-bullets {
+      li {
+        @apply pl-0;
+  
+        &::before {
+          @apply hidden;
+        }
+      }
+    }
+  
+    .c-ol {
+      @apply mb-base;
+      counter-reset: list-counter;
+  
+      li {
+        @apply relative;
+        @apply mb-base;
+        @apply pl-8;
+  
+        &::before {
+          counter-increment: list-counter;
+          content: counter(list-counter) ".";
+          @apply absolute;
+          left: .25rem;
+          @apply text-black;
+        }
+  
+        &:last-of-type {
+          @apply mb-0;
+        }
       }
     }
   }
-}
+  

package/src/css/styles.css

@@ -37,6 +37,7 @@
 @import "../templates/components/select/_styles.select.css";
 @import "../templates/components/spinner/_styles.spinner.css";
 @import "../templates/components/skip-link/_styles.skip-link.css";
+@import "../templates/components/table/_styles.table.css";
 @import "../templates/components/table-advanced/_styles.table-advanced.css";
 @import "../templates/components/tabs/_styles.tabs.css";
 @import "../templates/components/toggle/_styles.toggle.css";

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

@@ -148,7 +148,8 @@
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
       },
       "logo": {
-        "type": "FEADER"
+        "type": "FEADER",
+        "url": "https://www.fondoseuropeos.hacienda.gob.es/sitios/dgfc/es-ES/paginas/feader.aspx"
       },
       "classes": "lg:mt-48"
     }

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

@@ -1,5 +1,5 @@
 <!-- footer -->
-<footer class="py-base bg-neutral-lighter border-t border-neutral-base text-xs lg:text-sm
+<footer class="py-base bg-neutral-lighter border-t border-neutral-base text-base lg:text-sm
 text-neutral-dark {{ params.classes if params.classes }}"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="container mx-auto px-base {{ params.containerClasses if params.containerClasses }}">
@@ -85,17 +85,17 @@ text-neutral-dark {{ params.classes if params.classes }}"
             {% else %}
               <p><a href="{%- if params.urlFeder or params.logo.url %}{%- if params.logo.url %} {{ params.logo.url }} {%- else -%} {{ params.urlFeder }}{% endif %} {%- else -%} https://www.aragon.es/-/fondos-europeos-aragon {% endif %}" class="inline-block text-sm c-link no-underline" title="Más información sobre los Fondos Europeos">
                 {% if params.logo.type == 'UE' %}
-                  <span class="inline-block c-footer__logo c-footer__logo--ue" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--ue"><span class="sr-only">Cofinanciado por la Unión Europea.</span></span>
                 {% elseif params.logo.type == 'FSE+'  %}
-                  <span class="inline-block c-footer__logo c-footer__logo--fse" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Social Europeo Plus (FSE+). Ministerio de Agricultura y Economía Social."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--fse"><span class="sr-only">Cofinanciado por la Unión Europea. Fondo Social Europeo Plus (FSE+). Ministerio de Agricultura y Economía Social.</span></span>
                 {% elseif params.logo.type == 'FEDER'  %}
-                  <span class="inline-block c-footer__logo c-footer__logo--feder" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Ministerio de Hacienda."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--feder"><span class="sr-only">Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Ministerio de Hacienda.</span></span>
                 {% elseif params.logo.type == 'FEADER'  %}
-                  <span class="inline-block c-footer__logo c-footer__logo--feader" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Europeo Agrario de Desarrollo Rural (FEADER). Ministerio de Agricultura, Pesca y Alimentación."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--feader"><span class="sr-only">Cofinanciado por la Unión Europea. Fondo Europeo Agrario de Desarrollo Rural (FEADER). Ministerio de Agricultura, Pesca y Alimentación.</span></span>
                 {% elseif params.logo.type == 'plurifondo'  %}
-                  <span class="inline-block c-footer__logo c-footer__logo--plurifondo" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Plurifondo. Gobierno de España."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--plurifondo"><span class="sr-only">Cofinanciado por la Unión Europea. Plurifondo. Gobierno de España.</span></span>
                 {% else %}
-                  <span class="inline-block c-footer__logo c-footer__logo--feder" role="img" aria-label="Logotipo Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Ministerio de Hacienda."></span>
+                  <span class="inline-block c-footer__logo c-footer__logo--feder"><span class="sr-only">Cofinanciado por la Unión Europea. Fondo Europeo de Desarrollo Regional (FEDER). Ministerio de Hacienda.</span></span>
                 {% endif %}
               </a></p>
             {% endif %}

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -888,34 +888,57 @@
   },
   {
     "name": "con ids individuales",
-    "description": 'Mostrar código para ver los <code>id</code> aplicados',
     "data": {
-      "idPrefix": "with-individual-ids-example",
+      "idPrefix": "ids-example",
       "items": [
         {
-          "href": "#",
-          "text": "Opción 1",
-          "id": "option-A"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "id": "option-B"
-        },
-        {
-          "href": "#",
-          "text": "Opción 3",
-          "id": "option-C"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4",
-          "id": "option-D"
+          "text": "Definidos explícitamente",
+          "id": "ids-item-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1",
+                "id": "ids-subitem-1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "id": "ids-subitem-2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3",
+                "id": "ids-subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "ids-item-1"
+            }
+          }
         },
         {
-          "href": "#",
-          "text": "Opción 5",
-          "id": "option-E"
+          "text": "Generados automáticamente",
+          "id": "ids-item-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "ids-item-2"
+            }
+          }
         }
       ],
       "attributes": {

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -47,9 +47,9 @@
             {%- else -%}
               {%- set subId = "sub-" + id + "-" + loop.index -%}
             {%- endif %}
-            {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+            {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% else %} id="subitem-{{ loop.index }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
           <li>
-            <a {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
+            <a {%- if subitem.active %} aria-current="page"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
               {{ subitem.html | safe if subitem.html else subitem.text }}
               {% if subitem.disabled %}
               <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>

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

@@ -100,6 +100,10 @@
         "id": params.id + "-listbox",
         "name": params.id + "-listbox",
         "text": "Página " + params.items[activePosition].text,
+        "label": {
+          "text": "Selecciona una página",
+          "classes": "sr-only"
+        },
         "classes": "c-select--sm c-select--transparent",
         "formGroup": {
           "classes": "-mt-sm mb-0 mr-xs"

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

@@ -203,7 +203,7 @@
     "description": 'Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.',
     "data": {
       "caption": "Caption 1: Meses y pagos",
-      "captionClasses": "sticky left-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
+      "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
       "firstCellIsHeader": true,
       "head": [
         {
@@ -393,6 +393,64 @@
       }
     }
   },
+  {
+    "name": "tabla no responsive",
+    "description": 'Usa la clase modificadora <code>.c-table--no-responsive</code> junto al parámetro <code>wrapper</code> para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.',
+    "data": {
+      "classes": "c-table--no-responsive w-full",
+      "caption": "Caption 1: Meses y pagos",
+      "captionClasses": "mb-base font-bold text-left text-lg",
+      "firstCellIsHeader": true,
+      "head": [
+        {
+          "text": "Mes de pago",
+          "classes": "lg:whitespace-nowrap"
+        },
+        {
+          "text": "Primer pago",
+          "classes": "lg:whitespace-nowrap lg:text-right"
+        },
+        {
+          "text": "Segundo pago",
+          "classes": "lg:whitespace-nowrap lg:text-right"
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "Enero"
+          },
+          {
+            "text": "85€",
+            "classes": "text-center",
+            "rowspan": 2,
+            "colspan": 2
+          }
+        ],
+        [
+          {
+            "text": "Febrero"
+          }
+        ],
+        [
+          {
+            "text": "Marzo"
+          },
+          {
+            "text": "165€",
+            "classes": "lg:text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "lg:text-right"
+          }
+        ]
+      ],
+      "wrapper": {
+        "classes": "relative overflow-x-auto pb-base"
+      }
+    }
+  },
   {
     "name": "table con columnas sticky",
     "description": 'En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.',

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

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   _styles.table.css
+   ========================================================================== */
+
+@layer components {
+  .c-table--no-responsive {
+    tr {
+      @apply table-row;
+    }
+
+    td {
+      @apply table-cell;
+      @apply before:content-none;
+    }
+
+    th{
+      @apply before:content-none;
+    }
+  }
+}

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

@@ -30,7 +30,7 @@
             {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
           {% endset %}
           {% if loop.first and params.firstCellIsHeader %}
-      <th scope="row" class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
           >{{ cell.html | safe if cell.html else cell.text }}</th>
           {% else %}