diff --git a/.travis.yml b/.travis.yml
index 5b7ee7d2..b0d57fb7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -39,7 +39,7 @@ script:
       polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html &&
       if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
         if [[ "$TEST_SUITE" = "visual_tests" ]]; then
-          npm i -q --no-save gemini@^4.0.0 gemini-sauce gemini-polyserve &&
+          npm i -q --no-save gemini@^5.0.0 gemini-sauce gemini-polyserve &&
           gemini test test/visual;
         else
           wct --env saucelabs;
diff --git a/bower.json b/bower.json
index ad3428b8..93643b7a 100644
--- a/bower.json
+++ b/bower.json
@@ -38,14 +38,14 @@
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.1",
-    "vaadin-button": "vaadin/vaadin-button#^2.1.0-beta2"
+    "vaadin-button": "vaadin/vaadin-button#^2.1.0"
   },
   "dependencies": {
     "polymer": "^2.0.0",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0-beta1",
-    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0-beta1",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.2.0",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
   },
   "resolutions": {
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
index 097252de..57d82a93 100644
--- a/src/vaadin-text-field-mixin.html
+++ b/src/vaadin-text-field-mixin.html
@@ -306,6 +306,7 @@
       this._errorId = `${this.constructor.is}-error-${uniqueId}`;
       this._labelId = `${this.constructor.is}-label-${uniqueId}`;
 
+      /* istanbul ignore if */
       if (navigator.userAgent.match(/Trident/)) {
         this._addIEListeners();
       }
@@ -354,6 +355,7 @@
     attributeChangedCallback(prop, oldVal, newVal) {
       super.attributeChangedCallback(prop, oldVal, newVal);
       // Needed until Edge has CSS Custom Properties (present in Edge Preview)
+      /* istanbul ignore if */
       if (!(window.ShadyCSS && window.ShadyCSS.nativeCss) &&
         /^(focused|focus-ring|invalid|disabled|placeholder|has-value)$/.test(prop)) {
         this.updateStyles();
@@ -362,6 +364,7 @@
       // Safari has an issue with repainting shadow root element styles when a host attribute changes.
       // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
       const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+      /* istanbul ignore if */
       if (isSafari && this.root) {
         const WEBKIT_PROPERTY = '-webkit-backface-visibility';
         this.root.querySelectorAll('*').forEach(el => {
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png
index fc5a246b..535dca31 100644
Binary files a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png and b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png differ
diff --git a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png
index d79310ad..095a3d76 100644
Binary files a/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png and b/test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png differ
diff --git a/test/visual/test.js b/test/visual/test.js
index 4f375c77..aac64aff 100644
--- a/test/visual/test.js
+++ b/test/visual/test.js
@@ -1,6 +1,9 @@
 gemini.suite('vaadin-text-field', function(rootSuite) {
   function wait(actions, find) {
-    actions.wait(5000);
+    return actions
+      .waitForJSCondition(function(window) {
+        return window.webComponentsAreReady;
+      }, 60000);
   }
 
   function goToAboutBlank(actions, find) {
diff --git a/test/visual/vaadin-password-field/password-field.html b/test/visual/vaadin-password-field/password-field.html
index 3f8ae53d..b8396a74 100644
--- a/test/visual/vaadin-password-field/password-field.html
+++ b/test/visual/vaadin-password-field/password-field.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-password-field').then(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-password-field/rtl.html b/test/visual/vaadin-password-field/rtl.html
index a31fd89c..a4a43b90 100644
--- a/test/visual/vaadin-password-field/rtl.html
+++ b/test/visual/vaadin-password-field/rtl.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-password-field').then(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-area/rtl.html b/test/visual/vaadin-text-area/rtl.html
index b6de54d4..f477ba69 100644
--- a/test/visual/vaadin-text-area/rtl.html
+++ b/test/visual/vaadin-text-area/rtl.html
@@ -7,7 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
-    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-area/styling.html b/test/visual/vaadin-text-area/styling.html
index f2451fad..668f2224 100644
--- a/test/visual/vaadin-text-area/styling.html
+++ b/test/visual/vaadin-text-area/styling.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
 </head>
 
diff --git a/test/visual/vaadin-text-area/text-area-1.html b/test/visual/vaadin-text-area/text-area-1.html
index 59f61bb4..c6a53c0b 100644
--- a/test/visual/vaadin-text-area/text-area-1.html
+++ b/test/visual/vaadin-text-area/text-area-1.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-area/text-area-2.html b/test/visual/vaadin-text-area/text-area-2.html
index 9ba1f407..8d4d83a8 100644
--- a/test/visual/vaadin-text-area/text-area-2.html
+++ b/test/visual/vaadin-text-area/text-area-2.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-area/text-area-3.html b/test/visual/vaadin-text-area/text-area-3.html
index ba4007fb..9ad122c7 100644
--- a/test/visual/vaadin-text-area/text-area-3.html
+++ b/test/visual/vaadin-text-area/text-area-3.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-field/rtl.html b/test/visual/vaadin-text-field/rtl.html
index 048bad87..6b01c44e 100644
--- a/test/visual/vaadin-text-field/rtl.html
+++ b/test/visual/vaadin-text-field/rtl.html
@@ -7,7 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
-    document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-field/styling.html b/test/visual/vaadin-text-field/styling.html
index 2825f6b2..fe1787b2 100644
--- a/test/visual/vaadin-text-field/styling.html
+++ b/test/visual/vaadin-text-field/styling.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
 </head>
 
diff --git a/test/visual/vaadin-text-field/text-field-1.html b/test/visual/vaadin-text-field/text-field-1.html
index 72634bed..b5f8c1c4 100644
--- a/test/visual/vaadin-text-field/text-field-1.html
+++ b/test/visual/vaadin-text-field/text-field-1.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/test/visual/vaadin-text-field/text-field-2.html b/test/visual/vaadin-text-field/text-field-2.html
index d755b29d..a66fb2f2 100644
--- a/test/visual/vaadin-text-field/text-field-2.html
+++ b/test/visual/vaadin-text-field/text-field-2.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
   <link href="../common.html" rel="import">
 </head>
diff --git a/theme/lumo/vaadin-text-field-styles.html b/theme/lumo/vaadin-text-field-styles.html
index 829c791c..db214e45 100644
--- a/theme/lumo/vaadin-text-field-styles.html
+++ b/theme/lumo/vaadin-text-field-styles.html
@@ -3,10 +3,11 @@
 <link rel="import" href="../../../vaadin-lumo-styles/spacing.html">
 <link rel="import" href="../../../vaadin-lumo-styles/style.html">
 <link rel="import" href="../../../vaadin-lumo-styles/typography.html">
+<link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
 
 <dom-module id="lumo-text-field" theme-for="vaadin-text-field">
   <template>
-    <style>
+    <style include="lumo-required-field">
       :host {
         --lumo-text-field-size: var(--lumo-size-m);
         color: var(--lumo-body-text-color);
@@ -25,52 +26,10 @@
         align-items: center;
       }
 
-      [part="label"] {
-        align-self: flex-start;
-        color: var(--lumo-secondary-text-color);
-        font-weight: 500;
-        font-size: var(--lumo-font-size-s);
-        margin-left: calc(var(--lumo-border-radius) / 4);
-        transition: color 0.2s;
-        line-height: 1;
-        padding-bottom: 0.5em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: relative;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-
-      :host([has-label])::before {
-        /* Label height + margin */
-        margin-top: calc(var(--lumo-font-size-s) * 1.5);
-      }
-
-      :host([has-label]) {
-        padding-top: var(--lumo-space-m);
-      }
-
       :host([focused]:not([readonly])) [part="label"] {
         color: var(--lumo-primary-text-color);
       }
 
-      :host([required]) [part="label"] {
-        padding-right: 1em;
-      }
-
-      /* Used for required and invalid indicators */
-      [part="label"]::after {
-        content: var(--lumo-required-field-indicator, "•");
-        transition: opacity 0.2s;
-        opacity: 0;
-        color: var(--lumo-primary-text-color);
-        position: absolute;
-        right: 0;
-        width: 1em;
-        text-align: center;
-      }
-
       [part="value"],
       [part="input-field"] ::slotted([part="value"]) {
         cursor: inherit;
@@ -235,18 +194,8 @@
         -webkit-text-fill-color: var(--lumo-disabled-text-color);
       }
 
-      /* Required field style */
-
-      :host([required]:not([has-value])) [part="label"]::after {
-        opacity: 1;
-      }
-
       /* Invalid style */
 
-      :host([invalid]) [part="label"]::after {
-        color: var(--lumo-error-text-color);
-      }
-
       :host([invalid]) [part="input-field"] {
         background-color: var(--lumo-error-color-10pct);
       }
@@ -259,31 +208,6 @@
         box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
       }
 
-      /* Error message */
-
-      [part="error-message"] {
-        margin-left: calc(var(--lumo-border-radius) / 4);
-        font-size: var(--lumo-font-size-xs);
-        line-height: var(--lumo-line-height-xs);
-        color: var(--lumo-error-text-color);
-        will-change: max-height;
-        transition: 0.4s max-height;
-        max-height: 5em;
-      }
-
-      /* Margin that doesn’t reserve space when there’s no error message */
-      [part="error-message"]:not(:empty)::before,
-      [part="error-message"]:not(:empty)::after {
-        content: "";
-        display: block;
-        height: 0.4em;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        max-height: 0;
-        overflow: hidden;
-      }
-
       /* Small theme */
 
       :host([theme~="small"]) {
diff --git a/theme/material/vaadin-text-field-styles.html b/theme/material/vaadin-text-field-styles.html
index c5aeb222..2b7fb5b6 100644
--- a/theme/material/vaadin-text-field-styles.html
+++ b/theme/material/vaadin-text-field-styles.html
@@ -1,9 +1,10 @@
 <link rel="import" href="../../../vaadin-material-styles/color.html">
 <link rel="import" href="../../../vaadin-material-styles/typography.html">
+<link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
 
 <dom-module id="material-text-field" theme-for="vaadin-text-field">
   <template>
-    <style>
+    <style include="material-required-field">
       :host {
         display: inline-flex;
         position: relative;
@@ -142,19 +143,6 @@
       }
 
       [part="label"] {
-        display: block;
-        position: absolute;
-        top: 8px;
-        font-size: 1em;
-        line-height: 1;
-        height: 20px;
-        margin-bottom: -4px;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        color: var(--material-secondary-text-color);
-        transform-origin: 0 75%;
-        transform: scale(0.75);
         transition: transform 0.175s, color 0.175s, width 0.175s;
         transition-timing-function: ease, ease, step-end;
       }
@@ -188,10 +176,6 @@
         transition: transform 0.175s, opacity 0.175s;
       }
 
-      :host([invalid]) [part="label"] {
-        color: var(--material-error-text-color);
-      }
-
       :host([invalid]) [part="input-field"]::after {
         background-color: var(--material-error-color);
       }
@@ -221,34 +205,6 @@
         transition-delay: 0.1s;
       }
 
-      [part="error-message"] {
-        font-size: .75em;
-        line-height: 1;
-        color: var(--material-error-text-color);
-        margin-top: 6px;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        margin-top: 0;
-        max-height: 0;
-        overflow: hidden;
-      }
-
-      :host([invalid]) [part="error-message"] {
-        animation: reveal 0.2s;
-      }
-
-      @keyframes reveal {
-        0% {
-          opacity: 0;
-        }
-      }
-
-      :host([required]) [part="label"]::after {
-        content: " *";
-        color: inherit;
-      }
-
       /* Slotted content */
 
       [part="input-field"] ::slotted(*:not([part="value"])) {