Fix control-switch rtl, add gallery rtl

build-scripts/rspack.cjs

@@ -12,7 +12,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const SafeWebpackBar = require("./safe-webpackbar.cjs");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -126,7 +126,7 @@ const createRspackConfig = ({
       },
     },
     plugins: [
-      !isStatsBuild && new SafeWebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),

build-scripts/safe-webpackbar.cjs

@@ -1,25 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WebpackBar = require("webpackbar/rspack");
-
-// Rspack 2's ProgressPlugin passes the third `info` arg as
-// `{ builtModules, moduleIdentifier? }` instead of the v1 string. webpackbar@7's
-// parseRequest still expects a string and crashes on `split`. Extract
-// moduleIdentifier (the v1 equivalent) so progress still shows the active module.
-class SafeWebpackBar extends WebpackBar {
-  constructor(options) {
-    super(options);
-    const inner = this.webpackbar;
-    const originalUpdate = inner.updateProgress.bind(inner);
-    inner.updateProgress = (percent, message, details = []) =>
-      originalUpdate(
-        percent,
-        message,
-        details.map((d) => {
-          if (typeof d === "string") return d;
-          return d?.moduleIdentifier ?? "";
-        })
-      );
-  }
-}
-
-module.exports = SafeWebpackBar;

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

@@ -1,17 +1,22 @@
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-import { mdiMenu } from "@mdi/js";
+import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, query, state } from "lit/decorators";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
+import { setDirectionStyles } from "../../src/common/util/compute_rtl";
+import "../../src/components/ha-button";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
+import "../../src/components/ha-svg-icon";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import "./components/page-description";
 
+const RTL_STORAGE_KEY = "gallery-rtl";
+
 const GITHUB_DEMO_URL =
   "https://github.com/home-assistant/frontend/blob/dev/gallery/src/pages/";
 
