From b57f4be284c03ef8f04b036c8da8e0ce10d27eb8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:55:40 -0400
Subject: [PATCH] feat(textarea): add ionic theme design with medium size
 (#29776)

- Adds the typography styles for the default size (medium)
- Adds the styles for the outline fill
- Adds the styles for the label & helper text
- Adds the spacing for the label, textarea, counter and helper text
---
 core/api.txt                                  |   1 +
 core/src/components.d.ts                      |   8 ++
 .../components/textarea/test/basic/index.html |  14 +-
 .../components/textarea/test/size/index.html  |  75 ++++++++++
 .../textarea/test/size/textarea.e2e.ts        |  57 ++++++++
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2210 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 3425 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2173 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2275 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 3768 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2249 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 3065 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 4695 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 3214 bytes
 .../{textarea.scss => textarea.common.scss}   |  98 +------------
 .../textarea/textarea.ionic.outline.scss      |  55 ++++++++
 .../components/textarea/textarea.ionic.scss   | 101 +++++++++++++
 .../src/components/textarea/textarea.ios.scss |   2 +-
 core/src/components/textarea/textarea.md.scss |   2 +-
 .../components/textarea/textarea.native.scss  | 133 ++++++++++++++++++
 core/src/components/textarea/textarea.tsx     |  23 ++-
 packages/angular/src/directives/proxies.ts    |   4 +-
 packages/vue/src/proxies.ts                   |   1 +
 23 files changed, 470 insertions(+), 104 deletions(-)
 create mode 100644 core/src/components/textarea/test/size/index.html
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
 rename core/src/components/textarea/{textarea.scss => textarea.common.scss} (85%)
 create mode 100644 core/src/components/textarea/textarea.ionic.outline.scss
 create mode 100644 core/src/components/textarea/textarea.ionic.scss
 create mode 100644 core/src/components/textarea/textarea.native.scss

diff --git a/core/api.txt b/core/api.txt
index 77c2a42746..31ba1f7658 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2280,6 +2280,7 @@ ion-textarea,prop,readonly,boolean,false,false,false
 ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"round" | undefined,undefined,false,false
+ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 057be08e40..55f61afc6f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3620,6 +3620,10 @@ export namespace Components {
           * The shape of the textarea. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -8976,6 +8980,10 @@ declare namespace LocalJSX {
           * The shape of the textarea. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
index 070e2072cb..6d73908513 100644
--- a/core/src/components/textarea/test/basic/index.html
+++ b/core/src/components/textarea/test/basic/index.html
@@ -22,8 +22,18 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content">
-        <ion-textarea label="Textarea"></ion-textarea>
+      <ion-content id="content" class="ion-padding">
+        <ion-textarea
+          fill="outline"
+          label="Label"
+          label-placement="stacked"
+          placeholder="Placeholder"
+          helper-text="Helper message"
+          counter="true"
+          maxlength="999"
+        >
+          <ion-icon slot="end" name="square-outline"></ion-icon>
+        </ion-textarea>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/textarea/test/size/index.html b/core/src/components/textarea/test/size/index.html
new file mode 100644
index 0000000000..884371f930
--- /dev/null
+++ b/core/src/components/textarea/test/size/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Textarea - Size</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        padding-left: 16px;
+      }
+
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Textarea - Size</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill: No Size</h2>
+            <ion-textarea label="Label" label-placement="stacked" placeholder="Placeholder"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline: No Size</h2>
+            <ion-textarea fill="outline" label="Label" label-placement="stacked"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Fill: No Size, Round Shape</h2>
+            <ion-textarea shape="round" label="Label" label-placement="stacked"></ion-textarea>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline: No Size, Round Shape</h2>
+            <ion-textarea fill="outline" shape="round" label="Label" label-placement="stacked"></ion-textarea>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts b/core/src/components/textarea/test/size/textarea.e2e.ts
new file mode 100644
index 0000000000..7e9c4ab81c
--- /dev/null
+++ b/core/src/components/textarea/test/size/textarea.e2e.ts
@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Size is only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: size'), () => {
+    test.describe('textarea: size medium', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium`));
+      });
+      test('should render correctly with stacked label', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-label-stacked`));
+      });
+      test('should not have visual regressions with fill outline', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-textarea
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-outline`));
+      });
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c9b5386f77e9384621ca598a133aefd35180901
GIT binary patch
literal 2210
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

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fff638eea4b39f609c18641ad4db0959236bc436
GIT binary patch
literal 3425
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
LoLQxbYs`NDmFwMQ

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..4d82189d4984e9ba59de80de3bc16af7a12a6451
GIT binary patch
literal 2173
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

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a6965e52e45759dec99ff3ccfea9aaf3673160b
GIT binary patch
literal 2275
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

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8e26fdd4fa79555566396211bffdff3c356f85d
GIT binary patch
literal 3768
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
VmnZw`1n?pSIoi4+{<OaI$KUogJ$(QG

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccb4f07e332bd552a5f84eb96148522f65c3810c
GIT binary patch
literal 2249
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
Q|0V#^2kqVPZR9V10Qw5TQ2+n{

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb233be3206ca491df2a315d771fc751997bbdf2
GIT binary patch
literal 3065
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
aBBXF6+YNf>s3Q0;51d3gIaDF=*Zu`B@yApE

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a1727ec7047a36139bff33df316e47f5431301f
GIT binary patch
literal 4695
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
Obn}L;CRW|%`Tqe09xNaL

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..83ba831beff160b68990b20abf1ae29983044d53
GIT binary patch
literal 3214
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

literal 0
HcmV?d00001

diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.common.scss
similarity index 85%
rename from core/src/components/textarea/textarea.scss
rename to core/src/components/textarea/textarea.common.scss
index ee42da9b61..68c7271a40 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.common.scss
@@ -59,35 +59,11 @@
 
   width: 100%;
 
-  min-height: 44px;
-
   color: var(--color);
 
-  font-family: $font-family-base;
-
-  z-index: $z-index-item-input;
-
   box-sizing: border-box;
 }
 
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -279,17 +255,11 @@
   caret-color: var(--highlight-color);
 }
 
-.native-wrapper textarea {
-  @include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
-}
-
 .native-wrapper {
   display: grid;
 
   min-width: inherit;
   max-width: inherit;
-  min-height: inherit;
-  max-height: inherit;
 
   /**
    * This avoids a WebKit bug where
@@ -375,20 +345,11 @@
 // ----------------------------------------------------------------
 
 .textarea-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the textarea.
-   */
-  @include padding(5px, var(--padding-end), 0, var(--padding-start));
-
   display: flex;
 
   justify-content: space-between;
 
   border-top: var(--border-width) var(--border-style) var(--border-color);
-
-  font-size: dynamic-font(12px);
 }
 
 /**
@@ -417,7 +378,7 @@
 .textarea-bottom .helper-text {
   display: block;
 
-  color: #{$text-color-step-450};
+  color: $text-color-step-450;
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -439,11 +400,7 @@
    */
   @include margin-horizontal(auto, null);
 
-  color: #{$text-color-step-450};
-
   white-space: nowrap;
-
-  padding-inline-start: 16px;
 }
 
 // Textarea Label
@@ -524,15 +481,6 @@
   flex-direction: row;
 }
 
-:host(.textarea-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 // Textarea Label Placement - End
 // ----------------------------------------------------------------
 
@@ -544,27 +492,9 @@
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the textarea should be on the start
- * when the label sits at the end.
- */
-:host(.textarea-label-placement-end) .label-text-wrapper {
-  @include margin(0, 0, 0, $form-control-label-margin);
-}
-
 // Textarea Label Placement - Fixed
 // ----------------------------------------------------------------
 
-:host(.textarea-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  @include margin(0, $form-control-label-margin, 0, 0);
-}
-
 /**
  * Label is on the left of the textarea in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -624,13 +554,6 @@
   @include margin(8px, 0px, 0px, 0px);
 }
 
-:host(.textarea-label-placement-stacked) ::slotted([slot="start"]),
-:host(.textarea-label-placement-stacked) ::slotted([slot="end"]),
-:host(.textarea-label-placement-floating) ::slotted([slot="start"]),
-:host(.textarea-label-placement-floating) ::slotted([slot="end"]) {
-  margin-top: 8px;
-}
-
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -666,31 +589,14 @@
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
 
-// Start/End Slots
+// Start / End Slots
 // ----------------------------------------------------------------
 
 .start-slot-wrapper,
 .end-slot-wrapper {
-  @include padding(var(--padding-top), 0, var(--padding-bottom), 0);
-
   display: flex;
 
   flex-shrink: 0;
 
   align-self: start;
 }
-
-::slotted([slot="start"]),
-::slotted([slot="end"]) {
-  margin-top: 0; // ensure slot content is vertically aligned with label
-}
-
-::slotted([slot="start"]:last-of-type) {
-  margin-inline-end: $form-control-label-margin;
-  margin-inline-start: 0;
-}
-
-::slotted([slot="end"]:first-of-type) {
-  margin-inline-start: $form-control-label-margin;
-  margin-inline-end: 0;
-}
diff --git a/core/src/components/textarea/textarea.ionic.outline.scss b/core/src/components/textarea/textarea.ionic.outline.scss
new file mode 100644
index 0000000000..915a1ca64e
--- /dev/null
+++ b/core/src/components/textarea/textarea.ionic.outline.scss
@@ -0,0 +1,55 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Textarea Fill: Outline
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline) {
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-color: #{globals.$ionic-color-neutral-500};
+}
+
+// Textarea Fill: Outline, Textarea Wrapper
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline) .textarea-wrapper-inner {
+  /**
+   * The border should be relative to the inner wrapper
+   * so that it does not include the label.
+   */
+  position: relative;
+}
+
+// Textarea Fill: Outline, Outline Container
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline) .textarea-outline {
+  @include globals.position(0, 0, 0, 0);
+  @include globals.border-radius(var(--border-radius));
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
+}
+
+// Textarea Fill: Outline, Bottom Content
+// ----------------------------------------------------------------
+
+/**
+ * The bottom content should never have
+ * a border with the outline style.
+ */
+:host(.textarea-fill-outline) .textarea-bottom {
+  border-top: none;
+}
+
+// Textarea Fill: Outline, Native Textarea
+// ----------------------------------------------------------------
+
+:host(.textarea-fill-outline) textarea {
+  margin-top: globals.$ionic-space-100;
+}
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
new file mode 100644
index 0000000000..46b1801e9f
--- /dev/null
+++ b/core/src/components/textarea/textarea.ionic.scss
@@ -0,0 +1,101 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./textarea.common";
+@use "./textarea.ionic.outline.scss" as outline;
+
+// Ionic Textarea
+// --------------------------------------------------
+
+:host {
+  --border-radius: #{globals.$ionic-border-radius-400};
+  --color: #{globals.$ionic-color-neutral-1200};
+  --highlight-color-valid: #{globals.$ionic-color-success-base};
+  --highlight-color-invalid: #{globals.$ionic-color-danger-base};
+  --placeholder-color: #{globals.$ionic-color-neutral-800};
+  --placeholder-opacity: 1;
+  --background: #{globals.$ionic-color-base-white};
+  --padding-top: #{globals.$ionic-space-300};
+  --padding-end: #{globals.$ionic-space-400};
+  --padding-bottom: #{globals.$ionic-space-300};
+  --padding-start: #{globals.$ionic-space-400};
+
+  @include globals.typography(globals.$ionic-body-md-regular);
+}
+
+// Ionic Textarea Sizes
+// --------------------------------------------------
+
+// Setting height to 0 allows it to collapse in height
+// instead of growing above the min height by default.
+.textarea-wrapper-inner {
+  height: 0;
+}
+
+:host(.textarea-size-medium) .textarea-wrapper-inner {
+  min-height: globals.$ionic-scale-3400;
+}
+
+// Textarea Wrapper
+// ----------------------------------------------------------------
+
+.textarea-wrapper {
+  gap: globals.$ionic-space-100;
+}
+
+.textarea-wrapper-inner {
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+}
+
+// Textarea Auto Grow
+// ----------------------------------------------------------------
+
+// The height should be auto only when auto-grow is enabled.
+:host([auto-grow]) .textarea-wrapper-inner {
+  height: auto;
+}
+
+// The min and max height should be inherited if auto-grow is enabled.
+// This allows the textarea to grow and shrink as needed.
+:host([auto-grow]) .native-wrapper {
+  min-height: inherit;
+  max-height: inherit;
+}
+
+// Textarea Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  @include globals.typography(globals.$ionic-body-sm-medium);
+
+  color: globals.$ionic-color-neutral-1000;
+}
+
+:host(.label-floating) .label-text-wrapper {
+  @include globals.transform(none);
+}
+
+// Textarea Slotted Content
+// ----------------------------------------------------------------
+
+ion-icon {
+  color: globals.$ionic-color-neutral-800;
+
+  font-size: globals.$ionic-scale-400;
+}
+
+.start-slot-wrapper,
+.end-slot-wrapper {
+  margin-top: globals.$ionic-space-050;
+}
+
+// Textarea Bottom Content
+// ----------------------------------------------------------------
+
+.textarea-bottom {
+  @include globals.padding(globals.$ionic-space-100, var(--padding-end), null, var(--padding-start));
+  @include globals.typography(globals.$ionic-body-sm-medium);
+}
+
+.textarea-bottom .helper-text,
+.textarea-bottom .counter {
+  color: globals.$ionic-color-neutral-800;
+}
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
index 098a345a90..fa4c5d450b 100644
--- a/core/src/components/textarea/textarea.ios.scss
+++ b/core/src/components/textarea/textarea.ios.scss
@@ -1,4 +1,4 @@
-@import "./textarea";
+@import "./textarea.native";
 @import "./textarea.vars";
 @import "./textarea.ios.vars";
 
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index eec8efd025..516fc251f7 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -1,4 +1,4 @@
-@import "./textarea";
+@import "./textarea.native";
 @import "./textarea.vars";
 @import "./textarea.md.vars";
 @import "./textarea.md.solid";
diff --git a/core/src/components/textarea/textarea.native.scss b/core/src/components/textarea/textarea.native.scss
new file mode 100644
index 0000000000..32cab095c8
--- /dev/null
+++ b/core/src/components/textarea/textarea.native.scss
@@ -0,0 +1,133 @@
+@use "../../themes/native/native.globals" as globals;
+@use "./textarea.common";
+
+// Textarea - iOS and Material Design
+// --------------------------------------------------
+
+:host {
+  min-height: 44px;
+
+  font-family: globals.$font-family-base;
+
+  z-index: globals.$z-index-item-input;
+}
+
+// Textarea Wrapper
+// ----------------------------------------------------------------
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+
+  min-height: 56px;
+}
+
+// Textarea Native
+// ----------------------------------------------------------------
+
+// This is required for auto-grow to work.
+.native-wrapper {
+  min-height: inherit;
+  max-height: inherit;
+}
+
+.native-wrapper textarea {
+  @include globals.padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
+}
+
+// Textarea Bottom Content
+// ----------------------------------------------------------------
+
+.textarea-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the textarea.
+   */
+  @include globals.padding(5px, var(--padding-end), 0, var(--padding-start));
+
+  font-size: globals.dynamic-font(12px);
+}
+
+// Textarea Max Length Counter
+// ----------------------------------------------------------------
+
+.textarea-bottom .counter {
+  color: #{globals.$text-color-step-450};
+
+  padding-inline-start: 16px;
+}
+
+// Textarea Label Placement - Start
+// ----------------------------------------------------------------
+
+:host(.textarea-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the textarea should be on the end
+   * when the label sits at the start.
+   */
+  @include globals.margin(0, globals.$form-control-label-margin, 0, 0);
+}
+
+// Textarea Label Placement - End
+// ----------------------------------------------------------------
+
+/**
+ * The margin between the label and
+ * the textarea should be on the start
+ * when the label sits at the end.
+ */
+:host(.textarea-label-placement-end) .label-text-wrapper {
+  @include globals.margin(0, 0, 0, globals.$form-control-label-margin);
+}
+
+// Textarea Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.textarea-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the textarea should be on the end
+   * when the label sits at the start.
+   */
+  @include globals.margin(0, globals.$form-control-label-margin, 0, 0);
+}
+
+// Start / End Slots
+// ----------------------------------------------------------------
+
+.start-slot-wrapper,
+.end-slot-wrapper {
+  @include globals.padding(var(--padding-top), 0, var(--padding-bottom), 0);
+}
+
+:host(.textarea-label-placement-stacked) ::slotted([slot="start"]),
+:host(.textarea-label-placement-stacked) ::slotted([slot="end"]),
+:host(.textarea-label-placement-floating) ::slotted([slot="start"]),
+:host(.textarea-label-placement-floating) ::slotted([slot="end"]) {
+  margin-top: 8px;
+}
+
+::slotted([slot="start"]),
+::slotted([slot="end"]) {
+  margin-top: 0; // ensure slot content is vertically aligned with label
+}
+
+::slotted([slot="start"]:last-of-type) {
+  margin-inline-end: globals.$form-control-label-margin;
+  margin-inline-start: 0;
+}
+
+::slotted([slot="end"]:first-of-type) {
+  margin-inline-start: globals.$form-control-label-margin;
+  margin-inline-end: 0;
+}
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index 88d5da9245..95c1877364 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -40,7 +40,7 @@ import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './text
   styleUrls: {
     ios: 'textarea.ios.scss',
     md: 'textarea.md.scss',
-    ionic: 'textarea.md.scss',
+    ionic: 'textarea.ionic.scss',
   },
   scoped: true,
 })
@@ -248,6 +248,12 @@ export class Textarea implements ComponentInterface {
    */
   @Prop() shape?: 'round';
 
+  /**
+   * The size of the textarea. If "large", it will have an increased height. By default the
+   * size is "medium". This property only applies to the `"ionic"` theme.
+   */
+  @Prop() size?: 'small' | 'medium' | 'large' = 'medium';
+
   /**
    * Update the native input element when the value changes
    */
@@ -619,7 +625,7 @@ export class Textarea implements ComponentInterface {
   }
 
   render() {
-    const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
+    const { inputId, disabled, fill, shape, size, labelPlacement, el, hasFocus } = this;
     const theme = getIonTheme(this);
     const value = this.getValue();
     const inItem = hostContext('ion-item', this.el);
@@ -657,6 +663,7 @@ export class Textarea implements ComponentInterface {
           'label-floating': labelShouldFloat,
           [`textarea-fill-${fill}`]: fill !== undefined,
           [`textarea-shape-${shape}`]: shape !== undefined,
+          [`textarea-size-${size}`]: true,
           [`textarea-label-placement-${labelPlacement}`]: true,
           'textarea-disabled': disabled,
         })}
@@ -670,6 +677,18 @@ export class Textarea implements ComponentInterface {
         <label class="textarea-wrapper" htmlFor={inputId}>
           {this.renderLabelContainer()}
           <div class="textarea-wrapper-inner">
+            {
+              /**
+               * For the ionic theme, we render the outline container here
+               * instead of higher up, so it can be positioned relative to
+               * the native wrapper instead of the <label> element or the
+               * entire component. This allows the label text to be positioned
+               * above the outline, while staying within the bounds of the
+               * <label> element, ensuring that clicking the label text
+               * focuses the textarea.
+               */
+              theme === 'ionic' && fill === 'outline' && <div class="textarea-outline"></div>
+            }
             {/**
              * Some elements have their own padding styles which may
              * interfere with slot content alignment (such as icon-
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 716420d6a8..947fdb80ff 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2221,7 +2221,7 @@ export declare interface IonText extends Components.IonText {}
 
 
 @ProxyCmp({
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'theme', 'value', 'wrap'],
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'size', 'spellcheck', 'theme', 'value', 'wrap'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -2229,7 +2229,7 @@ export declare interface IonText extends Components.IonText {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'theme', 'value', 'wrap'],
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'size', 'spellcheck', 'theme', 'value', 'wrap'],
 })
 export class IonTextarea {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 301eaa8d26..1e3bf0bf1f 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -858,6 +858,7 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea, JSX.Io
   'label',
   'labelPlacement',
   'shape',
+  'size',
   'ionChange',
   'ionInput',
   'ionBlur',