# Pagination

Level: molecule.

## Purpose and use

Move between known pages and choose how many rows a page contains. Use a separate
load-more pattern for unknown totals or cursor-only navigation.

## Anatomy, behavior, and accessibility

- A page-size radio Dropdown sits opposite the visible range and first/previous/
  next/last native buttons. Controls emit changes; records are not fetched or sliced.
- page is 1-based and clamped to the available count. Page size is at least 25;
  smaller options are removed, duplicates collapse, and the current size is included.
- Changing size emits pageSizeChange and pageChange with page=1. Unchanged page
  actions do not emit. First/last boundaries disable the corresponding controls;
  empty results display 0-0 из 0.
- A named nav contains named buttons and a polite live region for the range.
  Disabled disables the trigger and navigation buttons. Supply a finite total and
  labels meaningful for the displayed entity; number formatting is Russian.

## Open Questions

Nonfinite totalItems/pageSize are not fully sanitized. Disabling after the
page-size menu opens does not add a disabled guard to selectPageSize; that transition
needs review if asynchronous disabling is required.

## Local component contract

This is the active owned contract for `component.pagination`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblPaginationComponent` — `wbl-pagination` (src/app/design-system/patterns/pagination/pagination.component.ts).

### Inputs

- `WblPaginationComponent.page = input(1)`
- `WblPaginationComponent.pageSize = input(25)`
- `WblPaginationComponent.totalItems = input(14800)`
- `WblPaginationComponent.pageSizeOptions = input<number[]>([25, 50, 100])`
- `WblPaginationComponent.rowsPerPageLabel = input('Строк на странице')`
- `WblPaginationComponent.ariaLabel = input('Пагинация')`
- `WblPaginationComponent.disabled = input(false)`

### Public types and allowed values

```ts
interface WblPaginationChange {
  page: number;
  pageSize: number;
}
```

### Models

- None.

### Outputs

- `WblPaginationComponent.pageChange = output<WblPaginationChange>()`
- `WblPaginationComponent.pageSizeChange = output<number>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Code: `src/app/design-system/patterns/pagination/pagination.component.ts`.
- Focused test: `src/app/design-system/patterns/pagination/pagination.component.spec.ts`.
- Public export: `export * from './patterns/pagination/pagination.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/pagination.stories.ts` (`Design System/Patterns/wbl-pagination`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.