Keyboard
No component-specific keymap. Inherits standard browser focus / activation behaviour.
This component, layer by layer
Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**
Attach to your own DOM
<script lang="ts">
import { createPagination } from '@kumiki/headless/pagination';
const ctl = createPagination({});
</script>
<div {@attach ctl.root}>
<!-- your markup -->
</div>Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.
Install
pnpm add @kumiki/components Buttons
<Pagination.Root page={p} pageCount={pages} onPageChange={(n) => (p = n)}>
<Pagination.Prev />
<Pagination.PageList>
{#snippet item({ page, isCurrent, isEllipsis })}
{#if isEllipsis}
<Pagination.Ellipsis />
{:else}
<Pagination.PageItem {page}>{page}</Pagination.PageItem>
{/if}
{/snippet}
</Pagination.PageList>
<Pagination.Next />
</Pagination.Root> SSR-friendly links
<Pagination.Root
page={p}
pageCount={pages}
asLinks={{ href: (n) => `?p=${n}` }}
>
<!-- … -->
</Pagination.Root>Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.
Live preview…
Install
pnpm add @kumiki/atelier Page-list controls
<script lang="ts">
import { Tailwind as Pagination } from '@kumiki/atelier/pagination';
let page = $state(1);
</script>
<Pagination.Root {page} pageCount={20} onPageChange={(p) => (page = p)}>
<Pagination.Prev>‹</Pagination.Prev>
<Pagination.PageList>
{#snippet item({ page: n, isCurrent, isEllipsis })}
{#if isEllipsis}
<Pagination.Ellipsis />
{:else}
<Pagination.PageItem page={n} data-current={isCurrent ? '' : undefined}>
{n}
</Pagination.PageItem>
{/if}
{/snippet}
</Pagination.PageList>
<Pagination.Next>›</Pagination.Next>
</Pagination.Root>/ accessibility
Accessibility
axe-core — run on every PR (LTR + RTL × every documented state).
Test discipline
- axe-core — run on every PR (LTR + RTL × every documented state).
- APG keyboard tests — Playwright, hand-written per pattern.
- VoiceOver / NVDA — Guidepup nightly schedule.
- Type-level required names — title / aria-label / aria-labelledby.