[matthewmr-eqty]

Need

Docs sites and apps need sidebar folders readers open and close, built from Equality rather than hand-rolled.

Problem

Nav could only drill into a new level, so a docs tree had no Equality part. Its hints each set their own colour, apps hand-built new-tab arrows, and the gap under the switcher depended on the group below it.

Change

• NavListExpandable adds folders that keep their links in server HTML, open themselves around the current row, and move with the drill's motion, now named once as --eq-nav-motion-*.
• --eq-list-item-muted-color colours every hint (›, ⌄, ‹, ↕, ↗). Each takes its row's colour on hover and on the current row.
• target="_blank" rows draw their own ↗, "(opens in a new tab)" and rel.
• The switcher keeps the 12px group gap whatever follows it, and --eq-switcher-name-fade lets a site set its fade.
• Hover fills show only with a mouse or trackpad. MotionCollapsibleContent no longer grows when it first renders open.

Evidence

• ui tests (180), the full build, lint, Prettier and astro check pass on this commit alone.
• Checked in the browser: a folder opening on first load runs no transition (12 ran before the fix); hint colours at rest and on hover; the ↗'s accessible name; switcher gaps (unlabelled 0 → 12px, labelled and drilled unchanged).

Review focus

Merging publishes 5.1.0. Start with NavListExpandable and how a folder opens around the current row in nav-list.tsx, then nav-list.module.css and nav.module.css. Studio sees two changes on upgrade: a quieter ›, and hover fills only with a mouse. The Nav page that documents all this is its own PR, after this one.

Not covered

Studio's e2e/policy-subnav.spec.ts hasn't run against 5.1.0 (GRD-192). The live Nav page lags these parts until the docs PR merges. @eqtylab/docs 0.16.0 follows and must drop its own ↗.

Flow

row becomes current ──▶ folders around it open (instantly on first load)
reader closes folder ──▶ stays closed until the next page inside it
row hovered or current ──▶ its muted marks take the row's colour
target="_blank" ──▶ ↗ + "(opens in a new tab)" + rel="noopener noreferrer"

Part of GRD-193 · GRD-81

🤖 Generated with Claude Code