fix(select): update icon color and use correct focused class

[thetaPC]

Issue number: internal

---

What is the current behavior?

There are a few items to note:

• Styles are using a non-existing focus class. It currently uses .has-focus which isn't being used anywhere within select.tsx. It seems that .has-focus comes a copy and paste that wasn't updated.
• Icon uses the highlight color when expanded, in item, and no fill. This leads to the styling looking weird compared to when it's not in an item especially since labels do not change colors. Only applies to md mode.

List no lines	List with lines

• The focus without a validation status does not update the border correctly when inside an item and has a solid fill. Only applies to md mode.

Outside item	Inside item

What is the new behavior?

• Styles are now using the correct focus class: .has-focus, removing ion-focused.
• If the select is inside an item and has no fill then the icon will not use the highlight color. Only applies to md mode.

List no lines	List with lines

• The focus without a validation status uses the highlight color when inside an item and has a solid fill. Only applies to md mode.

Outside item	Inside item

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.5.4-dev.11744743162.1ec9251d

Select cannot have a focused class and an expanded class at the same time. It's one or the other.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2025 8:04pm

[thetaPC]

I just moved this down to the select icon section.

[brandyscarney]

A couple comments regarding the valid/invalid behavior since we removed the focus color from the icon.

[brandyscarney]

Looks good! Just added some minor corrections for some comments.

[ShaneK]

Looks good to me, great job!