Add integration_discovery to discovery sources (#11564)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

.github/workflows/release.yaml

@@ -18,8 +18,8 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v2
 
-      # - name: Verify version
-      #   uses: home-assistant/actions/helpers/verify-version@master
+      - name: Verify version
+        uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v2
@@ -35,67 +35,22 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      # - name: Download Translations
-      #   run: ./script/translations_download
-      #   env:
-      #     LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
           python3 -m pip install twine build
-          # export TWINE_USERNAME="__token__"
-          # export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
 
           script/release
 
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v2
-        with:
-          name: dist
-          path: ./dist/
-
-  upload-release-assets:
-    name: Upload release assets
-    runs-on: ubuntu-latest
-    needs: release
-    if: github.event_name == 'release'
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v2
-      - name: Download build artifacts
-        uses: actions/download-artifact@v2
-      - name: Get build file names
-        id: file-names
-        run: |
-          echo "::set-output name=sdist::$(ls dist/ | grep '.*.tar.gz' | tail -n 1)"
-          echo "::set-output name=wheel::$(ls dist/ | grep '.*.whl' | tail -n 1)"
-      - name: Upload release asset (sdist)
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ github.event.release.upload_url }}
-          asset_path: ./dist/${{ steps.file-names.outputs.sdist }}
-          asset_name: ${{ steps.file-names.outputs.sdist }}
-          asset_content_type: application/gzip
-      - name: Upload release asset (wheel)
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ github.event.release.upload_url }}
-          asset_path: ./dist/${{ steps.file-names.outputs.wheel }}
-          asset_name: ${{ steps.file-names.outputs.wheel }}
-          asset_content_type: application/zip
-      - name: Print release url
-        run: echo "Release assets uploaded! View release at ${{ github.event.release.html_url }}"
-
   wheels-init:
     name: Init wheels build
     needs: release
     runs-on: ubuntu-latest
-    if: false
     steps:
       - name: Generate requirements.txt
         run: |

build-scripts/bundle.js

@@ -10,7 +10,7 @@ module.exports.ignorePackages = ({ latestBuild }) => [
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild }) =>
+module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,6 +28,11 @@ module.exports.emptyPackages = ({ latestBuild }) =>
       ),
     // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
+    // Icons in supervisor conflict with icons in HA so we don't load.
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -196,6 +201,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
+      isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
       },

build-scripts/webpack.js

