fix(select): support floating labels with slotted content

[brandyscarney]

Issue number: resolves #30402

---

What is the current behavior?

Selects with a floating label and a start or end slot always display the label in the floated state, regardless of whether the select contains a value:

without value	with value

What is the new behavior?

• The floating label now behaves consistently regardless of whether start or end slots are present:
  • It overlays the select when the field is empty.
  • It floats when the select is expanded or contains a value.
  • It displays the placeholder when it is expanded but does not contain a value.
• Updates the placeholder opacity when floating so it will use the correct value of --placeholder-opacity instead of 1, matching the other select label placements.
• Start slot content is now always positioned to the left of both the label and the select.
• Additional screenshot tests have been added to verify these behavior and layout changes.
• A follow-up ticket has been created to address the remaining UI differences between our leading/trailing content implementation and the md specification.

Does this introduce a breaking change?

• Yes
• No

Due to the structural changes required to support the updated layout, this change has the potential to introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements. While the public API has not changed, selectors or style overrides targeting the previous markup may need to be updated.

Other information

Preview

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 4, 2026 9:46pm