feat(Pagination): add Pagination component aligned with Cyber skin

[AlexandraGallipoliRodrigues]

Summary

Adds a new Pagination component to mistica-web, designed for the Cyber project but built against the standard skin contract so it works across all skins. Implements the Figma anatomy, types, behaviour, animation and "Compact View" specs.

Ticket: WEB-2441

What's included

Component

• Pagination with controlled and uncontrolled modes (currentPage / defaultPage + onChange).
• Previous / Next navigation controls that hide automatically on the first / last page. hideNavigationControls and hidePageList allow rendering only the page list or only the navigation arrows.
• dynamicCount controls the size of the middle visible window; showEllipsis toggles truncation.
• mode="iconOnly" renders the navigation buttons as chevrons only, even on desktop.
• Compact View kicks in automatically when the viewport is narrower than 375px: navigation chevrons stack above/below the page list (per Figma).
• disabled disables all interactive elements.
• getPaginationItems() helper exported for unit tests / consumers that need the resolved item list.

Styling

• Page items render the visible 32px circle (::before) inside a 32×48 (mobile) / 32×32 (desktop) interactive container. The Figma "Interaction Area" spec calls for 48×48 on mobile, but a literal 48px width breaks the layout on a 375px screen for the denser 1 … N N+1 N+2 … LAST configurations. The component instead satisfies WCAG 2.2 Target Size (Minimum) via the spacing exception: 32px buttons with a 4px gap leave 36px between centers, enough to inscribe non-overlapping 24px touch circles around every interactive element. A long-form comment in pagination.css.ts documents this trade-off.
• Hover on regular page items uses neutralLow background at scale(1.06) (32 → ~34px). Pressed uses backgroundContainerPressed. Current page uses brandLow + textActivated text, scale 1.0. Duration 0.2s ease-in-out, matching the Figma "Animation" spec.
• Previous / Next labels and chevrons use textLink. After the Cyber skin overhaul (master merge) textLink → palette.brand = #0066FF, so the labels render in the blue specified by the Figma without changes to the skin contract.
• Chevrons use IconChevronLeftRegular / IconChevronRightRegular at size={20} to match the Figma weight and dimensions.
• Page number labels use medium weight to match the Figma typography.
• When hidePageList is set, the container gap becomes 16px to honour the "Previous and Next only" Figma layout.

Accessibility

• <nav aria-label> landmark with a localised default ("Paginación" / "Pagination" / "Paginierung" / "Paginação").
• aria-current="page" on the active page (rendered as a non-interactive span, not a button).
• aria-hidden="true" on the … ellipsis.
• All aria-labels are localised via four new tokens in src/text-tokens.tsx:
  • paginationLabel
  • paginationPrevPage
  • paginationNextPage
  • paginationGoToPage (with 1$s placeholder)
• Consumers can still override via the aria-label, navLeftLabel, navRightLabel props or via the theme's texts overrides, following the same pattern as Carousel.
• Touch targets pass WCAG 2.2 Target Size (Minimum) via the spacing exception (see Styling above).

Tooling

• 2 playroom snippets added to playroom/snippets.tsx (Pagination, Pagination iconOnly).
• Cyber theme exposed in playroom/themes.tsx as Community_Cyber / Community_Cyber_iOS (light + iOS), so they group visually under the Community_ prefix in the flat theme selector.
• Storybook story at src/__stories__/pagination-story.tsx.
• 9 unit tests in src/__tests__/pagination-test.tsx (nav landmark, single-page no-render, page click, Next click, disabled, controlled mode + 3 getPaginationItems edge cases).
• Screenshot tests at src/__screenshot_tests__/pagination-screenshot-test.tsx covering 8 scenarios × 2 viewports (Default, FirstPage, LastPage, WithEllipsis, NavOnlyResponsive, PagesOnly, IconOnlyControls, NextChapterLink).

Screenshots / verification

Run yarn playroom, switch to the Cyber skin in the selector, and load the Pagination snippet. Verify:

• Hover on a non-current page shows a subtle neutral grey background, not blue.

• The current page has a light cyan background (brandLow) with dark-blue text.
• Previous / Next labels are blue (not purple).

• Chevrons match the Figma weight.
• On mobile (< 768px), only chevrons are visible and each tap area is 48×48px.

Test plan

• yarn jest src/__tests__/pagination-test.tsx passes (9 tests).
• yarn tsc --noEmit clean.
• Visual QA against Figma in playroom for each skin.
• Switch locale to verify aria-labels translate (es / en / de / pt).

A11y tests

• IOS:

IOS-a11y-test.MP4

• Android:

Android-a11y-test.mp4

🤖 Generated with Claude Code