style(textarea): adjusting min-height of the element

core/src/components/textarea/textarea.common.scss

@@ -539,6 +539,17 @@
   opacity: 1;
 }
 
+/**
+ * When the rows attribute is set, the textarea should not force a min-height,
+ * but rather respect the natural height of the textarea, especially when
+ * rows is set to 1.
+ */
+:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),
+:host(.textarea-label-placement-stacked[rows]),
+:host(.textarea-label-placement-floating[rows]) {
+  min-height: auto;
+}
+
 // Start / End Slots
 // ----------------------------------------------------------------
 

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

@@ -53,13 +53,6 @@
   border-top: none;
 }
 
-// Textarea Fill: Outline, Native Textarea
-// ----------------------------------------------------------------
-
-:host(.textarea-fill-outline) textarea {
-  margin-top: globals.$ion-space-100;
-}
-
 // Focus
 // ----------------------------------------------------------------
 

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

@@ -38,26 +38,45 @@
   --padding-end: #{globals.$ion-space-300};
   --padding-bottom: #{globals.$ion-space-200};
   --padding-start: #{globals.$ion-space-300};
-
-  min-height: globals.$ion-scale-2800;
 }
 
 :host(.textarea-size-medium) .textarea-wrapper-inner {
   --padding-top: #{globals.$ion-space-300};
   --padding-end: #{globals.$ion-space-400};
   --padding-bottom: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-400};
-
-  min-height: globals.$ion-scale-3400;
 }
 
 :host(.textarea-size-large) .textarea-wrapper-inner {
   --padding-top: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-500};
   --padding-bottom: #{globals.$ion-space-400};
   --padding-start: #{globals.$ion-space-500};
+}
+
+// When the rows attribute is set, the container of the textarea should
+// increase in height to accommodate the number of rows.
+:host([rows]) .textarea-wrapper-inner {
+  /**
+   * Clamp the minimum value to 1 to prevent 0 or negative heights.
+   * Add 0.5 to show a half-line peek at the next row.
+   */
+  --number-rows: calc(max(var(--host-rows, 1), 1) + 0.5);
 
-  min-height: globals.$ion-scale-3600;
+  /**
+   * Calculate the minimum height for the textarea container based on the number of rows.
+   * - $textarea-row-line-height: Approximate height of a single line based on
+   *   the browser's default line-height: normal (~1.2 × font-size).
+   * - (var(--number-rows) + 0.5): Show the requested rows plus a half-line peek
+   *   at the next row, hinting that the textarea is scrollable.
+   * - var(--padding-top), var(--padding-bottom), var(--border-width): Account for
+   *   box-sizing: border-box, which includes padding and border in min-height.
+   */
+  $textarea-row-line-height: 1.2em;
+
+  min-height: calc(
+    var(--number-rows) * #{$textarea-row-line-height} + var(--padding-top, 0px) + var(--padding-bottom, 0px) + var(--border-width, 0px)
+  );
 }
 
 // Ionic Textarea Shapes
@@ -90,13 +109,17 @@
 // ----------------------------------------------------------------
 
 // The height should be auto only when auto-grow is enabled.
-:host([auto-grow]) .textarea-wrapper-inner {
+// If rows is not set, the height should be auto.
+:host(:not([rows])) .textarea-wrapper-inner,
+:host([auto-grow]:not([auto-grow="false"])) .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 {
+// If rows is not set, the height should be auto.
+:host(:not([rows])) .native-wrapper,
+:host([auto-grow]:not([auto-grow="false"])) .native-wrapper {
   min-height: inherit;
   max-height: inherit;
 }
@@ -276,3 +299,12 @@ ion-icon {
   min-width: $text-wrapper-width;
   max-width: globals.$ion-scale-5000;
 }
+
+/*
+ * As the ionic theme introduces padding in the textarea,
+ * there is no need to add margin-top to the textarea.
+ */
+:host(.textarea-label-placement-stacked) textarea,
+:host(.textarea-label-placement-floating) textarea {
+  margin-top: 0;
+}

core/src/components/textarea/textarea.tsx

@@ -893,6 +893,10 @@ export class Textarea implements ComponentInterface {
           'textarea-disabled': disabled,
           'textarea-readonly': readonly,
         })}
+        // For ionic theme, we need to define this css variable
+        style={
+          theme === 'ionic' ? { '--host-rows': this.rows !== undefined ? this.rows.toString() : undefined } : undefined
+        }
       >
         {/**
          * htmlFor is needed so that clicking the label always focuses