desy-html 5.3.0 → 6.0.0

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

@@ -306,4 +306,436 @@
       "classes": "min-w-full"
     })  }}
   </div>
+  <div class="py-xl">
+    {{ componentTableAdvanced({
+      "idPrefix": "table-with-head-and-selects",
+      "head": [
+        {
+          "text": "Month you apply",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Rate for bicycles",
+          "classes": "text-right",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Rate for vehicles",
+          "classes": "text-right",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "January"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "February"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "March"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    })  }}
+  </div>
+  <div class="pt-xl">
+    {{ componentTableAdvanced({
+      "idPrefix": "table-with-sticky-columns",
+      "hasCheckboxes": true,
+      "checkboxesClasses": "sticky left-0 z-10 w-0 bg-white",
+      "firstCellIsHeader": true,
+      "head": [
+        {
+          "text": "Row number",
+          "classes": "sticky left-16 z-10 w-60 bg-white"
+        },
+        {
+          "text": "Month you apply",
+          "orderBy": "none",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for bicycles",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for vehicles",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for column A",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for column B",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for column C",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for column D",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for column E",
+          "orderBy": "none",
+          "classes": "text-right sticky right-0 z-10 w-60 bg-white",
+          "hasFilter": true
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "First row",
+            "classes": "sticky left-16 z-10 w-60 bg-white"
+          },
+          {
+            "text": "January"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right sticky z-10 right-0 w-60 bg-white"
+          }
+        ],
+        [
+          {
+            "text": "Second row",
+            "classes": "sticky left-16 z-10 w-60 bg-white"
+          },
+          {
+            "text": "February"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right sticky right-0 z-10 w-60 bg-white"
+          }
+        ],
+        [
+          {
+            "text": "Third row",
+            "classes": "sticky left-16 z-10 w-60 bg-white"
+          },
+          {
+            "text": "March"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right sticky z-10 right-0 w-60 bg-white"
+          }
+        ]
+      ],
+      "wrapper": {
+        "classes": "overflow-x-auto pb-base"
+      },
+      "classes": "relative whitespace-nowrap min-w-full"
+    })  }}
+  </div>
+  <div class="pt-xl">
+    {{ componentTableAdvanced({
+      "idPrefix": "table-with-all",
+      "hasCheckboxes": true,
+      "firstCellIsHeader": true,
+      "head": [
+        {
+          "text": "Row number"
+        },
+        {
+          "text": "Month you apply",
+          "orderBy": "none",
+          "hasFilter": true
+        },
+        {
+          "text": "Rate for bicycles",
+          "orderBy": "none",
+          "classes": "text-right",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Rate for vehicles",
+          "orderBy": "none",
+          "classes": "text-right",
+          "hasFilter": true,
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "First row"
+          },
+          {
+            "text": "January"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Second row"
+          },
+          {
+            "text": "February"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "Third row"
+          },
+          {
+            "text": "March"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    })  }}
+  </div>
 </div>

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

@@ -1,56 +1,76 @@
 {% from "components/toggle/_macro.toggle.njk" import componentToggle %}
 
-<div class="grid lg:grid-cols-2 gap-xl mb-lg">
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
   <div>
     {{ componentToggle({
-      "classes": "c-button c-button--transparent no-underline",
+      "classes": "c-button",
       "offState": {
         "classes": "",
-        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"/></svg>Notificar por correo electrónico</span>"
+        "html": "Mostrar detalles"
       },
       "onState": {
-        "classes": "",
-        "html": "Notificar por correo electrónico"
+        "classes": "c-button--has-selection",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"/></svg>Mostrar detalles</span>"
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
       }
     })  }}
-    <div class="pb-base"></div>
+  </div>
+  <div>
     {{ componentToggle({
-      "classes": "c-button c-button--sm c-button--transparent no-underline",
+      "classes": "c-button c-button--sm",
       "offState": {
         "classes": "",
-        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg><span aria-hidden=\"true\">Ocultar heredados del servicio</span><span class=\"sr-only\">Mostrar heredados del servicio</span></span>"
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Mostrar filtros</span>"
       },
       "onState": {
-        "classes": "",
-        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(3.42857)\"><circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"currentColor\" /><path d=\"m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z\" fill=\"currentColor\"/></g></svg>Mostrar heredados del servicio</span>"
+        "classes": "c-button--has-selection",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Mostrar filtros</span>"
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
       }
     })  }}
   </div>
   <div>
-    <ul>
-      <li class="flex flex-wrap w-full justify-between p-base border-t border-b border-neutral-base">
-        <div>
-          <p id="id-text">Notificar por email</p>
-        </div>
-        <div>
-          {{ componentToggle({
-            "classes": "",
-            "isSwitch": true,
-            "offState": {
-              "classes": "",
-              "html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">on</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
-            },
-            "onState": {
-              "classes": "",
-              "html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">off</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
-            },
-            "attributes": {
-              "aria-labelledby": "id-text"
-            }
-          })  }}
-        </div>
-      </li>
-    </ul>
+    {{ componentToggle({
+      "isExpandible": false,
+      "classes": "c-button",
+      "offState": {
+        "classes": "",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
+      },
+      "onState": {
+        "classes": "c-button--has-selection",
+        "html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/><path d=\"M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg>Reproducir sonido</span>"
+      }
+    })  }}
   </div>
-
+</div>
+<div>
+  <ul>
+    <li class="flex flex-wrap w-full justify-between p-base border-t border-b border-neutral-base">
+      <div>
+        <p id="id-text">Notificar por email</p>
+      </div>
+      <div>
+        {{ componentToggle({
+          "classes": "",
+          "isSwitch": true,
+          "offState": {
+            "classes": "",
+            "html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">on</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
+          },
+          "onState": {
+            "classes": "",
+            "html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">off</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
+          },
+          "attributes": {
+            "aria-labelledby": "id-text"
+          }
+        })  }}
+      </div>
+    </li>
+  </ul>
 </div>

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

@@ -32,18 +32,18 @@
   {{ DSSubsectionTitle({
     title: "Pantallas grandes - escritorio"
   }) }}
-  <div class="grid grid-cols-4 gap-xl mt-base">
-    <div class="col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
-    <div class="col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
-    <div class="col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
-    <div class="col-span-3 bg-blue-100 h-12 flex items-center justify-center">75%</div>
-    <div class="col-span-1 bg-blue-100 h-12 flex items-center justify-center">25%</div>
-    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
-    <div class="col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
-    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
-    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
-    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
-    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-xl mt-base">
+    <div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
+    <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
+    <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
+    <div class="col-span-2 lg:col-span-3 bg-blue-100 h-12 flex items-center justify-center">75%</div>
+    <div class="col-span-2 lg:col-span-1 bg-blue-100 h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
+    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}

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

@@ -26,6 +26,11 @@
   }) }}
   {% include "ds/_ds.example.menu-horizontal.njk" %}
   <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Menu de navegación"
