vaadin · jouni · May 20, 2025 · May 20, 2025
diff --git a/dev/text-area.html b/dev/text-area.html
@@ -8,14 +8,96 @@
     <script type="module" src="./common.js"></script>
 
     <script type="module">
-      import '@vaadin/text-area';
-      import '@vaadin/tooltip';
+      import '@vaadin/text-area/src/vaadin-lit-text-area.js';
+      import '@vaadin/icon/src/vaadin-lit-icon.js';
+      import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
+      import '@vaadin/icons';
     </script>
   </head>
 
   <body>
-    <vaadin-text-area label="Feedback" required>
-      <vaadin-tooltip slot="tooltip" text="Help us improve"></vaadin-tooltip>
-    </vaadin-text-area>
+    <section>
+      <h2>Plain</h2>
+      <vaadin-text-area value="Value"></vaadin-text-area>
+      <vaadin-text-area placeholder="Placeholder"></vaadin-text-area>
+    </section>
+
+    <section>
+      <h2>Min &amp; Max Rows</h2>
+      <vaadin-text-area value="Value" min-rows="1" clear-button-visible>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+
+      <vaadin-text-area value="I’m not sure what I should write here, but I know it should be something long because this is a multi-line text area." max-rows="3" clear-button-visible>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+    </section>
+
+    <section>
+      <h2>Bells & Whistles</h2>
+      <vaadin-text-area
+          label="Label"
+          helper-text="Description for this field."
+          value="Value"
+          clear-button-visible
+          error-message="You need to write something in this field."
+          required>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+    </section>
+
+    <section>
+      <h2>States</h2>
+      <vaadin-text-area
+          label="Read-only"
+          helper-text="Description for this field."
+          value="Value"
+          clear-button-visible
+          error-message="You need to write something in this field."
+          required
+          readonly>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+
+      <vaadin-text-area
+          label="Disabled"
+          helper-text="Description for this field."
+          value="Value"
+          clear-button-visible
+          error-message="You need to write something in this field."
+          required
+          disabled>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+    </section>
+
+    <section>
+      <h2>Helper Above Field</h2>
+      <vaadin-text-area
+          theme="helper-above-field"
+          label="Label"
+          helper-text="Description for this field."
+          value="Value"
+          clear-button-visible
+          error-message="You need to write something in this field."
+          required>
+        <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+    </section>
+
+    <section>
+      <h2>Content &amp; Layout Variations</h2>
+      <p>Resize the field to test how content flows.</p>
+      <vaadin-text-area
+          label="A very long label for this field"
+          helper-text="If the label wasn't enough to tell what you should input here, then this long description should be."
+          value="I’m not sure what I should write here, but I know it should be something long because this is a multi-line text area."
+          placeholder="Perhaps this gives you an idea what to write?"
+          clear-button-visible
+          error-message="In case you didn't write anything in this required field, this error message is here to let you know that you really should write something in this field."
+          required style="resize: both; overflow: hidden; padding: 1px; width: 50%;">
+        <vaadin-icon icon="vaadin:envelope-o" slot="prefix"></vaadin-icon>
+      </vaadin-text-area>
+    </section>
   </body>
 </html>
diff --git a/packages/field-base/src/styles/field-shared-styles.js b/packages/field-base/src/styles/field-shared-styles.js
@@ -24,6 +24,13 @@ export const fieldShared = css`
     display: none !important;
   }
 
+  /* The label, helper text and the error message should neither grow nor shrink. */
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    flex: none;
+  }
+
   :host(:not([has-label])) [part='label'],
   :host(:not([has-helper])) [part='helper-text'],
   :host(:not([has-error-message])) [part='error-message'] {
@@ -50,6 +57,10 @@ export const fieldShared = css`
     display: none;
   }
 
+  [part='input-field'] {
+    flex: auto;
+  }
+
   :host([readonly]) [part='input-field'] {
     cursor: default;
   }

diff --git a/packages/input-container/src/vaadin-input-container-styles.js b/packages/input-container/src/vaadin-input-container-styles.js
@@ -10,7 +10,6 @@ export const inputContainerStyles = css`
   :host {
     display: flex;
     align-items: center;
-    flex: 0 1 auto;
     --_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
     border-radius:
       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
@@ -46,8 +45,10 @@ export const inputContainerStyles = css`
   }
 
   /* Reset the native input styles */
