feat(input): add item highlight for ionic theme

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;