desy-html 8.5.0 → 8.7.0

package/docs/_macro.example-render.njk

@@ -301,7 +301,7 @@ import componentTree %}
           }
         })  %}
             {{ componentTabs({
-              "tablistAriaLabel": "Tab example",
+              "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
               "idPrefix": "tab-" + loop.index,
               "classes": "c-tabs--scroll",
               "items": [

package/docs/_macro.show-code-from-file.njk

@@ -30,23 +30,23 @@ import componentTabs %}
   {% endset %}
   {% call componentDetails({
     "summary": {
-      "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + filePath + '</span>',
+      "html": 'Mostrar código<span class="sr-only"> del ejemplo: ' + filePath + '</span>',
       "classes": "c-link text-sm"
     }
   })  %}
       {{ componentTabs({
-        "tablistAriaLabel": "Tab example",
+        "tablistAriaLabel": "Ejemplo de código de: " + filePath,
         "idPrefix": "tab-" + filePath | replace("/", "-") | replace("_", "") | replace(".", "-"),
         "classes": "c-tabs--scroll",
         "items": [
           {
-            "text": "Nunjucks macro",
+            "html": 'Nunjucks macro<span class="sr-only"> del ejemplo: '+ filePath +'</span>',
             "panel": {
               "html": nunjucksContent | trim
             }
           },
           {
-            "text": "HTML",
+            "html": 'HTML<span class="sr-only"> del ejemplo: '+ filePath +'</span>',
             "panel": {
               "html": htmlContent | trim
             }

package/docs/_macro.show-html-from-file.njk

@@ -20,17 +20,18 @@ import componentTabs %}
   {% endset %}
   {% call componentDetails({
     "summary": {
-      "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + filePath + '</span>',
+      "html": 'Mostrar código<span class="sr-only"> del ejemplo: ' + filePath + '</span>',
       "classes": "c-link text-sm"
     }
   })  %}
       {{ componentTabs({
-        "tablistAriaLabel": "Tab example",
+        "tablistAriaLabel": "Ejemplo de código de: " + filePath,
         "idPrefix": "tab-" + filePath | replace("/", "-") | replace("_", "") | replace(".", "-"),
         "classes": "c-tabs--scroll",
+        "headingLevel": 4,
         "items": [
           {
-            "text": "HTML",
+            "html": 'HTML<span class="sr-only"> del ejemplo: '+ filePath +'</span>',
             "panel": {
               "html": htmlContent | trim
             }

package/docs/ds/_ds.example.layout-escritorio.njk

@@ -1,35 +1,35 @@
-<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg" role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
   <div class="col-span-2 lg:col-span-4">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">100%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
   </div>
   <div class="col-span-2 lg:col-span-2">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">50%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
   </div>
   <div class="col-span-2 lg:col-span-2">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">50%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
   </div>
   <div class="col-span-2 lg:col-span-3">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">75%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
   <div class="col-span-2 lg:col-span-3">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">75%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
   <div class="col-span-2 lg:col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">25%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
   </div>
 </div>

package/docs/ds/_ds.example.layout-movil.njk

@@ -1,11 +1,11 @@
-<div class="grid grid-cols-2 gap-lg col-span-1">
+<div class="grid grid-cols-2 gap-lg col-span-1" role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
   <div class="col-span-2">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">100%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
   </div>
   <div class="col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">50%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
   </div>
   <div class="col-span-1">
-    <span class="bg-neutral-light h-12 flex items-center justify-center">50%</span>
+    <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
   </div>
 </div>

package/docs/ds/_ds.example.layout-sidebar.njk

@@ -1,4 +1,4 @@
-<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-lg" role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
   <div class="col-span-2 lg:col-span-3">
     Zona de contenido (75% en escritorio, 100% en móvil)
   </div>

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

@@ -1,4 +1,4 @@
-<div class="prose prose-base max-w-none mx-auto">
+<div class="prose prose-base max-w-none mx-auto" lang="en">
   <p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
   <p>
     By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you

package/docs/ds/_ds.macro.code-snippet.njk

@@ -15,12 +15,12 @@
     }
   })  %}
     {{ componentTabs({
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de código de: " + params,
       "idPrefix": "tab-" + params,
       "classes": "c-tabs--scroll",
       "items": [
         {
-          "text": "HTML",
+          "html": 'HTML<span class="sr-only"> del ejemplo: '+ params +'</span>',
           "panel": {
             "html": htmlContent | trim | safe
           }

package/docs/ds/_ds.macro.section-title.njk

@@ -1,3 +1,3 @@
 {% macro DSSectionTitle(params) %}
-<h2 id="{{ params.title | filterslugify }}" class="c-h2 mb-xl pb-sm border-b group">{{params.title}} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h2>
+<h2 id="{{ params.title | filterslugify }}" class="c-h2 mb-xl pb-sm border-b group">{{params.title}} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block"><span class="sr-only">Enlace al apartado: {{ params.title }}</span><span aria-hidden="true" title="Enlace al apartado: {{ params.title }}">#</span></a></h2>
 {% endmacro %}

package/docs/ds/_ds.macro.subsection-title.njk

@@ -1,3 +1,3 @@
 {% macro DSSubsectionTitle(params) %}
-<h3 id="{{ params.title | filterslugify }}" class="c-h3 mb-xl group">{{ params.title }} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
+<h3 id="{{ params.title | filterslugify }}" class="c-h3 mb-xl group">{{ params.title }} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block"><span class="sr-only">Enlace al apartado: {{ params.title }}</span><span aria-hidden="true" title="Enlace al apartado: {{ params.title }}">#</span></a></h3>
 {% endmacro %}

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

@@ -32,7 +32,12 @@
           <td>4px</td>
           <td><code>pr-xs</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-xs h-4 bg-primary-light"></div>
+            <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
           </td>
         </tr>
         <tr>
@@ -41,7 +46,12 @@
           <td>8px</td>
           <td><code>pr-sm</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-sm h-4 bg-primary-light"></div>
+            <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
           </td>
         </tr>
         <tr>
@@ -50,7 +60,12 @@
           <td>16px</td>
           <td><code>pr-base</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-base h-4 bg-primary-light"></div>
+            <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden"  role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden"  role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
           </td>
         </tr>
         <tr>
@@ -59,7 +74,12 @@
           <td>28px</td>
           <td><code>pr-lg</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-lg h-4 bg-primary-light"></div>
+            <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -68,7 +88,12 @@
           <td>40px</td>
           <td><code>pr-xl</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-xl h-4 bg-primary-light"></div>
+            <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -77,7 +102,12 @@
           <td>80px</td>
           <td><code>pr-2xl</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-2xl h-4 bg-primary-light"></div>
+            <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -86,7 +116,12 @@
           <td>160px</td>
           <td><code>pr-3xl</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block pr-3xl h-4 bg-primary-light"></div>
+            <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
       </tbody>
@@ -118,7 +153,7 @@
           <td>320px</td>
           <td><code>w-xs</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block w-xs h-4 bg-primary-light"></div>
+            <div class="inline-block w-xs h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -127,7 +162,7 @@
           <td>384px</td>
           <td><code>w-sm</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block w-sm h-4 bg-primary-light"></div>
+            <div class="inline-block w-sm h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -136,7 +171,7 @@
           <td>448px</td>
           <td><code>w-md</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block w-md h-4 bg-primary-light"></div>
+            <div class="inline-block w-md h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -145,7 +180,7 @@
           <td>512px</td>
           <td><code>w-lg</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block w-lg h-4 bg-primary-light"></div>
+            <div class="inline-block w-lg h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
         <tr>
@@ -154,11 +189,96 @@
           <td>576px</td>
           <td><code>w-xl</code></td>
           <td class="hidden sm:table-cell">
-            <div class="inline-block w-xl h-4 bg-primary-light"></div>
+            <div class="inline-block w-xl h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
           </td>
         </tr>
       </tbody>
     </table>
+    <div class="max-w-full overflow-x-auto">
+      <table>
+        <thead>
+          <tr>
+            <th>Nombre</th>
+            <th>Tamaño</th>
+            <th>Pixels</th>
+            <th>Ejemplo de clases</th>
+            <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>xs</td>
+            <td>20rem</td>
+            <td>320px</td>
+            <td><code>w-xs</code></td>
+            <td class="hidden sm:table-cell">
+              <div class="inline-block w-xs h-4 bg-primary-base"></div>
+            </td>
+          </tr>
+          <tr class="sm:hidden">
+            <td colspan="4">
+              <div class="inline-block w-xs h-4 bg-primary-base" role="img" aria-label="anchura xs"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>sm</td>
+            <td>24rem</td>
+            <td>384px</td>
+            <td><code>w-sm</code></td>
+            <td class="hidden sm:table-cell">
+              <div class="inline-block w-sm h-4 bg-primary-base"></div>
+            </td>
+          </tr>
+          <tr class="sm:hidden">
+            <td colspan="4">
+              <div class="inline-block w-sm h-4 bg-primary-base" role="img" aria-label="anchura sm"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>md</td>
+            <td>28rem</td>
+            <td>448px</td>
+            <td><code>w-md</code></td>
+            <td class="hidden sm:table-cell">
+              <div class="inline-block w-md h-4 bg-primary-base"></div>
+            </td>
+          </tr>
+          <tr class="sm:hidden">
+            <td colspan="4">
+              <div class="inline-block w-md h-4 bg-primary-base" role="img" aria-label="anchura md"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>lg</td>
+            <td>32rem</td>
+            <td>512px</td>
+            <td><code>w-lg</code></td>
+            <td class="hidden sm:table-cell">
+              <div class="inline-block w-lg h-4 bg-primary-base"></div>
+            </td>
+          </tr>
+          <tr class="sm:hidden">
+            <td colspan="4">
+              <div class="inline-block w-lg h-4 bg-primary-base" role="img" aria-label="anchura lg"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>xl</td>
+            <td>36rem</td>
+            <td>576px</td>
+            <td><code>w-xl</code></td>
+            <td class="hidden sm:table-cell">
+              <div class="inline-block w-xl h-4 bg-primary-base"></div>
+            </td>
+          </tr>
+          <tr class="sm:hidden">
+            <td colspan="4">
+              <div class="inline-block w-xl h-4 bg-primary-base" role="img" aria-label="anchura xl"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
   <div class="pb-xl"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -187,8 +307,17 @@
           <td><code>max-w-40</code></td>
           <td class="hidden sm:table-cell">
             <div class="inline-block max-w-40 overflow-hidden">
-              <div class="h-4 bg-primary-light text-primary-light">
-                -----------------------------------------------------------------------------------------------------------------
+              <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
+                <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block max-w-40 overflow-hidden">
+              <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
+                <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
               </div>
             </div>
           </td>
@@ -200,8 +329,17 @@
           <td><code>max-w-64</code></td>
           <td class="hidden sm:table-cell">
             <div class="inline-block max-w-64 overflow-hidden">
-              <div class="h-4 bg-primary-light text-primary-light">
-                -----------------------------------------------------------------------------------------------------------------
+              <div class="h-4 bg-primary-base text-transparent">
+                <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr class="sm:hidden">
+          <td colspan="4">
+            <div class="inline-block max-w-64 overflow-hidden">
+              <div class="h-4 bg-primary-base text-transparent">
+                <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
               </div>
             </div>
           </td>