Seb Slight 1b886e7378 docs(ui): add animated underline for nav tabs (#21912) ...

Add a responsive, animated underline indicator for navigation tabs to
improve visual focus and active-state feedback.

- Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline
  element, including transitions, positioning, and dark mode color.
- Hide default first h1 in #content to keep header layout consistent.
- Add docs/nav-tabs-underline.js to create and manage the underline
  element, observe DOM mutations, and update underline position/width on
  changes, resize, and when fonts load.
- Preserve last known underline position/width across re-initializations
  to avoid visual jumps.

This change makes active tab state visible with smooth movement and
ensures the underline stays synchronized with dynamic content.

2026-02-20 09:33:46 -05:00

2.8 KiB

Raw Permalink Blame History

View Raw