feat(styleguide): add the pager, two chevron icons, and two pattern sentences #315

Merged

dominik.polakovics merged 1 commit from afk/314 into main

2026-10-19 16:32:35 +02:00

dominik.polakovics commented

2026-10-19 16:26:59 +02:00

Owner

Closes #314

What

docs/styleguide/components.css: a new .pager block (before forms) and four lines in the @media (max-width: 720px) block, copied as specified in the issue. Every value is a token. There are no colour literals, and opacity appears only on .pager [aria-disabled="true"].
docs/styleguide/styleguide.html:
- Section 5: a new board, "pager · the pages under a long list", after the list/table board. It has three panels with builds tables and the pager in each .panel__foot: page 2 of 3, page 17 of 40 (1 … 15 16 [17] 18 19 … 40), and page 1 of 3 with a disabled Newer span. Below it are the four articles Pages, Ends, Count and Place, worded as in the issue.
- Section 6: the three additions to Page anatomy, Destructive flows and Responsive.
- PATHS: gains the Lucide prev and next chevrons.

The sample links use href="#components" instead of ?page=N so the page's existing click guard (.ui a[href^="#"]) holds and the file doesn't reload. The markup is otherwise as specified.

No change to tokens, the contrast table, web/src/styles.css, the styleguide README, AGENTS.md or the skills. None of them document this component.

Verification

go test -count=1 ./docs/ passes, and python3 docs/styleguide/check-contrast.py exits 0.
The new CSS lines contain no colour literal. A grep of the whole file still finds the existing rgba in .toggle__opt, which is unchanged.
web vitest suite: 131 files, 3351 tests passed.
I rendered the pager board in headless Chromium at 1100px and 390px:
- Desktop: the count is at the left, the controls at the right, the current page is held and the disabled end is drawn.
- Phone: the numbers are hidden, Newer and Older sit at the edges, and "Page n of m · …" is on the line below.

🤖 Generated with Claude Code

Closes #314 ## What - **`docs/styleguide/components.css`**: a new `.pager` block (before `forms`) and four lines in the `@media (max-width: 720px)` block, copied as specified in the issue. Every value is a token. There are no colour literals, and `opacity` appears only on `.pager [aria-disabled="true"]`. - **`docs/styleguide/styleguide.html`**: - **Section 5:** a new board, "pager · the pages under a long list", after the list/table board. It has three panels with builds tables and the pager in each `.panel__foot`: page 2 of 3, page 17 of 40 (1 … 15 16 [17] 18 19 … 40), and page 1 of 3 with a disabled Newer `span`. Below it are the four articles Pages, Ends, Count and Place, worded as in the issue. - **Section 6:** the three additions to Page anatomy, Destructive flows and Responsive. - **`PATHS`:** gains the Lucide `prev` and `next` chevrons. The sample links use `href="#components"` instead of `?page=N` so the page's existing click guard (`.ui a[href^="#"]`) holds and the file doesn't reload. The markup is otherwise as specified. No change to tokens, the contrast table, `web/src/styles.css`, the styleguide README, AGENTS.md or the skills. None of them document this component. ## Verification - `go test -count=1 ./docs/` passes, and `python3 docs/styleguide/check-contrast.py` exits 0. - The new CSS lines contain no colour literal. A grep of the whole file still finds the existing `rgba` in `.toggle__opt`, which is unchanged. - `web` vitest suite: 131 files, 3351 tests passed. - I rendered the pager board in headless Chromium at 1100px and 390px: - **Desktop:** the count is at the left, the controls at the right, the current page is held and the disabled end is drawn. - **Phone:** the numbers are hidden, Newer and Older sit at the edges, and "Page n of m · …" is on the line below. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

dominik.polakovics added 1 commit

2026-10-19 16:26:59 +02:00

feat(styleguide): add the pager, two chevron icons, and two pattern sentences

ci / build-and-test (pull_request) Successful in 4m1s

Details

ci / release (pull_request) Has been skipped

Details

582b0df6c6

components.css gains .pager (meta, pages, gap, current page held on the
neutral tone, disabled ends at reduced opacity) and its narrow-screen
rules: below 720px the numbers give way to "Page n of m", the ends take
the edges and the count the line below. styleguide.html shows it at
three pages, at forty pages and on page 1 with a disabled end, with the
Pages, Ends, Count and Place rules; Patterns records where a pager sits,
that a reissuable capability's revoke needs no confirmation, and the
pager's responsive behaviour. PATHS gains the Lucide prev/next chevrons.

No token, colour, tone or contrast pair changes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

dominik.polakovics commented

2026-10-19 16:32:32 +02:00

Author

Owner

[autoland] verdict: pass

PASS. Signal: CI ci / build-and-test success (run 327). It runs go test ./... (including ./docs/ check-contrast and link checks) and the web vitest suite (the styles.css drift test). Conventions: Conventional Commits title, Closes #314, and the diff is exactly the issue's scope: components.css .pager block plus the 4 narrow-screen lines, the section-5 board and 4 articles, the 3 section-6 additions, and the prev/next PATHS. No colour literal is added, and opacity appears only on [aria-disabled="true"]. I rendered the board in headless Chromium at 1100px and 390px; both match the acceptance criteria. Up to date with main, no conflicts. Note, below the CONCERNS bar: .btn:hover:not(:disabled) and .btn--ghost:hover:not(:disabled) (components.css:46,54) still match the aria-disabled Newer span and the held current page, so both get hover styling. The CSS is copied verbatim from the issue; worth a look when deckle-hosted#146 adopts it.

[autoland] verdict: pass PASS. Signal: CI `ci / build-and-test` success (run 327). It runs `go test ./...` (including ./docs/ check-contrast and link checks) and the web vitest suite (the styles.css drift test). Conventions: Conventional Commits title, `Closes #314`, and the diff is exactly the issue's scope: components.css .pager block plus the 4 narrow-screen lines, the section-5 board and 4 articles, the 3 section-6 additions, and the prev/next PATHS. No colour literal is added, and opacity appears only on [aria-disabled="true"]. I rendered the board in headless Chromium at 1100px and 390px; both match the acceptance criteria. Up to date with main, no conflicts. Note, below the CONCERNS bar: `.btn:hover:not(:disabled)` and `.btn--ghost:hover:not(:disabled)` (components.css:46,54) still match the aria-disabled Newer span and the held current page, so both get hover styling. The CSS is copied verbatim from the issue; worth a look when deckle-hosted#146 adopts it.

dominik.polakovics merged commit 8d80ddb50b into main

2026-10-19 16:32:35 +02:00

dominik.polakovics referenced this pull request from a commit

2026-10-19 16:32:35 +02:00

Merge pull request 'feat(styleguide): add the pager, two chevron icons, and two pattern sentences' (#315) from afk/314 into main