Convert to Polymer 3, add events type definitions

.eslintrc.json

@@ -1,16 +1,15 @@
 {
-  "extends": "vaadin",
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
   "env": {
     "browser": true,
-    "node": true,
     "es6": true
   },
-  "plugins": [
-    "html"
-  ],
-  "globals": {
-    "Polymer": false,
-    "Vaadin": false,
-    "MockInteractions": false
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018
   }
 }

.github/workflows/sauce.yml

@@ -0,0 +1,40 @@
+name: sauce
+
+on: [push]
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: SauceLabs tests
+      env:
+        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+      run: npm run test:sauce
+
+  visual-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Visual tests
+      env:
+        SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+        SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+      run: npm run test:visual

.github/workflows/tests.yml

@@ -0,0 +1,43 @@
+name: tests
+
+on: [pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Check version
+      run: npm run check-version
+
+    - name: Lint JavaScript
+      run: npm run lint:js
+
+    - name: Lint CSS
+      run: npm run lint:css
+
+    - name: Lint typings
+      run: npm run lint:types
+
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Unit tests
+      run: npm test

.hermione.conf.js

@@ -0,0 +1,21 @@
+module.exports = {
+  browsers: {
+    chrome: {
+      baseUrl: 'http://localhost:8080/test/visual/',
+      screenshotsDir: () => 'test/visual/screens/vaadin-time-picker',
+      desiredCapabilities: {
+        browserName: 'chrome',
+        version: '85.0',
+        platform: 'Windows 10'
+      }
+    }
+  },
+  plugins: {
+    'hermione-esm': {
+      port: 8080
+    },
+    'hermione-sauce': {
+      verbose: false
+    }
+  }
+};

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}

README.md

@@ -7,24 +7,13 @@
 [API documentation ↗](https://cdn.vaadin.com/vaadin-time-picker/1.0.0)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-time-picker)](https://www.npmjs.com/package/@vaadin/vaadin-time-picker)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-time-picker)](https://github.com/vaadin/vaadin-time-picker/releases)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-time-picker)
 [![Build Status](https://travis-ci.org/vaadin/vaadin-time-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-time-picker)
 [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-time-picker/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-time-picker?branch=master)
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
 [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-time-picker-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
-<!--
-```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="vaadin-time-picker.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
-```
--->
+
 ```html
 <vaadin-time-picker label="Delivery Time"></vaadin-time-picker>
 ```
@@ -33,29 +22,6 @@
 
 ## Installation
 
-The Vaadin components are distributed as Bower and npm packages.
-Please note that the version range is the same, as the API has not changed.
-You should not mix Bower and npm versions in the same application, though.
-
-Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
-are only published on npm, not pushed to GitHub repositories.
-
-### Polymer 2 and HTML Imports compatible version
-
-Install `vaadin-time-picker`:
-
-```sh
-bower i vaadin/vaadin-time-picker --save
-```
-
-Once installed, import it in your application:
-
-```html
-<link rel="import" href="bower_components/vaadin-time-picker/vaadin-time-picker.html">
-```
-### Polymer 3 and ES Modules compatible version
-
-
 Install `vaadin-time-picker`:
 
 ```sh
@@ -78,32 +44,33 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The component with the Lumo theme:
 
-  `theme/lumo/vaadin-time-picker.html`
+  `theme/lumo/vaadin-time-picker.js`
 
 - The component with the Material theme:
 
-  `theme/material/vaadin-time-picker.html`
+  `theme/material/vaadin-time-picker.js`
 
-- Alias for `theme/lumo/vaadin-time-picker.html`:
+- Alias for `theme/lumo/vaadin-time-picker.js`:
 
-  `vaadin-time-picker.html`
+  `vaadin-time-picker.js`
 
-## Running demos and tests in a browser
+## Running API docs and tests in a browser
 
 1. Fork the `vaadin-time-picker` repository and clone it locally.
 
-1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
+1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
+
+1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. When in the `vaadin-time-picker` directory, run `npm install` and then `bower install` to install dependencies.
+1. When in the `vaadin-time-picker` directory, run `npm install` to install dependencies.
 
 1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
 
 1. Run `npm start`, browser will automatically open the component API documentation.
 
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
+1. You can also open visual tests, for example:
 
-  - http://127.0.0.1:3000/components/vaadin-time-picker/demo
-  - http://127.0.0.1:3000/components/vaadin-time-picker/test
+  - http://127.0.0.1:3000/test/visual/default.html
 
 
 ## Running tests from the command line
@@ -113,7 +80,7 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 ## Following the coding style
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
+We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
 
 ## Big Thanks