Update dependency @material/web to v1.4.0 (#20177)

* Update dependency @material/web to v1.4.0

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

package.json

@@ -81,7 +81,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.3.0",
+    "@material/web": "1.4.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",

src/components/ha-circular-progress.ts

@@ -1,6 +1,6 @@
 import "element-internals-polyfill";
 import { MdCircularProgress } from "@material/web/progress/circular-progress";
-import { CSSResult, PropertyValues, css } from "lit";
+import { PropertyValues, css } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
@@ -32,17 +32,15 @@ export class HaCircularProgress extends MdCircularProgress {
     }
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      ...super.styles,
-      css`
-        :host {
-          --md-sys-color-primary: var(--primary-color);
-          --md-circular-progress-size: 48px;
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-color);
+        --md-circular-progress-size: 48px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-list-item-new.ts

@@ -1,25 +1,23 @@
 import { customElement } from "lit/decorators";
 import "element-internals-polyfill";
 import { MdListItem } from "@material/web/list/list-item";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 
 @customElement("ha-list-item-new")
 export class HaListItemNew extends MdListItem {
-  static get styles(): CSSResult[] {
-    return [
-      ...MdListItem.styles,
-      css`
-        :host {
-          --ha-icon-display: block;
-          --md-sys-color-primary: var(--primary-text-color);
-          --md-sys-color-secondary: var(--secondary-text-color);
-          --md-sys-color-surface: var(--card-background-color);
-          --md-sys-color-on-surface: var(--primary-text-color);
-          --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-secondary: var(--secondary-text-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-list-new.ts

@@ -1,20 +1,18 @@
 import { customElement } from "lit/decorators";
 import "element-internals-polyfill";
 import { MdList } from "@material/web/list/list";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 
 @customElement("ha-list-new")
 export class HaListNew extends MdList {
-  static get styles(): CSSResult[] {
-    return [
-      ...MdList.styles,
-      css`
-        :host {
-          --md-sys-color-surface: var(--card-background-color);
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-surface: var(--card-background-color);
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-menu-item.ts

@@ -1,12 +1,12 @@
 import { MdMenuItem } from "@material/web/menu/menu-item";
 import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-menu-item")
 export class HaMenuItem extends MdMenuItem {
-  static override styles: CSSResult[] = [
-    ...MdMenuItem.styles,
+  static override styles = [
+    ...super.styles,
     css`
       :host {
         --ha-icon-display: block;

src/components/ha-menu.ts

@@ -1,12 +1,12 @@
 import { customElement } from "lit/decorators";
 import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 import { MdMenu } from "@material/web/menu/menu";
 
 @customElement("ha-menu")
 export class HaMenu extends MdMenu {
-  static override styles: CSSResult[] = [
-    ...MdMenu.styles,
+  static override styles = [
+    ...super.styles,
     css`
       :host {
         --md-sys-color-surface-container: var(--card-background-color);

src/components/ha-slider.ts

@@ -1,7 +1,7 @@
 import { customElement } from "lit/decorators";
 import "element-internals-polyfill";
 import { MdSlider } from "@material/web/slider/slider";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
@@ -11,8 +11,8 @@ export class HaSlider extends MdSlider {
     this.dir = mainWindow.document.dir;
   }
 
-  static override styles: CSSResult[] = [
-    ...MdSlider.styles,
+  static override styles = [
+    ...super.styles,
     css`
       :host {
         --md-sys-color-primary: var(--primary-color);

src/components/ha-sub-menu.ts

@@ -1,18 +1,17 @@
 import { customElement } from "lit/decorators";
 import "element-internals-polyfill";
-import { CSSResult, css } from "lit";
+import { css } from "lit";
 import { MdSubMenu } from "@material/web/menu/sub-menu";
 
 @customElement("ha-sub-menu")
-// @ts-expect-error
 export class HaSubMenu extends MdSubMenu {
   async show() {
     super.show();
     this.menu.hasOverflow = false;
   }
 
-  static override styles: CSSResult[] = [
-    MdSubMenu.styles,
+  static override styles = [
+    ...super.styles,
     css`
       :host {
         --ha-icon-display: block;

yarn.lock

@@ -3178,13 +3178,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/web@npm:=1.3.0":
-  version: 1.3.0
-  resolution: "@material/web@npm:1.3.0"
+"@material/web@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@material/web@npm:1.4.0"
   dependencies:
     lit: "npm:^2.7.4 || ^3.0.0"
     tslib: "npm:^2.4.0"
-  checksum: 10/7c3427747eccb69628807bed115dca96bb4a8e360e5cb97170a42ab7d469d17f0c925defa417a212ef3237c252f0b06dac9499b56c42945214f9bdeb7f7e5a0b
+  checksum: 10/226571fd96d77f9baa48a77dfe48d88ad26efe6993724d5370e78ed1f82cb3b3882d631fb474d0289e188b58c746e162d9ac5157fefc868d86db5f5ee0a123d8
   languageName: node
   linkType: hard
 
@@ -9612,7 +9612,7 @@ __metadata:
     "@material/mwc-top-app-bar": "npm:0.27.0"
     "@material/mwc-top-app-bar-fixed": "npm:0.27.0"
     "@material/top-app-bar": "npm:=14.0.0-canary.53b3cad2f.0"
-    "@material/web": "npm:=1.3.0"
+    "@material/web": "npm:1.4.0"
     "@mdi/js": "npm:7.4.47"
     "@mdi/svg": "npm:7.4.47"
     "@octokit/auth-oauth-device": "npm:7.1.0"