Chapter Outline Features Block for React

Edit CHAPTERS at the top of the file: each entry has a title, a one-line summary, minutes and the three sections it opens to. CURRENT is the chapter the reader is on (1-based): the ones before it show a check, it starts open, and the header's progress and button follow it. The columns are the first four and the last four, so keep the list at eight, or change the two slices.

Each chapter's title is a real button inside an h3, so Tab reaches it, Enter and Space open and close it, and screen readers hear the heading and whether it is expanded. A chapter's state ("read" or "in progress") is added after its title for screen readers, since the marker beside it is decorative.

It's our Collapsible on Base UI: the panel grows with a CSS grid-row transition and the chevron turns with it. Reduced motion turns the transition off.

It shows the reader's place, worked out from CURRENT and the number of chapters: three of eight is 38%. The bar is decorative, because the words "Chapter 3 of 8" beside it say the same thing, so it's hidden from screen readers. Wire both to your own progress data.

The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. Each row draws its own top rule with Guides, which puts a + mark where it meets the rails and the divider. The last row draws no bottom rule, because the next block's top rule is the edge.

The two columns become one list, and the read time moves from its Badge into the summary line so the title keeps its room. The header stacks, with the progress and the Shine Button under the sentence. Nothing scrolls sideways at 320 pixels.