[tmccoy14]

Need

Guardian carries overrides on four Equality components that Equality should own: menus that light purple against the grey the rest of the app now uses, a command list that shows nothing as you arrow through it, a table row focus drawn twice, once in the pale brand lilac (about 2.3:1 on white), and a nav that can't sit under a sticky header without its scrollers being re-pinned by hand.

Problem

• dropdown-item-hover fills a hovered or focused DropdownMenu, Select or Command item lilac at 50%, with lilac text and a shadow.
• CommandItem lights only on :hover. cmdk marks the keyboard's item with data-selected, which nothing styles.
• A linked Table row's focus outline is outline-brand-primary, where every other control uses --color-focus-ring. The stretched link that covers the row never turns its own outline off either, so the browser draws a second ring just outside the row.
• .nav-scroller pins at top: 0 with max-height: min(100dvh, 100%), so under a sticky header it slides beneath it. Beside a rail and with a mouse, the panel's 32px switcher heading centres 4px above the rail's 40px first item; on touch both are 44px and already level.

Change

• Menu items hover and focus on bg-list-item-hover, the same as Nav and Table, with no lilac text or shadow. Danger and warning items keep their own colours.
• CommandItem lights on data-[selected=true], which cmdk sets from both the keyboard and the pointer.
• A linked Table row's focus outline is outline-focus-ring, and its stretched link draws none, so focus shows as one line.
• --eq-nav-offset, registered with @property as a length (initial 0px, inherited): the rail and panel pin that far down, and their height shrinks to match. Registration keeps a bare 0 valid inside the scroller's calc(), and lets a value set above ThemeProvider reach the nav in scoped mode, so it isn't a decision. Documented under Nav › Examples › Under a Sticky Header (set it on the element around the sidebar, not :root, or a Sheet inherits it), and in the agent skill's Nav line.
• A switcher heading in a NavPanel that follows a NavRail gets half the difference between the rail item and the heading as top padding, each at least a touch target: 4px with a mouse, 0 on touch. A panel with no rail beside it, such as the docs sidebar, is unchanged.

Minor release, 5.4.0, for the new variable.

Evidence

Dark mode, before | after.

Menu highlight (a Select or DropdownMenu item under the pointer)

Command list from the keyboard (an item arrowed to)

Table row keyboard focus (two lines become one)

Nav under a sticky header (switcher centred on the rail's first icon)

Built into Guardian with its four overrides removed (the nav offset and switcher stopgaps in app-layout.tsx, and app search's CommandItem hover and selected classes): its nav, app shell and current-item fill specs pass, 39 cases, including the check that the panel's scroller starts under the header and the switcher centres within 1px of the rail's first icon. Measured there, the switcher and the rail's first icon share a centre with a mouse, on a touch desktop, and in the phone Sheet on touch. New compiled-CSS tests cover the offset's registration and use, the switcher padding with a mouse and on touch, CommandItem's selected fill, and the table row's single outline; each fails against the old CSS. UI tests (199), lint and Prettier pass.

Not covered

• Safari and Firefox.
• Firefox's own focus ring: the preflight's html :-moz-focusring { outline: auto } still draws on sort headers. It needs a Firefox check first, since many controls draw focus with a box-shadow and don't turn the outline off.
• Guardian's bump, which deletes the overrides, follows the release.

🤖 Generated with Claude Code