@@ -29,6 +34,8 @@ class HaGallery extends LitElement {
     document.location.hash.substring(1) ||
     `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
 
+  @state() private _rtl = localStorage.getItem(RTL_STORAGE_KEY) === "true";
+
   @query("notification-manager")
   private _notifications!: HTMLElementTagNameMap["notification-manager"];
 
@@ -97,33 +104,43 @@ class HaGallery extends LitElement {
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
           </div>
           <div class="page-footer">
-            <div class="header">Help us to improve our documentation</div>
-            <div class="secondary">
-              Suggest an edit to this page, or provide/view feedback for this
-              page.
+            <div class="edit-docs">
+              <div class="header">Help us to improve our documentation</div>
+              <div class="secondary">
+                Suggest an edit to this page, or provide/view feedback for this
+                page.
+              </div>
+              <div>
+                ${PAGES[this._page].description ||
+                Object.keys(PAGES[this._page].metadata).length > 0
+                  ? html`
+                      <a
+                        href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                        target="_blank"
+                      >
+                        Edit text
+                      </a>
+                    `
+                  : ""}
+                ${PAGES[this._page].demo
+                  ? html`
+                      <a
+                        href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
+                        target="_blank"
+                      >
+                        Edit demo
+                      </a>
+                    `
+                  : ""}
+              </div>
             </div>
-            <div>
-              ${PAGES[this._page].description ||
-              Object.keys(PAGES[this._page].metadata).length > 0
-                ? html`
-                    <a
-                      href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                      target="_blank"
-                    >
-                      Edit text
-                    </a>
-                  `
-                : ""}
-              ${PAGES[this._page].demo
-                ? html`
-                    <a
-                      href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                      target="_blank"
-                    >
-                      Edit demo
-                    </a>
-                  `
-                : ""}
+            <div class="rtl-toggle">
+              <ha-icon-button
+                @click=${this._toggleRtl}
+                .label=${this._rtl ? "Switch to LTR" : "Switch to RTL"}
+              >
+                <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
+              </ha-icon-button>
             </div>
           </div>
         </div>
@@ -135,9 +152,11 @@ class HaGallery extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
+    this._applyDirection();
+
     this.addEventListener("show-notification", (ev) =>
       this._notifications.showDialog({ message: ev.detail.message })
     );
@@ -164,6 +183,11 @@ class HaGallery extends LitElement {
 
   updated(changedProps: PropertyValues) {
     super.updated(changedProps);
+
+    if (changedProps.has("_rtl")) {
+      this._applyDirection();
+    }
+
     if (!changedProps.has("_page")) {
       return;
     }
@@ -186,6 +210,15 @@ class HaGallery extends LitElement {
     this._drawer.open = !this._drawer.open;
   }
 
+  private _toggleRtl() {
+    this._rtl = !this._rtl;
+    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
+  }
+
+  private _applyDirection() {
+    setDirectionStyles(this._rtl ? "rtl" : "ltr", this);
+  }
+
   static styles = [
     haStyle,
     css`
@@ -238,11 +271,16 @@ class HaGallery extends LitElement {
       }
 
       .page-footer {
+        display: flex;
+        border-radius: var(--ha-border-radius-lg);
+        background-color: var(--primary-background-color);
+      }
+
+      .edit-docs {
+        flex: 1;
         text-align: center;
         margin: 16px;
         padding: 16px;
-        border-radius: var(--ha-border-radius-lg);
-        background-color: var(--primary-background-color);
       }
 
       .page-footer div {
@@ -266,6 +304,18 @@ class HaGallery extends LitElement {
         margin: 0 8px;
         text-decoration: none;
       }
+
+      .rtl-toggle {
+        padding: var(--ha-space-4);
+        display: inline-flex;
+        align-items: flex-end;
+        margin-top: 12px !important;
+      }
+
+      .rtl-toggle ha-icon-button {
+        border: 1px solid var(--divider-color);
+        border-radius: var(--ha-border-radius-pill);
+      }
     `,
   ];
 }

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-control-switch.ts

@@ -9,6 +9,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-switch";
 
@@ -50,59 +51,100 @@ export class DemoHaControlSwitch extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${repeat(switches, (sw) => {
-        const { id, label, ...config } = sw;
-        return html`
-          <ha-card>
-            <div class="card-content">
-              <label id=${id}>${label}</label>
-              <pre>Config: ${JSON.stringify(config)}</pre>
-              <ha-control-switch
-                .checked=${this.checked}
-                class=${ifDefined(config.class)}
-                @change=${this.handleValueChanged}
-                .pathOn=${mdiLightbulb}
-                .pathOff=${mdiLightbulbOff}
-                .label=${label}
-                ?disabled=${config.disabled}
-                ?reversed=${config.reversed}
-              >
-              </ha-control-switch>
+      <div class="themes">
+        ${["light", "dark"].map(
+          (mode) => html`
+            <div class=${mode}>
+              <ha-card header="ha-control-switch ${mode}">
+                ${repeat(switches, (sw) => {
+                  const { id, label, ...config } = sw;
+                  return html`
+                    <div class="card-content">
+                      <label id="${mode}-${id}">${label}</label>
+                      <pre>Config: ${JSON.stringify(config)}</pre>
+                      <ha-control-switch
+                        .checked=${this.checked}
+                        class=${ifDefined(config.class)}
+                        @change=${this.handleValueChanged}
+                        .pathOn=${mdiLightbulb}
+                        .pathOff=${mdiLightbulbOff}
+                        .label=${label}
+                        ?disabled=${config.disabled}
+                        ?reversed=${config.reversed}
+                      >
+                      </ha-control-switch>
+                    </div>
+                  `;
+                })}
+                <div class="card-content">
+                  <p class="title"><b>Vertical</b></p>
+                  <div class="vertical-switches">
+                    ${repeat(switches, (sw) => {
+                      const { label, ...config } = sw;
+                      return html`
+                        <ha-control-switch
+                          .checked=${this.checked}
+                          vertical
+                          class=${ifDefined(config.class)}
+                          @change=${this.handleValueChanged}
+                          .label=${label}
+                          .pathOn=${mdiGarageOpen}
+                          .pathOff=${mdiGarage}
+                          ?disabled=${config.disabled}
+                          ?reversed=${config.reversed}
+                        >
+                        </ha-control-switch>
+                      `;
+                    })}
+                  </div>
+                </div>
+              </ha-card>
             </div>
-          </ha-card>
-        `;
-      })}
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Vertical</b></p>
-          <div class="vertical-switches">
-            ${repeat(switches, (sw) => {
-              const { id, label, ...config } = sw;
-              return html`
-                <ha-control-switch
-                  .checked=${this.checked}
-                  vertical
-                  class=${ifDefined(config.class)}
-                  @change=${this.handleValueChanged}
-                  .label=${label}
-                  .pathOn=${mdiGarageOpen}
-                  .pathOff=${mdiGarage}
-                  ?disabled=${config.disabled}
-                  ?reversed=${config.reversed}
-                >
-                </ha-control-switch>
-              `;
-            })}
-          </div>
-        </div>
-      </ha-card>
+          `
+        )}
+      </div>
     `;
   }
 
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
   static styles = css`
+    :host {
+      display: block;
+    }
+    .themes {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 16px;
+      padding: 16px;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 16px;
+      border-radius: var(--ha-border-radius-md);
+    }
     ha-card {
       max-width: 600px;
-      margin: 24px auto;
+      margin: 0 auto;
     }
     pre {
       margin-top: 0;

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",
@@ -143,8 +143,8 @@
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
     "@rsdoctor/rspack-plugin": "1.5.9",
-    "@rspack/core": "2.0.0",
-    "@rspack/dev-server": "2.0.0",
+    "@rspack/core": "1.7.11",
+    "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -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/ha-sankey-chart.ts

@@ -291,26 +291,20 @@ export class HaSankeyChart extends LitElement {
   }
 
   private _findParentIndex(id: string, links: Link[], sections: Node[][]) {
-    const parents = links.filter((l) => l.target === id).map((l) => l.source);
-    if (parents.length === 0) {
+    const parent = links.find((l) => l.target === id)?.source;
+    if (!parent) {
       return -1;
     }
-    let sum = 0;
-    let count = 0;
-    for (const parent of parents) {
-      let offset = 0;
-      for (let i = sections.length - 1; i >= 0; i--) {
-        const section = sections[i];
-        const index = section.findIndex((n) => n.id === parent);
-        if (index !== -1) {
-          sum += offset + index;
-          count++;
-          break;
-        }
-        offset += section.length;
+    let offset = 0;
+    for (let i = sections.length - 1; i >= 0; i--) {
+      const section = sections[i];
+      const index = section.findIndex((n) => n.id === parent);
+      if (index !== -1) {
+        return offset + index;
       }
+      offset += section.length;
     }
-    return count > 0 ? sum / count : -1;
+    return -1;
   }
 
   static styles = css`

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);