@@ -30,6 +30,7 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
+  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -117,7 +118,9 @@ const createWebpackConfig = ({
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
+        new RegExp(
+          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
+        ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),

gallery/src/components/demo-black-white-row.ts

@@ -3,6 +3,7 @@ import { html, LitElement, css, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {

gallery/src/pages/components/ha-form.ts

@@ -1,11 +1,17 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
 import { LitElement, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-form/ha-form";
 import "../../components/demo-black-white-row";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
 
 const SCHEMAS: {
   title: string;
@@ -14,6 +20,44 @@ const SCHEMAS: {
   schema: HaFormSchema[];
   data?: Record<string, any>;
 }[] = [
+  {
+    title: "Selectors",
+    translations: {
+      addon: "Addon",
+      entity: "Entity",
+      device: "Device",
+      area: "Area",
+      target: "Target",
+      number: "Number",
+      boolean: "Boolean",
+      time: "Time",
+      action: "Action",
+      text: "Text",
+      text_multiline: "Text Multiline",
+      object: "Object",
+      select: "Select",
+    },
+    schema: [
+      { name: "addon", selector: { addon: {} } },
+      { name: "entity", selector: { entity: {} } },
+      { name: "device", selector: { device: {} } },
+      { name: "area", selector: { area: {} } },
+      { name: "target", selector: { target: {} } },
+      { name: "number", selector: { number: { min: 0, max: 10 } } },
+      { name: "boolean", selector: { boolean: {} } },
+      { name: "time", selector: { time: {} } },
+      { name: "action", selector: { action: {} } },
+      { name: "text", selector: { text: { multiline: false } } },
+      { name: "text_multiline", selector: { text: { multiline: true } } },
+      { name: "object", selector: { object: {} } },
+      {
+        name: "select",
+        selector: {
+          select: { options: ["Everyone Home", "Some Home", "All gone"] },
+        },
+      },
+    ],
+  },
   {
     title: "Authentication",
     translations: {
@@ -50,13 +94,11 @@ const SCHEMAS: {
       {
         type: "boolean",
         name: "bool",
-        optional: true,
         default: false,
       },
       {
         type: "integer",
         name: "int",
-        optional: true,
         default: 10,
       },
       {
@@ -67,7 +109,6 @@ const SCHEMAS: {
       {
         type: "string",
         name: "string",
-        optional: true,
         default: "Default",
       },
       {
@@ -77,7 +118,6 @@ const SCHEMAS: {
           ["other", "other"],
         ],
         name: "select",
-        optional: true,
         default: "default",
       },
       {
@@ -87,7 +127,6 @@ const SCHEMAS: {
           other: "Other",
         },
         name: "multi",
-        optional: true,
         default: ["default"],
       },
       {
@@ -108,7 +147,6 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int with default",
-        optional: true,
         default: 10,
       },
       {
@@ -122,7 +160,6 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int range optional",
-        optional: true,
         valueMin: 0,
         valueMax: 10,
       },
@@ -148,7 +185,6 @@ const SCHEMAS: {
           ["other", "Other"],
         ],
         name: "select optional",
-        optional: true,
       },
       {
         type: "select",
@@ -161,7 +197,6 @@ const SCHEMAS: {
           ["option", "1000"],
         ],
         name: "select many otions",
-        optional: true,
         default: "default",
       },
     ],
@@ -190,7 +225,6 @@ const SCHEMAS: {
           option: "1000",
         },
         name: "multi many otions",
-        optional: true,
         default: ["default"],
       },
     ],
@@ -239,23 +273,35 @@ const SCHEMAS: {
         valueMin: 1,
         valueMax: 65535,
         name: "port",
-        optional: true,
         default: 80,
       },
-      { type: "string", name: "path", optional: true, default: "/" },
-      { type: "boolean", name: "ssl", optional: true, default: false },
+      { type: "string", name: "path", default: "/" },
+      { type: "boolean", name: "ssl", default: false },
     ],
   },
 ];
 
 @customElement("demo-components-ha-form")
 class DemoHaForm extends LitElement {
+  @state() private hass!: HomeAssistant;
+
   private data = SCHEMAS.map(
     ({ schema, data }) => data || computeInitialHaFormData(schema)
   );
 
   private disabled = SCHEMAS.map(() => false);
 
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
   protected render(): TemplateResult {
     return html`
       ${SCHEMAS.map((info, idx) => {
@@ -278,6 +324,7 @@ class DemoHaForm extends LitElement {
               (slot) => html`
                 <ha-form
                   slot=${slot}
+                  .hass=${this.hass}
                   .data=${this.data[idx]}
                   .schema=${info.schema}
                   .error=${info.error}

gallery/src/pages/concepts/home.markdown

@@ -17,7 +17,7 @@ We want to make it as easy for designers to contribute as it is for developers.
 
 - Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
-- Find the lates UX <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
+- Find the lates UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 
 
 ## Developers

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -47,7 +47,9 @@ export class DialogHassioBackupUpload
         scrimClickAction
         escapeKeyAction
         hideActions
-        .heading=${true}
+        .heading=${this.hass?.localize(
+          "ui.panel.page-onboarding.restore.upload_backup"
+        ) || "Upload backup"}
         @closed=${this.closeDialog}
       >
         <div slot="heading">

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -71,7 +71,7 @@ class HassioBackupDialog
         open
         scrimClickAction
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._backup.name}
       >
         <div slot="heading">
           <ha-header-bar>

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -65,7 +65,9 @@ class HassioHardwareDialog extends LitElement {
         scrimClickAction
         hideActions
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._dialogParams.supervisor.localize(
+          "dialog.hardware.title"
+        )}
       >
         <div class="header" slot="heading">
           <h2>

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -94,7 +94,7 @@ export class DialogHassioNetwork
         open
         scrimClickAction
         escapeKeyAction
-        .heading=${true}
+        .heading=${this.supervisor.localize("dialog.network.title")}
         hideActions
         @closed=${this.closeDialog}
       >

hassio/src/update-available/update-available-card.ts

@@ -33,8 +33,12 @@ import {
   extractApiErrorMessage,
   ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
-import { updateOS } from "../../../src/data/hassio/host";
-import { updateSupervisor } from "../../../src/data/hassio/supervisor";
+import { fetchHassioHassOsInfo, updateOS } from "../../../src/data/hassio/host";
+import {
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  updateSupervisor,
+} from "../../../src/data/hassio/supervisor";
 import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -212,11 +216,22 @@ class UpdateAvailableCard extends LitElement {
       : "addon";
     this._updateType = updateType as updateType;
 
-    if (updateType === "addon") {
-      if (!this.addonSlug) {
-        this.addonSlug = pathPart;
-      }
-      this._loadAddonData();
+    switch (updateType) {
+      case "addon":
+        if (!this.addonSlug) {
+          this.addonSlug = pathPart;
+        }
+        this._loadAddonData();
+        break;
+      case "core":
+        this._loadCoreData();
+        break;
+      case "supervisor":
+        this._loadSupervisorData();
+        break;
+      case "os":
+        this._loadOsData();
+        break;
     }
   }
 
@@ -308,6 +323,42 @@ class UpdateAvailableCard extends LitElement {
     }
   }
 
+  private async _loadSupervisorData() {
+    try {
+      const supervisor = await fetchHassioSupervisorInfo(this.hass);
+      fireEvent(this, "supervisor-update", { supervisor });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadCoreData() {
+    try {
+      const core = await fetchHassioHomeAssistantInfo(this.hass);
+      fireEvent(this, "supervisor-update", { core });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadOsData() {
+    try {
+      const os = await fetchHassioHassOsInfo(this.hass);
+      fireEvent(this, "supervisor-update", { os });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
   private async _update() {
     this._error = undefined;
     this._updating = true;

package.json

@@ -22,17 +22,18 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/commands": "^0.19.5",
-    "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
+    "@codemirror/autocomplete": "^0.19.12",
+    "@codemirror/commands": "^0.19.8",
+    "@codemirror/gutter": "^0.19.9",
+    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/history": "^0.19.2",
     "@codemirror/legacy-modes": "^0.19.0",
     "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.2",
-    "@codemirror/state": "^0.19.4",
-    "@codemirror/stream-parser": "^0.19.2",
-    "@codemirror/text": "^0.19.5",
-    "@codemirror/view": "^0.19.15",
+    "@codemirror/search": "^0.19.6",
+    "@codemirror/state": "^0.19.6",
+    "@codemirror/stream-parser": "^0.19.5",
+    "@codemirror/text": "^0.19.6",
+    "@codemirror/view": "^0.19.40",
     "@formatjs/intl-datetimeformat": "^4.2.5",
     "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@formatjs/intl-locale": "^2.4.40",
@@ -57,7 +58,7 @@
     "@material/mwc-formfield": "0.25.3",
     "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
     "@material/mwc-linear-progress": "0.25.3",
-    "@material/mwc-list": "0.25.3",
+    "@material/mwc-list": "^0.25.3",
     "@material/mwc-menu": "0.25.3",
     "@material/mwc-radio": "0.25.3",
     "@material/mwc-ripple": "0.25.3",
@@ -87,13 +88,14 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/vaadin-combo-box": "^21.0.2",
-    "@vaadin/vaadin-date-picker": "^21.0.2",
+    "@vaadin/combo-box": "^22.0.4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@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.10",
+    "app-datepicker": "^5.0.1",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
@@ -111,7 +113,7 @@
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
-    "lit-vaadin-helpers": "^0.2.1",
+    "lit-vaadin-helpers": "^0.3.0",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",

script/release

@@ -13,4 +13,4 @@ script/build_frontend
 
 rm -rf dist home_assistant_frontend.egg-info
 python3 -m build
-# python3 -m twine upload dist/*.whl --skip-existing
+python3 -m twine upload dist/*.whl --skip-existing

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220202.0
+version      = 20220203.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/components/device/ha-area-devices-picker.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,

src/components/device/ha-device-picker.ts

@@ -1,18 +1,9 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state, query } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { mdiCheck } from "@mdi/js";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
@@ -46,36 +37,12 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-// eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
-    paper-item {
-      padding: 0;
-      margin: -10px;
-      margin-left: 0;
-    }
-    #content {
-      display: flex;
-      align-items: center;
-    }
-    ha-svg-icon {
-      padding-left: 2px;
-      margin-right: -2px;
-      color: var(--secondary-text-color);
-    }
-    :host(:not([selected])) ha-svg-icon {
-      display: none;
-    }
-    :host([selected]) paper-item {
-      margin-left: 10px;
-    }
-  </style>
-  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-  <paper-item>
-    <paper-item-body two-line>
-      ${item.name}
-      <span secondary>${item.area}</span>
-    </paper-item-body>
-  </paper-item>`;
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<mwc-list-item
+  twoline
+>
+  <span>${item.name}</span>
+  <span slot="secondary">${item.area}</span>
+</mwc-list-item>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
@@ -335,19 +302,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-input > ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 2px;
-        color: var(--secondary-text-color);
-      }
-      [hidden] {
-        display: none;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/entity/ha-entity-attribute-picker.ts

@@ -1,7 +1,7 @@
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,

src/components/entity/ha-entity-picker.ts

@@ -2,7 +2,7 @@ import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,

src/components/entity/ha-entity-toggle.ts

@@ -12,7 +12,7 @@ import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -39,21 +39,26 @@ export class HaEntityToggle extends LitElement {
       return html` <ha-switch disabled></ha-switch> `;
     }
 
-    if (this.stateObj.attributes.assumed_state) {
+    if (
+      this.stateObj.attributes.assumed_state ||
+      this.stateObj.state === UNKNOWN
+    ) {
       return html`
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} off`}
           .path=${mdiFlashOff}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
-          ?state-active=${!this._isOn}
+          class=${!this._isOn && this.stateObj.state !== UNKNOWN
+            ? "state-active"
+            : ""}
         ></ha-icon-button>
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} on`}
           .path=${mdiFlash}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
-          ?state-active=${this._isOn}
+          class=${this._isOn ? "state-active" : ""}
         ></ha-icon-button>
       `;
     }
@@ -63,7 +68,7 @@ export class HaEntityToggle extends LitElement {
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
-      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
     ></ha-switch>`;
 
@@ -156,10 +161,11 @@ export class HaEntityToggle extends LitElement {
         min-width: 38px;
       }
       ha-icon-button {
+        --mdc-icon-button-size: 40px;
         color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
         transition: color 0.5s;
       }
-      ha-icon-button[state-active] {
+      ha-icon-button.state-active {
         color: var(--ha-icon-button-active-color, var(--primary-color));
       }
       ha-switch {

src/components/entity/ha-statistic-picker.ts

@@ -1,17 +1,8 @@
-import { mdiCheck } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -76,54 +67,24 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
-    // eslint-disable-next-line lit/prefer-static-styles
-  }> = (item) => html`<style>
-      paper-icon-item {
-        padding: 0;
-        margin: -8px;
-      }
-      #content {
-        display: flex;
-        align-items: center;
-      }
-      ha-svg-icon {
-        padding-left: 2px;
-        color: var(--secondary-text-color);
-      }
-      :host(:not([selected])) ha-svg-icon {
-        display: none;
-      }
-      :host([selected]) paper-icon-item {
-        margin-left: 0;
-      }
-      a {
-        color: var(--primary-color);
-      }
-    </style>
-    <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-    <paper-icon-item>
-      ${item.state
-        ? html`<state-badge
-            slot="item-icon"
-            .stateObj=${item.state}
-          ></state-badge>`
-        : ""}
-      <paper-item-body two-line="">
-        ${item.name}
-        <span secondary
-          >${item.id === "" || item.id === "__missing"
-            ? html`<a
-                target="_blank"
-                rel="noopener noreferrer"
-                href=${documentationUrl(this.hass, "/more-info/statistics/")}
-                >${this.hass.localize(
-                  "ui.components.statistic-picker.learn_more"
-                )}</a
-              >`
-            : item.id}</span
-        >
-      </paper-item-body>
-    </paper-icon-item>`;
+  }> = (item) => html` <mwc-list-item graphic="avatar" twoline>
+    ${item.state
+      ? html`<state-badge slot="graphic" .stateObj=${item.state}></state-badge>`
+      : ""}
+    <span>${item.name}</span>
+    <span slot="secondary"
+      >${item.id === "" || item.id === "__missing"
+        ? html`<a
+            target="_blank"
+            rel="noopener noreferrer"
+            href=${documentationUrl(this.hass, "/more-info/statistics/")}
+            >${this.hass.localize(
+              "ui.components.statistic-picker.learn_more"
+            )}</a
+          >`
+        : item.id}</span
+    >
+  </mwc-list-item>`;
 
   private _getStatistics = memoizeOne(
     (
@@ -293,19 +254,6 @@ export class HaStatisticPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-input > ha-icon-button {
-        --mdc-icon-button-size: 24px;
-        padding: 2px;
-        color: var(--secondary-text-color);
-      }
-      [hidden] {
-        display: none;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/entity/ha-statistics-picker.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { PolymerChangedEvent } from "../../polymer-types";
@@ -103,6 +103,18 @@ class HaStatisticsPicker extends LitElement {
 
     this._updateStatistics([...currentEntities, toAdd]);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        width: 200px;
+        display: block;
+      }
+      ha-statistic-picker {
+        width: 100%;
+      }
+    `;
+  }
 }
 
 declare global {

src/components/ha-addon-picker.ts

@@ -1,4 +1,3 @@
-import { mdiCheck } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
@@ -12,39 +11,12 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
 
-// eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
-    paper-item {
-      padding: 0;
-      margin: -10px;
-      margin-left: 0px;
-    }
-    #content {
-      display: flex;
-      align-items: center;
-    }
-    :host([selected]) paper-item {
-      margin-left: 0;
-    }
-    ha-svg-icon {
-      padding-left: 2px;
-      margin-right: -2px;
-      color: var(--secondary-text-color);
-    }
-    :host(:not([selected])) ha-svg-icon {
-      display: none;
-    }
-    :host([selected]) paper-icon-item {
-      margin-left: 0;
-    }
-  </style>
-  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-  <paper-item>
-    <paper-item-body two-line>
-      ${item.name}
-      <span secondary>${item.slug}</span>
-    </paper-item-body>
-  </paper-item>`;
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
+  item
+) => html`<mwc-list-item twoline>
+  <span>${item.name}</span>
+  <span slot="secondary">${item.slug}</span>
+</mwc-list-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {

src/components/ha-area-picker.ts

@@ -3,7 +3,7 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,

src/components/ha-code-editor.ts

@@ -1,8 +1,16 @@
+import type {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from "@codemirror/autocomplete";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
+import { HassEntities } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
+import { HomeAssistant } from "../types";
 
 declare global {
   interface HASSDomEvents {
@@ -24,10 +32,15 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property() public mode = "yaml";
 
+  public hass?: HomeAssistant;
+
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public readOnly = false;
 
+  @property({ type: Boolean, attribute: "autocomplete-entities" })
+  public autocompleteEntities = false;
+
   @property() public error = false;
 
   @state() private _value = "";
@@ -110,43 +123,92 @@ export class HaCodeEditor extends ReactiveElement {
 
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
+    const extensions = [
+      this._loadedCodeMirror.lineNumbers(),
+      this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
+      this._loadedCodeMirror.history(),
+      this._loadedCodeMirror.highlightSelectionMatches(),
+      this._loadedCodeMirror.highlightActiveLine(),
+      this._loadedCodeMirror.drawSelection(),
+      this._loadedCodeMirror.rectangularSelection(),
+      this._loadedCodeMirror.keymap.of([
+        ...this._loadedCodeMirror.defaultKeymap,
+        ...this._loadedCodeMirror.searchKeymap,
+        ...this._loadedCodeMirror.historyKeymap,
+        ...this._loadedCodeMirror.tabKeyBindings,
+        saveKeyBinding,
+      ] as KeyBinding[]),
+      this._loadedCodeMirror.langCompartment.of(this._mode),
+      this._loadedCodeMirror.theme,
+      this._loadedCodeMirror.Prec.fallback(
+        this._loadedCodeMirror.highlightStyle
+      ),
+      this._loadedCodeMirror.readonlyCompartment.of(
+        this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
+      ),
+      this._loadedCodeMirror.EditorView.updateListener.of((update) =>
+        this._onUpdate(update)
+      ),
+    ];
+
+    if (!this.readOnly && this.autocompleteEntities && this.hass) {
+      extensions.push(
+        this._loadedCodeMirror.autocompletion({
+          override: [this._entityCompletions.bind(this)],
+          maxRenderedOptions: 10,
+        })
+      );
+    }
 
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({
         doc: this._value,
-        extensions: [
-          this._loadedCodeMirror.lineNumbers(),
-          this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
-          this._loadedCodeMirror.history(),
-          this._loadedCodeMirror.highlightSelectionMatches(),
-          this._loadedCodeMirror.highlightActiveLine(),
-          this._loadedCodeMirror.drawSelection(),
-          this._loadedCodeMirror.rectangularSelection(),
-          this._loadedCodeMirror.keymap.of([
-            ...this._loadedCodeMirror.defaultKeymap,
-            ...this._loadedCodeMirror.searchKeymap,
-            ...this._loadedCodeMirror.historyKeymap,
-            ...this._loadedCodeMirror.tabKeyBindings,
-            saveKeyBinding,
-          ] as KeyBinding[]),
-          this._loadedCodeMirror.langCompartment.of(this._mode),
-          this._loadedCodeMirror.theme,
-          this._loadedCodeMirror.Prec.fallback(
-            this._loadedCodeMirror.highlightStyle
-          ),
-          this._loadedCodeMirror.readonlyCompartment.of(
-            this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
-          ),
-          this._loadedCodeMirror.EditorView.updateListener.of((update) =>
-            this._onUpdate(update)
-          ),
-        ],
+        extensions,
       }),
       root: this.shadowRoot!,
       parent: this.shadowRoot!,
     });
   }
 
+  private _getStates = memoizeOne((states: HassEntities): Completion[] => {
+    if (!states) {
+      return [];
+    }
+    const options = Object.keys(states).map((key) => ({
+      type: "variable",
+      label: key,
+      detail: states[key].attributes.friendly_name,
+      info: `State: ${states[key].state}`,
+    }));
+
+    return options;
+  });
+
+  private _entityCompletions(
+    context: CompletionContext
+  ): CompletionResult | null | Promise<CompletionResult | null> {
+    const entityWord = context.matchBefore(/[a-z_]{3,}\./);
+
+    if (
+      !entityWord ||
+      (entityWord.from === entityWord.to && !context.explicit)
+    ) {
+      return null;
+    }
+
+    const states = this._getStates(this.hass!.states);
+
+    if (!states || !states.length) {
+      return null;
+    }
+
+    return {
+      from: Number(entityWord.from),
+      options: states,
+      span: /^\w*.\w*$/,
+    };
+  }
+
   private _blockKeyboardShortcuts() {
     this.addEventListener("keydown", (ev) => ev.stopPropagation());
   }
@@ -163,10 +225,9 @@ export class HaCodeEditor extends ReactiveElement {
     fireEvent(this, "value-changed", { value: this._value });
   }
 
-  // Only Lit 2.0 will use this
   static get styles(): CSSResultGroup {
     return css`
-      :host(.error-state) div.cm-wrap .cm-gutters {
+      :host(.error-state) .cm-gutters {
         border-color: var(--error-state-color, red);
       }
     `;

src/components/ha-combo-box.ts

@@ -1,25 +1,59 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-textfield/mwc-textfield";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
+import type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light";
+import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
-// eslint-disable-next-line lit/prefer-static-styles
-const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
-    paper-item {
-      margin: -5px -10px;
+registerStyles(
+  "vaadin-combo-box-item",
+  css`
+    :host {
       padding: 0;
     }
-  </style>
-  <paper-item>${item}</paper-item>`;
+    :host([focused]:not([disabled])) {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+    :host([selected]:not([disabled])) {
+      background-color: transparent;
+      color: var(--mdc-theme-primary);
+      --mdc-ripple-color: var(--mdc-theme-primary);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
+    }
+    :host([selected]:not([disabled])):before {
+      background-color: var(--mdc-theme-primary);
+      opacity: 0.12;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    :host([selected][focused]:not([disabled])):before {
+      opacity: 0.24;
+    }
+    :host(:hover:not([disabled])) {
+      background-color: transparent;
+    }
+    [part="content"] {
+      width: 100%;
+    }
+    [part="checkmark"] {
+      display: none;
+    }
+  `
+);
+
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) =>
+  html`<mwc-list-item>${item}</mwc-list-item>`;
 
 @customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
@@ -46,24 +80,25 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @state() private _opened?: boolean;
+  @property({ type: Boolean, reflect: true, attribute: "opened" })
+  private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
   public open() {
     this.updateComplete.then(() => {
-      (this._comboBox as any)?.open();
+      this._comboBox?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
+      this._comboBox?.inputElement?.focus();
     });
   }
 
   public get selectedItem() {
-    return (this._comboBox as any).selectedItem;
+    return this._comboBox.selectedItem;
   }
 
   protected render(): TemplateResult {
@@ -72,7 +107,7 @@ export class HaComboBox extends LitElement {
         .itemValuePath=${this.itemValuePath}
         .itemIdPath=${this.itemIdPath}
         .itemLabelPath=${this.itemLabelPath}
-        .value=${this.value}
+        .value=${this.value || ""}
         .items=${this.items}
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
@@ -81,8 +116,9 @@ export class HaComboBox extends LitElement {
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
+        attr-for-value="value"
       >
-        <paper-input
+        <mwc-textfield
           .label=${this.label}
           .disabled=${this.disabled}
           class="input"
@@ -90,26 +126,23 @@ export class HaComboBox extends LitElement {
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
+          .suffix=${html`<div style="width: 28px;"></div>`}
         >
-          ${this.value
-            ? html`
-                <ha-icon-button
-                  .label=${this.hass.localize("ui.components.combo-box.clear")}
-                  .path=${mdiClose}
-                  slot="suffix"
-                  class="clear-button"
-                  @click=${this._clearValue}
-                ></ha-icon-button>
-              `
-            : ""}
-
-          <ha-icon-button
-            .label=${this.hass.localize("ui.components.combo-box.show")}
-            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            slot="suffix"
-            class="toggle-button"
-          ></ha-icon-button>
-        </paper-input>
+        </mwc-textfield>
+        ${this.value
+          ? html`<ha-svg-icon
+              aria-label=${this.hass.localize("ui.components.combo-box.clear")}
+              class="clear-button"
+              .path=${mdiClose}
+              @click=${this._clearValue}
+            ></ha-svg-icon>`
+          : ""}
+        <ha-svg-icon
+          aria-label=${this.hass.localize("ui.components.combo-box.show")}
+          class="toggle-button"
+          .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+          @click=${this._toggleOpen}
+        ></ha-svg-icon>
       </vaadin-combo-box-light>
     `;
   }
@@ -119,8 +152,20 @@ export class HaComboBox extends LitElement {
     fireEvent(this, "value-changed", { value: undefined });
   }
 
+  private _toggleOpen(ev: Event) {
+    if (this._opened) {
+      this._comboBox?.close();
+      ev.stopPropagation();
+    } else {
+      this._comboBox?.inputElement.focus();
+    }
+  }
+
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
+    // delay this so we can handle click event before setting _opened
+    setTimeout(() => {
+      this._opened = ev.detail.value;
+    }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
   }
@@ -141,11 +186,39 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > ha-icon-button {
+      :host {
+        display: block;
+        width: 100%;
+        margin-top: 4px;
+      }
+      vaadin-combo-box-light {
+        position: relative;
+      }
+      mwc-textfield {
+        width: 100%;
+      }
+      mwc-textfield > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);
       }
+      ha-svg-icon {
+        color: var(--input-dropdown-icon-color);
+        position: absolute;
+        cursor: pointer;
+      }
+      .toggle-button {
+        right: 12px;
+        top: -10px;
+      }
+      :host([opened]) .toggle-button {
+        color: var(--primary-color);
+      }
+      .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        right: 36px;
+      }
     `;
   }
 }

src/components/ha-date-input.ts

@@ -1,135 +1,76 @@
 import { mdiCalendar } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { formatDateNumeric } from "../common/datetime/format_date";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
-const i18n = {
-  monthNames: [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ],
-  weekdays: [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ],
-  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  firstDayOfWeek: 0,
-  week: "Week",
-  calendar: "Calendar",
-  clear: "Clear",
-  today: "Today",
-  cancel: "Cancel",
-  formatTitle: (monthName, fullYear) => monthName + " " + fullYear,
-  formatDate: (d: { day: number; month: number; year: number }) =>
-    [
-      ("0000" + String(d.year)).slice(-4),
-      ("0" + String(d.month + 1)).slice(-2),
-      ("0" + String(d.day)).slice(-2),
-    ].join("-"),
-  parseDate: (text: string) => {
-    const parts = text.split("-");
-    const today = new Date();
-    let date;
-    let month = today.getMonth();
-    let year = today.getFullYear();
-    if (parts.length === 3) {
-      year = parseInt(parts[0]);
-      if (parts[0].length < 3 && year >= 0) {
-        year += year < 50 ? 2000 : 1900;
-      }
-      month = parseInt(parts[1]) - 1;
-      date = parseInt(parts[2]);
-    } else if (parts.length === 2) {
-      month = parseInt(parts[0]) - 1;
-      date = parseInt(parts[1]);
-    } else if (parts.length === 1) {
-      date = parseInt(parts[0]);
-    }
+const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
 
-    if (date !== undefined) {
-      return { day: date, month, year };
-    }
-    return undefined;
-  },
+export interface datePickerDialogParams {
+  value?: string;
+  min?: string;
+  max?: string;
+  locale?: string;
+  onChange: (value: string) => void;
+}
+
+const showDatePickerDialog = (
+  element: HTMLElement,
+  dialogParams: datePickerDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-dialog-date-picker",
+    dialogImport: loadDatePickerDialog,
+    dialogParams,
+  });
 };
 @customElement("ha-date-input")
 export class HaDateInput extends LitElement {
+  @property({ attribute: false }) public locale!: HomeAssistant["locale"];
+
   @property() public value?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
   @property() public label?: string;
 
-  @query("vaadin-date-picker-light", true) private _datePicker;
-
-  private _inited = false;
-
-  updated(changedProps: PropertyValues) {
-    if (changedProps.has("value")) {
-      this._datePicker.value = this.value;
-      this._inited = true;
-    }
-  }
-
   render() {
-    return html`<vaadin-date-picker-light
+    return html`<paper-input
+      .label=${this.label}
       .disabled=${this.disabled}
-      @value-changed=${this._valueChanged}
-      attr-for-value="value"
-      .i18n=${i18n}
+      no-label-float
+      @click=${this._openDialog}
+      .value=${this.value
+        ? formatDateNumeric(new Date(this.value), this.locale)
+        : ""}
     >
-      <paper-input
-        .label=${this.label}
-        .disabled=${this.disabled}
-        no-label-float
-      >
-        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
-      </paper-input>
-    </vaadin-date-picker-light>`;
+      <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
+    </paper-input>`;
   }
 
-  private _valueChanged(ev: CustomEvent) {
-    if (
-      !this.value ||
-      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
-    ) {
-      this.value = ev.detail.value;
+  private _openDialog() {
+    if (this.disabled) {
+      return;
+    }
+    showDatePickerDialog(this, {
+      min: "1970-01-01",
+      value: this.value,
+      onChange: (value) => this._valueChanged(value),
+      locale: this.locale.language,
+    });
+  }
+
+  private _valueChanged(value: string) {
+    if (this.value !== value) {
+      this.value = value;
       fireEvent(this, "change");
-      fireEvent(this, "value-changed", { value: ev.detail.value });
+      fireEvent(this, "value-changed", { value });
     }
   }
 
-  private _compareStringDates(a: string, b: string): boolean {
-    const aParts = a.split("-");
-    const bParts = b.split("-");
-    let i = 0;
-    for (const aPart of aParts) {
-      if (Number(aPart) !== Number(bParts[i])) {
-        return false;
-      }
-      i++;
-    }
-    return true;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       paper-input {

src/components/ha-dialog-date-picker.ts

@@ -0,0 +1,106 @@
+import "@material/mwc-button/mwc-button";
+import "app-datepicker";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyleDialog } from "../resources/styles";
+import { datePickerDialogParams } from "./ha-date-input";
+import "./ha-dialog";
+
+@customElement("ha-dialog-date-picker")
+export class HaDialogDatePicker extends LitElement {
+  @property() public value?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public label?: string;
+
+  @state() private _params?: datePickerDialogParams;
+
+  @state() private _value?: string;
+
+  public showDialog(params: datePickerDialogParams): void {
+    this._params = params;
+    this._value = params.value;
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  render() {
+    if (!this._params) {
+      return html``;
+    }
+    return html`<ha-dialog open @closed=${this.closeDialog}>
+      <app-datepicker
+        .value=${this._value}
+        .min=${this._params.min}
+        .max=${this._params.max}
+        .locale=${this._params.locale}
+        @datepicker-value-updated=${this._valueChanged}
+      ></app-datepicker>
+      <mwc-button slot="secondaryAction" @click=${this._setToday}
+        >today</mwc-button
+      >
+      <mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
+        cancel
+      </mwc-button>
+      <mwc-button slot="primaryAction" @click=${this._setValue}>ok</mwc-button>
+    </ha-dialog>`;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    this._value = ev.detail.value;
+  }
+
+  private _setToday() {
+    this._value = new Date().toISOString().split("T")[0];
+  }
+
+  private _setValue() {
+    this._params?.onChange(this._value!);
+    this.closeDialog();
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-dialog {
+        --dialog-content-padding: 0;
+        --justify-action-buttons: space-between;
+      }
+      app-datepicker {
+        --app-datepicker-accent-color: var(--primary-color);
+        --app-datepicker-bg-color: transparent;
+        --app-datepicker-color: var(--primary-text-color);
+        --app-datepicker-disabled-day-color: var(--disabled-text-color);
+        --app-datepicker-focused-day-color: var(--text-primary-color);
+        --app-datepicker-focused-year-bg-color: var(--primary-color);
+        --app-datepicker-selector-color: var(--secondary-text-color);
+        --app-datepicker-separator-color: var(--divider-color);
+        --app-datepicker-weekday-color: var(--secondary-text-color);
+      }
+      app-datepicker::part(calendar-day):focus {
+        outline: none;
+      }
+      @media all and (min-width: 450px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 300px;
+        }
+      }
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        app-datepicker {
+          width: 100%;
+        }
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-dialog-date-picker": HaDialogDatePicker;
+  }
+}

src/components/ha-form/ha-form-integer.ts

@@ -45,7 +45,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         <div>
           ${this.label}
           <div class="flex">
-            ${this.schema.optional
+            ${!this.schema.required
               ? html`
                   <ha-checkbox
                     @change=${this._handleCheckboxChange}
@@ -61,7 +61,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
-              (this.data === undefined && this.schema.optional)}
+              (this.data === undefined && !this.schema.required)}
               @change=${this._valueChanged}
             ></ha-slider>
           </div>
@@ -100,7 +100,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       return this.data;
     }
 
-    if (this.schema.optional) {
+    if (!this.schema.required) {
       return this.schema.valueMin || 0;
     }
 

src/components/ha-form/ha-form-select.ts

@@ -29,7 +29,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    if (!this.schema.optional && this.schema.options!.length < 6) {
+    if (this.schema.required && this.schema.options!.length < 6) {
       return html`
         <div>
           ${this.label}
@@ -59,7 +59,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
         @closed=${stopPropagation}
         @selected=${this._valueChanged}
       >
-        ${this.schema.optional
+        ${!this.schema.required
           ? html`<mwc-list-item value=""></mwc-list-item>`
           : ""}
         ${this.schema.options!.map(

src/components/ha-form/ha-form-string.ts

@@ -89,7 +89,7 @@ export class HaFormString extends LitElement implements HaFormElement {
     if (this.data === value) {
       return;
     }
-    if (value === "" && this.schema.optional) {
+    if (value === "" && !this.schema.required) {
       value = undefined;
     }
     fireEvent(this, "value-changed", {

src/components/ha-form/ha-form.ts

@@ -11,12 +11,16 @@ import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
+import "../ha-selector/ha-selector";
 import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
+import { HomeAssistant } from "../../types";
 
 const getValue = (obj, item) => (obj ? obj[item.name] : null);
 
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
+  @property() public hass!: HomeAssistant;
+
   @property() public data!: HaFormDataContainer;
 
   @property() public schema!: HaFormSchema[];
@@ -62,12 +66,21 @@ export class HaForm extends LitElement implements HaFormElement {
                   </ha-alert>
                 `
               : ""}
-            ${dynamicElement(`ha-form-${item.type}`, {
-              schema: item,
-              data: getValue(this.data, item),
-              label: this._computeLabel(item),
-              disabled: this.disabled,
-            })}
+            ${"selector" in item
+              ? html`<ha-selector
+                  .schema=${item}
+                  .hass=${this.hass}
+                  .selector=${item.selector}
+                  .value=${getValue(this.data, item)}
+                  .label=${this._computeLabel(item)}
+                  .disabled=${this.disabled}
+                ></ha-selector>`
+              : dynamicElement(`ha-form-${item.type}`, {
+                  schema: item,
+                  data: getValue(this.data, item),
+                  label: this._computeLabel(item),
+                  disabled: this.disabled,
+                })}
           `;
         })}
       </div>

src/components/ha-form/types.ts

@@ -1,4 +1,5 @@
 import type { LitElement } from "lit";
+import { Selector } from "../../data/selector";
 import type { HaDurationData } from "../ha-duration-input";
 
 export type HaFormSchema =
@@ -9,14 +10,24 @@ export type HaFormSchema =
   | HaFormBooleanSchema
   | HaFormSelectSchema
   | HaFormMultiSelectSchema
-  | HaFormTimeSchema;
+  | HaFormTimeSchema
+  | HaFormSelector;
 
 export interface HaFormBaseSchema {
   name: string;
+  // This value is applied if no data is submitted for this field
   default?: HaFormData;
   required?: boolean;
-  optional?: boolean;
-  description?: { suffix?: string; suggested_value?: HaFormData };
+  description?: {
+    suffix?: string;
+    // This value will be set initially when form is loaded
+    suggested_value?: HaFormData;
+  };
+}
+
+export interface HaFormSelector extends HaFormBaseSchema {
+  type?: never;
+  selector: Selector;
 }
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {

src/components/ha-icon-picker.ts

@@ -2,7 +2,7 @@ import { mdiCheck, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
+import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";

src/components/ha-selector/ha-selector-addon.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { AddonSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -22,6 +22,12 @@ export class HaAddonSelector extends LitElement {
       allow-custom-entity
     ></ha-addon-picker>`;
   }
+
+  static styles = css`
+    ha-addon-picker {
+      width: 100%;
+    }
+  `;
 }
 
 declare global {

src/components/ha-selector/ha-selector-object.ts

@@ -18,6 +18,7 @@ export class HaObjectSelector extends LitElement {
 
   protected render() {
     return html`<ha-yaml-editor
+      .hass=${this.hass}
       .disabled=${this.disabled}
       .placeholder=${this.placeholder}
       .defaultValue=${this.value}

src/components/ha-service-control.ts

@@ -284,6 +284,7 @@ export class HaServiceControl extends LitElement {
         : ""}
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
+            .hass=${this.hass}
             .label=${this.hass.localize(
               "ui.components.service-control.service_data"
             )}
@@ -479,6 +480,9 @@ export class HaServiceControl extends LitElement {
         display: block;
         margin: var(--service-control-padding, 0 16px);
       }
+      ha-service-picker {
+        padding-top: 16px;
+      }
       ha-yaml-editor {
         padding: 16px 0;
       }

src/components/ha-service-picker.ts

@@ -1,4 +1,3 @@
-import { mdiCheck } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { property, state } from "lit/decorators";
@@ -11,39 +10,12 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-  // eslint-disable-next-line lit/prefer-static-styles
-) => html`<style>
-    paper-item {
-      padding: 0;
-      margin: -10px;
-      margin-left: 0px;
-    }
-    #content {
-      display: flex;
-      align-items: center;
-    }
-    :host([selected]) paper-item {
-      margin-left: 10px;
-    }
-    ha-svg-icon {
-      padding-left: 2px;
-      margin-right: -2px;
-      color: var(--secondary-text-color);
-    }
-    :host(:not([selected])) ha-svg-icon {
-      display: none;
-    }
-    :host([selected]) paper-icon-item {
-      margin-left: 0;
-    }
-  </style>
-  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-  <paper-item>
-    <paper-item-body two-line>
-      ${item.name}
-      <span secondary>${item.name === item.service ? "" : item.service}</span>
-    </paper-item-body>
-  </paper-item>`;
+) => html` <mwc-list-item twoline>
+  <span>${item.name}</span>
+  <span slot="secondary"
+    >${item.name === item.service ? "" : item.service}</span
+  >
+</mwc-list-item>`;
 
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/ha-yaml-editor.ts

@@ -2,6 +2,7 @@ import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import type { HomeAssistant } from "../types";
 import "./ha-code-editor";
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
@@ -18,6 +19,8 @@ const isEmpty = (obj: Record<string, unknown>): boolean => {
 
 @customElement("ha-yaml-editor")
 export class HaYamlEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public value?: any;
 
   @property({ attribute: false }) public yamlSchema: Schema = DEFAULT_SCHEMA;
@@ -56,8 +59,10 @@ export class HaYamlEditor extends LitElement {
     return html`
       ${this.label ? html`<p>${this.label}</p>` : ""}
       <ha-code-editor
+        .hass=${this.hass}
         .value=${this._yaml}
         mode="yaml"
+        autocomplete-entities
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
         dir="ltr"

src/components/media-player/dialog-media-player-browse.ts

@@ -55,7 +55,11 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
-        .heading=${true}
+        .heading=${!this._currentItem
+          ? this.hass.localize(
+              "ui.components.media-browser.media-player-browser"
+            )
+          : this._currentItem.title}
         @closed=${this.closeDialog}
       >
         <ha-header-bar slot="heading">

src/data/config_flow.ts

@@ -13,6 +13,7 @@ export const DISCOVERY_SOURCES = [
   "ssdp",
   "zeroconf",
   "discovery",
+  "integration_discovery",
   "mqtt",
   "hassio",
 ];

src/data/supervisor/supervisor.ts

@@ -82,7 +82,7 @@ async function processEvent(
   event: SupervisorEvent,
   key: string
 ) {
-  if (event.event !== "supervisor-update" || event.update_key !== key) {
+  if (event.event !== "supervisor_update" || event.update_key !== key) {
     return;
   }
 

src/dialogs/config-flow/step-flow-form.ts

@@ -103,12 +103,13 @@ class StepFlowForm extends LitElement {
     const allRequiredInfoFilledIn =
       stepData === undefined
         ? // If no data filled in, just check that any field is required
-          this.step.data_schema.find((field) => !field.optional) === undefined
+          this.step.data_schema.find((field) => field.required) === undefined
         : // If data is filled in, make sure all required fields are
           stepData &&
           this.step.data_schema.every(
             (field) =>
-              field.optional || !["", undefined].includes(stepData![field.name])
+              !field.required ||
+              !["", undefined].includes(stepData![field.name])
           );
 
     if (!allRequiredInfoFilledIn) {

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -23,6 +23,7 @@ class MoreInfoInputDatetime extends LitElement {
           this.stateObj.attributes.has_date
             ? html`
                 <ha-date-input
+                  .locale=${this.hass.locale}
                   .value=${`${this.stateObj.attributes.year}-${this.stateObj.attributes.month}-${this.stateObj.attributes.day}`}
                   .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
                   @value-changed=${this._dateChanged}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -105,7 +105,7 @@ export class MoreInfoDialog extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${name}
         hideActions
         data-domain=${domain}
       >

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -139,7 +139,7 @@ export class QuickBar extends LitElement {
 
     return html`
       <ha-dialog
-        .heading=${true}
+        .heading=${this.hass.localize("ui.dialogs.quick-bar.title")}
         open
         @opened=${this._handleOpened}
         @closed=${this.closeDialog}
@@ -231,9 +231,7 @@ export class QuickBar extends LitElement {
                 })}
               </mwc-list>
             `}
-        ${!this._narrow && this._hint
-          ? html`<div class="hint">${this._hint}</div>`
-          : ""}
+        ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
       </ha-dialog>
     `;
   }
@@ -718,6 +716,12 @@ export class QuickBar extends LitElement {
           }
         }
 
+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          .hint {
+            display: none;
+          }
+        }
+
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;

src/entrypoints/app.ts

@@ -1,11 +1,7 @@
-import {
-  setPassiveTouchGestures,
-  setCancelSyntheticClickEvents,
-} from "@polymer/polymer/lib/utils/settings";
+import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
 import "../layouts/home-assistant";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../util/legacy-support";
 
 setPassiveTouchGestures(true);
-setCancelSyntheticClickEvents(false);

src/entrypoints/authorize.ts

@@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../auth/ha-authorize";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
-setCancelSyntheticClickEvents(false);
-
 /* polyfill for paper-dropdown */
 setTimeout(
   () => import("web-animations-js/web-animations-next-lite.min"),

src/entrypoints/custom-panel.ts

@@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../resources/safari-14-attachshadow-patch";
 
 import { PolymerElement } from "@polymer/polymer";
@@ -16,8 +15,6 @@ import { createCustomPanelElement } from "../util/custom-panel/create-custom-pan
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 
-setCancelSyntheticClickEvents(false);
-
 declare global {
   interface Window {
     loadES5Adapter: () => Promise<unknown>;
@@ -50,7 +47,7 @@ function initialize(
 ) {
   const style = document.createElement("style");
 
-  style.innerHTML = `body { margin:0; }
+  style.innerHTML = `body { margin:0; } 
   @media (prefers-color-scheme: dark) {
     body {
       background-color: #111111;

src/entrypoints/onboarding.ts

@@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../onboarding/ha-onboarding";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
-setCancelSyntheticClickEvents(false);
-
 declare global {
   interface Window {
     stepsPromise: Promise<Response>;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -220,6 +220,7 @@ export default class HaAutomationActionRow extends LitElement {
                   )}
                 </h2>
                 <ha-yaml-editor
+                  .hass=${this.hass}
                   .defaultValue=${this.action}
                   @value-changed=${this._onYamlChange}
                 ></ha-yaml-editor>

src/panels/config/automation/action/types/ha-automation-action-event.ts

@@ -49,6 +49,7 @@ export class HaEventAction extends LitElement implements ActionElement {
         @value-changed=${this._eventChanged}
       ></paper-input>
       <ha-yaml-editor
+        .hass=${this.hass}
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.event.service_data"
         )}

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -80,6 +80,7 @@ export default class HaAutomationConditionEditor extends LitElement {
               )}
             </h2>
             <ha-yaml-editor
+              .hass=${this.hass}
               .defaultValue=${this.condition}
               @value-changed=${this._onYamlChange}
             ></ha-yaml-editor>

src/panels/config/automation/ha-automation-editor.ts

@@ -269,6 +269,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                           `
                         : ``}
                       <ha-yaml-editor
+                        .hass=${this.hass}
                         .defaultValue=${this._preprocessYaml()}
                         @value-changed=${this._yamlChanged}
                       ></ha-yaml-editor>

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -177,6 +177,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                   )}
                 </h2>
                 <ha-yaml-editor
+                  .hass=${this.hass}
                   .defaultValue=${this.trigger}
                   @value-changed=${this._onYamlChange}
                 ></ha-yaml-editor>

src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts

@@ -33,6 +33,7 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
         @value-changed=${this._valueChanged}
       ></paper-input>
       <ha-yaml-editor
+        .hass=${this.hass}
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.event.event_data"
         )}

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -5,6 +5,7 @@ import {
   computeDeviceName,
   DeviceRegistryEntry,
 } from "../../../../data/device_registry";
+import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { loadDeviceRegistryDetailDialog } from "../device-registry-detail/show-dialog-device-registry-detail";
 
@@ -55,10 +56,13 @@ export class HaDeviceCard extends LitElement {
                     "ui.panel.config.integrations.config_entry.via"
                   )}
                   <span class="hub"
-                    >${this._computeDeviceName(
-                      this.devices,
-                      this.device.via_device_id
-                    )}</span
+                    ><a
+                      href="/config/devices/device/${this.device.via_device_id}"
+                      >${this._computeDeviceName(
+                        this.devices,
+                        this.device.via_device_id
+                      )}</a
+                    ></span
                   >
                 </div>
               `
@@ -112,29 +116,32 @@ export class HaDeviceCard extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-      }
-      ha-card {
-        flex: 1 0 100%;
-        min-width: 0;
-      }
-      .device {
-        width: 30%;
-      }
-      .area {
-        color: var(--primary-text-color);
-      }
-      .extra-info {
-        margin-top: 8px;
-        word-wrap: break-word;
-      }
-      .manuf,
-      .model {
-        color: var(--secondary-text-color);
-        word-wrap: break-word;
-      }
-    `;
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          flex: 1 0 100%;
+          min-width: 0;
+        }
+        .device {
+          width: 30%;
+        }
+        .area {
+          color: var(--primary-text-color);
+        }
+        .extra-info {
+          margin-top: 8px;
+          word-wrap: break-word;
+        }
+        .manuf,
+        .model {
+          color: var(--secondary-text-color);
+          word-wrap: break-word;
+        }
+      `,
+    ];
   }
 }

src/panels/config/devices/ha-config-device-page.ts

@@ -39,6 +39,7 @@ import {
   findBatteryEntity,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import { domainToName } from "../../../data/integration";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
 import {
@@ -201,6 +202,10 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+    if (!isComponentLoaded(this.hass, "diagnostics")) {
+      return;
+    }
+
     const device = this._device(this.deviceId, this.devices);
 
     if (!device) {
@@ -208,34 +213,53 @@ export class HaConfigDevicePage extends LitElement {
     }
 
     let links = await Promise.all(
-      this._integrations(device, this.entries)
-        .filter((entry) => entry.state === "loaded")
-        .map(async (entry) => {
-          const info = await fetchDiagnosticHandler(this.hass, entry.domain);
+      this._integrations(device, this.entries).map(async (entry) => {
+        if (entry.state !== "loaded") {
+          return false;
+        }
+        const info = await fetchDiagnosticHandler(this.hass, entry.domain);
 
-          if (!info.handlers.device && !info.handlers.config_entry) {
-            return "";
-          }
-          const link = info.handlers.device
+        if (!info.handlers.device && !info.handlers.config_entry) {
+          return false;
+        }
+        return {
+          link: info.handlers.device
             ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
-            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id);
-          return html`
-            <a href=${link} @click=${this._signUrl}>
-              <mwc-button>
-                ${this.hass.localize(
-                  `ui.panel.config.devices.download_diagnostics`
-                )}
-              </mwc-button>
-            </a>
-          `;
-        })
+            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
+          domain: entry.domain,
+        };
+      })
     );
+
+    links = links.filter(Boolean);
+
     if (this._diagnosticDownloadLinks !== requestId) {
       return;
     }
-    links = links.filter(Boolean);
     if (links.length > 0) {
-      this._diagnosticDownloadLinks = links;
+      this._diagnosticDownloadLinks = (
+        links as { link: string; domain: string }[]
+      ).map(
+        (link) => html`
+          <a href=${link.link} @click=${this._signUrl}>
+            <mwc-button>
+              ${links.length > 1
+                ? this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics_integration`,
+                    {
+                      integration: domainToName(
+                        this.hass.localize,
+                        link.domain
+                      ),
+                    }
+                  )
+                : this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics`
+                  )}
+            </mwc-button>
+          </a>
+        `
+      );
     }
   }
 

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -127,6 +127,9 @@ export class DialogEnergyBatterySettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
+        ha-statistic-picker {
+          width: 100%;
+        }
       `,
     ];
   }

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -1,5 +1,5 @@
 import { mdiDevices } from "@mdi/js";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-dialog";
@@ -109,7 +109,14 @@ export class DialogEnergyDeviceSettings
   }
 
   static get styles(): CSSResultGroup {
-    return haStyleDialog;
+    return [
+      haStyleDialog,
+      css`
+        ha-statistic-picker {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts

@@ -294,6 +294,9 @@ export class DialogEnergyGasSettings
         ha-formfield {
           display: block;
         }
+        ha-statistic-picker {
+          width: 100%;
+        }
         .price-options {
           display: block;
           padding-left: 52px;

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -301,6 +301,9 @@ export class DialogEnergyGridFlowSettings
         ha-formfield {
           display: block;
         }
+        ha-statistic-picker {
+          width: 100%;
+        }
         .price-options {
           display: block;
           padding-left: 52px;

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -248,6 +248,9 @@ export class DialogEnergySolarSettings
         ha-formfield {
           display: block;
         }
+        ha-statistic-picker {
+          width: 100%;
+        }
         .forecast-options {
           padding-left: 32px;
         }

src/panels/config/entities/dialog-entity-editor.ts

@@ -74,7 +74,9 @@ export class DialogEntityEditor extends LitElement {
     return html`
       <ha-dialog
         open
-        .heading=${true}
+        .heading=${stateObj
+          ? computeStateName(stateObj)
+          : entry?.name || entityId}
         hideActions
         @closed=${this.closeDialog}
         @close-dialog=${this.closeDialog}

src/panels/config/info/ha-config-info.ts

@@ -134,7 +134,7 @@ class HaConfigInfo extends LitElement {
               : ""}
           </p>
         </div>
-        <div class="content">
+        <div>
           <system-health-card .hass=${this.hass}></system-health-card>
           <integrations-card
             .hass=${this.hass}
@@ -167,10 +167,6 @@ class HaConfigInfo extends LitElement {
           -moz-user-select: initial;
         }
 
-        .content {
-          direction: ltr;
-        }
-
         .about {
           text-align: center;
           line-height: 2em;

src/panels/config/info/integrations-card.ts

@@ -176,6 +176,7 @@ class IntegrationsCard extends LitElement {
       td.setup {
         text-align: right;
         white-space: nowrap;
+        direction: ltr;
       }
       th {
         text-align: right;

src/panels/config/info/system-health-card.ts

@@ -264,6 +264,10 @@ class SystemHealthCard extends LitElement {
         width: 45%;
       }
 
+      td:last-child {
+        direction: ltr;
+      }
+
       .loading-container {
         display: flex;
         align-items: center;

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -59,6 +59,8 @@ class HaPanelDevMqtt extends LitElement {
               <p>${this.hass.localize("ui.panel.config.mqtt.payload")}</p>
               <ha-code-editor
                 mode="jinja2"
+                autocomplete-entities
+                .hass=${this.hass}
                 .value=${this.payload}
                 @value-changed=${this._handlePayload}
                 dir="ltr"

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts

@@ -44,7 +44,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
       >
         <ha-code-editor
           mode="yaml"
-          readonly
+          readOnly
           .value=${this._signature}
           dir="ltr"
         >

src/panels/config/logs/dialog-system-log-detail.ts

@@ -69,8 +69,18 @@ class DialogSystemLogDetail extends LitElement {
         // Custom components with our official docs should not link to our docs
         !this._manifest.documentation.includes("://www.home-assistant.io"));
 
+    const title = this.hass.localize(
+      "ui.panel.config.logs.details",
+      "level",
+      html`<span class=${item.level.toLowerCase()}
+        >${this.hass.localize(
+          "ui.panel.config.logs.level." + item.level.toLowerCase()
+        )}</span
+      >`
+    );
+
     return html`
-      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${true}>
+      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
         <ha-header-bar slot="heading">
           <ha-icon-button
             slot="navigationIcon"
@@ -78,17 +88,7 @@ class DialogSystemLogDetail extends LitElement {
             .label=${this.hass.localize("ui.common.close")}
             .path=${mdiClose}
           ></ha-icon-button>
-          <span slot="title">
-            ${this.hass.localize(
-              "ui.panel.config.logs.details",
-              "level",
-              html`<span class=${item.level.toLowerCase()}
-                >${this.hass.localize(
-                  "ui.panel.config.logs.level." + item.level.toLowerCase()
-                )}</span
-              >`
-            )}
-          </span>
+          <span slot="title"> ${title} </span>
           <ha-icon-button
             id="copy"
             @click=${this._copyLog}

src/panels/config/logs/error-log-card.ts

@@ -9,6 +9,10 @@ import { HomeAssistant } from "../../../types";
 class ErrorLogCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property() public filter = "";
+
+  @state() private _isLogLoaded = false;
+
   @state() private _errorHTML!: TemplateResult[] | string;
 
   protected render(): TemplateResult {
@@ -43,6 +47,14 @@ class ErrorLogCard extends LitElement {
     }
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("filter") && this._isLogLoaded) {
+      this._refreshErrorLog();
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .error-log-intro {
@@ -55,12 +67,16 @@ class ErrorLogCard extends LitElement {
       }
 
       .error-log {
-        @apply --paper-font-code)
-          clear: both;
+        font-family: var(--code-font-family, monospace);
+        clear: both;
         text-align: left;
         padding-top: 12px;
       }
 
+      .error-log > div:hover {
+        background-color: var(--secondary-background-color);
+      }
+
       .error {
         color: var(--error-color);
       }
@@ -74,24 +90,33 @@ class ErrorLogCard extends LitElement {
   private async _refreshErrorLog(): Promise<void> {
     this._errorHTML = this.hass.localize("ui.panel.config.logs.loading_log");
     const log = await fetchErrorLog(this.hass!);
+    this._isLogLoaded = true;
 
     this._errorHTML = log
-      ? log.split("\n").map((entry) => {
-          if (entry.includes("INFO"))
-            return html`<div class="info">${entry}</div>`;
+      ? log
+          .split("\n")
+          .filter((entry) => {
+            if (this.filter) {
+              return entry.toLowerCase().includes(this.filter.toLowerCase());
+            }
+            return entry;
+          })
+          .map((entry) => {
+            if (entry.includes("INFO"))
+              return html`<div class="info">${entry}</div>`;
 
-          if (entry.includes("WARNING"))
-            return html`<div class="warning">${entry}</div>`;
+            if (entry.includes("WARNING"))
+              return html`<div class="warning">${entry}</div>`;
 
-          if (
-            entry.includes("ERROR") ||
-            entry.includes("FATAL") ||
-            entry.includes("CRITICAL")
-          )
-            return html`<div class="error">${entry}</div>`;
+            if (
+              entry.includes("ERROR") ||
+              entry.includes("FATAL") ||
+              entry.includes("CRITICAL")
+            )
+              return html`<div class="error">${entry}</div>`;
 
-          return html`<div>${entry}</div>`;
-        })
+            return html`<div>${entry}</div>`;
+          })
       : this.hass.localize("ui.panel.config.logs.no_errors");
   }
 }

src/panels/config/logs/ha-config-logs.ts

@@ -1,9 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
+import "../../../common/search/search-input";
+import { extractSearchParam } from "../../../common/url/search-params";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
@@ -20,6 +22,8 @@ export class HaConfigLogs extends LitElement {
 
   @property() public route!: Route;
 
+  @state() private _filter = extractSearchParam("filter") ?? "";
+
   @query("system-log-card", true) private systemLog?: SystemLogCard;
 
   public connectedCallback() {
@@ -29,7 +33,39 @@ export class HaConfigLogs extends LitElement {
     }
   }
 
+  private async _filterChanged(ev) {
+    this._filter = ev.detail.value;
+  }
+
   protected render(): TemplateResult {
+    const search = this.narrow
+      ? html`
+          <div slot="header">
+            <search-input
+              class="header"
+              no-label-float
+              no-underline
+              @value-changed=${this._filterChanged}
+              .hass=${this.hass}
+              .filter=${this._filter}
+              .label=${this.hass.localize("ui.panel.config.logs.search")}
+            ></search-input>
+          </div>
+        `
+      : html`
+          <div class="search">
+            <search-input
+              autofocus
+              no-label-float
+              no-underline
+              @value-changed=${this._filterChanged}
+              .hass=${this.hass}
+              .filter=${this._filter}
+              .label=${this.hass.localize("ui.panel.config.logs.search")}
+            ></search-input>
+          </div>
+        `;
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -38,9 +74,16 @@ export class HaConfigLogs extends LitElement {
         .route=${this.route}
         .tabs=${configSections.general}
       >
+        ${search}
         <div class="content">
-          <system-log-card .hass=${this.hass}></system-log-card>
-          <error-log-card .hass=${this.hass}></error-log-card>
+          <system-log-card
+            .hass=${this.hass}
+            .filter=${this._filter}
+          ></system-log-card>
+          <error-log-card
+            .hass=${this.hass}
+            .filter=${this._filter}
+          ></error-log-card>
         </div>
       </hass-tabs-subpage>
     `;
@@ -56,6 +99,17 @@ export class HaConfigLogs extends LitElement {
           -moz-user-select: initial;
         }
 
+        .search {
+          padding: 0 16px;
+          background: var(--sidebar-background-color);
+          border-bottom: 1px solid var(--divider-color);
+        }
+
+        .search search-input {
+          position: relative;
+          top: 2px;
+        }
+
         .content {
           direction: ltr;
         }

src/panels/config/logs/system-log-card.ts

@@ -2,6 +2,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
@@ -22,6 +23,8 @@ import { formatSystemLogTime } from "./util";
 export class SystemLogCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property() public filter = "";
+
   public loaded = false;
 
   @state() private _items?: LoggedError[];
@@ -31,9 +34,44 @@ export class SystemLogCard extends LitElement {
     this._items = await fetchSystemLog(this.hass!);
   }
 
+  private _timestamp(item: LoggedError): string {
+    return formatSystemLogTime(item.timestamp, this.hass!.locale);
+  }
+
+  private _multipleMessages(item: LoggedError): string {
+    return this.hass.localize(
+      "ui.panel.config.logs.multiple_messages",
+      "time",
+      formatSystemLogTime(item.first_occurred, this.hass!.locale),
+      "counter",
+      item.count
+    );
+  }
+
+  private _getFilteredItems = memoizeOne(
+    (items: LoggedError[], filter: string) =>
+      items.filter((item: LoggedError) => {
+        if (filter) {
+          return (
+            item.message.some((message: string) =>
+              message.toLowerCase().includes(filter)
+            ) ||
+            item.source[0].toLowerCase().includes(filter) ||
+            item.name.toLowerCase().includes(filter) ||
+            this._timestamp(item).toLowerCase().includes(filter) ||
+            this._multipleMessages(item).toLowerCase().includes(filter)
+          );
+        }
+        return item;
+      })
+  );
+
   protected render(): TemplateResult {
-    const integrations = this._items
-      ? this._items.map((item) => getLoggedErrorIntegration(item))
+    const filteredItems = this._items
+      ? this._getFilteredItems(this._items, this.filter.toLowerCase())
+      : [];
+    const integrations = filteredItems.length
+      ? filteredItems.map((item) => getLoggedErrorIntegration(item))
       : [];
     return html`
       <div class="system-log-intro">
@@ -51,17 +89,21 @@ export class SystemLogCard extends LitElement {
                         ${this.hass.localize("ui.panel.config.logs.no_issues")}
                       </div>
                     `
-                  : this._items.map(
+                  : filteredItems.length === 0 && this.filter
+                  ? html`<div class="card-content">
+                      ${this.hass.localize(
+                        "ui.panel.config.logs.no_issues_search",
+                        "term",
+                        this.filter
+                      )}
+                    </div>`
+                  : filteredItems.map(
                       (item, idx) => html`
                         <paper-item @click=${this._openLog} .logItem=${item}>
                           <paper-item-body two-line>
                             <div class="row">${item.message[0]}</div>
                             <div secondary>
-                              ${formatSystemLogTime(
-                                item.timestamp,
-                                this.hass!.locale
-                              )}
-                              –
+                              ${this._timestamp(item)} –
                               ${html`(<span class=${item.level.toLowerCase()}
                                   >${this.hass.localize(
                                     "ui.panel.config.logs.level." +
@@ -81,19 +123,7 @@ export class SystemLogCard extends LitElement {
                                   }`
                                 : item.source[0]}
                               ${item.count > 1
-                                ? html`
-                                    -
-                                    ${this.hass.localize(
-                                      "ui.panel.config.logs.multiple_messages",
-                                      "time",
-                                      formatSystemLogTime(
-                                        item.first_occurred,
-                                        this.hass!.locale
-                                      ),
-                                      "counter",
-                                      item.count
-                                    )}
-                                  `
+                                ? html` - ${this._multipleMessages(item)} `
                                 : html``}
                             </div>
                           </paper-item-body>

src/panels/config/script/ha-script-editor.ts

@@ -398,6 +398,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                     `
                   : ``}
                 <ha-yaml-editor
+                  .hass=${this.hass}
                   .defaultValue=${this._preprocessYaml()}
                   @value-changed=${this._yamlChanged}
                 ></ha-yaml-editor>

src/panels/developer-tools/service/developer-tools-service.ts

@@ -100,6 +100,7 @@ class HaPanelDevService extends LitElement {
                 @value-changed=${this._serviceChanged}
               ></ha-service-picker>
               <ha-yaml-editor
+                .hass=${this.hass}
                 .defaultValue=${this._serviceData}
                 @value-changed=${this._yamlChanged}
               ></ha-yaml-editor>`

src/panels/developer-tools/template/developer-tools-template.ts

@@ -128,9 +128,11 @@ class HaPanelDevTemplate extends LitElement {
           </p>
           <ha-code-editor
             mode="jinja2"
+            .hass=${this.hass}
             .value=${this._template}
             .error=${this._error}
             autofocus
+            autocomplete-entities
             @value-changed=${this._templateChanged}
             dir="ltr"
           ></ha-code-editor>

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -538,7 +538,11 @@ export class HuiEnergySourcesTableCard
               ${types.gas
                 ? html`<tr class="mdc-data-table__row total">
                     <td class="mdc-data-table__cell"></td>
-                    <th class="mdc-data-table__cell" scope="row">Gas total</th>
+                    <th class="mdc-data-table__cell" scope="row">
+                      ${this.hass.localize(
+                        "ui.panel.lovelace.cards.energy.energy_sources_table.gas_total"
+                      )}
+                    </th>
                     <td
                       class="mdc-data-table__cell mdc-data-table__cell--numeric"
                     >

src/panels/lovelace/components/hui-image.ts

@@ -106,6 +106,9 @@ export class HuiImage extends LitElement {
       } else if (!this.hass!.connected) {
         this._stopUpdateCameraInterval();
         this._stopIntersectionObserver();
+        this._loadState = LoadState.Loading;
+        this._cameraImageSrc = undefined;
+        this._loadedImageSrc = undefined;
       }
     }
     if (changedProps.has("_imageVisible")) {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -65,28 +65,26 @@ export class HuiCreateDialogCard
       return html``;
     }
 
+    const title = this._viewConfig.title
+      ? this.hass!.localize(
+          "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
+          "name",
+          `"${this._viewConfig.title}"`
+        )
+      : this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card");
+
     return html`
       <ha-dialog
         open
         scrimClickAction
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
-        .heading=${true}
+        .heading=${title}
         class=${classMap({ table: this._currTabIndex === 1 })}
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title">
-              ${this._viewConfig.title
-                ? this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
-                    "name",
-                    `"${this._viewConfig.title}"`
-                  )
-                : this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_card.pick_card"
-                  )}
-            </span>
+            <span slot="title"> ${title} </span>
           </ha-header-bar>
           <mwc-tab-bar
             .activeIndex=${this._currTabIndex}

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -176,7 +176,7 @@ export class HuiDialogEditCard
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
         @opened=${this._opened}
-        .heading=${true}
+        .heading=${heading}
       >
         <div slot="heading">
           <ha-header-bar>

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -85,6 +85,7 @@ export class HuiDialogSuggestCard extends LitElement {
             ? html`
                 <div class="editor">
                   <ha-yaml-editor
+                    .hass=${this.hass}
                     .defaultValue=${this._cardConfig}
                   ></ha-yaml-editor>
                 </div>

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -1,5 +1,5 @@
 import "@polymer/paper-input/paper-input";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   array,
@@ -284,7 +284,14 @@ export class HuiStatisticsGraphCardEditor
   }
 
   static get styles(): CSSResultGroup {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        ha-statistics-picker {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -113,6 +113,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
                   )}
                 </p>
                 <ha-yaml-editor
+                  .hass=${this.hass}
                   .defaultValue=${this._params!.lovelace.config}
                 ></ha-yaml-editor>
               `}

src/panels/lovelace/editor/hui-element-editor.ts

@@ -197,6 +197,8 @@ export abstract class HuiElementEditor<T> extends LitElement {
                 <ha-code-editor
                   mode="yaml"
                   autofocus
+                  autocomplete-entities
+                  .hass=${this.hass}
                   .value=${this.yaml}
                   .error=${Boolean(this._errors)}
                   @value-changed=${this._handleYAMLChanged}

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -173,7 +173,7 @@ export class HuiDialogEditView extends LitElement {
         scrimClickAction
         escapeKeyAction
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._viewConfigTitle}
       >
         <div slot="heading">
           <h2>${this._viewConfigTitle}</h2>

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -54,6 +54,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         ${stateObj.attributes.has_date
           ? html`
               <ha-date-input
+                .locale=${this.hass.locale}
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}
                 @value-changed=${this._dateChanged}

src/panels/lovelace/hui-editor.ts

@@ -91,6 +91,7 @@ class LovelaceFullConfigEditor extends LitElement {
           <ha-code-editor
             mode="yaml"
             autofocus
+            autocomplete-entities
             .hass=${this.hass}
             @value-changed=${this._yamlChanged}
             @editor-save=${this._handleSave}

src/resources/codemirror.ts

@@ -13,6 +13,7 @@ export { history, historyKeymap } from "@codemirror/history";
 export { rectangularSelection } from "@codemirror/rectangular-selection";
 export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 export { EditorState, Prec } from "@codemirror/state";
+export { autocompletion } from "@codemirror/autocomplete";
 export {
   drawSelection,
   EditorView,
@@ -47,7 +48,7 @@ export const theme = EditorView.theme({
     maxHeight: "var(--code-mirror-max-height, unset)",
   },
 
-  "&.cm-focused": { outline: "none" },
+  "&.cm-editor.cm-focused": { outline: "none" },
 
   "&.cm-focused .cm-cursor": {
     borderLeftColor: "var(--secondary-text-color)",
@@ -109,6 +110,47 @@ export const theme = EditorView.theme({
     },
   },
 
+  ".cm-tooltip": {
+    color: "var(--primary-text-color)",
+    backgroundColor:
+      "var(--code-editor-background-color, var(--card-background-color))",
+    border: "1px solid var(--divider-color)",
+    borderRadius: "var(--mdc-shape-medium, 4px)",
+    boxShadow:
+      "0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)",
+  },
+
+  "& .cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+    padding: "4px 8px",
+  },
+
+  "& .cm-tooltip-autocomplete ul li[aria-selected]": {
+    background: "var(--primary-color)",
+    color: "var(--text-primary-color)",
+  },
+
+  ".cm-completionIcon": {
+    display: "none",
+  },
+
+  ".cm-completionDetail": {
+    fontFamily: "Roboto",
+    color: "var(--secondary-text-color)",
+  },
+
+  "li[aria-selected] .cm-completionDetail": {
+    color: "var(--text-primary-color)",
+  },
+
+  "& .cm-completionInfo.cm-completionInfo-right": {
+    left: "calc(100% + 4px)",
+  },
+
+  "& .cm-tooltip.cm-completionInfo": {
+    padding: "4px 8px",
+    marginTop: "-5px",
+  },
+
   ".cm-selectionMatch": {
     backgroundColor: "rgba(var(--rgb-primary-color), 0.1)",
   },
@@ -131,7 +173,7 @@ export const theme = EditorView.theme({
       "1px solid var(--paper-input-container-color, var(--secondary-text-color))",
     paddingRight: "1px",
   },
-  "&.cm-focused cm-gutters": {
+  "&.cm-focused .cm-gutters": {
     borderRight:
       "2px solid var(--paper-input-container-focus-color, var(--primary-color))",
     paddingRight: "0",

src/translations/en.json

@@ -1344,6 +1344,8 @@
           "caption": "Logs",
           "description": "View the Home Assistant logs",
           "details": "Log Details ({level})",
+          "search": "Search logs",
+          "no_issues_search": "No issues found for search term ''{term}''",
           "load_full_log": "Load Full Home Assistant Log",
           "loading_log": "Loading error log…",
           "no_errors": "No errors have been reported",
@@ -2229,6 +2231,7 @@
           "open_configuration_url_device": "Visit device",
           "open_configuration_url_service": "Visit service",
           "download_diagnostics": "Download diagnostics",
+          "download_diagnostics_integration": "Download {integration} diagnostics",
           "type": {
             "device_heading": "Device",
             "device": "device",
@@ -3142,6 +3145,7 @@
             },
             "energy_sources_table": {
               "grid_total": "Grid total",
+              "gas_total": "Gas total",
               "source": "Source",
               "energy": "Energy",
               "cost": "Cost",

yarn.lock

@@ -1315,52 +1315,66 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:^0.19.5":
-  version: 0.19.5
-  resolution: "@codemirror/commands@npm:0.19.5"
+"@codemirror/autocomplete@npm:^0.19.12":
+  version: 0.19.12
+  resolution: "@codemirror/autocomplete@npm:0.19.12"
+  dependencies:
+    "@codemirror/language": ^0.19.0
+    "@codemirror/state": ^0.19.4
+    "@codemirror/text": ^0.19.2
+    "@codemirror/tooltip": ^0.19.12
+    "@codemirror/view": ^0.19.0
+    "@lezer/common": ^0.15.0
+  checksum: f57dfe7b911e9dd928a589d72d487c84f74281e3a899120f14e857a48f4c9af109ae1df9f7e0e5959c77aedcfeafa74a428c832d1cd8cb0adde2d3e2daf6fec8
+  languageName: node
+  linkType: hard
+
+"@codemirror/commands@npm:^0.19.8":
+  version: 0.19.8
+  resolution: "@codemirror/commands@npm:0.19.8"
   dependencies:
     "@codemirror/language": ^0.19.0
     "@codemirror/matchbrackets": ^0.19.0
     "@codemirror/state": ^0.19.2
-    "@codemirror/text": ^0.19.0
-    "@codemirror/view": ^0.19.0
+    "@codemirror/text": ^0.19.6
+    "@codemirror/view": ^0.19.22
     "@lezer/common": ^0.15.0
-  checksum: 6f826cd20620e2540ae0385e3a8bcf19aac4e2b56b9f5a527581c92926bc311f91c6cbfb33ac17006f149d56aa60bf300e45b730f446ff47c1f7b297dc7f8137
+  checksum: 296f7564e71c07680da0ade9b73db67d68dd845ede22d2ba9a2a83f8b3a5429953ccd22a11d96cf2543425d416a15d1f026fb5c74a2e80522cf1779cc7cd13ff
   languageName: node
   linkType: hard
 
-"@codemirror/gutter@npm:^0.19.4":
-  version: 0.19.4
-  resolution: "@codemirror/gutter@npm:0.19.4"
+"@codemirror/gutter@npm:^0.19.9":
+  version: 0.19.9
+  resolution: "@codemirror/gutter@npm:0.19.9"
   dependencies:
     "@codemirror/rangeset": ^0.19.0
     "@codemirror/state": ^0.19.0
-    "@codemirror/view": ^0.19.0
-  checksum: 5e3ed8c8aad85411651dd752ad5e634c918e47b271dcf74206181bee27acd6cc01c495a921abcdd614076e535c66387973104a7bd34c67d0655c4c4d1b951cc4
+    "@codemirror/view": ^0.19.23
+  checksum: 948e4bdeddfdd2f824412aa8a2cc43915444e948c310ee113faca4a988e98b6b02bea72f8849481adf82a5021b00d6a8ee2bdf0b105864de0e8aa417b41a9ed1
   languageName: node
   linkType: hard
 
-"@codemirror/highlight@npm:^0.19.0, @codemirror/highlight@npm:^0.19.6":
-  version: 0.19.6
-  resolution: "@codemirror/highlight@npm:0.19.6"
+"@codemirror/highlight@npm:^0.19.0, @codemirror/highlight@npm:^0.19.7":
+  version: 0.19.7
+  resolution: "@codemirror/highlight@npm:0.19.7"
   dependencies:
     "@codemirror/language": ^0.19.0
     "@codemirror/rangeset": ^0.19.0
-    "@codemirror/state": ^0.19.0
+    "@codemirror/state": ^0.19.3
     "@codemirror/view": ^0.19.0
     "@lezer/common": ^0.15.0
     style-mod: ^4.0.0
-  checksum: 833ffe5aea7269ab782649059a6e41c68f7be3f5a49c3824dcf9a22b1efdc33ac081239fbc79fbdbdc9063800f155f16b435e31441598a9748f31c20a6a301b4
+  checksum: 8be9d2d900501b483aa108fbd58e4cc628d01b6b5150e4f0242c1e779fd20b930f69c2da8d2eb5468712e01135808f900e44500c76fb0a838538c69c9aa31a96
   languageName: node
   linkType: hard
 
-"@codemirror/history@npm:^0.19.0":
-  version: 0.19.0
-  resolution: "@codemirror/history@npm:0.19.0"
+"@codemirror/history@npm:^0.19.2":
+  version: 0.19.2
+  resolution: "@codemirror/history@npm:0.19.2"
   dependencies:
-    "@codemirror/state": ^0.19.0
+    "@codemirror/state": ^0.19.2
     "@codemirror/view": ^0.19.0
-  checksum: 768b62110065eaccffca9baf83b1049a0a7a69520caf2ddf75d52eba7fed87fa666e0e2cd34cce432723b189ca03aac4aadc6afc29075b4e1195f29d6aec298f
+  checksum: c9d794289ea0b493b11a24df487a8de14afb7f8aef502bfaa9a8dda48e01c172c769ae76209743e4cb2d5937df0e64bea1295f07722b571a858d7417b21cc4f8
   languageName: node
   linkType: hard
 
@@ -1408,12 +1422,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/rangeset@npm:^0.19.0":
-  version: 0.19.1
-  resolution: "@codemirror/rangeset@npm:0.19.1"
+"@codemirror/rangeset@npm:^0.19.0, @codemirror/rangeset@npm:^0.19.5":
+  version: 0.19.6
+  resolution: "@codemirror/rangeset@npm:0.19.6"
   dependencies:
     "@codemirror/state": ^0.19.0
-  checksum: 6337b1d3b20e6a13bf67eea9d6c39f36a280598949ac138b465d32fe6d56c12d029105ce1fe530540379fc7c0437b548c0caaa18be01b34731228ec6cba228fa
+  checksum: f7b9ff54ac514a5c67dea1689c7f227906b46643007da76e93045ea163bd863c823a35ded4d33ba8ab1d085cb562c67134b2bf9165ffc14a9f44fbf3d85afa43
   languageName: node
   linkType: hard
 
@@ -1428,32 +1442,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/search@npm:^0.19.2":
-  version: 0.19.2
-  resolution: "@codemirror/search@npm:0.19.2"
+"@codemirror/search@npm:^0.19.6":
+  version: 0.19.6
+  resolution: "@codemirror/search@npm:0.19.6"
   dependencies:
     "@codemirror/panel": ^0.19.0
     "@codemirror/rangeset": ^0.19.0
-    "@codemirror/state": ^0.19.2
+    "@codemirror/state": ^0.19.3
     "@codemirror/text": ^0.19.0
-    "@codemirror/view": ^0.19.0
+    "@codemirror/view": ^0.19.34
     crelt: ^1.0.5
-  checksum: 67555a427fb7a9cb35266ff629f9cec0e3b5654f6813957b452e09504349ea2e021d8bb88bf6adef6908c95c7a3e850148fe0130f044486fb1ed527793592865
+  checksum: 1313b389b1f7b0282ab988d338fcadbd9025765d2e85d7de90dec43477241b1f31b4ab118506c2ff1821086256f3c50a570baa4a1abdfd1909c79d0f34f3776b
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^0.19.0, @codemirror/state@npm:^0.19.2, @codemirror/state@npm:^0.19.3, @codemirror/state@npm:^0.19.4":
-  version: 0.19.4
-  resolution: "@codemirror/state@npm:0.19.4"
+"@codemirror/state@npm:^0.19.0, @codemirror/state@npm:^0.19.2, @codemirror/state@npm:^0.19.3, @codemirror/state@npm:^0.19.4, @codemirror/state@npm:^0.19.6":
+  version: 0.19.6
+  resolution: "@codemirror/state@npm:0.19.6"
   dependencies:
     "@codemirror/text": ^0.19.0
-  checksum: 2babd90a62c5f65dd4aaf7955c9c52fae4a46ad75c50a540eb95f2f31b6648873ea73c84d6c0a676d4eab335a4bce511a75fce656144758d04ca62b9a2b644c4
+  checksum: 65bee46d76c0b55b10ed4818cbb77267a6c75dff3c8cc04e83056a79a1d36e79d7b8bf750d4695238ac28fe792d6329939fd725839f8314eee34146941cae344
   languageName: node
   linkType: hard
 
-"@codemirror/stream-parser@npm:^0.19.0, @codemirror/stream-parser@npm:^0.19.2":
-  version: 0.19.2
-  resolution: "@codemirror/stream-parser@npm:0.19.2"
+"@codemirror/stream-parser@npm:^0.19.0, @codemirror/stream-parser@npm:^0.19.5":
+  version: 0.19.5
+  resolution: "@codemirror/stream-parser@npm:0.19.5"
   dependencies:
     "@codemirror/highlight": ^0.19.0
     "@codemirror/language": ^0.19.0
@@ -1461,27 +1475,37 @@ __metadata:
     "@codemirror/text": ^0.19.0
     "@lezer/common": ^0.15.0
     "@lezer/lr": ^0.15.0
-  checksum: dc51e52c2f17198009d6faac3d49679c46785ffea0a854ec0bb3e3d3143be726888cdee207e8c4bd35edee86c6fb226c06862ce6a67d40649cd952174086a2a0
+  checksum: 3a1edef98def985e31f9d1be3669bebc7bb14c41d0e69bd23e57868b67c1f473b7713cba1c45638e4453faf99e84888df2d4a3ebb183ea1db9795a367fde93bc
   languageName: node
   linkType: hard
 
-"@codemirror/text@npm:^0.19.0, @codemirror/text@npm:^0.19.4, @codemirror/text@npm:^0.19.5":
-  version: 0.19.5
-  resolution: "@codemirror/text@npm:0.19.5"
-  checksum: e8ff270e705fe7f9adb3c479845569f6bfb3d8033b70cb1da530f37d9088160713b7cda2b60106fa03df5dd82cd8bcde45662450dd42854006303101a0296892
+"@codemirror/text@npm:^0.19.0, @codemirror/text@npm:^0.19.2, @codemirror/text@npm:^0.19.4, @codemirror/text@npm:^0.19.6":
+  version: 0.19.6
+  resolution: "@codemirror/text@npm:0.19.6"
+  checksum: 685e46c1f0114a216081b7a070460e1b0db9c51b0a2b361e9ed90e5ea2ed89d86a7a834b76f7c63b27fd192809d9414e7a15e0d186bd15cdb5d4f85639d434f0
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^0.19.0, @codemirror/view@npm:^0.19.15":
-  version: 0.19.15
-  resolution: "@codemirror/view@npm:0.19.15"
+"@codemirror/tooltip@npm:^0.19.12":
+  version: 0.19.13
+  resolution: "@codemirror/tooltip@npm:0.19.13"
   dependencies:
-    "@codemirror/rangeset": ^0.19.0
+    "@codemirror/state": ^0.19.0
+    "@codemirror/view": ^0.19.0
+  checksum: 00e0554510aa6545efb201ce9a7925d13122c78455429ec26c220ff6c9de480728e16ad3bb7e451ceee1c1e1968e2c7168c38f7ffb64b5e096b4a504fe135494
+  languageName: node
+  linkType: hard
+
+"@codemirror/view@npm:^0.19.0, @codemirror/view@npm:^0.19.22, @codemirror/view@npm:^0.19.23, @codemirror/view@npm:^0.19.34, @codemirror/view@npm:^0.19.40":
+  version: 0.19.40
+  resolution: "@codemirror/view@npm:0.19.40"
+  dependencies:
+    "@codemirror/rangeset": ^0.19.5
     "@codemirror/state": ^0.19.3
     "@codemirror/text": ^0.19.0
     style-mod: ^4.0.0
     w3c-keyname: ^2.2.4
-  checksum: 7864fc4b5ba6d490a4b1b3416a6ef93108a70cc28a6261bbf34c484358d64d739c80c723aa3d0c8344ccb437aeea39020f7e5a6b10ae4438ed8d12df20a7e568
+  checksum: bf3356a15a2bd24bdea7097483f055b5bef9ae20508639bb37d0bc33439824f093d348736d0e0da5b3e076f2fc6662437d9b5795e0668325bd6329f3f0bbd50f
   languageName: node
   linkType: hard
 
@@ -2467,7 +2491,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/mwc-list@npm:0.25.3, @material/mwc-list@npm:^0.25.3":
+"@material/mwc-list@npm:^0.25.3":
   version: 0.25.3
   resolution: "@material/mwc-list@npm:0.25.3"
   dependencies:
@@ -3035,6 +3059,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@open-wc/dedupe-mixin@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@open-wc/dedupe-mixin@npm:1.3.0"
+  checksum: 6c957d705a0ee96c46282b95267eab0365265e90109b2da95b51c5384b730c4823fb426f99a0cc10465826250bd6466199af80ad7257a4aacdd9bcb997b4cab3
+  languageName: node
+  linkType: hard
+
 "@open-wc/dev-server-hmr@npm:^0.0.2":
   version: 0.0.2
   resolution: "@open-wc/dev-server-hmr@npm:0.0.2"
@@ -3070,7 +3101,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-a11y-announcer@npm:^3.0.0, @polymer/iron-a11y-announcer@npm:^3.0.0-pre.26":
+"@polymer/iron-a11y-announcer@npm:^3.0.0-pre.26":
   version: 3.0.2
   resolution: "@polymer/iron-a11y-announcer@npm:3.0.2"
   dependencies:
@@ -3079,7 +3110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-a11y-keys-behavior@npm:^3.0.0, @polymer/iron-a11y-keys-behavior@npm:^3.0.0-pre.26":
+"@polymer/iron-a11y-keys-behavior@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-a11y-keys-behavior@npm:3.0.1"
   dependencies:
@@ -3192,19 +3223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-list@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "@polymer/iron-list@npm:3.0.2"
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior": ^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: 6f3f9db546120776b4efedc3986c4399a4a28d3951cc6a1d5920e1d9b9eab26c6a92e2194dc4bdbb4dd148c727ac8aa20c7323a576a46600e6cd15bb0ad5ccce
-  languageName: node
-  linkType: hard
-
-"@polymer/iron-media-query@npm:^3.0.0, @polymer/iron-media-query@npm:^3.0.0-pre.26":
+"@polymer/iron-media-query@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-media-query@npm:3.0.1"
   dependencies:
@@ -3508,6 +3527,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reallyland/esm@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@reallyland/esm@npm:0.0.1"
+  checksum: 08ba000c1c6970a15f06649b33861e775bfd0aef41b76e4d58430580ddf1fbc35a00637fbd14a8ecdfa06069d96bc29331b60b1aaeb77b233de8463f4aa4c885
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-babel@npm:^5.2.0, @rollup/plugin-babel@npm:^5.2.1":
   version: 5.3.0
   resolution: "@rollup/plugin-babel@npm:5.3.0"
@@ -3960,6 +3986,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4.17.4":
+  version: 4.17.5
+  resolution: "@types/lodash-es@npm:4.17.5"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 8910f646310aa008bb45071619fe85abf917bbc2c7cc0af883a971de261723247695a58dd966bfa9defd946cef79811d8b075eb6f0af12343080ab0ae6614e12
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.178
+  resolution: "@types/lodash@npm:4.14.178"
+  checksum: a69a04a60bfc5257c3130a554b4efa0c383f0141b7b3db8ab7cf07ad2a46ea085fce66d0242da41da7e5647b133d5dfb2c15add9cbed8d7fef955e4a1e5b3128
+  languageName: node
+  linkType: hard
+
 "@types/marked@npm:^2":
   version: 2.0.5
   resolution: "@types/marked@npm:2.0.5"
@@ -4016,6 +4058,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse5@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "@types/parse5@npm:6.0.3"
+  checksum: ddb59ee4144af5dfcc508a8dcf32f37879d11e12559561e65788756b95b33e6f03ea027d88e1f5408f9b7bfb656bf630ace31a2169edf44151daaf8dd58df1b7
+  languageName: node
+  linkType: hard
+
+"@types/prismjs@npm:^1.16.5":
+  version: 1.26.0
+  resolution: "@types/prismjs@npm:1.26.0"
+  checksum: cd5e7a6214c1f4213ec512a5fcf6d8fe37a56b813fc57ac95b5ff5ee074742bfdbd2f2730d9fd985205bf4586728e09baa97023f739e5aa1c9735a7c1ecbd11a
+  languageName: node
+  linkType: hard
+
 "@types/qrcode@npm:^1.4.2":
   version: 1.4.2
   resolution: "@types/qrcode@npm:1.4.2"
@@ -4211,67 +4267,87 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-button@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-button@npm:21.0.2"
+"@vaadin/combo-box@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/combo-box@npm:22.0.4"
   dependencies:
-    "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^21.0.2
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: d95a682edc68a2cce6a08272e9cb0340517484ec39b3ced368390b6a171fb8f6ae19308d793af6947dc2525bf70f62c766ad7a50ed82eceff0699171b3b58768
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-combo-box@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-combo-box@npm:21.0.2"
-  dependencies:
-    "@polymer/iron-a11y-announcer": ^3.0.0
-    "@polymer/iron-list": ^3.0.0
+    "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/iron-resizable-behavior": ^3.0.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^21.0.2
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-item": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-overlay": ^21.0.2
-    "@vaadin/vaadin-text-field": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: 3c12f3c01d5c9b04efa011c57cee7ac3ec7d7f47d2d59a9ce71537f3a4f12177bcf4e049e03403c1f6693ef9a4717095dd7eb8435a83f4376bcf255a56a1aaa7
+    "@vaadin/component-base": ^22.0.4
+    "@vaadin/field-base": ^22.0.4
+    "@vaadin/input-container": ^22.0.4
+    "@vaadin/item": ^22.0.4
+    "@vaadin/vaadin-lumo-styles": ^22.0.4
+    "@vaadin/vaadin-material-styles": ^22.0.4
+    "@vaadin/vaadin-overlay": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: a3cde710d1187bba8e9e7eeb7f6397e6e1158befa3412c3aa684b3b45a1425cdee28d408d5e4dc4f586e1f6881db8850fc51c38f4658c4eb65c51a26a9623c56
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-control-state-mixin@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-control-state-mixin@npm:21.0.2"
+"@vaadin/component-base@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/component-base@npm:22.0.4"
+  dependencies:
+    "@open-wc/dedupe-mixin": ^1.3.0
+    "@polymer/polymer": ^3.0.0
+    "@vaadin/vaadin-development-mode-detector": ^2.0.0
+    "@vaadin/vaadin-usage-statistics": ^2.1.0
+    lit: ^2.0.0
+  checksum: d18e7cebdd2928e33641ee035927540239e8a65d23521aca2e35d9992a44060d951e877af09088de0ffa88daa11f86a02b86a087cb29b51d9ada574009159509
+  languageName: node
+  linkType: hard
+
+"@vaadin/field-base@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/field-base@npm:22.0.4"
+  dependencies:
+    "@open-wc/dedupe-mixin": ^1.3.0
+    "@polymer/polymer": ^3.0.0
+    "@vaadin/component-base": ^22.0.4
+    lit: ^2.0.0
+  checksum: 4ca54ea3efd1bad2cea6ada97484e24f77f7ebb2ab5da7de5b9b7949d624b049d357c7f6f69206f1f10023b1711dc7b8bde9f6dfad774578efec00e1907c4763
+  languageName: node
+  linkType: hard
+
+"@vaadin/icon@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/icon@npm:22.0.4"
   dependencies:
     "@polymer/polymer": ^3.0.0
-  checksum: a6ed433dc8750afdff410c9046637f12ebbcd79f46c8a9d294ab4d3c18c1dd1c9b465b83c63671a804e10319123375f1e3ee55dfd5dd2b60f44f8593af7e2ee6
+    "@vaadin/component-base": ^22.0.4
+    "@vaadin/vaadin-lumo-styles": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+    lit: ^2.0.0
+  checksum: 65e5195a8eb6f8ce24471c3f52ffdd7edc49249e39922e945eb8f02fc2b277d8d527a1538241b9660ca568a87663912b1be9c82fa8a841f286e713630d52f3db
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-date-picker@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-date-picker@npm:21.0.2"
+"@vaadin/input-container@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/input-container@npm:22.0.4"
   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.2.0
-    "@vaadin/vaadin-button": ^21.0.2
-    "@vaadin/vaadin-control-state-mixin": ^21.0.2
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-overlay": ^21.0.2
-    "@vaadin/vaadin-text-field": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: 0b1ee406540d59d3cc8bf37b47575adc9c2bc50e15f3e3adb1d95486d58c8b377b153f4f19c76258b27ea814188c024312b704961cf609120a7649943666552e
+    "@polymer/polymer": ^3.0.0
+    "@vaadin/component-base": ^22.0.4
+    "@vaadin/vaadin-lumo-styles": ^22.0.4
+    "@vaadin/vaadin-material-styles": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: 718cb7d8f715427d9085feee8a0df987440511059c5bbfcaa80d63ecd989a693f8f50af9da0f483555396aece21b75eff280921eda7cf0b6358e67518e53ba85
+  languageName: node
+  linkType: hard
+
+"@vaadin/item@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/item@npm:22.0.4"
+  dependencies:
+    "@open-wc/dedupe-mixin": ^1.3.0
+    "@polymer/polymer": ^3.0.0
+    "@vaadin/component-base": ^22.0.4
+    "@vaadin/vaadin-lumo-styles": ^22.0.4
+    "@vaadin/vaadin-material-styles": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: ef8c253668852a129656e083149b3866327dfae8671e30bb1bf78b39f969bd1db74892f090c7632b64fd91c25334f0542ad9dc6848486609de4350da5e5ea44c
   languageName: node
   linkType: hard
 
@@ -4282,100 +4358,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-element-mixin@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-element-mixin@npm:21.0.2"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-development-mode-detector": ^2.0.0
-    "@vaadin/vaadin-usage-statistics": ^2.1.0
-  checksum: 8d18ff9f1e430ff4ed7461fe948b171f78bf43ba2f263c7f7cc4f4161e0486c7ad8a8d57c8cbb9443883ee6fedfae84bbbb562e2e3bb2161d33625b2adde8ebe
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-icon@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-icon@npm:21.0.2"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-    lit: ^2.0.0
-  checksum: 993cd6d8bb6f52cc7ba0e1958824c77a3d56f3a3537ded361412d971174e3bb080780c039487390f7807faebe19f17b56aa1ffc63ad7672cf575d02664ee5880
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-item@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-item@npm:21.0.2"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: b4ff73c0e4f6823f3eb06e3c79df4654e0485740d5928d5bbe95add0b70f4e7cf8abe03cf160c7fe9db2cd474689d0ba5ae3278e85de32bb31d8ab8f90b74e09
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-lumo-styles@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-lumo-styles@npm:21.0.2"
+"@vaadin/vaadin-lumo-styles@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/vaadin-lumo-styles@npm:22.0.4"
   dependencies:
     "@polymer/iron-icon": ^3.0.0
     "@polymer/iron-iconset-svg": ^3.0.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-icon": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: 99058edf60d4989a9eeef4651ff4d95fd901dafd91314e9a7ce02656466f1cb304f0225da4259dada2eaf257ff83bffed8c24730444e45a1b21a303a1b9a2a00
+    "@vaadin/icon": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: 15e9becd675e0d12024fbdfaecedd03f55841f685932ff5cf8a2143641f895309f21b84f378f1fca3af538c3aba26dad81421f05a28f31ad7bb5550ede8a3aea
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-material-styles@npm:21.0.2"
+"@vaadin/vaadin-material-styles@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/vaadin-material-styles@npm:22.0.4"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: 0d5c5aa82cdaa09bb153333bdbd272ad3d137de6046a0a5e69245cb01394f7fb7a2a98b26a6e1b36d38736d32e3134c05cb00b35e5b39b410b31fc78aa55ff0e
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: 0e341e03eab9641cc317a9cbf6d57e7d026539d7bc77159226625aad63a379f31cd70da5e02f10a3d79e9fe0cba1b058935beb2c5d98f146bfb9dd45d8634ee6
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-overlay@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-overlay@npm:21.0.2"
+"@vaadin/vaadin-overlay@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/vaadin-overlay@npm:22.0.4"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: a1d9556de019912bfc135bbf6e0b6062ac479047ed26d1db28a8255011826c94fa8df5c115d210d94e59c0f58bf444775422c92f8ff004bd2659720d4d33c8b3
+    "@vaadin/component-base": ^22.0.4
+    "@vaadin/vaadin-lumo-styles": ^22.0.4
+    "@vaadin/vaadin-material-styles": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
+  checksum: 1b012ff0beac7879da498cf50ee0974d4c3e5637ebea7f7834b9bfc45b9f02e80c61267794c0f3f4e1d4853aa2f35113e1d94bc187d9fe072f37a03eb99f3ab6
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-text-field@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-text-field@npm:21.0.2"
+"@vaadin/vaadin-themable-mixin@npm:^22.0.4":
+  version: 22.0.4
+  resolution: "@vaadin/vaadin-themable-mixin@npm:22.0.4"
   dependencies:
-    "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-control-state-mixin": ^21.0.2
-    "@vaadin/vaadin-element-mixin": ^21.0.2
-    "@vaadin/vaadin-lumo-styles": ^21.0.2
-    "@vaadin/vaadin-material-styles": ^21.0.2
-    "@vaadin/vaadin-themable-mixin": ^21.0.2
-  checksum: 8b7e08298e8d04ec9f7fede5c1f92dc5503a41004f421c8dae7e4fe69715225e74328caa232ba50d8164f8d9bf635806056f58af9f897c4b9913a95594d0b117
-  languageName: node
-  linkType: hard
-
-"@vaadin/vaadin-themable-mixin@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@vaadin/vaadin-themable-mixin@npm:21.0.2"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
+    "@open-wc/dedupe-mixin": ^1.3.0
     lit: ^2.0.0
-  checksum: 1a3db436b2e08f5c68343380da03ac80e2d42cd108b152065c43e12acff3fc57ed595109b1e5a31efa092be7fc7f8f654342c29b8345e985dc89899154edfa8b
+  checksum: 0b2dce09626c92b85ff2d2ad48c8130239bf41fd95147a5fd4490cab4767f074ba9d1008d732d9e90b9219cb1ac0509f4a5fc8637eb5847d6d33e14b20552186
   languageName: node
   linkType: hard
 
@@ -5104,6 +5129,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"app-datepicker@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "app-datepicker@npm:5.0.1"
+  dependencies:
+    "@material/mwc-button": ^0.25.3
+    lit: ^2.0.2
+    nodemod: 2.8.4
+    tslib: ^2.3.0
+  checksum: 619b6e725aca8a89a4ed28bd2390ad8e1c5a8da075928947d270e3dd5df98f6082fdf7ca1190d382d3ad73bacabcd048af21c8579e8f40c0032eba74a2e8c667
+  languageName: node
+  linkType: hard
+
 "append-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "append-buffer@npm:1.0.2"
@@ -9050,17 +9087,18 @@ fsevents@^1.2.7:
     "@babel/preset-env": ^7.15.6
     "@babel/preset-typescript": ^7.15.0
     "@braintree/sanitize-url": ^5.0.2
-    "@codemirror/commands": ^0.19.5
-    "@codemirror/gutter": ^0.19.4
-    "@codemirror/highlight": ^0.19.6
-    "@codemirror/history": ^0.19.0
+    "@codemirror/autocomplete": ^0.19.12
+    "@codemirror/commands": ^0.19.8
+    "@codemirror/gutter": ^0.19.9
+    "@codemirror/highlight": ^0.19.7
+    "@codemirror/history": ^0.19.2
     "@codemirror/legacy-modes": ^0.19.0
     "@codemirror/rectangular-selection": ^0.19.1
-    "@codemirror/search": ^0.19.2
-    "@codemirror/state": ^0.19.4
-    "@codemirror/stream-parser": ^0.19.2
-    "@codemirror/text": ^0.19.5
-    "@codemirror/view": ^0.19.15
+    "@codemirror/search": ^0.19.6
+    "@codemirror/state": ^0.19.6
+    "@codemirror/stream-parser": ^0.19.5
+    "@codemirror/text": ^0.19.6
+    "@codemirror/view": ^0.19.40
     "@formatjs/intl-datetimeformat": ^4.2.5
     "@formatjs/intl-getcanonicallocales": ^1.8.0
     "@formatjs/intl-locale": ^2.4.40
@@ -9086,7 +9124,7 @@ fsevents@^1.2.7:
     "@material/mwc-formfield": 0.25.3
     "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch"
     "@material/mwc-linear-progress": 0.25.3
-    "@material/mwc-list": 0.25.3
+    "@material/mwc-list": ^0.25.3
     "@material/mwc-menu": 0.25.3
     "@material/mwc-radio": 0.25.3
     "@material/mwc-ripple": 0.25.3
@@ -9135,8 +9173,8 @@ fsevents@^1.2.7:
     "@types/webspeechapi": ^0.0.29
     "@typescript-eslint/eslint-plugin": ^4.32.0
     "@typescript-eslint/parser": ^4.32.0
-    "@vaadin/vaadin-combo-box": ^21.0.2
-    "@vaadin/vaadin-date-picker": ^21.0.2
+    "@vaadin/combo-box": ^22.0.4
+    "@vaadin/vaadin-themable-mixin": ^22.0.4
     "@vibrant/color": ^3.2.1-alpha.1
     "@vibrant/core": ^3.2.1-alpha.1
     "@vibrant/quantizer-mmcq": ^3.2.1-alpha.1
@@ -9144,6 +9182,7 @@ fsevents@^1.2.7:
     "@web/dev-server": ^0.0.24
     "@web/dev-server-rollup": ^0.2.11
     "@webcomponents/webcomponentsjs": ^2.2.10
+    app-datepicker: ^5.0.1
     babel-loader: ^8.2.2
     chai: ^4.3.4
     chart.js: ^3.3.2
@@ -9189,7 +9228,7 @@ fsevents@^1.2.7:
     lint-staged: ^11.1.2
     lit: ^2.1.2
     lit-analyzer: ^1.2.1
-    lit-vaadin-helpers: ^0.2.1
+    lit-vaadin-helpers: ^0.3.0
     lodash.template: ^4.5.0
     magic-string: ^0.25.7
     map-stream: ^0.0.7
@@ -10795,12 +10834,23 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit-vaadin-helpers@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "lit-vaadin-helpers@npm:0.2.1"
+"lit-ntml@npm:^2.18.2":
+  version: 2.20.0
+  resolution: "lit-ntml@npm:2.20.0"
+  dependencies:
+    "@reallyland/esm": ^0.0.1
+    parse5: ^6.0.1
+    tslib: ^2.0.2
+  checksum: 49d59ff05959ed725799c69691aa81d759426900150f91edd17debb1cd05ace1ac766172d80b196610e1f1b7b87215cccd9ba13e93638e4f75afeab87303471c
+  languageName: node
+  linkType: hard
+
+"lit-vaadin-helpers@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "lit-vaadin-helpers@npm:0.3.0"
   dependencies:
     lit: ^2.0.0
-  checksum: 140a0e7fbf9cdd8ffe780ffb0ff44227553e4764ae73408a93ed3ef0a6d996d7646e3dbf05a1624ae0ad9ad152d2f43adb4a78cf61cd4f4b6f86cbe4e2252bb4
+  checksum: c96df23272442b3f6c38273721306eb650ea27876fade53ccfbb0158eef838865b1727b9657d35a80f55d94b1418106be63794adb064b79f35dfe3014fb435ff
   languageName: node
   linkType: hard
 
@@ -11938,6 +11988,20 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"nodemod@npm:2.8.4":
+  version: 2.8.4
+  resolution: "nodemod@npm:2.8.4"
+  dependencies:
+    "@types/lodash-es": ^4.17.4
+    "@types/parse5": ^6.0.0
+    "@types/prismjs": ^1.16.5
+    lit-ntml: ^2.18.2
+    normalize-diacritics: ^2.13.2
+    tslib: ^2.1.0
+  checksum: 6dbf61aeca7d1c58d8e122a0801179daccdbd23a0ded0b602cc94c1a20bf664d08b817c57b7489af4193b3b044505bb7c849491eea5eea9248fa65e16b217da0
+  languageName: node
+  linkType: hard
+
 "nopt@npm:^4.0.1":
   version: 4.0.1
   resolution: "nopt@npm:4.0.1"
@@ -11961,6 +12025,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"normalize-diacritics@npm:^2.13.2":
+  version: 2.14.0
+  resolution: "normalize-diacritics@npm:2.14.0"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: f29169bebce5227ac270545fde176db2d52890fb0caa8c394454dbd8553c7f4e3c09a5535e9ee6b139c558ccabbdf1e08bb153ded69cfc58f2f9e472f48703c3
+  languageName: node
+  linkType: hard
+
 "normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.3.4":
   version: 2.5.0
   resolution: "normalize-package-data@npm:2.5.0"
@@ -15204,7 +15277,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.2.0":
+"tslib@npm:^2.0.1, tslib@npm:^2.0.2, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0":
   version: 2.3.1
   resolution: "tslib@npm:2.3.1"
   checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9