Remove @material/web

Rename the --md-*-chip-* hooks of the chips to --ha-*-chip-* and drop the
unused @material/web dependency.

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

package.json

@@ -81,7 +81,6 @@
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
     "@material/mwc-formfield": "0.27.0",
     "@material/mwc-list": "0.27.0",
-    "@material/web": "2.5.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",

pnpm-lock.yaml

@@ -305,9 +305,6 @@ importers:
       '@material/mwc-list':
         specifier: 0.27.0
         version: 0.27.0(patch_hash=9450e509a86887d8f68ca9cf3f81e6ed70e94e49de13c5f6f20f94519ad4a987)
-      '@material/web':
-        specifier: 2.5.0
-        version: 2.5.0
       '@mdi/js':
         specifier: 7.4.47
         version: 7.4.47
@@ -2353,9 +2350,6 @@ packages:
   '@material/[email protected]':
     resolution: {integrity: sha512-9J0k2fq7uyHsRzRqJDJLGmg3YzRpfRPtFDVeUH/xBcYoqpZE7wYw5Mb7s/l8eP626EtR7HhXhSPjvRTLA6NIJg==}
 
-  '@material/[email protected]':
-    resolution: {integrity: sha512-x2Uovyq8E/Zc1xHXd9s1eBMXF5pMHVAt70pISKd0fL3Ajj4L6zQaQUY/awcfR2RDAMKXC7i4+vr0arv1YaOR/g==}
-
   '@mdi/[email protected]':
     resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
 
@@ -9985,12 +9979,6 @@ snapshots:
       '@material/theme': 14.0.0-canary.53b3cad2f.0
       tslib: 2.8.1
 
-  '@material/[email protected]':
-    dependencies:
-      '@lit/context': 1.1.6
-      lit: 3.3.3
-      tslib: 2.8.1
-
   '@mdi/[email protected]': {}
 
   '@mdi/[email protected]': {}

src/components/chart/ha-chart-base.ts

