Bump dependencies to stable and add RTL styles

bower.json

@@ -30,16 +30,16 @@
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
-    "vaadin-date-picker": "vaadin/vaadin-date-picker#^4.1.0-alpha1",
-    "vaadin-time-picker": "vaadin/vaadin-time-picker#^2.1.0-alpha2",
-    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.1.0-alpha1"
+    "vaadin-date-picker": "vaadin/vaadin-date-picker#^4.1.0",
+    "vaadin-time-picker": "vaadin/vaadin-time-picker#^2.1.0",
+    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.1.0"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0-alpha4",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0",
     "sugar": "2.0.4"
   }
 }

src/vaadin-date-time-picker-date-picker.html

@@ -34,7 +34,7 @@
           memoizedTemplate = super.template.cloneNode(true);
 
           memoizedTemplate.innerHTML = memoizedTemplate.innerHTML.replace(
-            'vaadin-text-field',
+            'vaadin-date-picker-text-field',
             'vaadin-date-time-picker-date-text-field'
           );
         }

src/vaadin-date-time-picker-date-text-field.html

@@ -6,6 +6,32 @@
 
 <link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
 
+<dom-module id="vaadin-date-time-picker-date-text-field-styless" theme-for="vaadin-date-time-picker-date-text-field">
+  <template>
+    <style>
+      :host([dir="rtl"]) [part="input-field"] {
+        direction: ltr;
+      }
+
+      :host([dir="rtl"]) [part="value"]::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+    </style>
+  </template>
+</dom-module>
+
 <script>
   (function() {
     /**

theme/lumo/vaadin-date-time-picker-styles.html

@@ -16,6 +16,17 @@
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
+
+      :not(*):placeholder-shown, /* to prevent broken styles on IE */
+      :host([dir="rtl"]) [part="value"]:placeholder-shown,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+      }
     </style>
   </template>
 </dom-module>