svelte-kit-vice/src/uix/eidos/components/pagination

Pagination

Estado

Pagination es el wrapper visual de Eidos sobre el primitivo Soma. Soma/Morfo poseen calculo de paginas, traducciones, aria-current, estado disabled y callbacks. Eidos anade size y receta visual.

API publica:

<Pagination count={200} pageSize={10} bind:page size="md">
	{#snippet children({ pages, totalPages })}
		<Pagination.FirstTrigger>«</Pagination.FirstTrigger>
		<Pagination.PrevTrigger>‹</Pagination.PrevTrigger>
		{#each pages as page}
			{#if page.type === 'page'}
				<Pagination.Item value={page.value}>{page.value}</Pagination.Item>
			{:else}
				<Pagination.Ellipsis position={page.position}>...</Pagination.Ellipsis>
			{/if}
		{/each}
		<Pagination.NextTrigger>›</Pagination.NextTrigger>
		<Pagination.LastTrigger>»</Pagination.LastTrigger>
	{/snippet}
</Pagination>

Baseline Air

Air no tenia components/pagination. No hay API visual heredada. La baseline queda definida por Soma/Morfo y por los referentes externos.

Soma/Morfo

Capacidad	Owner	Estado
Root nav + role="navigation"	Morfo/Soma	Si
Label accesible traducido	Morfo/Soma	Si
pages snippet prop	Soma	Si
totalPages snippet prop	Soma	Si
siblingCount	Soma	Si
boundaryCount	Soma	Si
pageSize	Soma	Si
pageRange + slice()	Soma	Si
Prev/Next	Morfo/Soma/Eidos	Si
First/Last	Morfo/Soma/Eidos	Si
aria-current="page"	Morfo/Soma	Si
Link mode	Consumer	No nativo; ver decision
Visual size	Eidos	sm, md, lg

Comparativa externa

Plataforma	Modelo	Eidos/UIX
Ark UI Pagination	Root, PrevTrigger, Item, Ellipsis, NextTrigger, FirstTrigger, LastTrigger, pageSize, siblingCount, translations, `type='button'	'link', getPageUrl`, context helpers.
Bits UI Pagination	Root con snippet { pages, range }, PrevButton, NextButton, Page, ellipsis.	Coincide con snippet de pages; UIX añade boundaryCount y first/last explicitos.
shadcn-svelte Pagination	Composicion visual basada en links/list items: Content, Item, Link, PrevButton, NextButton, Ellipsis.	Eidos prioriza comportamiento Soma y botones por defecto; link/list semantics quedan para un modo futuro.
MUI Pagination	Page prop 1-based, sibling/boundary count, first/last opt-in, aria-labels por item, size.	Coincide en 1-based page, size, sibling/boundary, first/last y labels.
React Aria	No ofrece Pagination dedicado; sus patrones de coleccion viven en hooks/list/table.	UIX tiene primitivo dedicado.

Fuentes:

• Ark UI Pagination
• Bits UI Pagination
• shadcn-svelte Pagination
• MUI Pagination
• WAI-ARIA APG patterns

Decisiones

First/Last como partes reales

Antes se recomendaba componer first/last con Item value={1} y Item value={totalPages}. Eso funcionaba para navegar, pero perdia semantica: no habia label propio ("First page" / "Last page") ni disabled semantics de borde.

Decision: FirstTrigger y LastTrigger suben a Morfo/Soma/Eidos como partes publicas.

Link mode

Ark y shadcn soportan modelos orientados a links. En UIX, Pagination.Item es un button porque Soma posee cambio de estado y disabled semantics. Para SEO o navegacion URL-first, el consumer puede usar child en Soma, pero falta una API canonica type='link' / getPageUrl.

Decision: diferido a Soma/Morfo. No se implementa como wrapper Eidos porque debe afectar a elemento, aria, disabled y href.

List semantics

shadcn estructura visualmente ul/li/a. UIX usa nav + botones directos. ARIA no exige lista para paginacion; lo importante es navigation, label, labels por control y aria-current.

Decision: no se anade List/ListItem Eidos-only. Si el sistema necesita esa estructura, debe ser una variante Soma/Morfo o una composicion externa.

Page size

Ark expone onPageSizeChange; Soma ya acepta pageSize, pero el cambio de tamano lo gestiona el consumer. Esto evita mezclar selector de page-size dentro de Pagination.

Decision: mantener pageSize como input controlado. Un selector visual de page-size pertenece a Field/Select + app state, no al recipe de Pagination.

Gaps

Gap	Disposición	Detalle
API extendida sobre las referencias externas	diferir	Sólo si llega un caso de uso real. Mantener la superficie estable.
Cobertura adicional de variantes visuales	diferir	El recipe cubre sm/md/lg + solid/outline/ghost. Más variantes requieren caso concreto.
Documentación per-prop exhaustiva	implementar	Cuando se cierre el ciclo de remediación de cada componente.
Tests browser-level del flujo completo (Playwright)	implementar	Cobertura visual + interacciones. Se hace en una pasada conjunta de tests.