Replace ha-switch with ha-control-switch in hui-entities-toggle component

cast/src/launcher/layout/hc-cast.ts

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -150,7 +150,7 @@ class HcCast extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +183,7 @@ class HcCast extends LitElement {
     });
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     toggleAttribute(
       this,

cast/src/launcher/layout/hc-connect.ts

@@ -12,7 +12,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -158,7 +158,7 @@ export class HcConnect extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-cast");
 

cast/src/launcher/layout/hc-layout.ts

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -53,7 +53,7 @@ class HcLayout extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     if (this.connection) {

cast/src/receiver/layout/hc-demo.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
@@ -30,7 +29,7 @@ class HcDemo extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._initializeHass();
   }

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,5 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -65,7 +64,7 @@ class HcLovelace extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
 
     if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {

cast/src/receiver/layout/hc-main.ts

@@ -1,6 +1,6 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { createConnection, getAuth } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
@@ -106,7 +106,7 @@ export class HcMain extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
     import("../../../../src/resources/append-ha-style");

demo/src/custom-cards/cast-demo-row.ts

@@ -1,6 +1,5 @@
 /// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -38,7 +37,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
       getCastManager().then((mgr) => {
@@ -63,7 +62,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     );
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     this.style.display = this._castManager ? "" : "none";
   }

demo/src/custom-cards/ha-demo-card.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -102,7 +102,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this._hidden) {
       this.style.display = "none";

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@@ -50,7 +50,7 @@ class DemoBlackWhiteRow extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/components/demo-card.ts

@@ -1,5 +1,5 @@
 import { load } from "js-yaml";
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,9 @@ class DemoCard extends LitElement {
     this._size = await this._card?.getCardSize();
   }
 
-  protected update(_changedProperties: PropertyValues<this>): void {
+  protected update(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
     super.update(_changedProperties);
     this._updateSize();
   }

gallery/src/ha-gallery.ts

@@ -135,7 +135,7 @@ class HaGallery extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     this.addEventListener("show-notification", (ev) =>

gallery/src/pages/automation/describe-action.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -172,7 +171,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/describe-condition.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -97,7 +96,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/describe-trigger.ts

@@ -1,5 +1,4 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -120,7 +119,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace-timeline.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTrace extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -160,7 +160,7 @@ export class DemoHaAlert extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,5 +1,5 @@
 import { mdiButtonCursor, mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -84,7 +84,7 @@ export class DemoHaBadge extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,5 +1,5 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -118,7 +118,7 @@ export class DemoHaButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -8,7 +8,7 @@ import {
   mdiContentPaste,
   mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -80,7 +80,7 @@ export class DemoHaDropdown extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,6 +1,6 @@
 import { ContextProvider } from "@lit/context";
 import { mdiMagnify } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -179,7 +179,7 @@ export class DemoHaInput extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/pages/components/ha-progress-button.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -65,7 +65,7 @@ export class DemoHaProgressButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -51,7 +51,7 @@ export class DemoHaSlider extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -33,7 +33,7 @@ export class DemoHaSpinner extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -41,7 +41,7 @@ export class DemoHaSwitch extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -90,7 +90,7 @@ export class DemoHaTextarea extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-tip";
@@ -31,7 +31,7 @@ export class DemoHaTip extends LitElement {
     )}`;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/pages/lovelace/alarm-panel-card.ts

@@ -95,7 +95,7 @@ class DemoAlarmPanelEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/area-card.ts

@@ -116,7 +116,7 @@ class DemoArea extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/conditional-card.ts

@@ -77,7 +77,7 @@ class DemoConditional extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/entities-card.ts

@@ -426,7 +426,7 @@ class DemoEntities extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/entity-button-card.ts

@@ -81,7 +81,7 @@ class DemoButtonEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -301,7 +301,7 @@ class DemoEntityFilter extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/gauge-card.ts

@@ -191,7 +191,7 @@ class DemoGaugeEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/glance-card.ts

@@ -261,7 +261,7 @@ class DemoGlanceEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/grid-and-stack-card.ts

@@ -232,7 +232,7 @@ class DemoStack extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/iframe-card.ts

@@ -46,7 +46,7 @@ class DemoIframe extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     provideHass(this._demos);
   }

gallery/src/pages/lovelace/light-card.ts

@@ -87,7 +87,7 @@ class DemoLightEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/map-card.ts

@@ -196,7 +196,7 @@ class DemoMap extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/markdown-card.ts

@@ -290,7 +290,7 @@ class DemoMarkdown extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/media-control-card.ts

@@ -166,7 +166,7 @@ class DemoHuiMediaControlCard extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/media-player-row.ts

@@ -63,7 +63,7 @@ export class DemoLovelaceMediaPlayerRow extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-card.ts

@@ -48,7 +48,7 @@ class DemoPicture extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -179,7 +179,7 @@ class DemoPictureElements extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -111,7 +111,7 @@ class DemoPictureEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/picture-glance-card.ts

@@ -171,7 +171,7 @@ class DemoPictureGlance extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/plant-card.ts

@@ -39,7 +39,7 @@ export class DemoPlantEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/thermostat-card.ts

@@ -246,7 +246,7 @@ class DemoThermostatEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/tile-card.ts

@@ -359,7 +359,7 @@ class DemoTile extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/lovelace/todo-list-card.ts

@@ -50,7 +50,7 @@ class DemoTodoListEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/misc/box-shadow.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
@@ -31,7 +30,7 @@ export class DemoMiscBoxShadow extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/pages/misc/entity-state.ts

@@ -2,7 +2,6 @@ import type {
   HassEntity,
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -398,7 +397,7 @@ export class DemoEntityState extends LitElement {
     ENTITIES.map(createRowData)
   );
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     mockIcons(hass);

gallery/src/pages/misc/integration-card.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-switch";
@@ -331,7 +330,7 @@ export class DemoIntegrationCard extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/climate.ts

@@ -149,7 +149,7 @@ class DemoMoreInfoClimate extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/cover.ts

@@ -204,7 +204,7 @@ class DemoMoreInfoCover extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/fan.ts

@@ -38,7 +38,7 @@ class DemoMoreInfoFan extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/humidifier.ts

@@ -52,7 +52,7 @@ class DemoMoreInfoHumidifier extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/input-number.ts

@@ -51,7 +51,7 @@ class DemoMoreInfoInputNumber extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/input-text.ts

@@ -33,7 +33,7 @@ class DemoMoreInfoInputText extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/lawn-mower.ts

@@ -83,7 +83,7 @@ class DemoMoreInfoLawnMower extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/light.ts

@@ -187,7 +187,7 @@ class DemoMoreInfoLight extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/lock.ts

@@ -40,7 +40,7 @@ class DemoMoreInfoLock extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/media-player.ts

@@ -25,7 +25,7 @@ class DemoMoreInfoMediaPlayer extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/number.ts

@@ -77,7 +77,7 @@ class DemoMoreInfoNumber extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/scene.ts

@@ -40,7 +40,7 @@ class DemoMoreInfoScene extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/timer.ts

@@ -33,7 +33,7 @@ class DemoMoreInfoTimer extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/update.ts

@@ -241,7 +241,7 @@ class DemoMoreInfoUpdate extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/vacuum.ts

@@ -120,7 +120,7 @@ class DemoMoreInfoVacuum extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

gallery/src/pages/more-info/water-heater.ts

@@ -61,7 +61,7 @@ class DemoMoreInfoWaterHeater extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>) {
+  protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

landing-page/src/components/landing-page-logs.ts

@@ -117,7 +117,7 @@ class LandingPageLogs extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>): void {
+  protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
 
     this._scrolledToBottomController.observe(this._scrollBottomMarkerElement!);

landing-page/src/ha-landing-page.ts

@@ -115,7 +115,7 @@ class HaLandingPage extends LandingPageBaseElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     makeDialogManager(this);

package.json

@@ -35,7 +35,7 @@
     "@codemirror/language": "6.12.3",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.41.1",
+    "@codemirror/view": "6.41.0",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.3.2",
@@ -192,7 +192,7 @@
     "lint-staged": "16.4.0",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
-    "lodash.template": "4.18.1",
+    "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
     "prettier": "3.8.3",

src/auth/ha-auth-flow.ts

@@ -58,7 +58,7 @@ export class HaAuthFlow extends LitElement {
     return this;
   }
 
-  willUpdate(changedProps: PropertyValues<this>) {
+  willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
     if (!this.hasUpdated && this.clientId === genClientId()) {
@@ -126,7 +126,7 @@ export class HaAuthFlow extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     if (this.clientId == null || this.redirectUri == null) {
@@ -148,7 +148,7 @@ export class HaAuthFlow extends LitElement {
     });
   }
 
-  protected updated(changedProps: PropertyValues<this>): void {
+  protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("authProvider")) {
       this._providerChanged(this.authProvider);

src/auth/ha-authorize.ts

@@ -213,7 +213,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     return this;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     if (!this.redirectUri) {
@@ -275,7 +275,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     import("../components/ha-language-picker");
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("language")) {
       document.querySelector("html")!.setAttribute("lang", this.language!);

src/common/decorators/consume-context-entry.ts

@@ -1,93 +0,0 @@
-import { consume } from "@lit/context";
-import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../../types";
-import { entitiesContext, statesContext } from "../../data/context";
-import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
-import { transform } from "./transform";
-
-interface ConsumeEntryConfig {
-  entityIdPath: readonly string[];
-}
-
-const resolveAtPath = (host: unknown, path: readonly string[]) => {
-  let cur: any = host;
-  for (const seg of path) {
-    if (cur == null) return undefined;
-    cur = cur[seg];
-  }
-  return cur;
-};
-
-const composeDecorator = <T, V>(
-  context: Parameters<typeof consume>[0]["context"],
-  watchKey: string | undefined,
-  select: (this: unknown, value: T) => V | undefined
-) => {
-  const transformDec = transform<T, V | undefined>({
-    transformer: function (this: unknown, value) {
-      return select.call(this, value);
-    },
-    watch: watchKey ? [watchKey] : [],
-  });
-  const consumeDec = consume<any>({ context, subscribe: true });
-  return (proto: any, propertyKey: string) => {
-    transformDec(proto, propertyKey);
-    consumeDec(proto, propertyKey);
-  };
-};
-
-/**
- * Consumes `statesContext` and narrows it to the `HassEntity` for the entity
- * ID found at `entityIdPath` on the host (e.g. `["_config", "entity"]`).
- *
- * The first path segment is watched on the host — changes to it re-run the
- * lookup. Deeper segments are traversed at lookup time and short-circuit on
- * nullish values.
- */
-export const consumeEntityState = (config: ConsumeEntryConfig) =>
-  composeDecorator<HassEntities, HassEntity>(
-    statesContext,
-    config.entityIdPath[0],
-    function (states) {
-      const id = resolveAtPath(this, config.entityIdPath);
-      return typeof id === "string" ? states?.[id] : undefined;
-    }
-  );
-
-/**
- * Like {@link consumeEntityState} but for an array of entity IDs at
- * `entityIdPath`. Resolves to a `HassEntity[]` containing one entry per
- * currently-available entity (missing entities and non-string IDs are
- * filtered out; original order is preserved).
- */
-export const consumeEntityStates = (config: ConsumeEntryConfig) =>
-  composeDecorator<HassEntities, HassEntity[]>(
-    statesContext,
-    config.entityIdPath[0],
-    function (states) {
-      const ids = resolveAtPath(this, config.entityIdPath);
-      if (!Array.isArray(ids) || !states) return undefined;
-      const result: HassEntity[] = [];
-      for (const id of ids) {
-        if (typeof id !== "string") continue;
-        const state = states[id];
-        if (state !== undefined) result.push(state);
-      }
-      return result;
-    }
-  );
-
-/**
- * Consumes `entitiesContext` and narrows it to the
- * `EntityRegistryDisplayEntry` for the entity ID found at `entityIdPath` on
- * the host. See {@link consumeEntityState} for semantics.
- */
-export const consumeEntityRegistryEntry = (config: ConsumeEntryConfig) =>
-  composeDecorator<HomeAssistant["entities"], EntityRegistryDisplayEntry>(
-    entitiesContext,
-    config.entityIdPath[0],
-    function (entities) {
-      const id = resolveAtPath(this, config.entityIdPath);
-      return typeof id === "string" ? entities?.[id] : undefined;
-    }
-  );

src/components/chart/ha-network-graph.ts

@@ -124,7 +124,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
+  protected willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     if (this._physicsEnabled === undefined && this.data?.nodes?.length > 1) {
       this._physicsEnabled =
@@ -204,7 +204,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     deepEqual
   );
 
-  protected updated(changedProperties: PropertyValues<this>): void {
+  protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has("searchFilter")) {
       const filter = this.searchFilter;

src/components/chart/statistics-chart.ts

@@ -116,7 +116,7 @@ export class StatisticsChart extends LitElement {
 
   private _previousYAxisLabelValue = 0;
 
-  protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
   }
 

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

@@ -24,13 +24,14 @@ export class HaFilterChip extends FilterChip {
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-sys-color-on-surface-variant: var(--primary-text-color);
         --md-sys-color-on-secondary-container: var(--primary-text-color);
-        --md-filter-chip-container-shape: var(--ha-border-radius-md);
+        --md-filter-chip-container-shape: 16px;
         --md-filter-chip-outline-color: var(--outline-color);
         --md-filter-chip-selected-container-color: rgba(
           var(--rgb-primary-text-color),
           0.15
         );
         --_label-text-font: var(--ha-font-family-body);
+        border-radius: var(--ha-border-radius-md);
       }
     `,
   ];

src/components/data-table/ha-data-table.ts

@@ -248,7 +248,7 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps: PropertyValues) {
     if (!this._headerRow) {
       return;
     }

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

@@ -1,5 +1,4 @@
 import { consume } from "@lit/context";
-import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -111,7 +110,7 @@ export abstract class HaDeviceAutomationPicker<
     </ha-generic-picker>`;
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
 
     if (changedProps.has("deviceId")) {

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

@@ -120,7 +120,7 @@ export class HaDevicePicker extends LitElement {
       )
   );
 
-  protected firstUpdated(_changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
     this._loadConfigEntries();
   }

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

@@ -88,7 +88,7 @@ export class HaEntityNamePicker extends LitElement {
     }
   }
 
-  protected willUpdate(_changedProperties: PropertyValues<this>): void {
+  protected willUpdate(_changedProperties: PropertyValues): void {
     if (this._mode === undefined) {
       const items = this._toItems(this.value);
       this._mode =

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

@@ -119,7 +119,7 @@ export class HaEntityPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  protected firstUpdated(changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     // Load title translations so it is available when the combo-box opens
     this.hass.loadBackendTranslation("title");

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

@@ -44,7 +44,7 @@ export class HaEntityStatesPicker extends LitElement {
     return this._keys[index];
   }
 
-  protected willUpdate(changedProps: PropertyValues<this>): void {
+  protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("value")) {
       this.value = ensureArray(this.value);

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

@@ -13,9 +13,9 @@ import {
 } from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
+import "../ha-control-switch";
 import "../ha-formfield";
 import "../ha-icon-button";
-import "../ha-switch";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -35,7 +35,7 @@ export class HaEntityToggle extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
-      return html` <ha-switch disabled></ha-switch> `;
+      return html`<ha-control-switch disabled></ha-control-switch> `;
     }
 
     if (
@@ -62,14 +62,14 @@ export class HaEntityToggle extends LitElement {
       `;
     }
 
-    const switchTemplate = html`<ha-switch
+    const switchTemplate = html`<ha-control-switch
       aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
       .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
-    ></ha-switch>`;
+    ></ha-control-switch>`;
 
     if (!this.label) {
       return switchTemplate;
@@ -80,12 +80,12 @@ export class HaEntityToggle extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this.addEventListener("click", (ev) => ev.stopPropagation());
   }
 
-  public willUpdate(changedProps: PropertyValues<this>): void {
+  public willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("stateObj")) {
       this._isOn = isOn(this.stateObj);
@@ -163,6 +163,10 @@ export class HaEntityToggle extends LitElement {
       white-space: nowrap;
       min-width: 38px;
     }
+    ha-control-switch {
+      --control-switch-thickness: 20px;
+      --control-switch-off-color: var(--state-inactive-color);
+    }
     ha-icon-button {
       --ha-icon-button-size: 40px;
       color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
@@ -171,9 +175,6 @@ export class HaEntityToggle extends LitElement {
     ha-icon-button.state-active {
       color: var(--ha-icon-button-active-color, var(--primary-color));
     }
-    ha-switch {
-      padding: 13px 5px;
-    }
   `;
 }
 

src/components/entity/ha-state-label-badge.ts

@@ -142,7 +142,7 @@ export class HaStateLabelBadge extends LitElement {
     `;
   }
 
-  protected updated(changedProperties: PropertyValues<this>): void {
+  protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
 
     if (this._connected && changedProperties.has("state")) {

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

@@ -130,7 +130,7 @@ export class HaStatisticPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  public willUpdate(changedProps: PropertyValues<this>) {
+  public willUpdate(changedProps: PropertyValues) {
     if (
       (!this.hasUpdated && !this.statisticIds) ||
       changedProps.has("statisticTypes")

src/components/ha-absolute-time.ts

@@ -31,12 +31,12 @@ class HaAbsoluteTime extends ReactiveElement {
     return this;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._updateAbsolute();
   }
 
-  protected update(changedProps: PropertyValues<this>) {
+  protected update(changedProps: PropertyValues) {
     super.update(changedProps);
     this._updateAbsolute();
   }

src/components/ha-ansi-to-html.ts

@@ -37,7 +37,7 @@ export class HaAnsiToHtml extends LitElement {
     return html`<pre class=${classMap({ wrap: !this.wrapDisabled })}></pre>`;
   }
 
-  protected firstUpdated(_changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
 
     // handle initial content

src/components/ha-assist-chat.ts

@@ -81,7 +81,7 @@ export class HaAssistChat extends LitElement {
 
   private _stt_binary_handler_id?: number | null;
 
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
+  protected willUpdate(changedProperties: PropertyValues): void {
     if (!this.hasUpdated || changedProperties.has("pipeline")) {
       this._conversation = [
         {
@@ -94,7 +94,7 @@ export class HaAssistChat extends LitElement {
     }
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     if (
       this.startListening &&

src/components/ha-assist-pipeline-picker.ts

@@ -1,4 +1,4 @@
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -78,7 +78,9 @@ export class HaAssistPipelinePicker extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
     super.firstUpdated(changedProperties);
     listAssistPipelines(this.hass).then((pipelines) => {
       this._pipelines = pipelines.pipelines;

src/components/ha-attributes.ts

@@ -36,7 +36,7 @@ class HaAttributes extends LitElement {
     );
   }
 
-  protected willUpdate(changedProperties: PropertyValues<this>): void {
+  protected willUpdate(changedProperties: PropertyValues): void {
     if (
       changedProperties.has("extraFilters") ||
       changedProperties.has("stateObj")

src/components/ha-blueprint-picker.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -69,7 +68,7 @@ class HaBluePrintPicker extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this.blueprints === undefined) {
       fetchBlueprints(this.hass!, this.domain).then((blueprints) => {

src/components/ha-bottom-sheet.ts

@@ -203,7 +203,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     );
   }
 
-  protected updated(changedProperties: PropertyValues<this>): void {
+  protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has("open")) {
       this._drawerOpen = this.open;

src/components/ha-camera-stream.ts

@@ -58,7 +58,7 @@ export class HaCameraStream extends LitElement {
 
   @state() private _webRtcStreams?: { hasAudio: boolean; hasVideo: boolean };
 
-  public willUpdate(changedProps: PropertyValues<this>): void {
+  public willUpdate(changedProps: PropertyValues): void {
     const entityChanged =
       changedProps.has("stateObj") &&
       this.stateObj &&

src/components/ha-control-slider.ts

@@ -108,12 +108,12 @@ export class HaControlSlider extends LitElement {
     return Math.min(Math.max(value, this.min), this.max);
   }
 
-  protected firstUpdated(changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     this.setupListeners();
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("value")) {
       const valuenow = this.steppedValue(this.value ?? 0);

src/components/ha-control-switch.ts

@@ -37,7 +37,7 @@ export class HaControlSwitch extends LitElement {
 
   private _mc?: HammerManager;
 
-  protected firstUpdated(changedProperties: PropertyValues<this>): void {
+  protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     this.setupListeners();
   }
@@ -116,11 +116,29 @@ export class HaControlSwitch extends LitElement {
   }
 
   private _keydown(ev: any) {
-    if (ev.key !== "Enter" && ev.key !== " ") {
+    const supportedKeys = ["Enter", " "];
+    if (this.vertical) {
+      supportedKeys.push("ArrowUp", "ArrowDown");
+    } else {
+      supportedKeys.push("ArrowLeft", "ArrowRight");
+    }
+    if (!supportedKeys.includes(ev.key)) {
       return;
     }
     ev.preventDefault();
-    this._toggle();
+
+    if (
+      ev.key === "Enter" ||
+      ev.key === " " ||
+      (this.vertical &&
+        ((this.checked && ev.key === "ArrowDown") ||
+          (!this.checked && ev.key === "ArrowUp"))) ||
+      (!this.vertical &&
+        ((!this.checked && ev.key === "ArrowRight") ||
+          (this.checked && ev.key === "ArrowLeft")))
+    ) {
+      this._toggle();
+    }
   }
 
   protected render(): TemplateResult {
@@ -132,7 +150,7 @@ export class HaControlSwitch extends LitElement {
         aria-checked=${this.checked ? "true" : "false"}
         aria-label=${ifDefined(this.label)}
         role="switch"
-        tabindex="0"
+        tabindex=${ifDefined(this.disabled ? undefined : "0")}
         ?checked=${this.checked}
         ?disabled=${this.disabled}
       >
@@ -156,6 +174,7 @@ export class HaControlSwitch extends LitElement {
       --control-switch-on-color: var(--primary-color);
       --control-switch-off-color: var(--disabled-color);
       --control-switch-background-opacity: 0.2;
+      --control-switch-hover-background-opacity: 0.4;
       --control-switch-thickness: 40px;
       --control-switch-border-radius: var(--ha-border-radius-lg);
       --control-switch-padding: 4px;
@@ -167,10 +186,10 @@ export class HaControlSwitch extends LitElement {
       transition: box-shadow 180ms ease-in-out;
       -webkit-tap-highlight-color: transparent;
     }
-    .switch:focus-visible {
+    .switch:not([disabled]):focus-visible {
       box-shadow: 0 0 0 2px var(--control-switch-off-color);
     }
-    .switch[checked]:focus-visible {
+    .switch[checked]:not([disabled]):focus-visible {
       box-shadow: 0 0 0 2px var(--control-switch-on-color);
     }
     .switch {
@@ -199,6 +218,10 @@ export class HaControlSwitch extends LitElement {
       transition: background-color 180ms ease-in-out;
       opacity: var(--control-switch-background-opacity);
     }
+    .switch:not([disabled]):focus-visible .background,
+    .switch:not([disabled]):hover .background {
+      opacity: var(--control-switch-hover-background-opacity);
+    }
     .switch .button {
       width: 50%;
       height: 100%;

src/components/ha-dialog.ts

@@ -2,7 +2,6 @@ import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import type WaDialog from "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { consume, type ContextType } from "@lit/context";
 import { mdiClose } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
   customElement,
@@ -149,7 +148,9 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
     return this.bodyContainer;
   }
 
-  protected updated(changedProperties: PropertyValues<this>): void {
+  protected updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): void {
     super.updated(changedProperties);
 
     if (changedProperties.has("open")) {

src/components/ha-drawer.ts

@@ -67,7 +67,7 @@ export class HaDrawer extends DrawerBase {
     };
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("direction")) {
       this.mdcRoot.dir = this.direction;

src/components/ha-expansion-panel.ts

@@ -76,7 +76,7 @@ export class HaExpansionPanel extends LitElement {
     `;
   }
 
-  protected willUpdate(changedProps: PropertyValues<this>) {
+  protected willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     if (changedProps.has("expanded")) {
       this._showContent = this.expanded;