diff --git a/core/src/components/select/test/async/select.e2e.ts b/core/src/components/select/test/async/select.e2e.ts
index 8db1aa8966f..83004222c44 100644
--- a/core/src/components/select/test/async/select.e2e.ts
+++ b/core/src/components/select/test/async/select.e2e.ts
@@ -1,7 +1,8 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
-test.describe('select: async', () => {
+// TODO: This test is extremely flaky
+test.skip('select: async', () => {
test('should correctly set the value after a delay', async ({ page, skip }) => {
skip.rtl('This is checking internal logic. RTL tests are not needed');
diff --git a/core/src/components/textarea/test/color/index.html b/core/src/components/textarea/test/color/index.html
new file mode 100644
index 00000000000..8bbbe076456
--- /dev/null
+++ b/core/src/components/textarea/test/color/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+ Textarea - Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Textarea - Color
+
+
+
+
+ No Fill
+
+
+
Start
+
+
+
+
+
End
+
+
+
+
+
Fixed
+
+
+
+
+
Floating
+
+
+
+
+
Stacked
+
+
+
+
+ Solid
+
+
+
Start
+
+
+
+
+
End
+
+
+
+
+
Fixed
+
+
+
+
+
Floating
+
+
+
+
+
Stacked
+
+
+
+
+ Outline
+
+
+
Start
+
+
+
+
+
End
+
+
+
+
+
Fixed
+
+
+
+
+
Floating
+
+
+
+
+
Stacked
+
+
+
+
+
+
+
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts b/core/src/components/textarea/test/color/textarea.e2e.ts
new file mode 100644
index 00000000000..adf909b1646
--- /dev/null
+++ b/core/src/components/textarea/test/color/textarea.e2e.ts
@@ -0,0 +1,173 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('textarea: color', () => {
+ test.beforeEach(({ skip }) => {
+ skip.rtl();
+ skip.mode(
+ 'ios',
+ 'iOS does not have any color theming besides the caret which cannot be captured in a stable manner in screenshots.'
+ );
+ });
+
+ /**
+ * Manually setting the .has-focus class
+ * lets us quickly test the rendering of a
+ * focused textarea without need to wait for
+ * focus events.
+ */
+ test.describe('textarea: fill none', () => {
+ test('should set label and highlight color on focus with start label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-no-fill-color-start-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with end label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-no-fill-color-end-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-no-fill-color-fixed-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-no-fill-color-floating-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-no-fill-color-stacked-${page.getSnapshotSettings()}.png`
+ );
+ });
+ });
+ test.describe('textarea: fill solid', () => {
+ test('should set label and highlight color on focus with start label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-solid-color-start-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with end label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(`textarea-solid-color-end-${page.getSnapshotSettings()}.png`);
+ });
+ test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-solid-color-fixed-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-solid-color-floating-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-solid-color-stacked-${page.getSnapshotSettings()}.png`
+ );
+ });
+ });
+ test.describe('textarea: fill outline', () => {
+ test('should set label and highlight color on focus with start label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-outline-color-start-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with end label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-outline-color-end-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-outline-color-fixed-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-outline-color-floating-${page.getSnapshotSettings()}.png`
+ );
+ });
+ test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
+ await page.setContent(`
+
+ `);
+
+ const textarea = page.locator('ion-textarea');
+ expect(await textarea.screenshot()).toMatchSnapshot(
+ `textarea-outline-color-stacked-${page.getSnapshotSettings()}.png`
+ );
+ });
+ });
+});
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..74e276892b4
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..04d68567554
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dfc84fa7e1b
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7288bc1cd2c
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0a1bc29f761
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..56208a85a1b
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d2513174315
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c4e50b9b884
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d9caf0a3341
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d2513174315
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c4e50b9b884
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d9caf0a3341
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2df0a89a376
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c6929b50184
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..47a3bdc9203
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-no-fill-color-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bf84245f351
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c91cf4a7cf8
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7f8a5d13f0d
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cff62379d0f
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9fe197a8bad
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a224032c6ee
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-fixed-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03106e1a6c4
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9a625c4d425
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..369b6496630
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03106e1a6c4
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9a625c4d425
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..369b6496630
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..559a472cb14
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f46b43ecbc0
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b2210f6e5b0
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-outline-color-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..250cb58dab7
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a0f6a5a811f
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d2606aa1c0d
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..83489e2347a
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6f51bafc270
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f78387d1955
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-fixed-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..85767be0b1c
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1c9cedc0023
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e566c4a8f84
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..85767be0b1c
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1c9cedc0023
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e566c4a8f84
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1cb01ca016d
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de3003b82c5
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..763c3900a85
Binary files /dev/null and b/core/src/components/textarea/test/color/textarea.e2e.ts-snapshots/textarea-solid-color-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png
index bd125a30566..ba7edf7a522 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png
index 8c6363fff28..bdb6a82b213 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png
index aaaeec5b839..b9b3b0b272b 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png
index c13cfd2b2f4..843ea1a83e1 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png
index 99f68daa69c..ff1bed5bf86 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png
index ac4a5c9314d..3d5ac52bebb 100644
Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index c49201810f6..cb83901d72c 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -56,6 +56,56 @@
--padding-top: 0px;
}
+// Textarea Label
+// ----------------------------------------------------------------
+
+/**
+ * When the textarea is focused the label should
+ * take on the highlight color. This should
+ * only apply to floating or stacked labels.
+ */
+:host(.textarea-label-placement-floating.has-focus) .label-text-wrapper,
+:host(.textarea-label-placement-stacked.has-focus) .label-text-wrapper {
+ color: var(--highlight-color);
+}
+
+:host(.textarea-label-placement-floating.ion-touched.ion-valid) .label-text-wrapper,
+:host(.textarea-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
+:host(.textarea-label-placement-stacked.ion-touched.ion-valid) .label-text-wrapper,
+:host(.textarea-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
+ color: var(--highlight-color);
+}
+
+// Textarea Highlight
+// ----------------------------------------------------------------
+
+.textarea-highlight {
+ @include position(null, null, -1px, 0);
+
+ position: absolute;
+
+ width: 100%;
+ height: 2px;
+
+ transform: scale(0);
+
+ transition: transform 200ms;
+
+ background: var(--highlight-color);
+}
+
+:host(.has-focus) .textarea-highlight {
+ transform: scale(1);
+}
+
+/**
+ * Adjust the highlight up by 1px
+ * so it is not cut off by the
+ * the item's line (if one is present).
+ */
+:host(.in-item) .textarea-highlight {
+ @include position(null, null, 0, 0);
+}
// Textarea Shape Rounded
// ----------------------------------------------------------------
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 172529d01ac..bc6a6f14617 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -75,12 +75,14 @@
white-space: pre-wrap;
}
-:host(.ion-color) {
- background: initial;
+:host(.legacy-textarea.ion-color) {
+ color: current-color(base);
}
:host(.ion-color) {
- color: current-color(base);
+ --highlight-color-focused: #{current-color(base)};
+
+ background: initial;
}
// Textarea Within An Item
@@ -271,6 +273,13 @@
height: 100%;
}
+// Textarea Native
+// ----------------------------------------------------------------
+
+:host(.has-focus) textarea {
+ caret-color: var(--highlight-color);
+}
+
.native-wrapper textarea {
@include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
}
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 64d44819390..2413a5def6c 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -600,6 +600,7 @@ For textareas that do not have a visible label, developers should use "aria-labe
const { inputId, disabled, fill, shape, labelPlacement } = this;
const mode = getIonMode(this);
const value = this.getValue();
+ const shouldRenderHighlight = mode === 'md' && fill !== 'outline';
return (
+ {shouldRenderHighlight && }
{this.renderBottomContent()}