From 3f447bb8a74bbb2dfb5f3720a911ff1ca9213b69 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 16 Jul 2021 01:23:09 +0200
Subject: [PATCH] Bump Polymer (#9525)

* Bump Polymer

* Remove formatting from patch

* Cleanup

* Fix Vaadin

* Fix typing
---
 .yarn/patches/@polymer/polymer/pr-5569.patch  |  34 +++
 build-scripts/bundle.js                       |   3 +-
 demo/src/entrypoint.ts                        |   2 -
 .../addon-view/config/hassio-addon-config.ts  |   5 -
 .../src/components/hassio-upload-snapshot.ts  |   1 -
 .../markdown/dialog-hassio-markdown.ts        |   4 -
 package.json                                  |  25 +-
 src/components/ha-form/ha-form-integer.ts     |   7 +-
 src/components/ha-picture-upload.ts           |   1 -
 .../controls/more-info-configurator.js        |   1 -
 src/entrypoints/authorize.ts                  |   2 -
 src/html/_js_base.html.template               |   1 +
 src/panels/calendar/ha-full-calendar.ts       |   2 +-
 .../config/helpers/ha-config-helpers.ts       |   1 -
 .../zha/zha-add-devices-page.ts               |  13 +-
 .../zwave/ha-config-zwave.js                  |   1 +
 .../integration-panels/zwave/zwave-log.js     |   1 -
 .../resources/ha-config-lovelace-resources.ts |   1 -
 .../service/developer-tools-service.ts        |   1 -
 .../entity-rows/hui-weather-entity-row.ts     |   3 +-
 src/resources/ha-style.ts                     |   6 +
 src/resources/styles.ts                       |   9 +-
 src/util/app-localstorage-document.js         | 200 -------------
 yarn.lock                                     | 275 +++++++++---------
 24 files changed, 207 insertions(+), 392 deletions(-)
 create mode 100644 .yarn/patches/@polymer/polymer/pr-5569.patch
 delete mode 100644 src/util/app-localstorage-document.js

diff --git a/.yarn/patches/@polymer/polymer/pr-5569.patch b/.yarn/patches/@polymer/polymer/pr-5569.patch
new file mode 100644
index 0000000000..ec2018f0d7
--- /dev/null
+++ b/.yarn/patches/@polymer/polymer/pr-5569.patch
@@ -0,0 +1,34 @@
+diff --git a/lib/legacy/class.js b/lib/legacy/class.js
+index aee2511be1cd9bf900ee552bc98190c1631c57c0..f2f499d68bf52034cac9c28307c99e8ce6b8417d 100644
+--- a/lib/legacy/class.js
++++ b/lib/legacy/class.js
+@@ -304,17 +304,23 @@ function GenerateClassFromInfo(info, Base, behaviors) {
+       // only proceed if the generated class' prototype has not been registered.
+       const generatedProto = PolymerGenerated.prototype;
+       if (!generatedProto.hasOwnProperty(JSCompiler_renameProperty('__hasRegisterFinished', generatedProto))) {
+-        generatedProto.__hasRegisterFinished = true;
++        // make sure legacy lifecycle is called on the *element*'s prototype
++        // and not the generated class prototype; if the element has been
++        // extended, these are *not* the same.
++        const proto = Object.getPrototypeOf(this);
++        // Only set flag when generated prototype itself is registered,
++        // as this element may be extended from, and needs to run `registered`
++        // on all behaviors on the subclass as well.
++        if (proto === generatedProto) {
++          generatedProto.__hasRegisterFinished = true;
++        }
+         // ensure superclass is registered first.
+         super._registered();
+         // copy properties onto the generated class lazily if we're optimizing,
+-        if (legacyOptimizations) {
++        if (legacyOptimizations && !Object.hasOwnProperty(generatedProto, '__hasCopiedProperties')) {
++          generatedProto.__hasCopiedProperties = true;
+           copyPropertiesToProto(generatedProto);
+         }
+-        // make sure legacy lifecycle is called on the *element*'s prototype
+-        // and not the generated class prototype; if the element has been
+-        // extended, these are *not* the same.
+-        const proto = Object.getPrototypeOf(this);
+         let list = lifecycle.beforeRegister;
+         if (list) {
+           for (let i=0; i < list.length; i++) {
diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index a35f06028e..f8e2650f7e 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -18,7 +18,8 @@ module.exports.emptyPackages = ({ latestBuild }) =>
     require.resolve("@polymer/paper-styles/default-theme.js"),
     // Loads stuff from a CDN
     require.resolve("@polymer/font-roboto/roboto.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Compatibility not needed for latest builds
     latestBuild &&
       // wrapped in require.resolve so it blows up if file no longer exists
diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts
index e71ff28e88..54feef73d5 100644
--- a/demo/src/entrypoint.ts
+++ b/demo/src/entrypoint.ts
@@ -1,5 +1,3 @@
-import "@polymer/polymer/lib/elements/dom-if";
-import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 661f3a118c..2a5758609e 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
@@ -329,10 +328,6 @@ class HassioAddonConfig extends LitElement {
           color: var(--error-color);
           margin-top: 16px;
         }
-        iron-autogrow-textarea {
-          width: 100%;
-          font-family: var(--code-font-family, monospace);
-        }
         .syntaxerror {
           color: var(--error-color);
         }
diff --git a/hassio/src/components/hassio-upload-snapshot.ts b/hassio/src/components/hassio-upload-snapshot.ts
index 5347e9a796..4677231c85 100644
--- a/hassio/src/components/hassio-upload-snapshot.ts
+++ b/hassio/src/components/hassio-upload-snapshot.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
index b1b2f06226..b936a70f97 100644
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@@ -61,10 +61,6 @@ class HassioMarkdownDialog extends LitElement {
         app-toolbar [main-title] {
           margin-left: 16px;
         }
-        paper-checkbox {
-          display: block;
-          margin: 4px;
-        }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-paper-dialog {
             max-height: 100%;
diff --git a/package.json b/package.json
index b71dfaa0ca..df2f60af1c 100644
--- a/package.json
+++ b/package.json
@@ -62,33 +62,31 @@
     "@material/top-app-bar": "=12.0.0-canary.1a8d06483.0",
     "@mdi/js": "5.9.55",
     "@mdi/svg": "5.9.55",
-    "@polymer/app-layout": "^3.0.2",
-    "@polymer/app-storage": "^3.0.2",
-    "@polymer/iron-autogrow-textarea": "^3.0.1",
+    "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.2",
+    "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",
-    "@polymer/paper-dropdown-menu": "^3.0.1",
-    "@polymer/paper-input": "^3.0.1",
+    "@polymer/paper-dropdown-menu": "^3.2.0",
+    "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.0.1",
+    "@polymer/paper-menu-button": "^3.1.0",
     "@polymer/paper-progress": "^3.0.1",
     "@polymer/paper-radio-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-ripple": "^3.0.1",
+    "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",
-    "@polymer/paper-tabs": "^3.0.1",
+    "@polymer/paper-tabs": "^3.1.0",
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
-    "@polymer/polymer": "3.1.0",
+    "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.2",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
@@ -96,7 +94,7 @@
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
-    "@webcomponents/webcomponentsjs": "^2.2.7",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
@@ -230,11 +228,10 @@
     "webpack-manifest-plugin": "^3.1.1",
     "workbox-build": "^6.1.5"
   },
-  "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
-  "_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",
+  "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
+    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "@polymer/polymer": "3.1.0",
     "lit-html": "2.0.0-rc.3",
     "lit-element": "3.0.0-rc.2"
   },
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 6f0ec4cfab..9cb7da2496 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -1,12 +1,11 @@
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-slider/paper-slider";
-import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import "../ha-slider";
+import type { HaSlider } from "../ha-slider";
 import {
   HaFormElement,
   HaFormIntegerData,
@@ -88,9 +87,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event) {
-    const value = Number(
-      (ev.target as PaperInputElement | PaperSliderElement).value
-    );
+    const value = Number((ev.target as PaperInputElement | HaSlider).value);
     if (this._value === value) {
       return;
     }
diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts
index 5111b07644..254415a658 100644
--- a/src/components/ha-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiImagePlus } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js
index c4cd2f3ef2..52f7ce6406 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts
index 45857e5998..6150ebb7e0 100644
--- a/src/entrypoints/authorize.ts
+++ b/src/entrypoints/authorize.ts
@@ -1,7 +1,5 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import "@polymer/polymer/lib/elements/dom-if";
-import "@polymer/polymer/lib/elements/dom-repeat";
 import "../auth/ha-authorize";
 import "../resources/ha-style";
 import "../resources/roboto";
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
index f8dc4835c9..0824d82b4b 100644
--- a/src/html/_js_base.html.template
+++ b/src/html/_js_base.html.template
@@ -16,6 +16,7 @@
         suppressTemplateNotifications: true,
         suppressBindingNotifications: true,
       };
+      window.polymerSkipLoadingFontRoboto = true;
       if (!("customElements" in window &&
             "content" in document.createElement("template"))) {
         document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 5b737d529c..e49443ea26 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -444,7 +444,7 @@ export class HAFullCalendar extends LitElement {
         }
 
         .fc-icon-x:before {
-          font-family: var(--material-font-family);
+          font-family: var(--paper-font-common-base_-_font-family);
           content: "X";
         }
 
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index d18448ace2..a8edf6af28 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -1,5 +1,4 @@
 import { mdiPlus } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
index 4a5f256d19..e23c37ce68 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import { IronAutogrowTextareaElement } from "@polymer/iron-autogrow-textarea";
 import "@polymer/paper-input/paper-textarea";
 import {
   css,
@@ -28,11 +27,11 @@ import "./zha-device-pairing-status-card";
 class ZHAAddDevicesPage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow?: boolean;
+  @property({ type: Boolean }) public narrow = false;
 
-  @property() public isWide?: boolean;
+  @property({ type: Boolean }) public isWide?: boolean;
 
-  @property() public route?: Route;
+  @property({ attribute: false }) public route?: Route;
 
   @state() private _error?: string;
 
@@ -86,7 +85,7 @@ class ZHAAddDevicesPage extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .route=${this.route}
+        .route=${this.route!}
         .tabs=${zhaTabs}
       >
         <mwc-button slot="toolbar-icon" @click=${this._toggleLogs}
@@ -171,9 +170,7 @@ class ZHAAddDevicesPage extends LitElement {
       if (this.shadowRoot) {
         const paperTextArea = this.shadowRoot.querySelector("paper-textarea");
         if (paperTextArea) {
-          const textArea = (
-            paperTextArea.inputElement as IronAutogrowTextareaElement
-          ).textarea;
+          const textArea = (paperTextArea.inputElement as any).textarea;
           textArea.scrollTop = textArea.scrollHeight;
         }
       }
diff --git a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
index cda283547a..a8230b1fee 100644
--- a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
+++ b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js
@@ -3,6 +3,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
+import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-log.js b/src/panels/config/integrations/integration-panels/zwave/zwave-log.js
index f65e6e406d..c55e153f00 100755
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-log.js
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-log.js
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 3497bd1a73..6693400d64 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -1,5 +1,4 @@
 import { mdiPlus } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index 8e66d99a87..282337d0c0 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -26,7 +26,6 @@ import {
 import { haStyle } from "../../../resources/styles";
 import "../../../styles/polymer-ha-style";
 import { HomeAssistant } from "../../../types";
-import "../../../util/app-localstorage-document";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index 803c2c8fdd..5ed1cb80c4 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -171,8 +171,7 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
         }
 
         .weather-icon {
-          --iron-icon-width: 40px;
-          --iron-icon-height: 40px;
+          --mdc-icon-size: 40px;
         }
 
         :host([rtl]) .flex {
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index fbfeb09eed..a4ff54ff8f 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -120,6 +120,12 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-text-primary-color: 255, 255, 255;
       --rgb-card-background-color: 255, 255, 255;
 
+      /* Vaadin typography */
+      --material-h6-font-size: 1.25rem;
+      --material-small-font-size: 0.875rem;
+      --material-caption-font-size: 0.75rem;
+      --material-button-font-size: 0.875rem;
+
       ${Object.entries(derivedStyles)
         .map(([key, value]) => `--${key}: ${value};`)
         .join("")}
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 035832e689..f2b2494416 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -82,10 +82,6 @@ export const derivedStyles = {
   "mdc-theme-text-icon-on-background": "var(--secondary-text-color)",
   "app-header-text-color": "var(--text-primary-color)",
   "app-header-background-color": "var(--primary-color)",
-  "material-body-text-color": "var(--primary-text-color)",
-  "material-background-color": "var(--card-background-color)",
-  "material-secondary-background-color": "var(--secondary-background-color)",
-  "material-secondary-text-color": "var(--secondary-text-color)",
   "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
   "mdc-checkbox-disabled-color": "var(--disabled-text-color)",
   "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
@@ -95,6 +91,11 @@ export const derivedStyles = {
   "mdc-button-outline-color": "var(--divider-color)",
   "mdc-dialog-scroll-divider-color": "var(--divider-color)",
   "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
+  // Vaadin
+  "material-body-text-color": "var(--primary-text-color)",
+  "material-background-color": "var(--card-background-color)",
+  "material-secondary-background-color": "var(--secondary-background-color)",
+  "material-secondary-text-color": "var(--secondary-text-color)",
 };
 
 export const buttonLinkStyle = css`
diff --git a/src/util/app-localstorage-document.js b/src/util/app-localstorage-document.js
deleted file mode 100644
index 5a02ab3405..0000000000
--- a/src/util/app-localstorage-document.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/* Forked because it contained an import.meta which webpack doesn't support. */
-/* eslint-disable */
-/**
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-*/
-import { AppStorageBehavior } from "@polymer/app-storage/app-storage-behavior";
-import { Polymer } from "@polymer/polymer/polymer-legacy";
-
-/**
- * app-localstorage-document synchronizes storage between an in-memory
- * value and a location in the browser's localStorage system.
- *
- * localStorage is a simple and widely supported storage API that provides both
- * permanent and session-based storage options. Using app-localstorage-document
- * you can easily integrate localStorage into your app via normal Polymer
- * databinding.
- *
- * app-localstorage-document is the reference implementation of an element
- * that uses `AppStorageBehavior`. Reading its code is a good way to get
- * started writing your own storage element.
- *
- * Example use:
- *
- *     <paper-input value="{{search}}"></paper-input>
- *     <app-localstorage-document key="search" data="{{search}}">
- *     </app-localstorage-document>
- *
- * app-localstorage-document automatically synchronizes changes to the
- * same key across multiple tabs.
- *
- * Only supports storing JSON-serializable values.
- */
-Polymer({
-  is: "app-localstorage-document",
-  behaviors: [AppStorageBehavior],
-
-  properties: {
-    /**
-     * Defines the logical location to store the data.
-     *
-     * @type{String}
-     */
-    key: { type: String, notify: true },
-
-    /**
-     * If true, the data will automatically be cleared from storage when
-     * the page session ends (i.e. when the user has navigated away from
-     * the page).
-     */
-    sessionOnly: { type: Boolean, value: false },
-
-    /**
-     * Either `window.localStorage` or `window.sessionStorage`, depending on
-     * `this.sessionOnly`.
-     */
-    storage: { type: Object, computed: "__computeStorage(sessionOnly)" },
-  },
-
-  observers: ["__storageSourceChanged(storage, key)"],
-
-  attached: function () {
-    this.listen(window, "storage", "__onStorage");
-    this.listen(
-      window.top,
-      "app-local-storage-changed",
-      "__onAppLocalStorageChanged"
-    );
-  },
-
-  detached: function () {
-    this.unlisten(window, "storage", "__onStorage");
-    this.unlisten(
-      window.top,
-      "app-local-storage-changed",
-      "__onAppLocalStorageChanged"
-    );
-  },
-
-  get isNew() {
-    return !this.key;
-  },
-
-  /**
-   * Stores a value at the given key, and if successful, updates this.key.
-   *
-   * @param {*} key The new key to use.
-   * @return {Promise}
-   */
-  saveValue: function (key) {
-    try {
-      this.__setStorageValue(/*{@type if (key ty){String}}*/ key, this.data);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-
-    this.key = /** @type {String} */ (key);
-
-    return Promise.resolve();
-  },
-
-  reset: function () {
-    this.key = null;
-    this.data = this.zeroValue;
-  },
-
-  destroy: function () {
-    try {
-      this.storage.removeItem(this.key);
-      this.reset();
-    } catch (e) {
-      return Promise.reject(e);
-    }
-
-    return Promise.resolve();
-  },
-
-  getStoredValue: function (path) {
-    var value;
-
-    if (this.key != null) {
-      try {
-        value = this.__parseValueFromStorage();
-
-        if (value != null) {
-          value = this.get(path, { data: value });
-        } else {
-          value = undefined;
-        }
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-
-    return Promise.resolve(value);
-  },
-
-  setStoredValue: function (path, value) {
-    if (this.key != null) {
-      try {
-        this.__setStorageValue(this.key, this.data);
-      } catch (e) {
-        return Promise.reject(e);
-      }
-
-      this.fire("app-local-storage-changed", this, { node: window.top });
-    }
-
-    return Promise.resolve(value);
-  },
-
-  __computeStorage: function (sessionOnly) {
-    return sessionOnly ? window.sessionStorage : window.localStorage;
-  },
-
-  __storageSourceChanged: function (storage, key) {
-    this._initializeStoredValue();
-  },
-
-  __onStorage: function (event) {
-    if (event.key !== this.key || event.storageArea !== this.storage) {
-      return;
-    }
-
-    this.syncToMemory(function () {
-      this.set("data", this.__parseValueFromStorage());
-    });
-  },
-
-  __onAppLocalStorageChanged: function (event) {
-    if (
-      event.detail === this ||
-      event.detail.key !== this.key ||
-      event.detail.storage !== this.storage
-    ) {
-      return;
-    }
-    this.syncToMemory(function () {
-      this.set("data", event.detail.data);
-    });
-  },
-
-  __parseValueFromStorage: function () {
-    try {
-      return JSON.parse(this.storage.getItem(this.key));
-    } catch (e) {
-      console.error("Failed to parse value from storage for", this.key);
-    }
-  },
-
-  __setStorageValue: function (key, value) {
-    if (typeof value === "undefined") value = null;
-    this.storage.setItem(key, JSON.stringify(value));
-  },
-});
diff --git a/yarn.lock b/yarn.lock
index 51793ee657..c10803e068 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,25 +2656,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/app-layout@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@polymer/app-layout@npm:3.0.2"
+"@polymer/app-layout@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@polymer/app-layout@npm:3.1.0"
   dependencies:
     "@polymer/iron-flex-layout": ^3.0.0-pre.26
     "@polymer/iron-media-query": ^3.0.0-pre.26
     "@polymer/iron-resizable-behavior": ^3.0.0-pre.26
     "@polymer/iron-scroll-target-behavior": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 038e859278501f9ae62b90565efd452a2abea7609872d745ad6f03748f3343601a802f407dbf3b35d54ee7ed136a5d797e65a969dcf2ff096053344c39163101
-  languageName: node
-  linkType: hard
-
-"@polymer/app-storage@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@polymer/app-storage@npm:3.0.2"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
-  checksum: 1dabecd6d6887b27e216318a7ff508d9b54491f34d4e9bf7d6e89e0a9bc41944d9ea416da693e01e8803c0452a93cf5880e40d3e1210fb6c153be9ef966820a7
+  checksum: 0627ae023bd8ac725bee5e5a761735c72573eb487aa235f8144f98d8ed7b3180bda8b08cf708655036e6deb69a3aa51ec51382f376202f418190fbe6b3260f23
   languageName: node
   linkType: hard
 
@@ -2703,15 +2694,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-autogrow-textarea@npm:^3.0.0-pre.26, @polymer/iron-autogrow-textarea@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/iron-autogrow-textarea@npm:3.0.1"
+"@polymer/iron-autogrow-textarea@npm:^3.0.0-pre.26":
+  version: 3.0.3
+  resolution: "@polymer/iron-autogrow-textarea@npm:3.0.3"
   dependencies:
     "@polymer/iron-behaviors": ^3.0.0-pre.26
     "@polymer/iron-flex-layout": ^3.0.0-pre.26
     "@polymer/iron-validatable-behavior": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 95cb520c3a1aabecc20dbf0ddff91e2413fb6f340d2e32e52040918d5e9b8aed30fc2c8f5fd8fbbe45f2880d242bc1c890d1a558d025b3acb5db9e45fbc126d3
+  checksum: 54900a3b740025348493262196ccb323a6c9c938c2cc610c03a0e21ec0fbabb03655ac5f4fe6d1640325c0646006a140d74dc6df4bc1864ecd82c5100478b8ad
   languageName: node
   linkType: hard
 
@@ -2748,12 +2739,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-fit-behavior@npm:^3.0.0-pre.26":
-  version: 3.0.1
-  resolution: "@polymer/iron-fit-behavior@npm:3.0.1"
+"@polymer/iron-fit-behavior@npm:^3.0.0-pre.26, @polymer/iron-fit-behavior@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@polymer/iron-fit-behavior@npm:3.1.0"
   dependencies:
     "@polymer/polymer": ^3.0.0
-  checksum: 4e5fbee31111ecc9d3d0448ccafa6c49b56f4cb8f1ff7010ad66b8df433e974c1f898e29f30d41e4519bcad0905b0c38c2cd3d5d7d82ea49ee6a79151824d61b
+  checksum: c04136d5dafd84dd4724acfd8c000cb46f827c4c934ed758c7bdf524fa9bf32ac04c74def37ea5ce094f55956eb2852a84559166b471056b3d05856cb50417b1
   languageName: node
   linkType: hard
 
@@ -2849,15 +2840,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27, @polymer/iron-overlay-behavior@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@polymer/iron-overlay-behavior@npm:3.0.2"
+"@polymer/iron-overlay-behavior@npm:^3.0.0-pre.27, @polymer/iron-overlay-behavior@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@polymer/iron-overlay-behavior@npm:3.0.3"
   dependencies:
     "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
     "@polymer/iron-fit-behavior": ^3.0.0-pre.26
     "@polymer/iron-resizable-behavior": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 7e26e9cadb3f45b182d97e21c548afee8610bb6b695b79af8df2714aa88e45499e8475940c85c92a1464d05c56d2aa54fe7854e415fdd5469f6154c321ed8d6e
+  checksum: 6adf9cbdfcbbc4d99d0a8c7745b3f3a5cff6a0c6e678ee0bb3b07f1d063a9aa2ec7d043ea1bd65fbe3397eea10586b20132389f0685e56c2000a182d2d098c57
   languageName: node
   linkType: hard
 
@@ -2979,9 +2970,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-dropdown-menu@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-dropdown-menu@npm:3.0.1"
+"@polymer/paper-dropdown-menu@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@polymer/paper-dropdown-menu@npm:3.2.0"
   dependencies:
     "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
     "@polymer/iron-form-element-behavior": ^3.0.0-pre.26
@@ -2989,12 +2980,12 @@ __metadata:
     "@polymer/iron-iconset-svg": ^3.0.0-pre.26
     "@polymer/iron-validatable-behavior": ^3.0.0-pre.26
     "@polymer/paper-behaviors": ^3.0.0-pre.27
-    "@polymer/paper-input": ^3.0.0-pre.26
-    "@polymer/paper-menu-button": ^3.0.0-pre.26
+    "@polymer/paper-input": ^3.1.0
+    "@polymer/paper-menu-button": ^3.1.0
     "@polymer/paper-ripple": ^3.0.0-pre.26
     "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 4884b86e066c2cc41dc163ec6b99502ed5d0b921ca281b107caa8bb0d40b76d6a095afbff860773195d43a99128d7cc90e4a6da88c762e0d00ee5a0c7afe6eb5
+    "@polymer/polymer": ^3.3.1
+  checksum: 425e7b264766f6e78e328c0e8cf5f25c100e6a46e4a400f57ecbab896c442f7d3d1e297f4febc134eaa79ed9c9c0b92ff011ec47ae893550d33814ec81c7c717
   languageName: node
   linkType: hard
 
@@ -3010,9 +3001,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-input@npm:^3.0.0-pre.26, @polymer/paper-input@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "@polymer/paper-input@npm:3.0.2"
+"@polymer/paper-input@npm:^3.0.0-pre.26, @polymer/paper-input@npm:^3.1.0, @polymer/paper-input@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "@polymer/paper-input@npm:3.2.1"
   dependencies:
     "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
     "@polymer/iron-autogrow-textarea": ^3.0.0-pre.26
@@ -3021,7 +3012,7 @@ __metadata:
     "@polymer/iron-input": ^3.0.0-pre.26
     "@polymer/paper-styles": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 8cbecc33d2c6eb68592e50f647f0b27321d856fceaa7c5555bce61b17cd6c300fe96303ddd7fe02d74f869e820adc4bc50813516c1f38f864969554b4575930c
+  checksum: ccce28b046c947c9e3b261db7914fb551787bf2f90cc3f4740c0539bc8def1da4835bbd83b806db4f4dc9502750bc72f858dbc5fa86788a35aa90337276446a5
   languageName: node
   linkType: hard
 
@@ -3049,18 +3040,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-menu-button@npm:^3.0.0-pre.26, @polymer/paper-menu-button@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-menu-button@npm:3.0.1"
+"@polymer/paper-menu-button@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@polymer/paper-menu-button@npm:3.1.0"
   dependencies:
     "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
     "@polymer/iron-behaviors": ^3.0.0-pre.26
     "@polymer/iron-dropdown": ^3.0.0-pre.26
-    "@polymer/iron-fit-behavior": ^3.0.0-pre.26
+    "@polymer/iron-fit-behavior": ^3.1.0
     "@polymer/neon-animation": ^3.0.0-pre.26
     "@polymer/paper-styles": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 0f8b0a512b16a4038848a7da39fc0f43a994a7f4c02cd65d609b83403594d7958b17abf12c6a4bda48300b04f33b9a5336da4b66d3b59fd51a956fdf79f9e7f3
+  checksum: 7a612e44a5562f116ba8d2f532c6c22822647ed3753cc3d2d841360257d0a932a70a0ddbc4d2b5b401a612c2daaf790d973166b2eaa2afd5c92ab6e46691f73a
   languageName: node
   linkType: hard
 
@@ -3101,13 +3092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-ripple@npm:^3.0.0-pre.26, @polymer/paper-ripple@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-ripple@npm:3.0.1"
+"@polymer/paper-ripple@npm:^3.0.0-pre.26, @polymer/paper-ripple@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@polymer/paper-ripple@npm:3.0.2"
   dependencies:
     "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
     "@polymer/polymer": ^3.0.0
-  checksum: 52d23305029c7eb2a7fcf9548f8b986a65d43198bfb141c1eaf06c755f3b415c6c9f7e3c672bd4aa988eed31ecc95121257435ac48016219a672fe503ffe5f04
+  checksum: ae243e204dd333c735e368b185cd98e70ace1332ba4026250707cf704ed36ab3224dd5adce6ad9550c5b296d8d11584071511c4bbd5e673104064eb92ccfdd4d
   languageName: node
   linkType: hard
 
@@ -3139,7 +3130,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-tabs@npm:^3.0.1":
+"@polymer/paper-tabs@npm:^3.1.0":
   version: 3.1.0
   resolution: "@polymer/paper-tabs@npm:3.1.0"
   dependencies:
@@ -3179,12 +3170,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/polymer@npm:3.1.0":
-  version: 3.1.0
-  resolution: "@polymer/polymer@npm:3.1.0"
+"@polymer/polymer@3.4.1":
+  version: 3.4.1
+  resolution: "@polymer/polymer@npm:3.4.1"
   dependencies:
-    "@webcomponents/shadycss": ^1.5.2
-  checksum: c443afb65c0bb04a7da8e649ba9b4d39924bbb391c8a905969aa31d106fdf8890b1ac9e3a2037387fb9784090b11940c24306247acf5f6ac8ba967d46c02983e
+    "@webcomponents/shadycss": ^1.9.1
+  checksum: 140e30be3d5201728a301883a436292ed6a36312f7b206fecbc1a23c6c0a01aadbc7b63cd870c69f0ec1651aeae97239475ac3a891c84ad8e6477f930f4314cd
+  languageName: node
+  linkType: hard
+
+"@polymer/polymer@patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch::locator=home-assistant-frontend%40workspace%3A.":
+  version: 3.4.1
+  resolution: "@polymer/polymer@patch:@polymer/polymer@npm%3A3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch::version=3.4.1&hash=be9fd8&locator=home-assistant-frontend%40workspace%3A."
+  dependencies:
+    "@webcomponents/shadycss": ^1.9.1
+  checksum: 84417921c758fa220b7b40823ebf0694ea81f751766ddb9bf64ef7f81682e29b5950088af9c57e85ab38082a08bcdcac2214b25affc60dbcbff3f41596d2a91c
   languageName: node
   linkType: hard
 
@@ -3872,68 +3872,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-button@npm:^2.1.0":
-  version: 2.2.1
-  resolution: "@vaadin/vaadin-button@npm:2.2.1"
+"@vaadin/vaadin-button@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@vaadin/vaadin-button@npm:2.4.0"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^2.1.1
-    "@vaadin/vaadin-element-mixin": ^2.0.0
+    "@vaadin/vaadin-control-state-mixin": ^2.2.1
+    "@vaadin/vaadin-element-mixin": ^2.4.1
     "@vaadin/vaadin-lumo-styles": ^1.3.3
     "@vaadin/vaadin-material-styles": ^1.2.0
-    "@vaadin/vaadin-themable-mixin": ^1.2.1
-  checksum: 7f0ee28f62fdc1dc24469c22fe9ffc8d9141d475be8b283d6c2051eb233985ec92a73b330b7dcaef95f39c0a3d64cde48939ef8b8c540ff730b9384aa99f812a
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: f0b79e3b8e2e83c90fde9a6b7730ccfed26b4b75bb5c54f5b1d55e1efa3ae4905f5e5d0218743824569f54324056422b69979e1b1e50d34c9d69322845083735
   languageName: node
   linkType: hard
 
 "@vaadin/vaadin-combo-box@npm:^5.0.10":
-  version: 5.0.10
-  resolution: "@vaadin/vaadin-combo-box@npm:5.0.10"
+  version: 5.4.7
+  resolution: "@vaadin/vaadin-combo-box@npm:5.4.7"
   dependencies:
     "@polymer/iron-a11y-announcer": ^3.0.0
     "@polymer/iron-a11y-keys-behavior": ^3.0.0
     "@polymer/iron-list": ^3.0.0
     "@polymer/iron-resizable-behavior": ^3.0.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^2.1.1
-    "@vaadin/vaadin-element-mixin": ^2.0.0
-    "@vaadin/vaadin-item": ^2.1.0
+    "@vaadin/vaadin-control-state-mixin": ^2.2.2
+    "@vaadin/vaadin-element-mixin": ^2.4.1
+    "@vaadin/vaadin-item": ^2.3.0
     "@vaadin/vaadin-lumo-styles": ^1.1.1
     "@vaadin/vaadin-material-styles": ^1.1.2
-    "@vaadin/vaadin-overlay": ^3.2.0
-    "@vaadin/vaadin-text-field": ^2.4.3
-    "@vaadin/vaadin-themable-mixin": ^1.3.2
-  checksum: 301e2367e2d93e4a6ae72834bc23232e1e8c62da08598a1ba9d5514d7f415cc5884219358ecea3bc1b7c8221e0c9dfe6261abb01f69f10a461114c4e5185fa97
+    "@vaadin/vaadin-overlay": ^3.5.0
+    "@vaadin/vaadin-text-field": ^2.8.0
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: f606af912f2db8e2725086540f13a0e199ca150dc6cd2abccf68f7ddaa903d59dfbc3ad29f31b89b520b739ccc6af6740b1e87f54f6b7c9461e26377f599d8d4
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-control-state-mixin@npm:^2.1.1":
-  version: 2.1.3
-  resolution: "@vaadin/vaadin-control-state-mixin@npm:2.1.3"
+"@vaadin/vaadin-control-state-mixin@npm:^2.2.1, @vaadin/vaadin-control-state-mixin@npm:^2.2.2":
+  version: 2.2.4
+  resolution: "@vaadin/vaadin-control-state-mixin@npm:2.2.4"
   dependencies:
     "@polymer/polymer": ^3.0.0
-  checksum: 2f2a0102066119139f6bd74dd7b7f08acebccd1d6e9dcf57605e1458677326ec44b00b3ce40599a7ed5f7b6be1d9ff571e5bf3ad88623123c1d94dae38b4f340
+  checksum: 7efdc2e8f546164983f1dfba2c153f4801e18de2f5abefe7260d3bde2d71ad1c9214afed316b6d2d79752cd72d9987d430c3400bd5995f5bc9e0146844e302ab
   languageName: node
   linkType: hard
 
 "@vaadin/vaadin-date-picker@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "@vaadin/vaadin-date-picker@npm:4.0.7"
+  version: 4.4.1
+  resolution: "@vaadin/vaadin-date-picker@npm:4.4.1"
   dependencies:
     "@polymer/iron-a11y-announcer": ^3.0.0
     "@polymer/iron-a11y-keys-behavior": ^3.0.0
     "@polymer/iron-media-query": ^3.0.0
     "@polymer/iron-resizable-behavior": ^3.0.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-button": ^2.1.0
-    "@vaadin/vaadin-control-state-mixin": ^2.1.1
-    "@vaadin/vaadin-element-mixin": ^2.0.0
-    "@vaadin/vaadin-lumo-styles": ^1.4.1
-    "@vaadin/vaadin-material-styles": ^1.1.2
-    "@vaadin/vaadin-overlay": ^3.2.0
-    "@vaadin/vaadin-text-field": ^2.3.0
-    "@vaadin/vaadin-themable-mixin": ^1.3.2
-  checksum: 9e474c82aae0bf67d2c133693127adac98194ac5043f6cd15e1d63a12e839fcb8bb03e53eee93438c0ced5a7cee7dfa5b83d8b4b9e03bd02dfafd74435c00b4e
+    "@vaadin/vaadin-button": ^2.4.0
+    "@vaadin/vaadin-control-state-mixin": ^2.2.2
+    "@vaadin/vaadin-element-mixin": ^2.4.1
+    "@vaadin/vaadin-lumo-styles": ^1.6.0
+    "@vaadin/vaadin-material-styles": ^1.3.2
+    "@vaadin/vaadin-overlay": ^3.5.0
+    "@vaadin/vaadin-text-field": ^2.8.0
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: da3bc0b7e3ce22ae1887e9fc79c4fdefaf179fb721b03d9cdb9fc336287c6c1c18889504b6d185b59c1644ca4c1e875e6b845cf29ab0c811b51456b87962c7a6
   languageName: node
   linkType: hard
 
@@ -3944,90 +3944,93 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-element-mixin@npm:^2.0.0":
-  version: 2.1.3
-  resolution: "@vaadin/vaadin-element-mixin@npm:2.1.3"
+"@vaadin/vaadin-element-mixin@npm:^2.4.0, @vaadin/vaadin-element-mixin@npm:^2.4.1":
+  version: 2.4.2
+  resolution: "@vaadin/vaadin-element-mixin@npm:2.4.2"
   dependencies:
     "@polymer/polymer": ^3.0.0
     "@vaadin/vaadin-development-mode-detector": ^2.0.0
-    "@vaadin/vaadin-usage-statistics": ^2.0.2
-  checksum: 7233a3b1af03cdb7a009b8d383b248448d53beb192312dd6ea33287bd0273518985164e5a28e58d8f6790169ee95edc5a399cdb3d6819bb5ad69443f275035f3
+    "@vaadin/vaadin-usage-statistics": ^2.1.0
+  checksum: 6bc9a4226e5cfd5b3dabd7bda5a95f3582ab045892dd941430245ce78d4361c20ea3c4c24e1f490d1f5635b76ac962aeb7503b38dd1e09c937d2ae97d1d95d93
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-item@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "@vaadin/vaadin-item@npm:2.1.1"
+"@vaadin/vaadin-item@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@vaadin/vaadin-item@npm:2.3.0"
   dependencies:
     "@polymer/polymer": ^3.0.0
+    "@vaadin/vaadin-element-mixin": ^2.4.1
     "@vaadin/vaadin-lumo-styles": ^1.1.0
     "@vaadin/vaadin-material-styles": ^1.1.0
-    "@vaadin/vaadin-themable-mixin": ^1.2.1
-  checksum: 6938d1b16937d1ba25e1300f5598a0955f5d8cd878a9c154b77b484ab558cc3e600c59670f9216da21b635ca39f42defb39c30e8755891c2cf3022e2050d8aaa
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: 5effafdf4a5135a8af92b86dc29d510331bff2814347568c69a61c7d2012714311e9c3be2761f0a2f599849828f1e5918d979840905c149ce244a75255f0f76e
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:^1.1.0, @vaadin/vaadin-lumo-styles@npm:^1.1.1, @vaadin/vaadin-lumo-styles@npm:^1.2.0, @vaadin/vaadin-lumo-styles@npm:^1.3.0, @vaadin/vaadin-lumo-styles@npm:^1.3.3, @vaadin/vaadin-lumo-styles@npm:^1.4.1":
-  version: 1.4.2
-  resolution: "@vaadin/vaadin-lumo-styles@npm:1.4.2"
+"@vaadin/vaadin-lumo-styles@npm:^1.1.0, @vaadin/vaadin-lumo-styles@npm:^1.1.1, @vaadin/vaadin-lumo-styles@npm:^1.3.0, @vaadin/vaadin-lumo-styles@npm:^1.3.3, @vaadin/vaadin-lumo-styles@npm:^1.6.0":
+  version: 1.6.1
+  resolution: "@vaadin/vaadin-lumo-styles@npm:1.6.1"
   dependencies:
     "@polymer/iron-icon": ^3.0.0
     "@polymer/iron-iconset-svg": ^3.0.0
     "@polymer/polymer": ^3.0.0
-  checksum: e6f9736df32cd1ee30d0414cf12c3ebce78ee650f86f73cc20f5a11c912bbbfdb13efc8cba8c304a55c00237688f4dc028e1ef531dec5dd35a85134b843935a0
+  checksum: e6ae75a68f626ff877a8c4f6a14b12529f168308c8e198b24e91db46657dcec06a3e3df1a77678e9c1a7ac81568592483e3508c8af89d5b578cf6db9814e097e
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:^1.1.0, @vaadin/vaadin-material-styles@npm:^1.1.2, @vaadin/vaadin-material-styles@npm:^1.2.0":
-  version: 1.2.3
-  resolution: "@vaadin/vaadin-material-styles@npm:1.2.3"
+"@vaadin/vaadin-material-styles@npm:^1.1.0, @vaadin/vaadin-material-styles@npm:^1.1.2, @vaadin/vaadin-material-styles@npm:^1.2.0, @vaadin/vaadin-material-styles@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "@vaadin/vaadin-material-styles@npm:1.3.2"
   dependencies:
     "@polymer/polymer": ^3.0.0
-  checksum: 8dbc0ea9255cb9d1733e9fe3a6fa76960434bdc58f75467a5fce0a9632370b27be0cb04642f193d54d9e10ec106ed7f5db244e216d9107bf9df5154131dd288c
+  checksum: 4fe2cc038ec4dcc6de37263aaf90435f3987cf8a6ed09bf797a845235a6c7a24d9af2e77c0597fb17ec8887b723e59305f88bf19d265c6899c6dd60b5e3b0aee
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-overlay@npm:^3.2.0":
-  version: 3.2.14
-  resolution: "@vaadin/vaadin-overlay@npm:3.2.14"
+"@vaadin/vaadin-overlay@npm:^3.5.0":
+  version: 3.5.1
+  resolution: "@vaadin/vaadin-overlay@npm:3.5.1"
   dependencies:
     "@polymer/polymer": ^3.0.0
+    "@vaadin/vaadin-element-mixin": ^2.4.0
     "@vaadin/vaadin-lumo-styles": ^1.3.0
     "@vaadin/vaadin-material-styles": ^1.2.0
-    "@vaadin/vaadin-themable-mixin": ^1.2.1
-  checksum: 4f7de99ba737a2c72ccdef5679ede0aed2b9fdd23645f9a606740ca457a58d910a9be65168d84f1faefe38fccd7eaccd51f4f89b96b2cdcaaa0f108b69295988
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: dcfba6b65bc0001e8d16278c6e63707629f7480f6b0553f4f3338ec79e4edfa3ecf7f27fcfc022cab9e08fdcdf2a5c263d817fd55402a554d28362a333fcd0b6
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-text-field@npm:^2.3.0, @vaadin/vaadin-text-field@npm:^2.4.3":
-  version: 2.4.11
-  resolution: "@vaadin/vaadin-text-field@npm:2.4.11"
+"@vaadin/vaadin-text-field@npm:^2.8.0":
+  version: 2.8.4
+  resolution: "@vaadin/vaadin-text-field@npm:2.8.4"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^2.1.1
-    "@vaadin/vaadin-element-mixin": ^2.0.0
-    "@vaadin/vaadin-lumo-styles": ^1.2.0
-    "@vaadin/vaadin-material-styles": ^1.2.0
-    "@vaadin/vaadin-themable-mixin": ^1.2.1
-  checksum: a9d50bfa7b1f20b762c936e2a2094bcf0c6fcba6fa1b47d4f0b9b9c634fd3706edb3acec8b0411e6477b03a38534ed8e4dd456081aebd8d260436bc17d422398
+    "@vaadin/vaadin-control-state-mixin": ^2.2.1
+    "@vaadin/vaadin-element-mixin": ^2.4.1
+    "@vaadin/vaadin-lumo-styles": ^1.6.0
+    "@vaadin/vaadin-material-styles": ^1.3.2
+    "@vaadin/vaadin-themable-mixin": ^1.6.1
+  checksum: fb7994b99b641f8570b5960f6ec40de4422caeca29a43bd760edbb95a39b87d2dfeeeeb21eb4e0d4eeaa33b11cc41a087c5a49c78c602f5ac951effdcc902693
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:^1.2.1, @vaadin/vaadin-themable-mixin@npm:^1.3.2":
-  version: 1.4.4
-  resolution: "@vaadin/vaadin-themable-mixin@npm:1.4.4"
+"@vaadin/vaadin-themable-mixin@npm:^1.6.1":
+  version: 1.6.2
+  resolution: "@vaadin/vaadin-themable-mixin@npm:1.6.2"
   dependencies:
     "@polymer/polymer": ^3.0.0
-  checksum: 8227ce8fb5dec756389d3fe9bd028f06e68cf77ce82d2dcbadcd653aefd4f776e8a4a802f5fcf95ff09c12afd16218d23178bfbddffe88a1f401f4ec3c66f691
+    lit-element: ^2.0.0
+  checksum: f8a0aff260ab2c512c4bbec3fcaa1c07e64244a45b971a108c827d94009223e0006150b0c006cd95477a9337a406b44046fc21e15a1e33d07fdc1f396ab7b387
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-usage-statistics@npm:^2.0.2":
-  version: 2.0.10
-  resolution: "@vaadin/vaadin-usage-statistics@npm:2.0.10"
+"@vaadin/vaadin-usage-statistics@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@vaadin/vaadin-usage-statistics@npm:2.1.0"
   dependencies:
     "@vaadin/vaadin-development-mode-detector": ^2.0.0
-  checksum: 1c9f5d39c05713f2734e4cdf4ed0cc495b4f1bc0bb03d42130352830b06355f6ede71b55648e5d9257634e01541750632cccbe92f76c4ad6ae00062ba8de1081
+  checksum: f1bda8efeebe8d876cd1dea8d252d0bd266652bb39fb87e5a2505d508461cd9f3d9fdac7c2a5af3613d48b46e57bce668b81e49a1a7eca0352dbd8c2400004e0
   languageName: node
   linkType: hard
 
@@ -4391,10 +4394,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webcomponents/shadycss@npm:^1.5.2":
-  version: 1.9.1
-  resolution: "@webcomponents/shadycss@npm:1.9.1"
-  checksum: 84ef050561c36b6d90e961cd73eb3536041b8dc8f69873664458faccc4dd1e05ffa8ce47cc9435c347507975184bf4c7390572bbdb9870b9fc1339b367143abd
+"@webcomponents/shadycss@npm:^1.9.1":
+  version: 1.10.2
+  resolution: "@webcomponents/shadycss@npm:1.10.2"
+  checksum: 3e41eda93b1b9b9d919e41e59d0c7dbc103e3fb25c160c61f2f1b046f1668296a3a69afd0fe1fcb86643c9f3e037a90f7ce8bbbb03dc3c8bf4c63844e2f2cd0b
   languageName: node
   linkType: hard
 
@@ -8751,33 +8754,31 @@ fsevents@~2.3.1:
     "@mdi/js": 5.9.55
     "@mdi/svg": 5.9.55
     "@open-wc/dev-server-hmr": ^0.0.2
-    "@polymer/app-layout": ^3.0.2
-    "@polymer/app-storage": ^3.0.2
-    "@polymer/iron-autogrow-textarea": ^3.0.1
+    "@polymer/app-layout": ^3.1.0
     "@polymer/iron-flex-layout": ^3.0.1
     "@polymer/iron-icon": ^3.0.1
     "@polymer/iron-input": ^3.0.1
-    "@polymer/iron-overlay-behavior": ^3.0.2
+    "@polymer/iron-overlay-behavior": ^3.0.3
     "@polymer/iron-resizable-behavior": ^3.0.1
     "@polymer/paper-checkbox": ^3.1.0
     "@polymer/paper-dialog": ^3.0.1
     "@polymer/paper-dialog-behavior": ^3.0.1
     "@polymer/paper-dialog-scrollable": ^3.0.1
-    "@polymer/paper-dropdown-menu": ^3.0.1
-    "@polymer/paper-input": ^3.0.1
+    "@polymer/paper-dropdown-menu": ^3.2.0
+    "@polymer/paper-input": ^3.2.1
     "@polymer/paper-item": ^3.0.1
     "@polymer/paper-listbox": ^3.0.1
-    "@polymer/paper-menu-button": ^3.0.1
+    "@polymer/paper-menu-button": ^3.1.0
     "@polymer/paper-progress": ^3.0.1
     "@polymer/paper-radio-button": ^3.0.1
     "@polymer/paper-radio-group": ^3.0.1
-    "@polymer/paper-ripple": ^3.0.1
+    "@polymer/paper-ripple": ^3.0.2
     "@polymer/paper-slider": ^3.0.1
     "@polymer/paper-styles": ^3.0.1
-    "@polymer/paper-tabs": ^3.0.1
+    "@polymer/paper-tabs": ^3.1.0
     "@polymer/paper-toast": ^3.0.1
     "@polymer/paper-tooltip": ^3.0.1
-    "@polymer/polymer": 3.1.0
+    "@polymer/polymer": 3.4.1
     "@rollup/plugin-babel": ^5.2.1
     "@rollup/plugin-commonjs": ^11.1.0
     "@rollup/plugin-json": ^4.0.3
@@ -8803,7 +8804,7 @@ fsevents@~2.3.1:
     "@vue/web-component-wrapper": ^1.2.0
     "@web/dev-server": ^0.0.24
     "@web/dev-server-rollup": ^0.2.11
-    "@webcomponents/webcomponentsjs": ^2.2.7
+    "@webcomponents/webcomponentsjs": ^2.2.10
     babel-loader: ^8.2.2
     chai: ^4.3.4
     chart.js: ^3.3.2