Profile Checklist Progress Navbar Block for React

Edit STEPS (an id and a label each) and START, the ids done when the page loads. The percentage is done.length over STEPS.length, rounded, so every step is worth the same; the label, the fill and the popover's line all derive from it. Pass START from your server and send the ticked ids back from toggle, which is where to save them.

The fill is a 2-pixel div at the top of the header, inset-x-0, whose inner bar's width is the percentage, with a width transition; it starts at the inline start, so it grows from the right in right-to-left layouts. It's decoration: the number is in text. The label in the bar says it, and the popover's status line (a polite live region, present while the popover is open) says "4 of 5 steps done" as you tick, so a screen reader hears each change.

Enter or Space opens the popover and moves focus into it; Escape or a click outside closes it and puts focus back on the trigger. It isn't modal, so the rest of the bar stays reachable.

Tab walks the five steps and Space ticks the one that has focus; clicking a step's text ticks its box too. Each box is named by its step's label.

The catalog's checked box is the primary colour, and the Shine Button is meant to be the only primary control in the bar. The block gives the checked box and its row foreground tones (data-checked:bg-foreground and the equivalent for each library).

Below md the links fold into a menu button that opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was). The bar keeps the wordmark, Complete profile (below 368 pixels it reads "Complete", the full name kept for screen readers) and the menu button; the percentage label is read out but not shown, because the fill says it. The popover fits the screen at 320 pixels.

Edit PAGES; the bar and the sheet read it. Every link points at #. Complete profile opens the checklist: a real site would link each step to the page where it's done.