feat(textarea): added highlight and focus styles to ionic theme (#30062)

Issue number: internal

---------

<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Fixed highlight validation to include ionic theme
- Added styles on ionic scss partial for focus and highlight
- Added focus state test to textarea

## 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. -->

- Textarea [basic
sample](https://ionic-framework-git-rou-11444-ionic1.vercel.app/src/components/textarea/test/basic?ionic:theme=ionic)

core/src/components/textarea/test/states/textarea.e2e.ts

@@ -28,3 +28,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('focused'), () => {
+    test('should render focused textarea correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <div class="container ion-padding">
+          <ion-textarea fill="outline" value="hi@ionic.io" class="has-focus"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('.container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
+    });
+  });
+});

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,37 @@ 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 globals.$ion-transition-time-200;
+
+  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;