fix(select): add icon-inner & placeholder part

[brandyscarney]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

This can be considered a feature or a fix, due to the fact it adds a new part, but we haven't documented any of these yet so I'm not sure which way to lean here.

You cannot change the opacity of the select icon or target the placeholder color with the current parts.

Placeholder - Due to the fact that the placeholder and value share the same div, you would have to be able to target it based on the select-placeholder class which does not work with parts.

Select Icon - The opacity was set on the inner icon, so you can change the color using ::part(icon) but it will still have the default .33 opacity. I added a part for icon-inner since that is where the actual arrow is created, and also moved opacity so it is set on the parent wrapper which fixes this problem.

Issue Number: #17248

What is the new behavior?

• adds icon-inner and placeholder parts
• adds custom test for styling the select parts
• remove opacity in icon-inner and set it on the icon wrapper
• align items center (vertically) - this makes alignment look nicer especially when font size changes

Does this introduce a breaking change?

• Yes
• No

Other information

[brandyscarney]

@liamdebeasi Let me know your thoughts on this implementation