Convert to Polymer 3, add events type definitions

.eslintrc.json

@@ -1,15 +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
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2020
   }
 }

.github/workflows/sauce.yml

@@ -0,0 +1,47 @@
+name: sauce
+
+on:
+  push:
+    branches:
+      - '**'
+    tags-ignore:
+      - '*.*'
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')"
+
+    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
+    if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')"
+
+    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

.gitignore

@@ -3,4 +3,5 @@ node_modules
 package-lock.json
 yarn.lock
 coverage
-analysis.json
+dist
+analysis.json

.hermione.conf.js

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

.prettierrc

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

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "stylelint-config-vaadin"
+  "extends": [
+    "stylelint-config-vaadin",
+    "stylelint-config-prettier"
+  ]
 }

README.md

@@ -1,23 +1,18 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-app-layout)](https://github.com/vaadin/vaadin-app-layout/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-app-layout)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-app-layout/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-app-layout?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-app-layout)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-app-layout-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
-
-
 # <vaadin-app-layout>
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-app-layout/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-app-layout/html-api)
 
-
 [<vaadin-app-layout>](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
 
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout)
+[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-app-layout)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-app-layout-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
+
 ```html
 <vaadin-app-layout>
   <vaadin-drawer-toggle slot="navbar touch-optimized"></vaadin-drawer-toggle>
@@ -47,30 +42,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-app-layout`:
-
-```sh
-bower i vaadin/vaadin-app-layout --save
-```
-
-Once installed, import it in your application:
-
-```html
-<link rel="import" href="bower_components/vaadin-app-layout/vaadin-app-layout.html">
-<link rel="import" href="bower_components/vaadin-app-layout/vaadin-drawer.toggle.html">
-```
-### Polymer 3 and ES Modules compatible version
-
-
 Install `vaadin-app-layout`:
 
 ```sh
@@ -94,55 +65,52 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-app-layout.html`
-  `theme/lumo/vaadin-drawer-toggle.html`
+  `theme/lumo/vaadin-app-layout.js`
+  `theme/lumo/vaadin-drawer-toggle.js`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-app-layout.html`
-  `theme/material/vaadin-drawer-toggle.html`
-
-- Aliases for `theme/lumo/vaadin-app-layout.html` `theme/lumo/vaadin-drawer-toggle.html`
+  `theme/material/vaadin-app-layout.js`
+  `theme/material/vaadin-drawer-toggle.js`
 
-  `vaadin-app-layout.html`
-  `vaadin-drawer-toggle.html`
+- Aliases for `theme/lumo/vaadin-app-layout.js` `theme/lumo/vaadin-drawer-toggle.js`
 
+  `vaadin-app-layout.js`
+  `vaadin-drawer-toggle.js`
 
-## Running demos and tests in browser
+## Running API docs and tests in a browser
 
 1. Fork the `vaadin-app-layout` repository and clone it locally.
 
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
+1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
 
-1. When in the `vaadin-app-layout` directory, run `npm install` and then `bower install` to install dependencies.
+1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
+1. When in the `vaadin-app-layout` directory, run `npm install` to install dependencies.
 
-1. Run `polymer serve --open`, browser will automatically open the component API documentation.
+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:8080/components/vaadin-app-layout/demo
-  - http://127.0.0.1:8080/components/vaadin-app-layout/test
+  - http://localhost:8000/test/visual/drawer.html
 
 
 ## Running tests from the command line
 
-1. When in the `vaadin-app-layout` directory, run `polymer test`
+1. When in the `vaadin-app-layout` directory, run `npm test`
 
+## Debugging tests in the browser
+
+1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
 
 ## 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.
 
 
 ## Contributing
 
-  - Make sure your code is compliant with our code linters: `npm run lint`
-  - Check that tests are passing: `polymer test`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
-
+To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
 
 ## License