fix(input): prevent placeholder from overlapping start slot during scroll assist

Author: ShaneK

core/src/components/input/input.scss

@@ -165,10 +165,7 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
   position: absolute;
-
   pointer-events: none;
 }
 

core/src/components/textarea/textarea.scss

@@ -205,10 +205,7 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
   position: absolute;
-
   pointer-events: none;
 }
 

core/src/utils/input-shims/hacks/common.ts

@@ -68,11 +68,30 @@ const addClone = (
   if (disabledClonedInput) {
     clonedEl.disabled = true;
   }
+
+  /**
+   * Position the clone to match the native input's exact position and size
+   * to prevent the placeholder from overlapping start slot content (e.g., icons).
+   */
+  const doc = componentEl.ownerDocument!;
+  const isRTL = doc.dir === 'rtl';
+  const inputRect = inputEl.getBoundingClientRect();
+  const parentRect = (parentEl as HTMLElement).getBoundingClientRect();
+
+  clonedEl.style.top = `${inputRect.top - parentRect.top}px`;
+  clonedEl.style.width = `${inputRect.width}px`;
+  clonedEl.style.height = `${inputRect.height}px`;
+
+  if (isRTL) {
+    clonedEl.style.right = `${parentRect.right - inputRect.right}px`;
+  } else {
+    clonedEl.style.left = `${inputRect.left - parentRect.left}px`;
+  }
+
   parentEl.appendChild(clonedEl);
   cloneMap.set(componentEl, clonedEl);
 
-  const doc = componentEl.ownerDocument!;
-  const tx = doc.dir === 'rtl' ? 9999 : -9999;
+  const tx = isRTL ? 9999 : -9999;
   componentEl.style.pointerEvents = 'none';
   inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };