Remove ha-list, ha-list-item and ha-check-list-item

Nothing uses the mwc-based list components anymore, so remove them
together with the @material/mwc-list dependency, its patch and the
test mocks that still stubbed them.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Ln7qMagr2YDdssKkaBiqf5

package.json

@@ -73,7 +73,6 @@
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
-    "@material/mwc-list": "0.27.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",

patches/@material__mwc-list@0.27.0.patch

@@ -1,26 +0,0 @@
-diff --git a/mwc-list-base.js b/mwc-list-base.js
-index 1ba95b6a01dcecea4d85b5cbbbcc3dfb04c40d5f..dced13fdb7929c490d6661b1bbe7e9f96dcd2285 100644
---- a/mwc-list-base.js
-+++ b/mwc-list-base.js
-@@ -11,7 +11,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
- import { observer } from '@material/mwc-base/observer.js';
- import { deepActiveElementPath, doesElementContainFocus, isNodeElement } from '@material/mwc-base/utils.js';
- import { html } from 'lit';
--import { property, query, queryAssignedNodes } from 'lit/decorators.js';
-+import { property, query, queryAssignedElements } from 'lit/decorators.js';
- import { ifDefined } from 'lit/directives/if-defined.js';
- import MDCListFoundation, { isIndexSet } from './mwc-list-foundation.js';
- export { createSetFromIndex, isEventMulti, isIndexSet } from './mwc-list-foundation.js';
-@@ -425,10 +425,10 @@ __decorate([
-     query('.mdc-deprecated-list')
- ], ListBase.prototype, "mdcRoot", void 0);
- __decorate([
--    queryAssignedNodes('', true, '*')
-+    queryAssignedElements({ flatten: true, selector: "*" })
- ], ListBase.prototype, "assignedElements", void 0);
- __decorate([
--    queryAssignedNodes('', true, '[tabindex="0"]')
-+    queryAssignedElements({ flatten: true, selector: '[tabindex="0"]' })
- ], ListBase.prototype, "tabbableElements", void 0);
- __decorate([
-     property({ type: Boolean }),

pnpm-lock.yaml

@@ -170,7 +170,6 @@ overrides:
   tslib: 2.9.1
 
 patchedDependencies:
-  '@material/[email protected]': 9450e509a86887d8f68ca9cf3f81e6ed70e94e49de13c5f6f20f94519ad4a987
   [email protected]: 4c014bd1952b4d1f21311ed2212dc87192e70b6e782597ecc7a485270247bbb5
   [email protected]: f25f02dcc8720341c3cfac312e0502081328108270852ad039187c2c5e2ea432
   [email protected]: cdc7ece96d53357d38ff3c124a2553f86e3a5dc333d641d223eb6f07e28275f0
@@ -279,9 +278,6 @@ importers:
       '@maplibre/maplibre-gl-leaflet':
         specifier: 0.1.4
         version: 0.1.4(@types/[email protected])([email protected])([email protected])
-      '@material/mwc-list':
-        specifier: 0.27.0
-        version: 0.27.0(patch_hash=9450e509a86887d8f68ca9cf3f81e6ed70e94e49de13c5f6f20f94519ad4a987)
       '@mdi/js':
         specifier: 7.4.47
         version: 7.4.47
@@ -2267,68 +2263,6 @@ packages:
   '@marijn/[email protected]':
     resolution: {integrity: sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==}
 
-  '@material/[email protected]':
-    resolution: {integrity: sha512-GBuR4VmcTQW1D0lPXEosf5Giho72LLbyGIydWGtaEUtLJoive/D9kFkwTN4Fsyt9Kkl7hbhs35vrNe6QkAH4/Q==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-UJKbXwZtkrA3sfQDmj8Zbw1Q3Tqtl6KdfVFws95Yf7TCUgTFzbZI/FSx1w7dVugQPOEnIBuZnzqZam/MtHkx4w==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-Eh/vZ3vVyqtpylg5Ci33qlgtToS4H1/ppd450Ib3tcdISIoodgijYY0w4XsRvrnZgbI/h/1STFdLxdzS0UNuFw==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-aR+rfncF6oi2ivdOlKSJI4UXwNzWV5rXM88MLDoSJF1D7lXxhAKhge+tMUBodWGV/q0+FnXLuVAa0WYTrKjo+A==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-fn7Af3PRyARtNeYqtjxXmE3Y/dCpnpQVWWys57MqiGR/nvc6qpgOfJ6rOdcu/MrOysOE/oebTUDmDnTmwpe9Hw==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-exPX5VrjQimipBwgcFDGRiEE783sOBgpkFui59A6i6iGvS2UrLHlYY2E65fyyyQnD1f/rv4Po1OOnCesE1kulg==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-mkMpltSKAYLBtFnTTCk/mQIDzwxF/VLh1gh59ehOtmRXt7FvTz83RoAa4tqe53hpVrbX4HoLDBu+vILhq/wkjw==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-oCWWtjbyQ52AaUbzINLGBKScIPyqhps2Y7c8t6Gu6fcFeDxhKXMV1Cqvtj/OMhtAt53XjHfD2XruWwYv3cYYUA==}
-    deprecated: MWC beta is longer supported. Please upgrade to @material/web
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-EY0iYZLwo8qaqMwR5da4fdn0xI0BZNAvKTcwoubYWpDDHlGxDcqwvjp/40ChGo3Q/zv8/4/A0Qp7cwapI82EkA==}
-    deprecated: MWC beta is longer supported. Please upgrade to @material/web
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-oAhNQsBuAOgF3ENOIY8PeWjXsl35HoYaUkl0ixBQk8jJP2HIEf+MdbS5688y/UXxFbSjr0m//LfwR5gauEashg==}
-    deprecated: MWC beta is longer supported. Please upgrade to @material/web
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-+rSO9a373BgyMgQOM0Z8vVkuieobBylPJ8qpltytM+yGPj8+n+MtwRZyg+ry3WwEjYYDMP6GxZPHwLgWs6lMpQ==}
-    deprecated: MWC beta is longer supported. Please upgrade to @material/web
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-by0O8d8g3Rd96/sUB8hxy6MrDx1QTstqOsA64vqypWd526hMTBGRik08jTNap5sVIyrN9Vq17jb4NJLWQLnNHQ==}
-    deprecated: MWC beta is longer supported. Please upgrade to @material/web
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-V/AgWEOuHFoh9d4Gq1rqBZnKSGtMLQNh23Bwrv0c1FhPqFvUpwt9jR3SVwhJk5gvQQWGy9p3iiGc9QCJ+0+P8Q==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-6g2G62vd8DsMuIUSXlRrzb98qkZ4o8ZREknNwNP2zaLQEOkJ//4j9HaqDt98/3LIjUTY9UIVFTQENiMmlwKHYQ==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-f08LT0HSa0WYU+4Jz/tbm1TQ9Fcf2k+H6dPPYv0J1sZmX6hMgCEmNiUdUFLQFvszoXx2XrRi1/hIFjbz2e69Yg==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-RyjInLCNe+nI/ulKea0ZLHphXQDiDqYazS25SRn18g8Hoa5qGNaY5oOBncDXUYn3jm5oI5kFc9oif//kulkbjg==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-S06XAevDCDWMe+GgsEpITMS07imUidzadNaTbJsqssFajBLr53QWVZsG84BpjXKXoYvyEJvb0hX5U0lq6ip9UQ==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-d83e5vbqoLyL542yOTTp4TLVltddWiqbI/j1w/D9ipE30YKfe2EDN+CNJc32Zufh5IUfK41DsZdrN8fI9cL99A==}
-
-  '@material/[email protected]':
-    resolution: {integrity: sha512-9J0k2fq7uyHsRzRqJDJLGmg3YzRpfRPtFDVeUH/xBcYoqpZE7wYw5Mb7s/l8eP626EtR7HhXhSPjvRTLA6NIJg==}
-
   '@mdi/[email protected]':
     resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
 
@@ -9828,141 +9762,6 @@ snapshots:
 
   '@marijn/[email protected]': {}
 
-  '@material/[email protected]':
-    dependencies:
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/rtl': 14.0.0-canary.53b3cad2f.0
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/density': 14.0.0-canary.53b3cad2f.0
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/ripple': 14.0.0-canary.53b3cad2f.0
-      '@material/rtl': 14.0.0-canary.53b3cad2f.0
-      '@material/shape': 14.0.0-canary.53b3cad2f.0
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      '@material/typography': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      lit: 3.3.3
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/mwc-base': 0.27.0
-      '@material/mwc-ripple': 0.27.0
-      lit: 3.3.3
-      tslib: 2.9.1
-
-  '@material/[email protected](patch_hash=9450e509a86887d8f68ca9cf3f81e6ed70e94e49de13c5f6f20f94519ad4a987)':
-    dependencies:
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/list': 14.0.0-canary.53b3cad2f.0
-      '@material/mwc-base': 0.27.0
-      '@material/mwc-checkbox': 0.27.0
-      '@material/mwc-radio': 0.27.0
-      '@material/mwc-ripple': 0.27.0
-      lit: 3.3.3
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/mwc-base': 0.27.0
-      '@material/mwc-ripple': 0.27.0
-      '@material/radio': 14.0.0-canary.53b3cad2f.0
-      lit: 3.3.3
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/mwc-base': 0.27.0
-      '@material/ripple': 14.0.0-canary.53b3cad2f.0
-      lit: 3.3.3
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/animation': 14.0.0-canary.53b3cad2f.0
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/density': 14.0.0-canary.53b3cad2f.0
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/focus-ring': 14.0.0-canary.53b3cad2f.0
-      '@material/ripple': 14.0.0-canary.53b3cad2f.0
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      '@material/touch-target': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/animation': 14.0.0-canary.53b3cad2f.0
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/dom': 14.0.0-canary.53b3cad2f.0
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/rtl': 14.0.0-canary.53b3cad2f.0
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/rtl': 14.0.0-canary.53b3cad2f.0
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/base': 14.0.0-canary.53b3cad2f.0
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/rtl': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
-  '@material/[email protected]':
-    dependencies:
-      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
-      '@material/theme': 14.0.0-canary.53b3cad2f.0
-      tslib: 2.9.1
-
   '@mdi/[email protected]': {}
 
   '@mdi/[email protected]': {}

