feat(select): component can be used outside ion-item

[liamdebeasi]

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)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• 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?

Issue URL: Internal ticket

What is the new behavior?

• ion-select can now be used outside of ion-item with a new property to specify the label.
  This PR is a combination of the following:

#26470
#26502
#26504
#26505
#26506
#26570

Does this introduce a breaking change?

• Yes
• No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

Note: This also includes the same fix that I applied in #26574 for ion-input. See f2b7f45

[sean-perkins]

Should we have examples/tests for the different interface appearances of ion-select and the modern rendering?

The legacy tests show examples with interface="popover".

[amandaejohnston]

I noticed that the popover interface centers the popover horizontally, instead of right-aligning it like the legacy behavior:

[liamdebeasi]

Should we have examples/tests for the different interface appearances of ion-select and the modern rendering?
The legacy tests show examples with interface="popover".

I added tests. Will re-run screenshot jobs shortly.

[liamdebeasi]

I noticed that the popover interface centers the popover horizontally, instead of right-aligning it like the legacy behavior:

Good call out. The popover behavior has not changed, but since the select now contains the label, the popover is visually going to be centered within the line. IMO this is good because users can click anywhere on the line to open the popover. Thoughts?

[amandaejohnston]

I think it should still appear on the end side, since that's where the actual select appears to be. Otherwise it can easily look like the popover is just opening under empty space, which is strange. IMO behavior should match with how the legacy select acts when placed within an item, since that's what it looks like, even when the new syntax isn't used with an item as well.

[liamdebeasi]

Ok I fixed a handful of things:

1. Fixed an issue where justification wasn't working. This broke as a result of some code I missed when resolving a merge conflict.
2. Fixed an issue Amanda noted where the popover is not aligned correctly. Should now be aligned relative to the placeholder/icon.
3. Fixed an issue where the popover does not take up the full width when using outline/solid styles
4. Fixed an issue where the chevron was rotating on open on iOS. This was due to some code that slipped through when resolving a merge conflict.

Updating screenshots now and will re-request another review when that is done.