Component Guide (Compact Progress Pagination)

Features

• Compact "Page X of N" label with tabular numerals and a fixed-width slot so single→double-digit pages never shift the layout
• Chevron Prev/Next plus jump-to-first/last double-chevron controls, all built from 24×24 Tabler icons
• Config-driven page model (totalPages, currentPage, siblings) with clamped, bounds-safe navigation
• Directional odometer roll: the page number ticks up or down inside a soft-masked slot, old digit rolling out as the new one rolls in
• Thin progress bar that fills with a smooth decelerating ease via transform: scaleX, exposed as a role="progressbar" with aria-valuenow/aria-valuetext
• Bounds are aria-disabled (not removed from focus) with a ghosted borderless state at the first and last page
• Semantic <nav aria-label="Pagination"> landmark and aria-current="page" on the active label
• Dedicated polite live region announcing "Page X of N. {title}" on every change
• Full keyboard support: ArrowLeft/ArrowRight step, Home jumps to first, End jumps to last
• Tactile press feedback: fast scale(0.92) snap-down with an inset press shadow and a 1.5px directional chevron nudge, springing back on release
• Live content panel whose title and body swap on each page change
• Responsive panel that adapts padding down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Landmark

Pager controls are wrapped in <nav aria-label="Pagination">

Current page

aria-current="page" on the "Page X of N" label

Live announcements

A visually-hidden role="status" aria-live="polite" region announces "Page X of N. {title}"

Progressbar semantics

The thin track is a role="progressbar" with aria-valuemin/max/now and aria-valuetext="Page X of N" kept in sync on every change

Disabled bounds

First/Prev and Next/Last set aria-disabled="true" + a dimmed .is-disabled state while staying focusable

Keyboard activation

ArrowLeft/ArrowRight step, Home/End jump to bounds; native buttons handle Enter and Space

Accessible names

Every nav button carries an aria-label ("Go to first/previous/next/last page")

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Component Guide (Compact Progress Pagination) in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pagination is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.