fix(input, select, textarea): prevent floating label from overflowing while it floats

[brandyscarney]

Issue number: internal

---

What is the current behavior?

An input, select, or textarea with an extremely long overflowing label with label-placement="floating" overflows its container when going from a resting to a floating state:

floating-before.mov

What is the new behavior?

floating-after.mov

• The label's max-width now transitions along with its transform, so the label reveals more of its text gradually as it scales down instead of showing its full floating width while still at its resting size.
• With fill="outline", the label stays positioned relative to the control in both its resting and floating states, so its max-width always resolves against the same width and can animate without jumping.
• The start container controller now also measures the end container and is renamed to createStartEndContainerController. The combined start and end width is written to --internal-start-end-container-width, which the outline floating label uses to size itself to the full width of the notch.
• Adds $form-control-label-transition-easing so the label's color, transform, and max-width transitions share one easing.
• Adds an e2e test per component that steps through the label's transitions and checks that the label never extends past the field.

Does this introduce a breaking change?

• Yes
• No

Other information

Previews:

• Input
• Select
• Textarea

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 13, 2026 6:14pm UTC

[brandyscarney]

This was renamed from start-container-controller since it now deals with the end container as well.

Here is the actual diff: https://www.diffchecker.com/dVpN68IJ/

[thetaPC]

LGTM