feat: allow pinning of sidebar sections

[garthdw]

Add button for pinning sidebar sections.

Saves to localStorage for persistence.

Expand collapsible sections to all sidebar sections.

Ensure we have order-[0-15] available since they're dynamically calculated.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Error		Feb 1, 2026 0:21am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 1, 2026 0:21am
npmx-lunaria	Ignored		Feb 1, 2026 0:21am

[knowler]

ya, so using order here would be problematic since it wouldn’t affect the order for screen reader users. Like I mentioned on Discord, reading-order/reading-flow would help, but that only works in Chrome/Edge. If you want a solution that works today, you can use Shadow DOM as that affects the order in the Accessibility Tree without changing the light DOM order.

If you attach a shadow root to the sidebar that has this content:

<slot named=pinned></slot>
<slot></slot>

Then all you would need to do is set slot=pinned on each section. The only catch is that they’ll be added to the pinned section in the order that they appear in the DOM. You could use manual slot assignment to get around this, but then you need to imperatively assign the pinned sections to the “pinned” slot in the order the user pins them in. Here’s a demo of manual slot assignment: https://knowler.dev/demos/nJJPaBs?codepen

[knowler]

If you wanted to introduce this feature as a progressive enhancement, you could conditionally display the pin action with @supports (reading-flow: flex-visual), then just update the reading-order to be the same value as order set reading-flow: flex-visual. CI might cry because it’s likely unaware of reading-flow.

[garthdw]

I'm going to close this for now and break this into a couple PRs instead.

first one: #639