Bug: anchors inside Content panels had no hover/padding/border treatment
— consumers writing typical mega-menu markup (<a> elements) got a wall
of unstyled text.
Adds a default sub-item recipe that targets
\`[data-navigation-menu-content] :is(a, [data-navigation-menu-link])\` —
covers both plain anchors AND the official \`NavigationMenu.Link\` part
when used inside Content. Each item gets:
- display: block
- padding 8px / 12px
- border-radius (matches md radius)
- color = primary content
- text-decoration: none, cursor: pointer
- hover/focus background = --color-primary-element
- aria-current="page" + data-active = same tinted active state
Demo cleanup: dropped the redundant inline \`style="color: inherit; text-decoration: none;"\` overrides on every <a>, tightened the grid gap
from space-3 to space-1 (rows now have their own background hover so
gap can shrink). Content panel padding reduced to space-2 (was space-4)
because sub-items already provide their own padding.
Verified in browser: items render with padding 8/12px, border-radius 6px,
text-decoration: none, cursor: pointer. Hover changes the background to
primary-element.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dev
a010f8f255