desy-html 16.0.3 → 17.0.0

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

@@ -1,445 +1,445 @@
-{% set exampleComponent = "pagination" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "default",
-      "idPrefix": "pagination",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1
-        },
-        {
-          "value": "2",
-          "text": 2,
-          "selected": true
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        }
-      ],
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con seis botones rectangulares alineados horizontalmente. El segundo botón tiene fondo azul claro con texto blanco, los demás tienen fondo blanco con bordes grises y texto gris oscuro. Texto indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
-    "_generated": {
-      "hash": "cf29364d3c2d15c73a9932a03ff9f69c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:57.186Z"
-    }
-  },
-  {
-    "name": "Estilo Select",
-    "description": "Usa el parámetro <code>'hasSelect': true</code> para mostrar la paginación como un Select en vez de botones.",
-    "data": {
-      "id": "select-style",
-      "hasSelect": true,
-      "idPrefix": "pagination-has-select",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1
-        },
-        {
-          "value": "2",
-          "text": 2,
-          "selected": true
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        },
-        {
-          "value": "7",
-          "text": 7
-        },
-        {
-          "value": "8",
-          "text": 8
-        },
-        {
-          "value": "9",
-          "text": 9
-        },
-        {
-          "value": "10",
-          "text": 10
-        },
-        {
-          "value": "11",
-          "text": 11
-        },
-        {
-          "value": "12",
-          "text": 12
-        },
-        {
-          "value": "13",
-          "text": 13
-        },
-        {
-          "value": "14",
-          "text": 14
-        }
-      ],
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con dos menús desplegables(dropdowns) con bordes grises y flechas hacia abajo. Texto negro \"Anterior\" y \"Siguiente\" con números entre los dropdowns. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
-    "_generated": {
-      "hash": "55b31d23e5381f56f8b81a4926c4f77b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:57.186Z"
-    }
-  },
-  {
-    "name": "Con página previa deshabilitada",
-    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'hasPrevious': false</code>",
-    "data": {
-      "id": "with-previous-page-disabled",
-      "hasSelect": true,
-      "idPrefix": "pagination-with-previous-page-disabled",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1,
-          "selected": true
-        },
-        {
-          "value": "2",
-          "text": 2
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        }
-      ],
-      "hasPrevious": false,
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con dos elementos interactivos separados por espaciado horizontal. Texto \"Anterior\" en gris claro con número \"1\" y flecha hacia abajo, texto \"Siguiente\" en azul con flecha hacia abajo. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"0 - 10 de 64\" alineado a la derecha en gris.",
-    "_generated": {
-      "hash": "a5b916d8781cf94e65018d2d8cada8b4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:57.186Z"
-    }
-  },
-  {
-    "name": "Sin página previa",
-    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'showPrevious': false</code>",
-    "data": {
-      "id": "without-previous-page",
-      "hasSelect": true,
-      "idPrefix": "pagination-without-previous-page",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1,
-          "selected": true
-        },
-        {
-          "value": "2",
-          "text": 2
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        }
-      ],
-      "showPrevious": false,
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Contiene texto instructivo en gris oscuro, botón numérico con fondo blanco, flecha \"Siguiente\" en azul enlace, y contador de rango en gris oscuro alineado a la derecha. Todos los elementos están distribuidos horizontalmente en una fila con espaciado uniforme.",
-    "_generated": {
-      "hash": "e27f553ccc4937ee06a0c8f2b030d7f4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:11:07.252Z"
-    }
-  },
-  {
-    "name": "Con página primera y última",
-    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'showFirst': true</code> y <code>'showLast': true</code>",
-    "data": {
-      "id": "without-previous-page-disabled",
-      "hasSelect": true,
-      "idPrefix": "pagination-without-previous-page-disabled",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1
-        },
-        {
-          "value": "2",
-          "text": 2,
-          "selected": true
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        }
-      ],
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "showFirst": true,
-      "showLast": true,
-      "firstText": "Primera",
-      "lastText": "Última",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Incluye flecha \"Primera\" en azul enlace a la izquierda, flecha \"Anterior\" en azul enlace, botón numérico \"2\" con fondo blanco, flecha \"Siguiente\" en azul enlace, flecha \"Última\" en azul enlace, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro aparece arriba de los controles de navegación.",
-    "_generated": {
-      "hash": "a5606e9825f0db05a3adbb1f000d6144",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:11:07.252Z"
-    }
-  },
-  {
-    "name": "Con página primera deshabilitada y última",
-    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'hasPrevious': false</code>, <code>'showFirst': true</code> y <code>'hasFirst': false</code>",
-    "data": {
-      "id": "select-style-2",
-      "hasSelect": true,
-      "idPrefix": "pagination-has-select-2",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "items": [
-        {
-          "value": "1",
-          "text": 1,
-          "selected": true
-        },
-        {
-          "value": "2",
-          "text": 2
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        },
-        {
-          "value": "7",
-          "text": 7
-        },
-        {
-          "value": "8",
-          "text": 8
-        },
-        {
-          "value": "9",
-          "text": 9
-        },
-        {
-          "value": "10",
-          "text": 10
-        },
-        {
-          "value": "11",
-          "text": 11
-        },
-        {
-          "value": "12",
-          "text": 12
-        },
-        {
-          "value": "13",
-          "text": 13
-        },
-        {
-          "value": "14",
-          "text": 14
-        }
-      ],
-      "hasPrevious": false,
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "showFirst": true,
-      "showLast": true,
-      "hasFirst": false,
-      "firstText": "Primera",
-      "lastText": "Última",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Presenta flecha \"Primera\" en gris claro deshabilitada, flecha \"Anterior\" en gris claro deshabilitada, botón numérico \"1\" con fondo blanco, flecha \"Siguiente\" en azul enlace activo, flecha \"Última\" en azul enlace activo, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro se ubica en la parte superior.",
-    "_generated": {
-      "hash": "a68282e9b552e18dcc541b4952f3bbd9",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:11:07.252Z"
-    }
-  },
-  {
-    "name": "con itemsPerPageSelector",
-    "description": "Usa el parámetro <code>itemsPerPageSelector</code> para mostrar un select que permite elegir el número de items por página, a la derecha.",
-    "data": {
-      "id": "with-items-per-page-selector",
-      "idPrefix": "with-items-per-page-selector",
-      "totalItems": "64",
-      "itemsPerPage": "10",
-      "hasSelect": true,
-      "itemsPerPageSelector": {
-        "items": [
-          {
-            "value": "10",
-            "text": "10",
-            "selected": true
-          },
-          {
-            "value": "25",
-            "text": "25"
-          },
-          {
-            "value": "50",
-            "text": "50"
-          },
-          {
-            "value": "75",
-            "text": "75"
-          },
-          {
-            "value": "100",
-            "text": "100"
-          }
-        ]
-      },
-      "items": [
-        {
-          "value": "1",
-          "text": 1
-        },
-        {
-          "value": "2",
-          "text": 2,
-          "selected": true
-        },
-        {
-          "value": "3",
-          "text": 3
-        },
-        {
-          "value": "4",
-          "text": 4
-        },
-        {
-          "value": "5",
-          "text": 5
-        },
-        {
-          "value": "6",
-          "text": 6
-        }
-      ],
-      "hasPrevious": false,
-      "hasNext": true,
-      "previousText": "Anterior",
-      "nextText": "Siguiente",
-      "attributes": {
-        "aria-label": "Paginación"
-      }
-    },
-    "visualDescription": "Componente de paginación con fondo blanco y borde gris de 1px. Contiene label negro alineado a la izquierda, dos selectores desplegables(numéricos con flechas azules) , texto negro indicando rango de resultados, y selector de ítems por página a la derecha con dropdown numérico. Todos los elementos están distribuidos horizontalmente en una sola fila con espaciado uniforme.",
-    "_generated": {
-      "hash": "6998f5ef06831c65fd7af0aa770891a2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:11:14.624Z"
-    }
-  }
+{% set exampleComponent = "pagination" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "default",
+      "idPrefix": "pagination",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1
+        },
+        {
+          "value": "2",
+          "text": 2,
+          "selected": true
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        }
+      ],
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con seis botones rectangulares alineados horizontalmente. El segundo botón tiene fondo azul claro con texto blanco, los demás tienen fondo blanco con bordes grises y texto gris oscuro. Texto indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "cf29364d3c2d15c73a9932a03ff9f69c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
+    }
+  },
+  {
+    "name": "Estilo Select",
+    "description": "Usa el parámetro <code>'hasSelect': true</code> para mostrar la paginación como un Select en vez de botones.",
+    "data": {
+      "id": "select-style",
+      "hasSelect": true,
+      "idPrefix": "pagination-has-select",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1
+        },
+        {
+          "value": "2",
+          "text": 2,
+          "selected": true
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        },
+        {
+          "value": "7",
+          "text": 7
+        },
+        {
+          "value": "8",
+          "text": 8
+        },
+        {
+          "value": "9",
+          "text": 9
+        },
+        {
+          "value": "10",
+          "text": 10
+        },
+        {
+          "value": "11",
+          "text": 11
+        },
+        {
+          "value": "12",
+          "text": 12
+        },
+        {
+          "value": "13",
+          "text": 13
+        },
+        {
+          "value": "14",
+          "text": 14
+        }
+      ],
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con dos menús desplegables(dropdowns) con bordes grises y flechas hacia abajo. Texto negro \"Anterior\" y \"Siguiente\" con números entre los dropdowns. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"10 - 20 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "55b31d23e5381f56f8b81a4926c4f77b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
+    }
+  },
+  {
+    "name": "Con página previa deshabilitada",
+    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'hasPrevious': false</code>",
+    "data": {
+      "id": "with-previous-page-disabled",
+      "hasSelect": true,
+      "idPrefix": "pagination-with-previous-page-disabled",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1,
+          "selected": true
+        },
+        {
+          "value": "2",
+          "text": 2
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        }
+      ],
+      "hasPrevious": false,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con dos elementos interactivos separados por espaciado horizontal. Texto \"Anterior\" en gris claro con número \"1\" y flecha hacia abajo, texto \"Siguiente\" en azul con flecha hacia abajo. Título \"Seleccione para cargar datos automáticamente\" en negro arriba, indicador \"0 - 10 de 64\" alineado a la derecha en gris.",
+    "_generated": {
+      "hash": "a5b916d8781cf94e65018d2d8cada8b4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:57.186Z"
+    }
+  },
+  {
+    "name": "Sin página previa",
+    "description": "En este ejemplo <code>'hasSelect': true</code> y <code>'showPrevious': false</code>",
+    "data": {
+      "id": "without-previous-page",
+      "hasSelect": true,
+      "idPrefix": "pagination-without-previous-page",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1,
+          "selected": true
+        },
+        {
+          "value": "2",
+          "text": 2
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        }
+      ],
+      "showPrevious": false,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Contiene texto instructivo en gris oscuro, botón numérico con fondo blanco, flecha \"Siguiente\" en azul enlace, y contador de rango en gris oscuro alineado a la derecha. Todos los elementos están distribuidos horizontalmente en una fila con espaciado uniforme.",
+    "_generated": {
+      "hash": "e27f553ccc4937ee06a0c8f2b030d7f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
+    }
+  },
+  {
+    "name": "Con página primera y última",
+    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'showFirst': true</code> y <code>'showLast': true</code>",
+    "data": {
+      "id": "without-previous-page-disabled",
+      "hasSelect": true,
+      "idPrefix": "pagination-without-previous-page-disabled",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1
+        },
+        {
+          "value": "2",
+          "text": 2,
+          "selected": true
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        }
+      ],
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "showFirst": true,
+      "showLast": true,
+      "firstText": "Primera",
+      "lastText": "Última",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Incluye flecha \"Primera\" en azul enlace a la izquierda, flecha \"Anterior\" en azul enlace, botón numérico \"2\" con fondo blanco, flecha \"Siguiente\" en azul enlace, flecha \"Última\" en azul enlace, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro aparece arriba de los controles de navegación.",
+    "_generated": {
+      "hash": "a5606e9825f0db05a3adbb1f000d6144",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
+    }
+  },
+  {
+    "name": "Con página primera deshabilitada y última",
+    "description": "En este ejemplo <code>'hasSelect': true</code>, <code>'hasPrevious': false</code>, <code>'showFirst': true</code> y <code>'hasFirst': false</code>",
+    "data": {
+      "id": "select-style-2",
+      "hasSelect": true,
+      "idPrefix": "pagination-has-select-2",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "items": [
+        {
+          "value": "1",
+          "text": 1,
+          "selected": true
+        },
+        {
+          "value": "2",
+          "text": 2
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        },
+        {
+          "value": "7",
+          "text": 7
+        },
+        {
+          "value": "8",
+          "text": 8
+        },
+        {
+          "value": "9",
+          "text": 9
+        },
+        {
+          "value": "10",
+          "text": 10
+        },
+        {
+          "value": "11",
+          "text": 11
+        },
+        {
+          "value": "12",
+          "text": 12
+        },
+        {
+          "value": "13",
+          "text": 13
+        },
+        {
+          "value": "14",
+          "text": 14
+        }
+      ],
+      "hasPrevious": false,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "showFirst": true,
+      "showLast": true,
+      "hasFirst": false,
+      "firstText": "Primera",
+      "lastText": "Última",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris claro. Presenta flecha \"Primera\" en gris claro deshabilitada, flecha \"Anterior\" en gris claro deshabilitada, botón numérico \"1\" con fondo blanco, flecha \"Siguiente\" en azul enlace activo, flecha \"Última\" en azul enlace activo, y contador de rango en gris oscuro a la derecha. Texto instructivo en gris oscuro se ubica en la parte superior.",
+    "_generated": {
+      "hash": "a68282e9b552e18dcc541b4952f3bbd9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:07.252Z"
+    }
+  },
+  {
+    "name": "con itemsPerPageSelector",
+    "description": "Usa el parámetro <code>itemsPerPageSelector</code> para mostrar un select que permite elegir el número de items por página, a la derecha.",
+    "data": {
+      "id": "with-items-per-page-selector",
+      "idPrefix": "with-items-per-page-selector",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "hasSelect": true,
+      "itemsPerPageSelector": {
+        "items": [
+          {
+            "value": "10",
+            "text": "10",
+            "selected": true
+          },
+          {
+            "value": "25",
+            "text": "25"
+          },
+          {
+            "value": "50",
+            "text": "50"
+          },
+          {
+            "value": "75",
+            "text": "75"
+          },
+          {
+            "value": "100",
+            "text": "100"
+          }
+        ]
+      },
+      "items": [
+        {
+          "value": "1",
+          "text": 1
+        },
+        {
+          "value": "2",
+          "text": 2,
+          "selected": true
+        },
+        {
+          "value": "3",
+          "text": 3
+        },
+        {
+          "value": "4",
+          "text": 4
+        },
+        {
+          "value": "5",
+          "text": 5
+        },
+        {
+          "value": "6",
+          "text": 6
+        }
+      ],
+      "hasPrevious": false,
+      "hasNext": true,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    },
+    "visualDescription": "Componente de paginación con fondo blanco y borde gris de 1px. Contiene label negro alineado a la izquierda, dos selectores desplegables(numéricos con flechas azules) , texto negro indicando rango de resultados, y selector de ítems por página a la derecha con dropdown numérico. Todos los elementos están distribuidos horizontalmente en una sola fila con espaciado uniforme.",
+    "_generated": {
+      "hash": "6998f5ef06831c65fd7af0aa770891a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:11:14.624Z"
+    }
+  }
 ] %}