-  ::slotted(input) {
+  ::slotted(:is(input, textarea)) {
     appearance: none;
+    align-self: stretch;
+    box-sizing: border-box;
     flex: auto;
     white-space: nowrap;
     overflow: hidden;
@@ -60,6 +61,7 @@ export const inputContainerStyles = css`
     border-radius: 0;
     min-width: 0;
     font: inherit;
+    font-size: 1em;
     color: inherit;
     background: transparent;
     cursor: inherit;
@@ -69,18 +71,18 @@ export const inputContainerStyles = css`
     flex: none;
   }
 
-  slot {
+  slot[name$='fix'] {
     cursor: auto;
   }
 
   ::slotted(:is(input, textarea))::placeholder {
-    /* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */
+    /* Use ::slotted(:is(input, textarea):placeholder-shown) to style the placeholder */
     /* because ::slotted(...)::placeholder does not work in Safari. */
     font: inherit;
     color: inherit;
   }
 
-  ::slotted(input:placeholder-shown) {
+  ::slotted(:is(input, textarea):placeholder-shown) {
     color: var(--vaadin-input-field-placeholder-color, var(--_vaadin-color));
   }
 

diff --git a/packages/text-area/src/vaadin-text-area-styles.js b/packages/text-area/src/vaadin-text-area-styles.js
@@ -6,55 +6,21 @@
 import { css } from 'lit';
 
 export const textAreaStyles = css`
-  .vaadin-text-area-container {
-    flex: auto;
-  }
-
-  /* The label, helper text and the error message should neither grow nor shrink. */
-  [part='label'],
-  [part='helper-text'],
-  [part='error-message'] {
-    flex: none;
-  }
-
   [part='input-field'] {
-    flex: auto;
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
+    scroll-padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
   }
 
   ::slotted(textarea) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    flex: auto;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    outline: none;
     resize: none;
-    margin: 0;
-    padding: 0 0.25em;
-    border: 0;
-    border-radius: 0;
-    min-width: 0;
-    font: inherit;
-    font-size: 1em;
-    line-height: normal;
-    color: inherit;
-    background-color: transparent;
-    /* Disable default invalid style in Firefox */
-    box-shadow: none;
-  }
-
-  /* Override styles from <vaadin-input-container> */
-  [part='input-field'] ::slotted(textarea) {
-    align-self: stretch;
     white-space: pre-wrap;
-    box-sizing: border-box;
   }
 
-  [part='input-field'] ::slotted(:not(textarea)) {
+  [part='input-field'] ::slotted(:not(textarea)),
+  [part='clear-button'] {
     align-self: flex-start;
+    position: sticky;
+    top: 0;
   }
 
   /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */

diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/basic.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/basic.png
diff --git a/...ages/text-area/test/visual/base/screenshots/text-area/baseline/clear-button.png b/...ages/text-area/test/visual/base/screenshots/text-area/baseline/clear-button.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/disabled.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/disabled.png
diff --git a/...ges/text-area/test/visual/base/screenshots/text-area/baseline/error-message.png b/...ges/text-area/test/visual/base/screenshots/text-area/baseline/error-message.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/flex.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/flex.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/helper-text.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/helper-text.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/invalid.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/invalid.png
diff --git a/...xt-area/test/visual/base/screenshots/text-area/baseline/keyboard-focus-ring.png b/...xt-area/test/visual/base/screenshots/text-area/baseline/keyboard-focus-ring.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/label.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/label.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/max-rows.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/max-rows.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/min-rows.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/min-rows.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/placeholder.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/placeholder.png
diff --git a/...test/visual/base/screenshots/text-area/baseline/pointer-focus-ring-disabled.png b/...test/visual/base/screenshots/text-area/baseline/pointer-focus-ring-disabled.png
diff --git a/.../test/visual/base/screenshots/text-area/baseline/pointer-focus-ring-enabled.png b/.../test/visual/base/screenshots/text-area/baseline/pointer-focus-ring-enabled.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/prefix.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/prefix.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/readonly.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/readonly.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/required.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/required.png
diff --git a/...ase/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png b/...ase/screenshots/text-area/baseline/scrolled-with-prefix-suffix-clear-button.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/scrolled.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/scrolled.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/single-row.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/single-row.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/suffix.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/suffix.png
diff --git a/packages/text-area/test/visual/base/screenshots/text-area/baseline/value.png b/packages/text-area/test/visual/base/screenshots/text-area/baseline/value.png