fix(input): support floating labels with slotted content

BREAKING.md

@@ -82,13 +82,26 @@ Apps on `moduleResolution: "node"` (classic) and webpack 4 keep resolving throug
 
 <h4 id="version-9x-input">Input</h4>
 
+**`autocorrect` Property Type Changed to Boolean**
+
 The `autocorrect` property on `ion-input` is now a `boolean` and defaults to `false`. It was previously typed as `'on' | 'off'` with a default of `'off'`. This resolves a type conflict introduced when TypeScript 5.9 added `autocorrect: boolean` to the DOM `HTMLElement` interface.
 
 The string form no longer behaves the same way. Because an HTML attribute coerces to `true` for any non-empty string, `autocorrect="off"` now evaluates to `true` (autocorrect enabled). Migrate to the boolean property:
 
 - Remove the attribute to keep autocorrect disabled (the default).
 - Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue).
 
+**Internal DOM Structure Changes**
+
+New wrapper elements have been added to the component's internal DOM structure to support floating labels with slotted start and end content. Additionally, the structure of the component has been reorganized, with some elements now grouped differently than before. This may introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements.
+
+The following internal wrapper elements have been added:
+- Added: `<div class="input-start">` wrapper for the start slot
+- Added: `<div class="input-control">` wrapper for the label and native control
+- Added: `<div class="input-end">` wrapper for the end slot and clear button
+
+While the public API has not changed, selectors or style overrides targeting the previous markup may need to be updated to reference the new wrapper elements and their organization. If you have custom CSS targeting the internal structure of input, update your selectors to account for these structural changes.
+
 <h4 id="version-9x-legacy-picker">Legacy Picker</h4>
 
 - `ion-picker-legacy` and `ion-picker-legacy-column` have been removed. The legacy picker component has been replaced with an inline picker component.

core/src/components/input/input.md.outline.scss

@@ -8,6 +8,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  --start-slot-adjustment: 0px;
 
   min-height: 56px;
 }
@@ -90,7 +91,7 @@
  * This makes the label sit above the input.
  */
 :host(.label-floating.input-fill-outline) .label-text-wrapper {
-  @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale}));
+  @include transform(translate(var(--start-slot-adjustment), -32%), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
 
   /**
@@ -100,16 +101,6 @@
   max-width: calc((100% - var(--padding-start) - var(--padding-end) - #{$input-md-floating-label-padding * 2}) / #{$form-control-label-stacked-scale});
 }
 
-/**
- * This ensures that the input does not
- * overlap the floating label while still
- * remaining visually centered.
- */
-:host(.input-fill-outline.input-label-placement-stacked) input,
-:host(.input-fill-outline.input-label-placement-floating) input {
-  @include margin(6px, 0, 6px, 0);
-}
-
 // Input Fill: Outline Outline Container
 // ----------------------------------------------------------------
 

core/src/components/input/input.scss

@@ -189,7 +189,6 @@
 // --------------------------------------------------
 
 .input-clear-icon {
-  @include margin(auto);
   @include padding(0);
   @include background-position(center);
 
@@ -259,6 +258,19 @@
   line-height: normal;
 }
 
+// Input Control (Label + Input)
+// ----------------------------------------------------------------
+
+.input-control {
+  display: flex;
+
+  position: relative;
+
+  flex-grow: 1;
+
+  width: 100%;
+}
+
 // Input Native Wrapper
 // ----------------------------------------------------------------
 
@@ -269,12 +281,24 @@
 
   flex-grow: 1;
 
-  // ensure start/end slot content is vertically centered
-  align-items: center;
-
   width: 100%;
 }
 
+// Input Start/End Containers
+// ----------------------------------------------------------------
+
+.input-start,
+.input-end {
+  display: flex;
+
+  position: relative;
+
+  flex-shrink: 0;
+
+  // Ensure start/end content is vertically centered
+  align-items: center;
+}
+
 // Input Highlight
 // ----------------------------------------------------------------
 
@@ -419,6 +443,15 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -467,7 +500,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-wrapper {
+:host(.input-label-placement-start) .input-control {
   flex-direction: row;
 }
 
@@ -487,7 +520,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-wrapper {
+:host(.input-label-placement-end) .input-control {
   flex-direction: row-reverse;
 }
 
@@ -532,10 +565,9 @@
  * Floating: Label sits over the input when the input has no
  * value and is blurred. Label sits above the input and is scaled
  * down when the input is focused or has a value.
- *
  */
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
+:host(.input-label-placement-stacked) .input-control,
+:host(.input-label-placement-floating) .input-control {
   flex-direction: column;
   align-items: start;
 }
@@ -559,15 +591,6 @@
   z-index: 2;
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  @include margin(1px, 0, 0, 0);
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.