@@ -2029,9 +2029,9 @@ export class HaChartBase extends MobileAwareMixin(LitElement) {
       height: 100%;
       --ha-button-height: 24px;
       --ha-chip-label-weight: 500;
-      --md-assist-chip-leading-space: var(--ha-space-2);
-      --md-assist-chip-trailing-space: var(--ha-space-2);
-      --md-assist-chip-icon-label-space: var(--ha-space-1);
+      --ha-assist-chip-leading-space: var(--ha-space-2);
+      --ha-assist-chip-trailing-space: var(--ha-space-2);
+      --ha-assist-chip-icon-label-space: var(--ha-space-1);
     }
   `;
 }

src/components/chips/ha-assist-chip.ts

@@ -17,8 +17,8 @@ export class HaAssistChip extends HaChipBase {
       css`
         :host {
           --ha-chip-label-color: var(
-            --md-assist-chip-label-text-color,
-            var(--md-sys-color-on-surface, var(--primary-text-color))
+            --ha-assist-chip-label-text-color,
+            var(--primary-text-color)
           );
           --ha-button-border-radius: var(
             --ha-assist-chip-container-shape,
@@ -33,11 +33,11 @@ export class HaAssistChip extends HaChipBase {
             1
           );
           --ha-chip-outline-color: var(
-            --md-assist-chip-outline-color,
+            --ha-assist-chip-outline-color,
             var(--outline-color)
           );
           --ha-chip-icon-label-space: var(
-            --md-assist-chip-icon-label-space,
+            --ha-assist-chip-icon-label-space,
             var(--ha-space-2)
           );
         }
@@ -58,11 +58,11 @@ export class HaAssistChip extends HaChipBase {
         }
         .primary {
           padding-inline-start: var(
-            --md-assist-chip-leading-space,
+            --ha-assist-chip-leading-space,
             var(--ha-space-4)
           );
           padding-inline-end: var(
-            --md-assist-chip-trailing-space,
+            --ha-assist-chip-trailing-space,
             var(--ha-space-4)
           );
         }

src/components/chips/ha-filter-chip.ts

@@ -64,11 +64,11 @@ export class HaFilterChip extends HaChipBase {
         }
         :host([selected]) {
           --ha-chip-outline-width: var(
-            --md-filter-chip-selected-outline-width,
+            --ha-filter-chip-selected-outline-width,
             0px
           );
           --ha-chip-container-color: var(
-            --md-filter-chip-selected-container-color,
+            --ha-filter-chip-selected-container-color,
             rgba(var(--rgb-primary-text-color), 0.15)
           );
         }

src/components/chips/ha-input-chip.ts

@@ -17,15 +17,15 @@ export class HaInputChip extends HaChipBase {
       css`
         :host {
           --ha-button-border-radius: 16px;
-          --ha-chip-icon-size: var(--md-input-chip-icon-size, 18px);
+          --ha-chip-icon-size: var(--ha-input-chip-icon-size, 18px);
         }
         :host([selected]) {
           --ha-chip-container-color: var(
-            --md-input-chip-selected-container-color,
+            --ha-input-chip-selected-container-color,
             rgba(var(--rgb-primary-text-color), 0.15)
           );
           --ha-chip-outline-width: var(
-            --md-input-chip-selected-outline-width,
+            --ha-input-chip-selected-outline-width,
             0px
           );
           --ha-chip-container-opacity: var(

src/components/date-picker/ha-date-range-nav.ts

@@ -63,7 +63,7 @@ export class HaDateRangeNav extends HaDateRangePicker {
       }
 
       .range {
-        --md-assist-chip-outline-color: transparent;
+        --ha-assist-chip-outline-color: transparent;
         --ha-assist-chip-container-shape: 0;
         --ha-assist-chip-container-color: transparent;
         border-inline: 1px solid var(--divider-color);

src/components/ha-labels-picker.ts

@@ -239,11 +239,11 @@ export class HaLabelsPicker extends LitElement {
       height: var(--ha-space-8);
     }
     ha-input-chip {
-      --md-input-chip-selected-container-color: var(
+      --ha-input-chip-selected-container-color: var(
         --ha-label-background-color,
         var(--grey-color)
       );
-      --md-input-chip-selected-outline-width: 1px;
+      --ha-input-chip-selected-outline-width: 1px;
     }
     label {
       display: block;

src/components/ha-picker-combo-box.ts

@@ -943,7 +943,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
         .sections ha-filter-chip {
           flex-shrink: 0;
-          --md-filter-chip-selected-container-color: var(
+          --ha-filter-chip-selected-container-color: var(
             --ha-color-fill-primary-normal-hover
           );
           color: var(--primary-color);

src/layouts/hass-tabs-subpage-data-table.ts

@@ -957,8 +957,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
 
     .select-mode-chip {
-      --md-assist-chip-icon-label-space: 0;
-      --md-assist-chip-trailing-space: 8px;
+      --ha-assist-chip-icon-label-space: 0;
+      --ha-assist-chip-trailing-space: 8px;
     }
 
     ha-adaptive-dialog {
@@ -977,7 +977,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
 
     ha-dropdown ha-assist-chip {
-      --md-assist-chip-trailing-space: 8px;
+      --ha-assist-chip-trailing-space: 8px;
     }
 
     ha-dropdown-item.selected {

src/panels/config/apps/app-view/info/supervisor-app-info.ts

@@ -1689,8 +1689,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
           margin-bottom: var(--ha-space-2);
         }
         ha-assist-chip {
-          --md-sys-color-primary: var(--text-primary-color);
-          --md-sys-color-on-surface: var(--text-primary-color);
+          --ha-assist-chip-label-text-color: var(--text-primary-color);
           --ha-assist-chip-filled-container-color: var(--primary-color);
         }
 

src/panels/config/automation/add-automation-element/ha-automation-add-search.ts

@@ -1063,7 +1063,7 @@ export class HaAutomationAddSearch extends LitElement {
 
     .sections ha-filter-chip {
       flex-shrink: 0;
-      --md-filter-chip-selected-container-color: var(
+      --ha-filter-chip-selected-container-color: var(
         --ha-color-fill-primary-normal-hover
       );
       color: var(--primary-color);

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

@@ -1634,7 +1634,7 @@ ${rejected
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1405,7 +1405,7 @@ ${rejected
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
       haStyle,

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

@@ -1691,7 +1691,7 @@ ${rejected
           overflow-y: auto;
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

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

@@ -1592,7 +1592,7 @@ ${rejected
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

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

@@ -876,7 +876,7 @@ class ErrorLogCard extends LitElement {
 
     ha-assist-chip {
       --ha-assist-chip-container-shape: 10px;
-      --md-assist-chip-trailing-space: 8px;
+      --ha-assist-chip-trailing-space: 8px;
     }
 
     @keyframes breathe {

src/panels/config/scene/ha-scene-dashboard.ts

@@ -1329,7 +1329,7 @@ ${rejected
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

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

@@ -1396,7 +1396,7 @@ ${rejected
           --auto-size-available-width: calc(50vw - var(--ha-space-4));
         }
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

src/panels/config/tools/statistics/tools-statistics.ts

@@ -931,8 +931,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         }
 
         .select-mode-chip {
-          --md-assist-chip-icon-label-space: 0;
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-icon-label-space: 0;
+          --ha-assist-chip-trailing-space: 8px;
         }
 
         ha-dialog {
@@ -946,7 +946,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         }
 
         ha-dropdown ha-assist-chip {
-          --md-assist-chip-trailing-space: 8px;
+          --ha-assist-chip-trailing-space: 8px;
         }
       `,
     ];

src/panels/lovelace/cards/hui-distribution-card.ts

@@ -600,9 +600,9 @@ export class HuiDistributionCard
       height: 24px;
       --ha-button-height: 24px;
       --ha-chip-label-weight: 500;
-      --md-assist-chip-leading-space: var(--ha-space-2);
-      --md-assist-chip-trailing-space: var(--ha-space-2);
-      --md-assist-chip-icon-label-space: var(--ha-space-1);
+      --ha-assist-chip-leading-space: var(--ha-space-2);
+      --ha-assist-chip-trailing-space: var(--ha-space-2);
+      --ha-assist-chip-icon-label-space: var(--ha-space-1);
     }
 
     .legend li:has(ha-assist-chip) {