Update dependencies

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "homeassistant-frontend"]
 	path = homeassistant-frontend
 	url = https://github.com/home-assistant/frontend.git
-	branch = master
+	branch = dev

package.json

@@ -42,7 +42,7 @@
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
-    "@types/marked": "^2",
+    "@types/marked": "^4",
     "@types/mocha": "^8",
     "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
@@ -69,7 +69,7 @@
     "fs-extra": "^7.0.1",
     "glob": "^7.2.0",
     "gulp": "^4.0.2",
-    "gulp-foreach": "^0.1.0",
+    "gulp-flatmap": "^1.0.2",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^2.0.0",
@@ -90,7 +90,7 @@
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
-    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.0.4",
     "serve": "^11.3.2",
     "sinon": "^11.0.0",
@@ -106,7 +106,7 @@
     "webpack-dev-server": "^4.3.0",
     "webpack-manifest-plugin": "^4.0.2",
     "webpackbar": "^5.0.0-3",
-    "workbox-build": "^6.1.5",
+    "workbox-build": "^6.4.2",
     "patch-package": "^6.2.0",
     "dompurify": "^2.2.6",
     "highlight.js": "^10.6.0",
@@ -115,17 +115,18 @@
   },
   "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",
@@ -138,6 +139,7 @@
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
+    "@lit-labs/motion": "^1.0.2",
     "@lit-labs/virtualizer": "0.6.0",
     "@material/chips": "14.0.0-canary.261f2db59.0",
     "@material/data-table": "14.0.0-canary.261f2db59.0",
@@ -150,7 +152,7 @@
     "@material/mwc-formfield": "0.25.3",
     "@material/mwc-icon-button": "0.25.3",
     "@material/mwc-linear-progress": "canary",
-    "@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",
@@ -159,6 +161,7 @@
     "@material/mwc-switch": "0.25.3",
     "@material/mwc-tab": "0.25.3",
     "@material/mwc-tab-bar": "0.25.3",
+    "@material/mwc-textarea": "^0.25.3",
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
@@ -169,7 +172,6 @@
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
@@ -180,13 +182,15 @@
     "@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/scoped-custom-element-registry": "^0.0.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
+    "app-datepicker": "^5.0.1",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
@@ -196,16 +200,16 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.11",
+    "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^6.0.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
-    "lit-vaadin-helpers": "^0.2.1",
-    "marked": "^4.0.10",
+    "lit-vaadin-helpers": "^0.3.0",
+    "marked": "^4.0.12",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
@@ -214,7 +218,6 @@
     "qrcode": "^1.4.4",
     "regenerator-runtime": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
-    "follow-redirects": "^1.14.8",
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.14.0",
     "superstruct": "^0.15.2",
@@ -225,13 +228,12 @@
     "vis-network": "^8.5.4",
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
-    "web-animations-js": "^2.3.2",
-    "workbox-cacheable-response": "^6.1.5",
-    "workbox-core": "^6.1.5",
-    "workbox-expiration": "^6.1.5",
-    "workbox-precaching": "^6.1.5",
-    "workbox-routing": "^6.1.5",
-    "workbox-strategies": "^6.1.5",
+    "workbox-cacheable-response": "^6.4.2",
+    "workbox-core": "^6.4.2",
+    "workbox-expiration": "^6.4.2",
+    "workbox-precaching": "^6.4.2",
+    "workbox-routing": "^6.4.2",
+    "workbox-strategies": "^6.4.2",
     "xss": "^1.0.9",
     "node-emoji": "1.10.0"
   },
@@ -248,14 +250,14 @@
   },
   "dependenciesOverride": {
     "node-emoji": "1.10.0",
-    "marked": "^4.0.10",
     "@lit-labs/virtualizer": "0.6.0",
     "@material/mwc-linear-progress": "canary",
     "@material/mwc-icon-button": "0.25.3"
   },
   "devDependenciesOverride": {
     "patch-package": "^6.2.0",
     "dompurify": "^2.2.6",
+    "rollup-plugin-terser": "^7.0.2",
     "highlight.js": "^10.6.0",
     "rollup-plugin-gzip": "^2.5.0",
     "rollup-plugin-entrypoint-hashmanifest": "^0.1.2"

script/gulp/rollup.js

@@ -55,6 +55,7 @@ const DevelopPlugins = [
     files: [
       require.resolve("@polymer/font-roboto/roboto.js"),
       path.resolve("./homeassistant-frontend/src/components/ha-icon.ts"),
+      path.resolve("./homeassistant-frontend/src/components/ha-icon-picker.ts"),
     ],
   }),
   entrypointHashmanifest({ manifestName: "./hacs_frontend/manifest.json" }),

src/components/dialogs/hacs-add-repository-dialog.ts

@@ -1,3 +1,4 @@
+import "../../../homeassistant-frontend/src/components/search-input";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select/mwc-select";
 import { mdiGithub } from "@mdi/js";
@@ -6,14 +7,13 @@ import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../../homeassistant-frontend/src/common/dom/stop_propagation";
-import "../../../homeassistant-frontend/src/common/search/search-input";
 import "../../../homeassistant-frontend/src/components/ha-chip";
 import "../../../homeassistant-frontend/src/components/ha-settings-row";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 import { Repository } from "../../data/common";
 import { activePanel } from "../../panels/hacs-sections";
