Pagination

# Pagination Pattern

El Pagination es un patrón de diseño que proporciona navegación estructurada a través de un conjunto de datos grande que ha sido dividido en múltiples páginas o vistas, mejorando el rendimiento y facilitando la asimilación de la información por parte de los usuarios.

¿Por qué es un Pattern?

La paginación no se concibe como un control unitario aislado, sino como una composición estructural que articula piezas independientes: - Controles de navegación de avance y retroceso (Flechas o Botones con texto). - Enlaces numéricos de salto directo (<a> o <button>). - Textos pasivos de resumen de métricas ("1-25 de 100"). - Controles auxiliares como selectores de salto de página o cambio de densidad de resultados por página, que integran internamente el componente base gn-select.

Cuándo usarlo

- En tablas de datos densas, listas de resultados de búsqueda o catálogos de productos que superen una cantidad manejable de elementos en pantalla (generalmente más de 20-25 items). - Para dividir vistas largas en lugar de usar un *scroll infinito* si se requiere que el usuario sepa la cantidad total de resultados y pueda acceder directamente a un segmento específico.

Opciones de Implementación Semántica

El patrón expone los ejemplos usando fundamentalmente enlaces (<a>), pero la decisión final debe basarse en la arquitectura técnica de tu aplicación: - Usa enlaces (<a>): Si al cambiar de página se genera una recarga completa del documento o la URL se actualiza (ej: ?page=2). Esto es vital para el SEO y para permitir a los usuarios "Abrir en nueva pestaña" o guardar marcadores. - Usa botones (<button>): Exclusivamente si la paginación inyecta la nueva vista dinámicamente mediante JavaScript (ej: llamadas AJAX o un SPA sin control estricto de historial del navegador). En los ejemplos demostrativos, se han usado botones para los estados *disabled*, pero aplican los mismos principios.

Estados y Tratamiento de la Página Actual

- La página actualmente seleccionada resalta visualmente (color: var(--gn-color-link-focus) y mayor peso tipográfico) usando la clase .pagination__link--current. - Semánticamente se añade el atributo aria-current="page" al enlace activo, informando a los lectores de pantalla de que se trata del contexto actual. - Los elementos colindantes omitidos para acortar largas listas se representan mediante .pagination__link--ellipsis, el cual hereda la estética por defecto pero sin comportamiento de hover.

Integración con Componentes Auxiliares

El patrón contempla el uso nativo de selectores, como ir a una página concreta o alterar la cantidad de items. Para ello simplemente se embebe el componente gn-select dentro de los bloques .pagination__nav o .pagination__controls. El CSS del patrón aplica modificaciones sutiles de layout y márgenes para asegurar que encaje en altura (35px) y armonía visual con los botones de paginación vecinos.

Accesibilidad Adicional

- El contenedor principal se define como <nav aria-label="Navegación de resultados"> para declararse explícitamente en el árbol de navegación accesibilidad. - El resumen de totales incluye aria-live="polite" en el caso de las implementaciones dinámicas (JS), de forma que el lector de pantalla anuncie transparentemente el nuevo rango al cambiar de página.

<nav class="pagination" aria-label="Navegación de resultados">
  <div class="pagination__nav">
    <a href="#" class="pagination__button pagination__button--icon" aria-label="Página anterior">
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
    </a>
    <ul class="pagination__list">
      <li class="pagination__item"><a href="#" class="pagination__link pagination__link--current" aria-current="page">1</a></li>
      <li class="pagination__item"><a href="#" class="pagination__link">2</a></li>
      <li class="pagination__item"><a href="#" class="pagination__link">3</a></li>
      <li class="pagination__item"><span class="pagination__link pagination__link--ellipsis" aria-hidden="true">...</span></li>
      <li class="pagination__item"><a href="#" class="pagination__link">10</a></li>
    </ul>
    <a href="#" class="pagination__button pagination__button--icon" aria-label="Página siguiente">
      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
    </a>
  </div>
</nav>