+  }) }}
+  {% include "ds/_ds.example.menu-navigation.njk" %}
+  <div class="pb-lg"></div>
   {{ DSSubsectionTitle({
     title: "Menu vertical"
   }) }}

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

@@ -13,6 +13,33 @@
   }) }}
   <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.</p>
   <div class="pb-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Estilos de base"
+  }) }}
+  <div class="flex items-center mb-8">
+    <div class="w-1/6 mr-8">
+      <p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
+    </div>
+    <div>
+      <p class="text-neutral-dark text-sm"><code>span.font-bold</code> - <code>bold</code></p>
+    </div>
+  </div>
+  <div class="flex items-center mb-8">
+    <div class="w-1/6 mr-8">
+      <p>Esto es un <strong>strong</strong> en un texto.</p>
+    </div>
+    <div>
+      <p class="text-neutral-dark text-sm"><code>strong</code> - <code>semibold</code></p>
+    </div>
+  </div>
+  <div class="flex items-center mb-8">
+    <div class="w-1/6 mr-8">
+      <p>Esto es un <em>em</em> en un texto.</p>
+    </div>
+    <div>
+      <p class="text-neutral-dark text-sm"><code>em</code> - <code>normal</code> - <code>italic</code></p>
+    </div>
+  </div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
     title: "Títulos"

package/docs/examples-accordion-history.html

@@ -0,0 +1,5 @@
+{% set title = "Accordion history. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/accordion-history/_examples.accordion-history.njk" as exampleData %}
+{% endblock %}

package/docs/examples-menu-navigation.html

@@ -0,0 +1,5 @@
+{% set title = "Menu navigation. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/menu-navigation/_examples.menu-navigation.njk" as exampleData %}
+{% endblock %}