pnpm-workspace.yaml

@@ -29,7 +29,6 @@ overrides:
   tslib: 2.9.1
 
 patchedDependencies:
-  "@material/[email protected]": patches/@[email protected]
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]

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

@@ -1,93 +0,0 @@
-import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
-import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { preventDefault } from "../common/dom/prevent_default";
-import { stopPropagation } from "../common/dom/stop_propagation";
-import "./ha-checkbox";
-
-@customElement("ha-check-list-item")
-export class HaCheckListItem extends CheckListItemBase {
-  @property({ type: Boolean, attribute: "checkbox-disabled" })
-  checkboxDisabled = false;
-
-  @property({ type: Boolean })
-  indeterminate = false;
-
-  @property({ type: Boolean, attribute: "separate-checkbox-click" })
-  separateCheckboxClick = false;
-
-  async onChange(event) {
-    event.stopPropagation();
-    super.onChange(event);
-    fireEvent(this, event.type);
-  }
-
-  override render() {
-    const text = this.renderText();
-    const graphic =
-      this.graphic && this.graphic !== "control" && !this.left
-        ? this.renderGraphic()
-        : nothing;
-    const meta = this.hasMeta && this.left ? this.renderMeta() : nothing;
-    const ripple = this.renderRipple();
-
-    return html` ${ripple} ${graphic} ${this.left ? "" : text}
-      <ha-checkbox
-        tabindex=${this.separateCheckboxClick ? this.tabindex : -1}
-        .checked=${this.selected}
-        .indeterminate=${this.indeterminate}
-        ?disabled=${this.disabled || this.checkboxDisabled}
-        @change=${this.onChange}
-        @click=${this.separateCheckboxClick ? stopPropagation : preventDefault}
-        class=${this.left ? "left" : ""}
-      >
-      </ha-checkbox>
-      ${this.left ? text : ""} ${meta}`;
-  }
-
-  static override styles = [
-    styles,
-    controlStyles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-
-      :host([graphic="avatar"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="medium"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="large"]) .mdc-deprecated-list-item__graphic,
-      :host([graphic="control"]) .mdc-deprecated-list-item__graphic {
-        margin-inline-end: var(--mdc-list-item-graphic-margin, 16px);
-        margin-inline-start: 0px;
-        direction: var(--direction);
-      }
-      ha-checkbox {
-        flex-shrink: 0;
-        direction: var(--direction);
-        margin-inline-start: auto;
-        margin-inline-end: 0;
-        height: 100%;
-        justify-content: center;
-      }
-      ha-checkbox.left {
-        margin-inline-start: 0;
-      }
-      .mdc-deprecated-list-item__graphic {
-        margin-top: var(--check-list-item-graphic-margin-top);
-      }
-      :host([graphic="icon"]) .mdc-deprecated-list-item__graphic {
-        margin-inline-start: 0;
-        margin-inline-end: var(--mdc-list-item-graphic-margin, 32px);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-check-list-item": HaCheckListItem;
-  }
-}

src/components/ha-list-item.ts

@@ -1,116 +0,0 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import type { CSSResultGroup } from "lit";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-list-item")
-export class HaListItem extends ListItemBase {
-  protected renderRipple() {
-    if (this.noninteractive) {
-      return "";
-    }
-    return super.renderRipple();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      styles,
-      css`
-        :host {
-          padding-left: var(
-            --mdc-list-side-padding-left,
-            var(--mdc-list-side-padding, 20px)
-          );
-          padding-inline-start: var(
-            --mdc-list-side-padding-left,
-            var(--mdc-list-side-padding, 20px)
-          );
-          padding-right: var(
-            --mdc-list-side-padding-right,
-            var(--mdc-list-side-padding, 20px)
-          );
-          padding-inline-end: var(
-            --mdc-list-side-padding-right,
-            var(--mdc-list-side-padding, 20px)
-          );
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
-        span.material-icons:first-of-type {
-          margin-inline-start: 0px !important;
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            16px
-          ) !important;
-          direction: var(--direction) !important;
-        }
-        span.material-icons:last-of-type {
-          margin-inline-start: auto !important;
-          margin-inline-end: 0px !important;
-          direction: var(--direction) !important;
-        }
-        .mdc-deprecated-list-item__meta {
-          display: var(--mdc-list-item-meta-display);
-          align-items: center;
-          flex-shrink: 0;
-        }
-        :host([graphic="icon"]:not([twoline]))
-          .mdc-deprecated-list-item__graphic {
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            20px
-          ) !important;
-        }
-        :host([multiline-secondary]) {
-          height: auto;
-        }
-        :host([multiline-secondary]) .mdc-deprecated-list-item__text {
-          padding: 8px 0;
-        }
-        :host([multiline-secondary]) .mdc-deprecated-list-item__secondary-text {
-          text-overflow: initial;
-          white-space: normal;
-          overflow: auto;
-          display: inline-block;
-          margin-top: 10px;
-        }
-        :host([multiline-secondary]) .mdc-deprecated-list-item__primary-text {
-          margin-top: 10px;
-        }
-        :host([multiline-secondary])
-          .mdc-deprecated-list-item__secondary-text::before {
-          display: none;
-        }
-        :host([multiline-secondary])
-          .mdc-deprecated-list-item__primary-text::before {
-          display: none;
-        }
-        :host([disabled]) {
-          color: var(--disabled-text-color);
-        }
-        :host([noninteractive]) {
-          pointer-events: unset;
-        }
-      `,
-      // safari workaround - must be explicit
-      document.dir === "rtl"
-        ? css`
-            span.material-icons:first-of-type,
-            span.material-icons:last-of-type {
-              direction: rtl !important;
-              --direction: rtl;
-            }
-          `
-        : css``,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-list-item": HaListItem;
-  }
-}

src/components/ha-list.ts

@@ -1,14 +0,0 @@
-import { ListBase } from "@material/mwc-list/mwc-list-base";
-import { styles } from "@material/mwc-list/mwc-list.css";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-list")
-export class HaList extends ListBase {
-  static styles = styles;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-list": HaList;
-  }
-}

test/dialogs/config-flow/dialog-data-entry-flow.test.ts

@@ -48,11 +48,6 @@ vi.mock("../../../src/components/ha-form/ha-form", () => {
   return {};
 });
 
-vi.mock("../../../src/components/ha-list-item", () => {
-  customElements.define("ha-list-item", class extends HTMLElement {});
-  return {};
-});
-
 const formStep: DataEntryFlowStepForm = {
   type: "form",
   flow_id: "test-flow",

test/panels/config/storage/ha-config-section-storage.test.ts

@@ -31,14 +31,6 @@ vi.mock("../../../../src/components/ha-segmented-bar", () => {
   customElements.define("ha-segmented-bar", class extends HTMLElement {});
   return {};
 });
-vi.mock("../../../../src/components/ha-list", () => {
-  customElements.define("ha-list", class extends HTMLElement {});
-  return {};
-});
-vi.mock("../../../../src/components/ha-list-item", () => {
-  customElements.define("ha-list-item", class extends HTMLElement {});
-  return {};
-});
 vi.mock("../../../../src/components/ha-card", () => {
   customElements.define("ha-card", class extends HTMLElement {});
   return {};