desy-html 11.0.1 → 11.0.3

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
@@ -211,7 +212,140 @@ export const theme = {
     },
   },
 }
+
+const plugin = require('tailwindcss/plugin')
+
 export const plugins = [
   require('@tailwindcss/forms'),
   require('@tailwindcss/typography'),
+  function({ addUtilities, theme }) {
+    addUtilities({
+      '.c-h0': {
+        marginBottom: theme('spacing.8'),
+        fontSize: '2.5rem',
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      '.c-h1': {
+        marginBottom: theme('spacing.lg'),
+        fontSize: theme('fontSize.3xl'),
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      '.c-h2': {
+        marginBottom: theme('spacing.base'),
+        fontSize: theme('fontSize.2xl'),
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      '.c-h3': {
+        marginBottom: theme('spacing.sm'),
+        fontSize: theme('fontSize.lg'),
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      '.c-h4': {
+        marginBottom: theme('spacing.sm'),
+        fontSize: theme('fontSize.base'),
+        fontWeight: theme('fontWeight.bold'),
+        lineHeight: theme('lineHeight.tight'),
+      },
+      '.c-link': {
+        color: theme('colors.primary.base'),
+        textDecoration: 'underline',
+        '&:hover': {
+          color: theme('colors.primary.dark'),
+        },
+        '&:focus': {
+          backgroundColor: theme('colors.warning.base'),
+          boxShadow: theme('boxShadow.outline-focus'),
+          outline: 'none',
+          color: theme('colors.black'),
+        },
+      },
+      '.c-link--alert': {
+        color: theme('colors.alert.base'),
+        textDecoration: 'underline',
+        fontWeight: theme('fontWeight.semibold'),
+        '&:hover': {
+          color: theme('colors.alert.dark'),
+        },
+      },
+      '.c-link--neutral': {
+        color: theme('colors.neutral.dark'),
+        textDecoration: 'underline',
+        '&:hover': {
+          color: theme('colors.black'),
+        },
+      },
+      '.c-link--full': {
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          inset: '0',
+        },
+      },
+      '.c-paragraph-lg': {
+        marginBottom: theme('spacing.lg'),
+        fontSize: theme('fontSize.lg'),
+      },
+      '.c-paragraph-base': {
+        marginBottom: theme('spacing.base'),
+        fontSize: theme('fontSize.base'),
+      },
+      '.c-paragraph-sm': {
+        marginBottom: theme('spacing.sm'),
+        fontSize: theme('fontSize.sm'),
+      },
+      '.c-ul': {
+        marginBottom: theme('spacing.base'),
+        listStyleType: 'none',
+        '& li': {
+          position: 'relative',
+          marginBottom: theme('spacing.base'),
+          paddingLeft: theme('spacing.8'),
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: '0.625rem',
+            left: '0.25rem',
+            width: '0.375rem',
+            height: '0.375rem',
+            backgroundColor: theme('colors.black'),
+            borderRadius: '9999px',
+          },
+          '&:last-of-type': {
+            marginBottom: '0',
+          },
+        },
+      },
+      '.c-ul--no-bullets': {
+        '& li': {
+          paddingLeft: '0',
+          '&::before': {
+            display: 'none',
+          },
+        },
+      },
+      '.c-ol': {
+        marginBottom: theme('spacing.base'),
+        counterReset: 'list-counter',
+        '& li': {
+          position: 'relative',
+          marginBottom: theme('spacing.base'),
+          paddingLeft: theme('spacing.8'),
+          '&::before': {
+            counterIncrement: 'list-counter',
+            content: 'counter(list-counter) "."',
+            position: 'absolute',
+            left: '0.25rem',
+            color: theme('colors.black'),
+          },
+          '&:last-of-type': {
+            marginBottom: '0',
+          },
+        },
+      },
+    })
+  }
 ]

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,16 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <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>
+  </ul>
   <h3>v.11.0.1</h3>
   <ul class="text-sm">
     <li>Minor fixes.</li>
@@ -49,7 +59,7 @@
   <h3>v.10.2.2</h3>
   <ul class="text-sm">
     <li>Added missing params in Toggle and Notification.</li>
-    <li>Accesibility fixes.</li>
+    <li>Accessibility fixes.</li>
   </ul>
   <h3>v.10.2.1</h3>
   <ul class="text-sm">
@@ -100,7 +110,7 @@
     <li>Added FEADER logos in Footer.</li>
     <li>Tooltip now allows select content inside.</li>
     <li>Updated to latest Tailwind CSS.</li>
-    <li>Accesibility fixes.</li>
+    <li>Accessibility fixes.</li>
     <li>Minor improvements.</li>
   </ul>
   <h3>v.8.12.1</h3>
@@ -113,7 +123,7 @@
     <li>Added new logos and parameters in Footer.</li>
     <li>Added global function to open/close Tree items.</li>
     <li>Added global funcion to Notification to close it.</li>
-    <li>Accesibility fixes.</li>
+    <li>Accessibility fixes.</li>
     <li>Improvements in docs.</li>
   </ul>
   <h3>v.8.11.0</h3>
@@ -137,7 +147,7 @@
     <li>Fixed bugs in Checkboxes and Radio conditionals.</li>
     <li>Added global function to select items in Listbox.</li>
     <li>Added global function to open/close Collapsible and Dialog.</li>
-    <li>Accesibility improvements.</li>
+    <li>Accessibility improvements.</li>
     <li>Improvements in Docs.</li>
   </ul>
   <h3>v.8.9.0</h3>
@@ -162,7 +172,7 @@
   <ul class="text-sm">
     <li>Added global function to select items and subitems in Menubar and Menu horizontal.</li>
     <li>Now Tabs can have html inside their titles.</li>
-    <li>Improvements and better accesibility in docs.</li>
+    <li>Improvements and better accessibility in docs.</li>
   </ul>
   <h3>v.8.6.0</h3>
   <ul class="text-sm">
@@ -295,7 +305,7 @@
   </ul>
   <h3>v.7.0.1</h3>
   <ul class="text-sm">
-    <li>Accesibility and docs improvements.</li>
+    <li>Accessibility and docs improvements.</li>
   </ul>
   <h3>v.7.0.0</h3>
   <ul class="text-sm">
@@ -361,14 +371,14 @@
   <ul class="text-sm">
     <li>Fixed bad vertical spacing in c-form-group that affected forms in desy-angular.</li>
     <li>Minor fixes in listbox, dropdown and menubar for header modifier.</li>
-    <li>Minor accesibility improvements.</li>
+    <li>Minor accessibility improvements.</li>
   </ul>
   <h3>v.6.2.0</h3>
   <ul class="text-sm">
     <li>Added classes for base modifiers in form components to improve responsive styles.</li>
     <li>Added a listbox in Pagination to choose the items per page.</li>
     <li>Item can position the icon with a new parameter.</li>
-    <li>Accesibility fixes and improvements in Accordion history, Menu navigation, Toggle examples, Footer.</li>
+    <li>Accessibility fixes and improvements in Accordion history, Menu navigation, Toggle examples, Footer.</li>
     <li>Minor improvements in Table advanced.</li>
   </ul>
   <h3>v.6.1.0</h3>
@@ -402,7 +412,7 @@
         <li>Searchbar: improvements and example for visible label.</li>
         <li>File upload: added button styles.</li>
         <li>Tree: fixed acc. Improved examples.</li>
-        <li>Toggle examples: accesibility fixes.</li>
+        <li>Toggle examples: accessibility fixes.</li>
         <li>Button: Added new modifier class for has selection as Dropdown. Improved dropdown has selection class.</li>
         <li>Item: improved icons and text for screenreaders.</li>
         <li>Button loader: fixed a bug that makes an error when no loader.text is provided</li>
@@ -446,7 +456,7 @@
   </ul>
   <h3>v.5.0.1</h3>
   <ul class="text-sm">
-    <li>Fixed accesibility bad semantics in subnav. Added dropdown contentHtml rendering and example.</li>
+    <li>Fixed accessibility bad semantics in subnav. Added dropdown contentHtml rendering and example.</li>
   </ul>
   <h3>v.5.0.0</h3>
   <ul class="text-sm">
@@ -454,8 +464,8 @@
   </ul>
   <h3>v.4.3.0</h3>
   <ul class="text-sm">
-    <li>Added disabled and active param in menubar and fixed accesibility issues.</li>
-    <li>Accesibility fixes in menu horizontal.</li>
+    <li>Added disabled and active param in menubar and fixed accessibility issues.</li>
+    <li>Accessibility fixes in menu horizontal.</li>
     <li>Minor improvements in documentation.</li>
   </ul>
   <h3>v.4.2.1</h3>
@@ -480,7 +490,7 @@
   </ul>
   <h3>v.4.1.1</h3>
   <ul class="text-sm">
-    <li>Accesibility improvements in header.</li>
+    <li>Accessibility improvements in header.</li>
   </ul>
   <h3>v.4.1.0</h3>
   <ul class="text-sm">
@@ -508,7 +518,7 @@
     <li>Added a new parameter in table advanced to show horizontal scrollbar in large tables and to apply classes to checkboxes.</li>
     <li>Select has optgroups and new hidden parameter to mimic a placeholder.</li>
     <li>Date input can be used now as time input using new divider parameters.</li>
-    <li>Accesibility improvements in table advanced, accordion</li>
+    <li>Accessibility improvements in table advanced, accordion</li>
     <li>Fixes in notification, tooltip, modal, menu vertical, listbox, status item, </li>
     <li>Improvements in many component examples. Added inline examples for input, textarea, character count and select. Added fixed columns in table examples.</li>
   </ul>
@@ -520,21 +530,21 @@
   </ul>
   <h3>v.3.2.0</h3>
   <ul class="text-sm">
-    <li>Accesibility and validation improvements in accordion, menu vertical,  nav, pagination and tooltip.</li>
+    <li>Accessibility and validation improvements in accordion, menu vertical,  nav, pagination and tooltip.</li>
     <li>Added new headingLevel parameter to control the heading hierarchy in accordion, error-summary, fieldset, label, modal, notification and tabs.</li>
     <li>Javascript minor fixes.</li>
     <li>Updated postcss npm dependencies.</li>
   </ul>
   <h3>v.3.1.3</h3>
   <ul class="text-sm">
-    <li>Improved responsiveness and accesibility in header.</li>
+    <li>Improved responsiveness and accessibility in header.</li>
   </ul>
   <h3>v.3.1.2</h3>
   <ul class="text-sm">
     <li>Searchbar has a param to show a custom button instead of lens icon.</li>
     <li>Date input can be better customized.</li>
     <li>Fixed validation in: nav.</li>
-    <li>Accesibility improvements in: tooltip, modal, notification, button, menu vertical and listbox.</li>
+    <li>Accessibility improvements in: tooltip, modal, notification, button, menu vertical and listbox.</li>
   </ul>
   <h3>v.3.1.1</h3>
   <ul class="text-sm">
@@ -546,7 +556,7 @@
     <li>Changes in menu vertical component: Simplified html and parameters.</li>
     <li>Changes in nav and pagination components: Changed parameters, roles and arias.</li>
     <li>Improved w3c validation of all component examples.</li>
-    <li>Accesibility and bug fixes in notification, modal, table advanced, footer, header, dropdown and listboxes. </li>
+    <li>Accessibility and bug fixes in notification, modal, table advanced, footer, header, dropdown and listboxes. </li>
   </ul>
   <h3>v.3.0.3</h3>
   <ul class="text-sm">
@@ -569,7 +579,7 @@
     <li>Added an optional ".dev" class to the body to be used in development environments.</li>
     <li>Added open and close html comments in rendered html for each component.</li>
     <li>Added an optional win-node-env dependency to allow node environment variables in Windows.</li>
-    <li>Many accesibility fixes and improvements in menubar, searchbar, header and offcanvas menu, pagination, modals, nav and footer.</li>
+    <li>Many accessibility fixes and improvements in menubar, searchbar, header and offcanvas menu, pagination, modals, nav and footer.</li>
   </ul>
   <h3>v.2.1.3</h3>
   <ul class="text-sm">
@@ -581,7 +591,7 @@
     <li>Added element that acts as label for listbox and menubar for screenreaders.</li>
     <li>Select error now goes before select.</li>
     <li>Fixed bad positioned subnav dropdown in header.</li>
-    <li>Minor fixes and accesibility improvements.</li>
+    <li>Minor fixes and accessibility improvements.</li>
   </ul>
   <h3>v.2.1.1</h3>
   <ul class="text-sm">
@@ -605,13 +615,13 @@
   </ul>
   <h3>v.2.0.2</h3>
   <ul class="text-sm">
-    <li>Accesibility improvements in: menu vertical, status item, notifications, alert, modals, dialog and tabs.</li>
+    <li>Accessibility improvements in: menu vertical, status item, notifications, alert, modals, dialog and tabs.</li>
   </ul>
   <h3>v.2.0.1</h3>
   <ul class="text-sm">
     <li>Fixed radios not checked if has no conditional.</li>
     <li>Improvements in header: Added logo letters, offcanvas is now a dialog and traps focus inside. Removed extra navs.</li>
-    <li>Accesibility improvements in: pagination, offcanvas, header, menu vertical, modal, dialog, notification, alert, item, status item, tabs and focus styles.</li>
+    <li>Accessibility improvements in: pagination, offcanvas, header, menu vertical, modal, dialog, notification, alert, item, status item, tabs and focus styles.</li>
   </ul>
   <h3>v.2.0</h3>
   <ul class="text-sm">
@@ -648,7 +658,7 @@
     <li>Now package.json is being copied to build folder, in order to be published along the html files. This way we can track which version is online. You can see now the published <a href="/package.json">package.json here</a></li>
     <li>Changed rounded corners to button, button-loader and dropdown. Now is smaller and has a more squared aspect, as the input and selects.</li>
     <li>Added variants: group-hover and group-focus to display css properties. Now we can show/hide children elements on hover or focus.</li>
-    <li>Fixed bugs in accesibility in navs, and fixed a bug in dropdowns.</li>
+    <li>Fixed bugs in accessibility in navs, and fixed a bug in dropdowns.</li>
   </ul>
   <h3>v.1.8.1</h3>
   <ul class="text-sm">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "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/styles.css

@@ -14,7 +14,6 @@
 /* Framework components */
 @import "tailwindcss/components";
 /* Custom components */
-@import "./component.text.css";
 @import "../templates/components/alert/_styles.alert.css";
 @import "../templates/components/breadcrumbs/_styles.breadcrumbs.css";
 @import "../templates/components/button/_styles.button.css";
@@ -37,6 +36,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

@@ -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+)."></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)."></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)."></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."></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)."></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/header/_template.header.njk

@@ -28,7 +28,7 @@
               <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                 {% if not params.noLogo %}
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
                 {% endif %}
                 {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>

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"
@@ -152,7 +156,7 @@
     }) | indent(4)  }}
   </div>
   {% endif %}
-  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+  <p id="{{ params.idPrefix }}-status" class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark" role="status" aria-live="polite">
     <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>

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 %}

package/src/css/component.text.css

@@ -1,157 +0,0 @@
-/* ==========================================================================
-   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;
-    }
-
-    &:focus {
-      @apply bg-warning-base;
-      @apply shadow-outline-focus;
-      @apply outline-none;
-      @apply text-black;
-    }
-  }
-
-  .c-link--alert {
-    @apply text-alert-base;
-    @apply underline;
-    @apply font-semibold;
-
-    &:hover {
-      @apply text-alert-dark;
-    }
-  }
-
-  .c-link--neutral {
-    @apply text-neutral-dark;
-    @apply underline;
-
-    &:hover {
-      @apply text-black;
-    }
-  }
-
-  .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;
-      }
-    }
-  }
-}