Add active state support for TOC links in MetaBar

[sebassg]

Enter your suggestions in details:

Summary

The MetaBar component renders a Table of Contents (TOC) using heading items,
but currently has no way to visually indicate which heading is active (i.e.,
currently visible in the viewport during scroll).

Proposed Changes

1. Add an activeSlug prop to MetaBar (or an isActive prop on the link
   component) so consumers can indicate which heading is currently active.
2. Add a CSS class (e.g. .tocLink / .tocLinkActive) in
   index.module.css that styles the active link using box-shadow instead
   of border-left to avoid horizontal layout shift:

.tocLink {
  box-shadow: inset 2px 0 0 transparent;
  padding-left: 0.25rem;
}

.tocLinkActive {
  box-shadow: inset 2px 0 0 var(--color-primary);
  font-weight: 600;
  color: var(--color-primary);
}

Using box-shadow instead of border-left ensures the layout doesn't shift
when the active item changes during scrolling.

Related

• feat(web): add scroll-spy active indicator to TOC doc-kit#657

---

[AugustinMauroy]

BTW we use tailwind css