feat(input): add item highlight for ionic theme (#29395)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The current border implementation causes layout shift. 

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Matches MD highlight effect for the focus border
- Border implementation does not cause layout shift

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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

@@ -139,3 +139,10 @@
 
   background: var(--background);
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline.has-focus) {
+  --border-width: #{tokens.$ionic-border-size-medium};
+}

core/src/components/input/input.ionic.scss

@@ -145,10 +145,31 @@
   opacity: 0.6;
 }
 
+// Input Highlight
+// ----------------------------------------------------------------
+
+.input-highlight {
+  @include position(null, null, -1px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: tokens.$ionic-border-size-medium;
+
+  transform: scale(0);
+
+  transition: transform 200ms;
+
+  background: var(--border-color);
+}
+
 // Input Focus
 // ----------------------------------------------------------------
 
 :host(.has-focus) {
   --border-color: #{tokens.$ionic-color-primary};
-  --border-width: #{tokens.$ionic-border-size-medium};
+}
+
+:host(.has-focus) .input-highlight {
+  transform: scale(1);
 }

core/src/components/input/input.tsx

@@ -736,7 +736,7 @@ export class Input implements ComponentInterface {
     const value = this.getValue();
     const size = this.getSize();
     const inItem = hostContext('ion-item', this.el);
-    const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+    const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem;
     const labelPlacement = this.getLabelPlacement();
 
     const defaultClearIcon = theme === 'ios' ? closeCircle : closeSharp;