Lane 11 PR 1: the sheet's pieces in the design system (#737, #364) #960

Merged

claude-bot merged 2 commits from build/lane11-1-sheet-pieces into main 2026-09-30 07:41:23 +00:00

Conversation 0 Commits 2 Files changed 34 +1322

claude-bot commented 2026-09-30 07:19:47 +00:00

Collaborator

Copy link

Lane 11 (#737) PR 1. These are lane 0's eight sheet components (#364), each with its states.jsx on /design and its tests, ported from lane9.html's classes onto ui/tokens.css. They're used by the sheet page (PR 9 on).

Component	What it is	Accessibility
Derivation	a computed value shown once, its terms small beneath ("10 + Dex 4 + Prof 8 + Item 1"); on a phone the terms sit behind a real "How it's worked out" button	aria-expanded/aria-controls; no repeated total
RankPips	a rank on a named scale (PF2e has 4 pips; 5e has 2) with the rank word	pips aria-hidden, the word is text
Track	N boxes (dying, wounded, death saves, a clock in segments)	read-only is role="img" named "Dying, 1 of 4"; pressable is a group of 44×44 buttons with aria-pressed
Resource	current / max / temp with −5 / −1 / +	44×44 buttons named "−5 Hit points"; aria-disabled at the ends
Dice	a creation or levelling roll's dice, a dropped die struck through, the total. Display only (D85)	visually-hidden " dropped"
StepStrip	Start a character and Level up steps	the state in the name, not in ::before (Chromium reads that); aria-current="step"
WhatChanges	before / after / why, on the library's Table	a captioned table
Picker	search and kind above; the list, with the chosen entry's card and footer beside it; one column on a phone	a labelled search, aria-pressed results, a polite result count

/design: phone-width states now get the app container, so the phone forms that are container queries (Derivation's button, the Picker's one column) show there.

Render check (Vite, Playwright, 1440 and 390, light and dark):

• Touch targets: every Track and Resource button measures 44×44.
• Contrast: every --ink-faint text pair is at least 5.13:1 (WCAG AA is 4.5:1).
• Overflow: none on any component view at 390.
• Fixes the check found: the missing phone container, the Picker's cramped search and list and its empty card state, a faint dropped die, and a WhatChanges state whose data disagreed with itself.

AppShell/AppBar's old 41 px overflow at 390 is fixed separately in #953.

Checks: eslint shows 0 errors, and the full vitest suite passes (2805, including DesignReference rendering every state).

Changelog: changelog.d/737-lane11-sheet-pieces.added.md.

🤖 Generated with Claude Code

Lane 11 (#737) PR 1. These are lane 0's eight sheet components (#364), each with its `states.jsx` on `/design` and its tests, ported from lane9.html's classes onto `ui/tokens.css`. They're used by the sheet page (PR 9 on). | Component | What it is | Accessibility | |---|---|---| | **Derivation** | a computed value **shown once**, its terms small beneath ("10 + Dex 4 + Prof 8 + Item 1"); on a phone the terms sit behind a real "How it's worked out" button | `aria-expanded`/`aria-controls`; no repeated total | | **RankPips** | a rank on a named scale (PF2e has 4 pips; 5e has 2) with the rank word | pips `aria-hidden`, the word is text | | **Track** | N boxes (dying, wounded, death saves, a clock in segments) | read-only is `role="img"` named "Dying, 1 of 4"; pressable is a group of 44×44 buttons with `aria-pressed` | | **Resource** | current / max / temp with −5 / −1 / + | 44×44 buttons named "−5 Hit points"; `aria-disabled` at the ends | | **Dice** | a creation or levelling roll's dice, a dropped die struck through, the total. Display only (D85) | visually-hidden " dropped" | | **StepStrip** | Start a character and Level up steps | the state in the name, not in `::before` (Chromium reads that); `aria-current="step"` | | **WhatChanges** | before / after / why, on the library's `Table` | a captioned table | | **Picker** | search and kind above; the list, with the chosen entry's card and footer beside it; one column on a phone | a labelled search, `aria-pressed` results, a polite result count | **`/design`:** phone-width states now get the `app` container, so the phone forms that are container queries (Derivation's button, the Picker's one column) show there. **Render check** (Vite, Playwright, 1440 and 390, light and dark): - **Touch targets:** every Track and Resource button measures 44×44. - **Contrast:** every `--ink-faint` text pair is at least 5.13:1 (WCAG AA is 4.5:1). - **Overflow:** none on any component view at 390. - **Fixes the check found:** the missing phone container, the Picker's cramped search and list and its empty card state, a faint dropped die, and a WhatChanges state whose data disagreed with itself. AppShell/AppBar's old 41 px overflow at 390 is fixed separately in #953. **Checks:** eslint shows 0 errors, and the full vitest suite passes (2805, including `DesignReference` rendering every state). Changelog: `changelog.d/737-lane11-sheet-pieces.added.md`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-bot added 2 commits 2026-09-30 07:19:47 +00:00

WIP: lane 11 sheet pieces (Derivation, RankPips, Track, Resource, Dice, StepStrip, WhatChanges, Picker) ... 6348a82ba9

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

Lane 11 PR 1 render-check fixes: phone container on /design, Picker layout and empty state, Dice strike, WhatChanges data ... 07ee5cca6f

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

claude-bot merged commit 8e490e7685 into main 2026-09-30 07:41:23 +00:00

claude-bot referenced this pull request from a commit 2026-09-30 07:41:25 +00:00

Merge PR #960: lane 11 PR 1 — the sheet's pieces in the design system (#737, #364)

rbrooks referenced this pull request from a commit 2026-09-30 07:46:47 +00:00

Merge origin/main into feat/design-admin; phone-state boxes are the app container and scroll sideways (#952, #960)

claude-bot referenced this pull request 2026-09-30 08:07:38 +00:00

/design in production builds, for server administrators only #952

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

backend

Issue related to the backend

  

bot

Issue related to the bot

  

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

frontend

Issue related to the frontend

  

help wanted

Need some help

  

invalid

Something is wrong

  

question

More information is needed

  

recording

Issue related to the recording system

  

security

Security hardening / vulnerability work

  

wontfix

This won't be fixed

No labels

backend

bot

bug

duplicate

enhancement

frontend

help wanted

invalid

question

recording

security

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

rbrooks/Quest-Board!960

No description provided.