Browse menu: redesign as a popover with featured destinations

[lokesh]

feature — Redesigns the Browse menu in the top navigation bar.

What changes for the reader

Today, clicking Browse opens a plain, flat list of links. This PR rebuilds it using our new ol-popover component, and takes the opportunity to give the menu a hierarchy.

• A small set of destinations — Subjects, Trending, Library Explorer, and Lists — are featured at the top, each with an icon and a one-line description of what you'll find there. These are the areas we want to guide people toward — the ones we've invested in and want to highlight.
• The remaining options (Collections, K-12 Student Library, Book Talks, Random Book) sit below a divider as simple links. Sections that are more niche, stale, or inactive stay fully accessible, just downplayed.

The point of the hierarchy is focus: rather than presenting everything as equal, the menu draws attention to a few places worth exploring, while keeping the rest within reach. The menu opens centered under the Browse button with a smooth animation, and on phones it slides up as a bottom sheet you can swipe away.

Technical

• Adds openlibrary/templates/lib/browse_popover.html, which renders the menu using the new ol-popover web component (openlibrary/components/lit/OlPopover.js) instead of a native <details> dropdown. ol-popover already handles positioning, focus trapping, Escape/outside-click close, reduced-motion, and the mobile bottom-tray behavior.
• nav_head.html now renders browse_popover (desktop + mobile headers) in place of the generic header_dropdown for Browse. browseLinks is unchanged and still feeds the hamburger menu, so nothing else is affected.
• Featured-item icons are inline SVGs using currentColor; all links keep their existing data-ol-link-track analytics labels.
• Styling lives in static/css/components/header-bar.css (tokens only, within the 0,3,0 stylelint specificity cap).
• static/css/ol-components.css gets a small pre-hydration rule so the popover's content doesn't briefly flash on page load before the web component upgrades.

Testing

1. Load any page and click Browse in the header.
2. Confirm the featured grid (Subjects / Trending / Library Explorer / Lists with icons + descriptions), the divider, and the simple links below.
3. Each item navigates to the same destination as before (/subjects, /trending, /explore, /lists, /collections, /k-12, /booktalks, /random).
4. Press Esc or click outside to close; check keyboard tabbing stays within the menu.
5. On a narrow viewport, confirm it opens as a bottom sheet that can be swiped down to dismiss.
6. Reload a few times — the menu content should not flash before the page settles.

Screenshot

Stakeholders

[accesslint]

Found 1 issue across 1 rule.

[accesslint]

WCAG 1.3.1: <ul> contains direct text content. Wrap in <li>.

<ul> and <ol> must only contain <li>, <script>, or <template> as direct children.

Details

Screen readers announce list structure ('list with 5 items') based on proper markup. Placing non-<li> elements directly inside <ul> or <ol> breaks this structure. Wrap content in <li> elements, or if you need wrapper divs for styling, restructure your CSS to style the <li> elements directly.