{ "name": "pagination", "title": { "es": "Paginación", "en": "Pagination" }, "summary": { "es": "Enlaces a páginas de resultados con anterior y siguiente.", "en": "Links to result pages with previous and next." }, "category": "navigation", "status": "stable", "nivel": "componentes", "updated": "2026-09-29", "license": "MIT", "page": "https://componentes-lovat.vercel.app/c/pagination/", "requires": [ "button" ], "files": [ { "type": "html", "url": "https://componentes-lovat.vercel.app/raw/pagination/pagination.html", "content": "\n" }, { "type": "css", "url": "https://componentes-lovat.vercel.app/raw/pagination/pagination.css", "content": "/* pagination · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n Generado por tools/build_css.py desde pagination.tw.json. No editar a mano. Necesita tokens.css. */\n.c-pagination{margin-inline:auto;display:flex}\n.c-pagination__content{display:flex}\n.c-pagination__ellipsis{display:flex}\n.c-pagination{width:100%}\n.c-pagination__ellipsis{min-width:calc(var(--spacing)*7)}\n.c-pagination__content{flex-direction:row;align-items:center}\n.c-pagination{justify-content:center}\n.c-pagination__ellipsis{justify-content:center}\n.c-pagination__content{gap:calc(var(--spacing)*1)}\n@media not all and (min-width:40rem){\n.c-pagination__label{display:none}\n.c-pagination__prev{aspect-ratio:1}\n.c-pagination__next{aspect-ratio:1}\n.c-pagination__prev{padding:calc(var(--spacing)*0)}\n.c-pagination__next{padding:calc(var(--spacing)*0)}\n}\n@media (min-width:40rem){\n.c-pagination__prev{margin-inline-start:calc(var(--spacing)*-1)}\n.c-pagination__next{margin-inline-end:calc(var(--spacing)*-1)}\n}\n/* propio */\n.c-pagination__content{list-style:none;margin:0;padding:0}\n.c-pagination__ellipsis svg{width:1rem;height:1rem;color:var(--muted-foreground)}\n.c-pagination .c-btn[aria-current=page]{pointer-events:none}\n.c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n" }, { "type": "standalone", "url": "https://componentes-lovat.vercel.app/r/pagination.html" } ], "tokensFile": "https://componentes-lovat.vercel.app/tokens.css", "darkTheme": "add class 'dark' to ", "contexto": "ambos", "densidad": "media", "tono": "sobria", "states": [ "rest", "hover", "focus", "current" ], "use": { "es": [ "Cuando una lista se divide en páginas." ], "en": [ "When a list is split into pages." ] }, "avoid": { "es": [ "Con pocas entradas: muéstralas todas." ], "en": [ "With few items: show them all." ] }, "a11y": { "roles": [ "navigation", "link" ], "keyboard": [ { "keys": "Tab", "es": "Recorre las páginas", "en": "Moves through the pages" } ], "notes": { "es": [ "La página actual lleva aria-current=page.", "En móvil, anterior y siguiente quedan como iconos con aria-label." ], "en": [ "The current page has aria-current=page.", "On mobile, previous and next become icons with aria-label." ] }, "test": { "es": [ "El lector dice «2, página actual»." ], "en": [ "The screen reader says “2, current page”." ] } }, "issues": { "es": [], "en": [] }, "credits": [ { "source": "coss ui (MIT) · pagination.tsx", "url": "https://coss.com/ui" } ], "changes": [ { "date": "2026-09-29", "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias", "en": "coss ui design in dependency-free HTML, CSS and JS" } ], "partes": [], "pieza": "https://componentes-lovat.vercel.app/r/pagination.html" }