-import { scrollBarStyle, searchStyles } from "../../styles/element-styles";
+import { scrollBarStyle } from "../../styles/element-styles";
 import { HacsStyles } from "../../styles/hacs-common-style";
 import { filterRepositoriesByInput } from "../../tools/filter-repositories-by-input";
 import "../hacs-filter";
@@ -110,13 +110,11 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
         .title=${this.hacs.localize("dialog_add_repo.title")}
         hideActions
         scrimClickAction
-        escapeKeyAction
         maxWidth
       >
         <div class="searchandfilter" ?narrow=${this.narrow}>
           <search-input
             .hass=${this.hass}
-            no-label-float
             .label=${this.hacs.localize("search.placeholder")}
             .filter=${this._searchInput}
             @value-changed=${this._inputValueChanged}
@@ -224,14 +222,17 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
   }
 
   private _onImageError(ev) {
-    if (ev.target) {
-      ev.target.outerHTML = `<ha-svg-icon path="${mdiGithub}" slot="prefix"></ha-svg-icon>`;
+    if (ev.target?.outerHTML) {
+      try {
+        ev.target.outerHTML = `<ha-svg-icon path="${mdiGithub}" slot="prefix"></ha-svg-icon>`;
+      } catch (_) {
+        // pass
+      }
     }
   }
 
   static get styles() {
     return [
-      searchStyles,
       scrollBarStyle,
       HacsStyles,
       css`
@@ -258,9 +259,9 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
           margin-right: 6px;
         }
         search-input {
+          display: block;
           float: left;
           width: 75%;
-          border-bottom: 1px var(--mdc-theme-primary) solid;
         }
         search-input[narrow],
         mwc-select[narrow] {

src/components/hacs-repository-card.ts

@@ -198,15 +198,10 @@ export class HacsRepositoryCard extends LitElement {
             : ""}
           ${this.repository.new && !this.repository.installed
             ? html`<div>
-                  <mwc-button @click=${this._setNotNew}>
-                    ${this.hacs.localize("repository_card.dismiss")}
-                  </mwc-button>
-                </div>
-                <div>
-                  <mwc-button @click=${this._installRepository} raised>
-                    ${this.hacs.localize("common.download")}
-                  </mwc-button>
-                </div> `
+                <mwc-button class="status-new" @click=${this._setNotNew}>
+                  ${this.hacs.localize("repository_card.dismiss")}
+                </mwc-button>
+              </div>`
             : this.repository.pending_upgrade &&
               this.hacs.addedToLovelace!(this.hacs, this.repository)
             ? html`<div>
@@ -373,6 +368,7 @@ export class HacsRepositoryCard extends LitElement {
 
         .status-new {
           border-color: var(--hcv-color-new);
+          --mdc-theme-primary: var(--hcv-color-new);
         }
 
         .status-update {

src/panels/hacs-store-panel.ts

@@ -1,3 +1,4 @@
+import "../../homeassistant-frontend/src/components/search-input";
 import {
   mdiAlertCircleOutline,
   mdiFileDocument,
@@ -9,7 +10,6 @@ import {
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import "../../homeassistant-frontend/src/common/search/search-input";
 import { computeRTL } from "../../homeassistant-frontend/src/common/util/compute_rtl";
 import "../../homeassistant-frontend/src/components/ha-alert";
 import "../../homeassistant-frontend/src/components/ha-card";
@@ -23,7 +23,7 @@ import "../components/hacs-repository-card";
 import { Repository } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { settingsClearAllNewRepositories } from "../data/websocket";
-import { hassTabsSubpage, scrollBarStyle, searchStyles } from "../styles/element-styles";
+import { hassTabsSubpage, scrollBarStyle } from "../styles/element-styles";
 import { HacsStyles } from "../styles/hacs-common-style";
 import { filterRepositoriesByInput } from "../tools/filter-repositories-by-input";
 import { activePanel } from "./hacs-sections";
@@ -194,7 +194,6 @@ export class HacsStorePanel extends LitElement {
         : html`<div class="search">
             <search-input
               .hass=${this.hass}
-              no-label-float
               .label=${newRepositories.length === 0
                 ? this.hacs.localize("search.downloaded")
                 : this.hacs.localize("search.downloaded_new")}
@@ -312,7 +311,6 @@ export class HacsStorePanel extends LitElement {
     return [
       HacsStyles,
       hassTabsSubpage,
-      searchStyles,
       scrollBarStyle,
       css`
         .filter {
@@ -359,6 +357,9 @@ export class HacsStorePanel extends LitElement {
           padding: 0px;
           margin: 0;
         }
+        search-input {
+          display: block;
+        }
 
         .bottom-bar {
           position: fixed !important;

src/styles/element-styles.ts

@@ -31,30 +31,6 @@ export const hassTabsSubpage = css`
   }
 `;
 
-export const searchStyles = css`
-  search-input.header {
-    display: block;
-    position: relative;
-    left: -22px;
-    top: -7px;
-    color: var(--secondary-text-color);
-    margin-left: 0;
-  }
-  .search {
-    padding: 0 16px;
-    background: var(--sidebar-background-color);
-    border-bottom: 1px solid var(--divider-color);
-  }
-  .search search-input {
-    position: relative;
-    top: 2px;
-  }
-
-  search-input {
-    --layout-fit_-_right: 100vw;
-  }
-`;
-
 export const scrollBarStyle = css`
   *::-webkit-scrollbar {
     width: 0.4rem;