fix(TabList): light underline on tab hover instead of ghost pill

[kentonquatman]

What

Fixes #2768 — hovering an unselected tab rendered a filled ghost-button pill instead of the bottom-bar underline that matches the selected-tab indicator.

This reverts the pill styling introduced in #1357. This restores a light underline on hover — a muted version of what selected tabs show — for both Tab and TabMenu.

Changes

Tab

• Removed the hoverBg pill element (--color-overlay-hover fill + --radius-element) and its hoverSizeStyles.
• indicatorUnselected now paints the selected accent color (--color-accent) at opacity: 0.4, revealed on hover under @media (hover: hover) via the scoped tabScope ancestor selector. Default (non-hover) stays at opacity: 0.

TabMenu

• Removed the hoverBg pill element and hoverSizeStyles.
• The indicator now always renders; when no option is selected it uses the new indicatorUnselected style (--color-icon-primary at opacity: 0.4 on hover) to match the trigger's selected indicator.

Tests

• Updated TabList.test.tsx span-count assertions (tab children dropped from 3 → 2 with the pill element removed).

Why not a raw revert of #1357

The XDSTab/XDSTabMenu files were renamed to Tab/TabMenu and later commits (e.g. #2435, which switched the selected indicator to --color-accent) landed on top, so #1357 no longer reverts cleanly. This reconstructs the pre-#1357 hover affordance while preserving the primary selected colors and layout="fill" support that #1357 also added. The hover color is intentionally the selected indicator color at reduced opacity — a true "light version of the selected underline" — rather than the old neutral --color-border gray.

Validation

• pnpm -F @astryxdesign/core typecheck ✅
• eslint src/TabList ✅
• pnpm -F @astryxdesign/core build ✅ (StyleX compiles; hover-reveal opacity:.4 rule present in astryx.css)
• Full core suite: 182 files, 3845 tests passing ✅

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jul 9, 2026 4:57am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.6KB	0B

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[ernestt]

This would introduce a new state visual which I think should require a really really strong reason to add new state visuals. Im trying to capture design conventions here: https://github.com/facebook/astryx/wiki/Design-Conventions#state-representations. And hover states have one visual and I want to avoid a situation like selection states where we have fragmented to 5 styles.