# Pagination

Page numbers with Previous and Next, like `Previous 1 … 44 45 46 … 89 Next`. The first and the last page are always
there, the current page with one neighbour each side; "…" stands for the pages left out (a gap of one page shows that
page instead). At the start it shows `1 2 3 4 … 89 Next`, at the end `Previous 1 … 86 87 88 89`. Previous is missing on the
first page, Next on the last. The current page is filled with the accent colour (black without a theme).
Live demo: https://components.hybriel.worldapi.org/pagination

## Use it in an app

Copy the folder `components/pagination/` (`pagination.hl`) (optionally `shared/tokens.hl` for the app's own accent; it carries its own `Style`), then compose it into a
page and say how many pages there are:

```
import Pagination from './pagination.hl'

View {
	Pagination { pages = 89 }
}
```

- No script needed. One pagination per page (a composed component's members are the page's state, COMPONENTS.md §12).
- `previousLabel` / `nextLabel` are the button texts (default `Previous` / `Next`).
- Colours are the semantic tokens only, each with a black/white/grey fallback: the base look is black, white and greys (no frames; root README "Look"); an app that declares the WorldAPI tokens (layouts.worldapi.org's theme) restyles it (the current page: white on black).

## Data out

None yet: the page cannot read the page number shown, and `emit` from the component does not reach the host
(hybriel#87). The first app that needs it (a ticket list) adds it.

## Markup and states

`<pagination>` holds a `<nav>` with `<ol id="pagination-items">`; each entry is an `<li>` with a `<button>`: class `page`
(the current one also `current`), `step` (Previous / Next), `gap` (the "…", a click does nothing). Narrow
screens: the buttons wrap onto a second line.