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

.changeset/tab-hover-underline.md

@@ -0,0 +1,9 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Restore the light underline on Tab and TabMenu hover (#2768)
+
+Hovering an unselected tab now reveals a light bottom-bar underline — a muted version of the selected-tab indicator — instead of the filled ghost-button pill introduced in #1357.
+
+@kentonquatman

packages/core/src/TabList/Tab.tsx

@@ -115,23 +115,6 @@ const styles = stylex.create({
       ':focus-visible': '2px',
     },
   },
-  hoverBg: {
-    position: 'absolute',
-    inset: 0,
-    margin: 'auto',
-    width: '100%',
-    borderRadius: radiusVars['--radius-element'],
-    pointerEvents: 'none',
-    backgroundColor: {
-      default: 'transparent',
-      [stylex.when.ancestor(':hover', tabScope)]: {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
-      },
-    },
-    transitionProperty: 'background-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
   selected: {
     color: colorVars['--color-text-primary'],
     fontWeight: fontWeightVars['--font-weight-semibold'],
@@ -153,8 +136,13 @@ const styles = stylex.create({
     opacity: 1,
   },
   indicatorUnselected: {
-    backgroundColor: 'transparent',
-    opacity: 0,
+    backgroundColor: colorVars['--color-accent'],
+    opacity: {
+      default: 0,
+      [stylex.when.ancestor(':hover', tabScope)]: {
+        '@media (hover: hover)': 0.4,
+      },
+    },
   },
   icon: {
     display: 'inline-flex',
@@ -189,13 +177,6 @@ const sizeStyles = stylex.create({
   lg: {height: sizeVars['--size-element-lg']},
 });
 
-// Hover bg uses the standard element size (one step smaller than tab)
-const hoverSizeStyles = stylex.create({
-  sm: {height: sizeVars['--size-element-sm']},
-  md: {height: sizeVars['--size-element-md']},
-  lg: {height: sizeVars['--size-element-lg']},
-});
-
 const layoutStyles = stylex.create({
   fill: {
     flex: 1,
@@ -283,13 +264,6 @@ export function Tab({
     ),
   };
 
-  const hoverBgElement = (
-    <span
-      aria-hidden="true"
-      {...stylex.props(styles.hoverBg, hoverSizeStyles[size])}
-    />
-  );
-
   const indicatorElement = (
     <span
       {...mergeProps(
@@ -324,7 +298,6 @@ export function Tab({
         href={href}
         onClick={handleSelect}
         {...sharedProps}>
-        {hoverBgElement}
         {iconElement}
         {labelElement}
         {endContentElement}
@@ -335,7 +308,6 @@ export function Tab({
 
   return (
     <button ref={ref} type="button" onClick={handleSelect} {...sharedProps}>
-      {hoverBgElement}
       {iconElement}
       {labelElement}
       {endContentElement}

packages/core/src/TabList/TabList.test.tsx

@@ -242,7 +242,7 @@ describe('TabList', () => {
     const tab = screen.getByRole('button', {name: 'Preview'});
     expect(tab).toBeInTheDocument();
     expect(screen.getByTestId('icon')).toBeInTheDocument();
-    expect(tab.querySelectorAll(':scope > span').length).toBe(3);
+    expect(tab.querySelectorAll(':scope > span').length).toBe(2);
   });
 
   it('renders selectedIcon when tab is selected', () => {
@@ -301,10 +301,10 @@ describe('TabList', () => {
 
     // The endContentWrapper span should not exist
     const button = screen.getByRole('button', {name: 'Home'});
-    // Button children: hoverBg, labelContainer, indicator (no endContent wrapper)
+    // Button children: labelContainer, indicator (no endContent wrapper)
     const spans = button.querySelectorAll(':scope > span');
-    // hoverBg + labelContainer + indicator = 3 spans
-    expect(spans.length).toBe(3);
+    // labelContainer + indicator = 2 spans
+    expect(spans.length).toBe(2);
   });
 
   it('renders endContent in link tabs', () => {

packages/core/src/TabList/TabMenu.tsx

@@ -136,22 +136,14 @@ const styles = stylex.create({
     backgroundColor: colorVars['--color-icon-primary'],
     opacity: 1,
   },
-  hoverBg: {
-    position: 'absolute',
-    inset: 0,
-    margin: 'auto',
-    width: '100%',
-    borderRadius: radiusVars['--radius-element'],
-    pointerEvents: 'none',
-    backgroundColor: {
-      default: 'transparent',
+  indicatorUnselected: {
+    backgroundColor: colorVars['--color-icon-primary'],
+    opacity: {
+      default: 0,
       [stylex.when.ancestor(':hover', tabScope)]: {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
+        '@media (hover: hover)': 0.4,
       },
     },
-    transitionProperty: 'background-color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
   },
   chevron: {
     width: spacingVars['--spacing-4'],
@@ -229,13 +221,6 @@ const sizeStyles = stylex.create({
   lg: {height: sizeVars['--size-element-lg']},
 });
 
-// Hover bg uses the standard element size (one step smaller than tab)
-const hoverSizeStyles = stylex.create({
-  sm: {height: sizeVars['--size-element-sm']},
-  md: {height: sizeVars['--size-element-md']},
-  lg: {height: sizeVars['--size-element-lg']},
-});
-
 /**
  * Tab menu trigger that opens a dropdown of additional tab options.
  * Shows the selected option's label as trigger text when an option is active.
@@ -324,10 +309,6 @@ export function TabMenu({
           className,
           style,
         )}>
-        <span
-          aria-hidden="true"
-          {...stylex.props(styles.hoverBg, hoverSizeStyles[size])}
-        />
         <span {...stylex.props(styles.triggerLabel)}>
           <span {...stylex.props(styles.triggerLabelText)}>{triggerLabel}</span>
           <span aria-hidden="true" {...stylex.props(styles.triggerLabelSizer)}>
@@ -342,14 +323,19 @@ export function TabMenu({
           )}>
           <Icon icon="chevronDown" size="sm" color="inherit" />
         </span>
-        {hasSelectedOption && (
-          <span
-            {...mergeProps(
-              themeProps('tab-indicator', {selected: 'selected'}),
-              stylex.props(styles.indicator, styles.indicatorSelected),
-            )}
-          />
-        )}
+        <span
+          {...mergeProps(
+            themeProps('tab-indicator', {
+              selected: hasSelectedOption ? 'selected' : null,
+            }),
+            stylex.props(
+              styles.indicator,
+              hasSelectedOption
+                ? styles.indicatorSelected
+                : styles.indicatorUnselected,
+            ),
+          )}
+        />
       </button>
       {popover.render(
         <div