One 32-tall slot drawn sixteen ways, and a bar that is nothing but seven of them in a row - the component knows how a page link looks, never how many pages...
Two components, sixteen variants
Pagination Item - Variant × State: Previous · Next · Link · Ellipsis × up to seven states - 93, 68 or 32 wide, always 32 tall
Pagination - none: 333 × 32 - seven items 2 apart, the second one Active
Using the Pagination
Why sixteen and not twenty-eight?
Because eleven of the combinations cannot occur. Previous and Next are never Active - they are a direction, not a page - so they carry Default, Hover, Focus and Disabled and stop there. Ellipsis is not a control at all: one state, no hover, no focus. Only Link takes all seven. Four plus four plus seven plus one is sixteen, and the matrix is drawn sparse rather than padded out with states nobody can reach.
What does Active look like, and why?
base.background with a 1px base.input outline - the same treatment an outline Button gets, not a filled one. The page you are on should read as raised rather than selected, because it is still a live control: Active Hover swaps the fill to base.muted and keeps the outline, Active Focus adds the ring outside it. A solid fill would have made the current page look disabled.
Where does the ellipsis logic live?
Not in the component. The item draws one slot and has no idea how many pages exist, which is exactly why sixteen variants cover every arrangement - the base example, numbers only, icons beside a table. Deciding which numbers to show and where the gaps fall is the page's job, and the usage examples on this page do it live.
Why is Previous wider than Next?
93 against 68, and it is only the word. Both are padding 8, gap 4, a 16px chevron and a 14/500 label; "Previous" is simply longer than "Next". The chevron sits before the label on one and after it on the other, which is the only structural difference between them.