# QA: Shell design tokens and selected nav contrast (SPA only)

No /v1 behaviour changes. There is no httptest part.

## Automated (Vitest + Vue Test Utils, `task test:web`)

Mount DashboardShell with a test router and a resolved session (role "owner"). Mock the /v1 calls the shell issues (/v1/auth/me, and the update-check call if the shell makes one) so none go unmocked. Do not freeze the system date.

1. Token declarations: read web/src/assets/main.css as text; assert each token/theme/value row of the Examples table is declared in :root (light) or .dark (dark), and that --rc-canvas is absent.
2. Parent selected (N1): route /settings; the Settings link has aria-current="page" and the sand and on-sand classes (bg-(--rc-sand), text-(--rc-on-sand), or the equivalent in navUi); the Variants and Cache links have neither.
3. Child selected (N2, N3): routes /settings/media/variants and /settings/media/cache; the child link has the sand classes and aria-current; the Settings link has no sand class, no aria-current, the text-highlighted and font-medium classes, and the chevron open state (rotate-90).
4. Selected-row interaction classes: for the selected link, assert the class list includes the sand and on-sand variants for hover:, focus-visible: and active:, and includes no text-muted, text-white or text-inverted for the active state. Assert the leading icon inherits the on-sand colour.
5. Dark and light: repeat 2 and 3 with the `dark` class on the document root; assert the same class contract, since the tokens carry the theme.
6. Mobile drawer (N4, N5): open the drawer; assert 44 px row height classes and the same selected contract for /settings and /settings/media/variants.
7. Other routes: /home, /users, /activity selected links have the sand contract.

## Visual (`task visual:check`, gate: every capture within 10 %)

Each state's mocks reuse the board's own sample data from the "Settings navigation" frame in `RenewCMS Screens Back-office.dc.html`.

- `task visual:check -- settings` (the Settings screen states in docs/design/screens/settings.md and states.md)
- `task visual:check -- image-variants` for the nav states N1 to N5 (docs/design/screens/image-variants.md, "Settings navigation"; the screen key in web/visual/states.ts is `image-variants`).

Each capture is desktop 1440x900 and mobile 390x844, in light and dark. N4 and N5 are the mobile drawer states. None of these states are clock-sensitive.

| State | Route / trigger | Must show |
|---|---|---|
| N1 | /settings | Settings filled in sand, Media group visible, children unselected |
| N2 | /settings/media/variants | Settings unfilled and bold, Variants filled |
| N3 | /settings/media/cache | Settings unfilled and bold, Cache filled |
| N4 | Menu button on /settings | Drawer, 44 px rows, Settings filled |
| N5 | Menu button on /settings/media/variants | Drawer, Variants filled |

## Manual checks (screenshots cannot cover)

- Keyboard: Tab through the sidebar. The focus ring is 2 px --ui-primary on a selected row, and the sand fill stays.
- Hover and pressed on a selected row in dark mode: the label and icon never turn white or muted.