[matthewmr-eqty]

Need

Studio's sidebar and the docs sidebar should come from Equality, so they look and behave the same and Studio can delete its own copy (GRD-192). Part names and props freeze with this release.

Problem

The rows, the drill-in and the sidebar frame lived only in Studio, with their own colour variables. The motion and focus rules were spread across two Studio files.

Change

Eight parts, in two layers:

Part	What it is
NavRail, NavRailItem	The column of icon links on the left
NavPanel	The panel beside it: a <nav> landmark with a header and a scrolling body
NavSwitcher	Switches between items such as projects, in the panel's header
NavList, NavListGroup, NavListItem, NavListSeparator	The rows, in groups; they work outside the sidebar too
NavDrill, NavDrillLevel	Levels that slide in and out, each with a ‹ row back

• Named NavList, not Menu: menus are for actions, which is DropdownMenu's job; nav lists are for going places.
• One row size, 36px as in Studio today, growing to 44px on touch screens. Density for all of Equality is GRD-173.
• NavDrill can follow the URL (value and onValueChange, as Tabs does), and slides only when the user asked for the change.
• Departs from Henry's GRD-81 rule that suffix is only for the › caret: the › now comes from drill and is hidden from screen readers, and suffix holds badges and marks (a count, "New", ↗) that screen readers read with the label.

API choices

Every prop is used by Studio or the docs sidebar. Adding a prop later doesn't break anyone; removing one does.

• No title on NavPanel: no Studio panel used one. A heading goes in header.
• One action on NavSwitcher, as in Studio today: "Create Project" is an item in the list, because a separate button in the dropdown can't be reached by keyboard. A footer slot can be added later.
• Studio's touch, back, view and motion are gone: touch sizing is automatic, levels draw their own ‹, and NavDrill owns the motion

Review focus

packages/ui/src/components/nav-list/nav-drill.tsx carries the risk: the slide between levels and where keyboard focus lands. The rest is mostly additive. Skip pnpm-lock.yaml.

Not covered

React 18, real browsers and screen readers. Density for all of Equality is GRD-173.
Closes GRD-191 · Part of GRD-81

[tmccoy14]

Six things I think should be sorted before this merges, inline below. Smaller, non-blocking items are in a separate comment.

---

Generated by Claude Code

[tmccoy14]

Smaller, non-blocking items:

1. Consistency: in components/index.ts the nav-list/* and nav/* exports sit between list-or-grid-view-toggle and loading-overlay; alphabetically they belong after motion-collapsible. NavRail and NavListSeparator are plain functions without forwardRef/displayName, unlike every other new part.
2. CHANGELOG wording: "A row's suffix is now read by screen readers… changes the rule in GRD-81" describes a component that's new in this release, and contradicts "No existing component changes". It also cites an internal ticket and "Studio", which no earlier entry does. "Rows are 36px" leaves out the 44px under a coarse pointer that the docs mention.
3. NavDrill re-renders: setRootRef is recreated every render, so a caller's callback ref gets null then the node each time (useCallback or Radix's compose-refs fixes it). The NavDrillContext.Provider values are fresh object literals, so every NavListItem re-renders whenever NavDrill's own state changes. Worth memoising.
4. Production console.warn: the WCAG 2.5.3 backLabel warning in NavDrillLevel runs in production builds too. Wrap it in a development-only check?
5. blockClosedTypeahead is public API but lives in nav/select-typeahead.ts; it's a Select helper and fits better under components/select/. The docs recommend it but leave it out of the Usage import list.
6. Docs (nav.mdx) vs the create-documentation template:
   • The NavDrillLevel Required column says "With parent"; the template uses only ✅/❌, so the condition could go in the description.
   • The NavRailItem table is missing href.
   • The Prefix and Suffix example uses drill="eu-ai-act" outside a NavDrill, where the row is a button that does nothing.
7. DocsNavList (only if it stays in this PR rather than moving to GRD-193):
   • A group node with no children falls through to a NavListItem with no href, which renders a button that does nothing.
   • Rows nests to any depth, but only [data-depth='1'] is styled.
   • External links open in a new tab with only an aria-hidden arrow, so screen readers aren't told.
   • key={section.label ?? index} mixes labels and indexes as keys.

---

Generated by Claude Code

[matthewmr-eqty]

@tmccoy14 all addressed in 617c859:

Inline

• A1 href is now required unless asChild (a union like NavDrillLevelProps), with a type test and the docs row.
• A2 the link IconButton passes on ...props. There's a test with TooltipTrigger asChild that failed before the fix.
• A3 DocsNavList is out of this PR. It moves to GRD-193 with your B7 points.
• A4 the decisions now only land on .root in the scoped build. Sizes are prefixed --eq-. theme-decisions-scoped.css is generated from theme-decisions.css, the same way preflight is, and a test fails if it's stale.
• A5 now oklch, and the changelog says the colours are mixed, not Pinwheel tokens. On dark mode, I kept one name that switches, the way all the Pinwheel colours work. control-edge has -dark twins only because it sits in @theme inline, which freezes its mix percentage. Moving it over is GRD-206, under GRD-173, which now frames the options and decisions layers.
• A6 the stub now loads only in nav-drill.test.tsx. The full suite passes without it in the shared setup.

Non-blocking

• B1 the exports are in A–Z order. NavRail and NavListSeparator now use forwardRef and have a displayName.
• B2 changelog rewritten: no Studio or GRD references, the IconButton changes listed under Changed and Fixed, and the 44px touch rows mentioned.
• B3 the ref callbacks and context values are now stable. The caller's ref fires once instead of on every render.
• B4 the warning only runs outside production. I checked that a production bundle drops it.
• B5 moved to select/, and the Select docs now have a "A select that navigates" note.
• B6 all three fixed.
• B7 moves with A3.

I also removed the CSS tests that only repeated the stylesheet's values. The leak and stale-file checks stay.

[tmccoy14]

🚀