fix highlight and focus on textarea with ionic theme

Author: BenOsodrac

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

@@ -59,3 +59,10 @@
 :host(.textarea-fill-outline) textarea {
   margin-top: globals.$ion-space-100;
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline.has-focus) {
+  --border-width: #{globals.$ion-border-size-050};
+}

core/src/components/textarea/textarea.ionic.scss

@@ -132,3 +132,38 @@ ion-icon {
 .textarea-bottom .counter {
   color: globals.$ion-primitives-neutral-800;
 }
+
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: #{globals.$ion-border-size-025};
+}
+
+
+// Textarea Highlight
+// ----------------------------------------------------------------
+
+.textarea-highlight {
+  @include globals.position(null, null, -1px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: globals.$ion-border-size-050;
+
+  transform: scale(0);
+
+  transition: transform 200ms;
+
+  background: var(--border-color);
+}
+
+// Textarea Focus
+// ----------------------------------------------------------------
+
+:host(.has-focus) {
+  --border-color: #{globals.$ion-border-focus-default};
+}
+
+:host(.has-focus) .textarea-highlight {
+  transform: scale(1);
+}

core/src/components/textarea/textarea.tsx

@@ -670,7 +670,7 @@ export class Textarea implements ComponentInterface {
     const shape = this.getShape();
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
-    const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+    const shouldRenderHighlight = (theme === 'md' || theme === 'ionic') && fill !== 'outline' && !inItem;
 
     const hasValue = this.hasValue();
     const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;