Fix

* Consider entity precision in adjust sum dialog

* Adjust step selector

.github/PULL_REQUEST_TEMPLATE.md

@@ -69,7 +69,6 @@
 - [ ] I understand the code I am submitting and can explain how it works.
 - [ ] The code change is tested and works locally.
 - [ ] There is no commented out code in this PR.
-- [ ] I have followed the [development checklist][dev-checklist]
 - [ ] I have followed the [perfect PR recommendations][perfect-pr]
 - [ ] Any generated code has been carefully reviewed for correctness and compliance with project standards.
 
@@ -105,6 +104,5 @@ To help with the load of incoming pull requests:
 
   Below, some useful links you could explore:
 -->
-[dev-checklist]: https://developers.home-assistant.io/docs/development_checklist/
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
 [perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr

.github/dependabot.yml

@@ -6,7 +6,6 @@ updates:
       interval: weekly
       time: "06:00"
     cooldown:
-      default-days-before-reopen: 30
       default-days: 7
     open-pull-requests-limit: 10
     labels:

.github/workflows/ci.yaml

@@ -98,13 +98,13 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
       - name: Upload frontend build
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: frontend-build
           path: hass_frontend/

.github/workflows/nightly.yaml

@@ -59,14 +59,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@139054aeaa9adc52ab36ddf67437541f039b88e2 # v7.1.1
+      - uses: release-drafter/release-drafter@5de93583980a40bd78603b6dfdcda5b4df377b32 # v7.2.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@5752577ea7cc5aefb064b0b21432f18fe4d6ba90 # master
+        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
 
       - name: Setup Node
         uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
@@ -58,7 +58,7 @@ jobs:
           script/release
 
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
         with:
           skip-existing: true
 

.github/workflows/restrict-task-creation.yml

@@ -22,7 +22,7 @@ jobs:
       || github.event.issue.type.name == 'Opportunity'
     steps:
       - name: Add no-stale label
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             await github.rest.issues.addLabels({
@@ -41,7 +41,7 @@ jobs:
     if: github.event.issue.type.name == 'Task'
     steps:
       - name: Check if user is authorized
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

@@ -6,6 +6,7 @@ on:
     - cron: "0 * * * *"
 
 permissions:
+  actions: write
   issues: write
   pull-requests: write
 

.nvmrc

@@ -1 +1 @@
-24.14.1
+24.15.0

.yarnrc.yml

@@ -8,4 +8,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.13.0.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs

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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +183,7 @@ class HcCast extends LitElement {
     });
   }
 
-  protected updated(changedProps) {
+  protected updated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     if (this.connection) {

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

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

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

@@ -1,4 +1,5 @@
-import { css, html, LitElement, type TemplateResult } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } 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";
@@ -64,7 +65,7 @@ class HcLovelace extends LitElement {
     `;
   }
 
-  protected updated(changedProps) {
+  protected updated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
     import("../../../../src/resources/append-ha-style");

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

@@ -1,5 +1,6 @@
 /// <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";
@@ -37,7 +38,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
       getCastManager().then((mgr) => {
@@ -62,7 +63,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     );
   }
 
-  protected updated(changedProps) {
+  protected updated(changedProps: PropertyValues<this>) {
     super.updated(changedProps);
     this.style.display = this._castManager ? "" : "none";
   }

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

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

gallery/src/ha-gallery.ts

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

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

@@ -1,4 +1,5 @@
 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";
@@ -171,7 +172,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,4 +1,5 @@
 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";
@@ -96,7 +97,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,4 +1,5 @@
 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";
@@ -119,7 +120,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,5 +1,6 @@
 /* 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";
@@ -51,7 +52,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace.ts

@@ -1,5 +1,6 @@
 /* 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";
@@ -51,7 +52,7 @@ export class DemoAutomationTrace extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     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 } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -3,37 +3,73 @@ title: Switch / Toggle
 ---
 
 <style>
-  ha-switch {
-    display: block;
+  .wrapper {
+    display: flex;
+    gap: 24px;
+    align-items: center;
   }
 </style>
 
 # Switch `<ha-switch>`
 
-A toggle switch can represent two states: on and off.
+A toggle switch representing two states: on and off.
 
-## Examples
+## Implementation
 
-Switch in on state
+### Example usage
+
+<div class="wrapper">
+  <ha-switch checked></ha-switch>
+  <ha-switch></ha-switch>
+  <ha-switch disabled></ha-switch>
+  <ha-switch disabled checked></ha-switch>
+</div>
+
+```html
 <ha-switch checked></ha-switch>
 
-Switch in off state
 <ha-switch></ha-switch>
 
-Disabled switch
 <ha-switch disabled></ha-switch>
 
-## CSS variables
+<ha-switch disabled checked></ha-switch>
+```
 
-For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+### API
 
-The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+This component is based on the webawesome switch component.
+Check the [webawesome documentation](https://webawesome.com/docs/components/switch/) for more details.
 
-`switch-checked-color` / `switch-unchecked-color`  
-Set both the color of the round handle and the track behind it. If you want to control them separately, use the variables below instead.
+**Properties/Attributes**
 
-`switch-checked-button-color` / `switch-unchecked-button-color`  
-Color of the round handle
+| Name     | Type    | Default | Description                                                                                                         |
+| -------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| checked  | Boolean | false   | The checked state of the switch.                                                                                    |
+| disabled | Boolean | false   | Disables the switch and prevents user interaction.                                                                  |
+| required | Boolean | false   | Makes the switch a required field.                                                                                  |
+| haptic   | Boolean | false   | Enables haptic vibration on toggle. Only use when the new state is applied immediately (not when save is required). |
 
-`switch-checked-track-color` / `switch-unchecked-track-color`  
-Color of the track behind the round handle
+**CSS Custom Properties**
+
+- `--ha-switch-size` - The size of the switch track height. Defaults to `24px`.
+- `--ha-switch-thumb-size` - The size of the thumb. Defaults to `18px`.
+- `--ha-switch-width` - The width of the switch track. Defaults to `48px`.
+- `--ha-switch-thumb-box-shadow` - The box shadow of the thumb. Defaults to `var(--ha-box-shadow-s)`.
+- `--ha-switch-background-color` - Background color of the unchecked track.
+- `--ha-switch-thumb-background-color` - Background color of the unchecked thumb.
+- `--ha-switch-background-color-hover` - Background color of the unchecked track on hover.
+- `--ha-switch-thumb-background-color-hover` - Background color of the unchecked thumb on hover.
+- `--ha-switch-border-color` - Border color of the unchecked track.
+- `--ha-switch-thumb-border-color` - Border color of the unchecked thumb.
+- `--ha-switch-thumb-border-color-hover` - Border color of the unchecked thumb on hover.
+- `--ha-switch-checked-background-color` - Background color of the checked track.
+- `--ha-switch-checked-thumb-background-color` - Background color of the checked thumb.
+- `--ha-switch-checked-background-color-hover` - Background color of the checked track on hover.
+- `--ha-switch-checked-thumb-background-color-hover` - Background color of the checked thumb on hover.
+- `--ha-switch-checked-border-color` - Border color of the checked track.
+- `--ha-switch-checked-thumb-border-color` - Border color of the checked thumb.
+- `--ha-switch-checked-border-color-hover` - Border color of the checked track on hover.
+- `--ha-switch-checked-thumb-border-color-hover` - Border color of the checked thumb on hover.
+- `--ha-switch-disabled-opacity` - Opacity of the switch when disabled. Defaults to `0.2`.
+- `--ha-switch-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
+- `--ha-switch-required-marker-offset` - Offset of the required marker. Defaults to `0.1rem`.

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

@@ -1 +1,95 @@
+import type { TemplateResult, PropertyValues } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-switch";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-switch")
+export class DemoHaSwitch extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-switch ${mode}">
+              <div class="card-content">
+                <div class="row">
+                  <span>Unchecked</span>
+                  <ha-switch></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Checked</span>
+                  <ha-switch checked></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Disabled</span>
+                  <ha-switch disabled></ha-switch>
+                </div>
+                <div class="row">
+                  <span>Disabled checked</span>
+                  <ha-switch disabled checked></ha-switch>
+                </div>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps: PropertyValues<this>) {
+    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: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+      margin: 16px;
+      border-radius: var(--ha-border-radius-md);
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ha-space-4);
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--ha-space-4);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-switch": DemoHaSwitch;
+  }
+}

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

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,4 +1,4 @@
-import type { TemplateResult } from "lit";
+import type { TemplateResult, PropertyValues } 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) {
+  firstUpdated(changedProps: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -149,6 +149,38 @@ const CONFIGS = [
   max: 1.9
   unit: GBP/h`,
   },
+  {
+    heading: "A lot of segments",
+    config: `
+- type: gauge
+  needle: true
+  name: Percent gauge
+  entity: sensor.brightness_high
+  unit: "%"
+  min: 0
+  max: 100
+  segments:
+    - from: 0
+      color: "#db4437"
+    - from: 10
+      color: "#cc4d39"
+    - from: 20
+      color: "#bd563a"
+    - from: 30
+      color: "#ad603c"
+    - from: 40
+      color: "#9e693d"
+    - from: 50
+      color: "#8f723f"
+    - from: 60
+      color: "#807b41"
+    - from: 70
+      color: "#718442"
+    - from: 80
+      color: "#618e44"
+    - from: 90
+      color: "#43a047"`,
+  },
 ];
 
 @customElement("demo-lovelace-gauge-card")
@@ -159,7 +191,7 @@ class DemoGaugeEntity extends LitElement {
     return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");

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

@@ -0,0 +1,3 @@
+---
+title: Box shadow
+---

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

@@ -0,0 +1,99 @@
+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";
+
+const SHADOWS = ["s", "m", "l"] as const;
+
+@customElement("demo-misc-box-shadow")
+export class DemoMiscBoxShadow extends LitElement {
+  protected render() {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <h2>${mode}</h2>
+            <div class="grid">
+              ${SHADOWS.map(
+                (size) => html`
+                  <div
+                    class="box"
+                    style="box-shadow: var(--ha-box-shadow-${size})"
+                  >
+                    ${size}
+                  </div>
+                `
+              )}
+            </div>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps: PropertyValues<this>) {
+    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: flex;
+      flex-direction: row;
+      gap: 48px;
+      padding: 48px;
+    }
+
+    .light,
+    .dark {
+      flex: 1;
+      background-color: var(--primary-background-color);
+      border-radius: 16px;
+      padding: 32px;
+    }
+
+    h2 {
+      margin: 0 0 24px;
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--primary-text-color);
+      text-transform: capitalize;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 32px;
+    }
+
+    .box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 120px;
+      border-radius: 12px;
+      background-color: var(--card-background-color);
+      color: var(--primary-text-color);
+      font-size: 16px;
+      font-weight: 500;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-box-shadow": DemoMiscBoxShadow;
+  }
+}

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

@@ -2,6 +2,7 @@ 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";
@@ -397,7 +398,7 @@ export class DemoEntityState extends LitElement {
     ENTITIES.map(createRowData)
   );
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     mockIcons(hass);

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

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

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

@@ -0,0 +1,3 @@
+---
+title: Lawn mower
+---

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

@@ -0,0 +1,98 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { LawnMowerEntityFeature } from "../../../../src/data/lawn_mower";
+
+const ALL_FEATURES =
+  LawnMowerEntityFeature.START_MOWING +
+  LawnMowerEntityFeature.PAUSE +
+  LawnMowerEntityFeature.DOCK;
+
+const ENTITIES = [
+  {
+    entity_id: "lawn_mower.full_featured",
+    state: "docked",
+    attributes: {
+      friendly_name: "Full featured mower",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.mowing",
+    state: "mowing",
+    attributes: {
+      friendly_name: "Mowing",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.returning",
+    state: "returning",
+    attributes: {
+      friendly_name: "Returning",
+      supported_features:
+        LawnMowerEntityFeature.START_MOWING +
+        LawnMowerEntityFeature.PAUSE +
+        LawnMowerEntityFeature.DOCK,
+    },
+  },
+  {
+    entity_id: "lawn_mower.paused",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused",
+      supported_features: ALL_FEATURES,
+    },
+  },
+  {
+    entity_id: "lawn_mower.error",
+    state: "error",
+    attributes: {
+      friendly_name: "Error",
+      supported_features:
+        LawnMowerEntityFeature.START_MOWING + LawnMowerEntityFeature.DOCK,
+    },
+  },
+  {
+    entity_id: "lawn_mower.basic",
+    state: "docked",
+    attributes: {
+      friendly_name: "Basic mower",
+      supported_features: LawnMowerEntityFeature.START_MOWING,
+    },
+  },
+];
+
+@customElement("demo-more-info-lawn-mower")
+class DemoMoreInfoLawnMower extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-lawn-mower": DemoMoreInfoLawnMower;
+  }
+}

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

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

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

@@ -8,18 +8,101 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 
+const ALL_FEATURES =
+  VacuumEntityFeature.STATE +
+  VacuumEntityFeature.START +
+  VacuumEntityFeature.PAUSE +
+  VacuumEntityFeature.STOP +
+  VacuumEntityFeature.RETURN_HOME +
+  VacuumEntityFeature.FAN_SPEED +
+  VacuumEntityFeature.BATTERY +
+  VacuumEntityFeature.STATUS +
+  VacuumEntityFeature.LOCATE +
+  VacuumEntityFeature.CLEAN_SPOT +
+  VacuumEntityFeature.CLEAN_AREA;
+
 const ENTITIES = [
   {
-    entity_id: "vacuum.first_floor_vacuum",
+    entity_id: "vacuum.full_featured",
     state: "docked",
     attributes: {
-      friendly_name: "First floor vacuum",
+      friendly_name: "Full featured vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 85,
+      battery_icon: "mdi:battery-80",
+      fan_speed: "balanced",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Charged",
+    },
+  },
+  {
+    entity_id: "vacuum.cleaning_vacuum",
+    state: "cleaning",
+    attributes: {
+      friendly_name: "Cleaning vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 62,
+      battery_icon: "mdi:battery-60",
+      fan_speed: "turbo",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Cleaning bedroom",
+    },
+  },
+  {
+    entity_id: "vacuum.returning_vacuum",
+    state: "returning",
+    attributes: {
+      friendly_name: "Returning vacuum",
+      supported_features:
+        VacuumEntityFeature.STATE +
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.PAUSE +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.BATTERY,
+      battery_level: 23,
+      battery_icon: "mdi:battery-20",
+      status: "Returning to dock",
+    },
+  },
+  {
+    entity_id: "vacuum.error_vacuum",
+    state: "error",
+    attributes: {
+      friendly_name: "Error vacuum",
+      supported_features:
+        VacuumEntityFeature.STATE +
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME +
+        VacuumEntityFeature.LOCATE,
+      status: "Stuck on obstacle",
+    },
+  },
+  {
+    entity_id: "vacuum.basic_vacuum",
+    state: "docked",
+    attributes: {
+      friendly_name: "Basic vacuum",
       supported_features:
         VacuumEntityFeature.START +
         VacuumEntityFeature.STOP +
         VacuumEntityFeature.RETURN_HOME,
     },
   },
+  {
+    entity_id: "vacuum.paused_vacuum",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused vacuum",
+      supported_features: ALL_FEATURES,
+      battery_level: 45,
+      battery_icon: "mdi:battery-40",
+      fan_speed: "standard",
+      fan_speed_list: ["silent", "standard", "balanced", "turbo", "max"],
+      status: "Paused",
+    },
+  },
 ];
 
 @customElement("demo-more-info-vacuum")
@@ -37,7 +120,7 @@ class DemoMoreInfoVacuum extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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) {
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
     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): void {
+  protected firstUpdated(changedProps: PropertyValues<this>): 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) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     makeDialogManager(this);

package.json

@@ -30,22 +30,23 @@
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.3",
+    "@codemirror/lang-jinja": "6.0.1",
+    "@codemirror/lang-yaml": "6.1.3",
     "@codemirror/language": "6.12.3",
-    "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.41.0",
+    "@codemirror/view": "6.41.1",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.3.1",
-    "@formatjs/intl-displaynames": "7.3.1",
-    "@formatjs/intl-durationformat": "0.10.3",
-    "@formatjs/intl-getcanonicallocales": "3.2.2",
-    "@formatjs/intl-listformat": "8.3.1",
-    "@formatjs/intl-locale": "5.3.1",
-    "@formatjs/intl-numberformat": "9.3.1",
-    "@formatjs/intl-pluralrules": "6.3.1",
-    "@formatjs/intl-relativetimeformat": "12.3.1",
+    "@formatjs/intl-datetimeformat": "7.3.2",
+    "@formatjs/intl-displaynames": "7.3.2",
+    "@formatjs/intl-durationformat": "0.10.4",
+    "@formatjs/intl-getcanonicallocales": "3.2.3",
+    "@formatjs/intl-listformat": "8.3.2",
+    "@formatjs/intl-locale": "5.3.2",
+    "@formatjs/intl-numberformat": "9.3.2",
+    "@formatjs/intl-pluralrules": "6.3.2",
+    "@formatjs/intl-relativetimeformat": "12.3.2",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
@@ -59,15 +60,12 @@
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
-    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
-    "@material/mwc-checkbox": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/mwc-radio": "0.27.0",
-    "@material/mwc-switch": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
@@ -98,10 +96,10 @@
     "fuse.js": "7.3.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
-    "hls.js": "1.6.15",
+    "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.2.0",
+    "intl-messageformat": "11.2.1",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -109,7 +107,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "18.0.0",
+    "marked": "18.0.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -136,7 +134,7 @@
     "@babel/helper-define-polyfill-provider": "0.6.8",
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.2",
-    "@bundle-stats/plugin-webpack-filter": "4.22.0",
+    "@bundle-stats/plugin-webpack-filter": "4.22.1",
     "@eslint/eslintrc": "3.3.5",
     "@eslint/js": "10.0.1",
     "@html-eslint/eslint-plugin": "0.59.0",
@@ -144,7 +142,7 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.7",
+    "@rsdoctor/rspack-plugin": "1.5.9",
     "@rspack/core": "1.7.11",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -169,7 +167,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.2.0",
+    "eslint": "10.2.1",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
@@ -182,7 +180,7 @@
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.4",
     "glob": "13.0.6",
-    "globals": "17.4.0",
+    "globals": "17.5.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
@@ -197,15 +195,15 @@
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
-    "prettier": "3.8.2",
+    "prettier": "3.8.3",
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
-    "sinon": "21.1.0",
+    "sinon": "21.1.2",
     "tar": "7.5.13",
     "terser-webpack-plugin": "5.4.0",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "6.0.2",
-    "typescript-eslint": "8.58.1",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.58.2",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.4",
     "webpack-stats-plugin": "1.1.3",
@@ -218,13 +216,13 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.4.0",
+    "globals": "17.5.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"
   },
-  "packageManager": "yarn@4.13.0",
+  "packageManager": "yarn@4.14.1",
   "volta": {
-    "node": "24.14.1"
+    "node": "24.15.0"
   }
 }

public/static/images/logo_mastodon.svg

@@ -1,10 +0,0 @@
-<svg width="75" height="79" viewBox="0 0 75 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M73.8393 17.4898C72.6973 9.00165 65.2994 2.31235 56.5296 1.01614C55.05 0.797115 49.4441 0 36.4582 0H36.3612C23.3717 0 20.585 0.797115 19.1054 1.01614C10.5798 2.27644 2.79399 8.28712 0.904997 16.8758C-0.00358524 21.1056 -0.100549 25.7949 0.0682394 30.0965C0.308852 36.2651 0.355538 42.423 0.91577 48.5665C1.30307 52.6474 1.97872 56.6957 2.93763 60.6812C4.73325 68.042 12.0019 74.1676 19.1233 76.6666C26.7478 79.2728 34.9474 79.7055 42.8039 77.9162C43.6682 77.7151 44.5217 77.4817 45.3645 77.216C47.275 76.6092 49.5123 75.9305 51.1571 74.7385C51.1797 74.7217 51.1982 74.7001 51.2112 74.6753C51.2243 74.6504 51.2316 74.6229 51.2325 74.5948V68.6416C51.2321 68.6154 51.2259 68.5896 51.2142 68.5661C51.2025 68.5426 51.1858 68.522 51.1651 68.5058C51.1444 68.4896 51.1204 68.4783 51.0948 68.4726C51.0692 68.4669 51.0426 68.467 51.0171 68.4729C45.9835 69.675 40.8254 70.2777 35.6502 70.2682C26.7439 70.2682 24.3486 66.042 23.6626 64.2826C23.1113 62.762 22.7612 61.1759 22.6212 59.5646C22.6197 59.5375 22.6247 59.5105 22.6357 59.4857C22.6466 59.4609 22.6633 59.4391 22.6843 59.422C22.7053 59.4048 22.73 59.3929 22.7565 59.3871C22.783 59.3813 22.8104 59.3818 22.8367 59.3886C27.7864 60.5826 32.8604 61.1853 37.9522 61.1839C39.1768 61.1839 40.3978 61.1839 41.6224 61.1516C46.7435 61.008 52.1411 60.7459 57.1796 59.7621C57.3053 59.7369 57.431 59.7154 57.5387 59.6831C65.4861 58.157 73.0493 53.3672 73.8178 41.2381C73.8465 40.7606 73.9184 36.2364 73.9184 35.7409C73.9219 34.0569 74.4606 23.7949 73.8393 17.4898Z" fill="url(#paint0_linear_549_34)"/>
-<path d="M61.2484 27.0263V48.114H52.8916V27.6475C52.8916 23.3388 51.096 21.1413 47.4437 21.1413C43.4287 21.1413 41.4177 23.7409 41.4177 28.8755V40.0782H33.1111V28.8755C33.1111 23.7409 31.0965 21.1413 27.0815 21.1413C23.4507 21.1413 21.6371 23.3388 21.6371 27.6475V48.114H13.2839V27.0263C13.2839 22.7176 14.384 19.2946 16.5843 16.7572C18.8539 14.2258 21.8311 12.926 25.5264 12.926C29.8036 12.926 33.0357 14.5705 35.1905 17.8559L37.2698 21.346L39.3527 17.8559C41.5074 14.5705 44.7395 12.926 49.0095 12.926C52.7013 12.926 55.6784 14.2258 57.9553 16.7572C60.1531 19.2922 61.2508 22.7152 61.2484 27.0263Z" fill="white"/>
-<defs>
-<linearGradient id="paint0_linear_549_34" x1="37.0692" y1="0" x2="37.0692" y2="79" gradientUnits="userSpaceOnUse">
-<stop stop-color="#6364FF"/>
-<stop offset="1" stop-color="#563ACC"/>
-</linearGradient>
-</defs>
-</svg>

public/static/images/logo_x.svg

@@ -1,3 +0,0 @@
-<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
-</svg>

src/auth/ha-auth-flow.ts

@@ -9,7 +9,6 @@ import "../components/ha-alert";
 import "../components/ha-button";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
-import "../components/ha-formfield";
 import type { AuthProvider } from "../data/auth";
 import {
   autocompleteLoginFields,
@@ -59,7 +58,7 @@ export class HaAuthFlow extends LitElement {
     return this;
   }
 
-  willUpdate(changedProps: PropertyValues) {
+  willUpdate(changedProps: PropertyValues<this>) {
     super.willUpdate(changedProps);
 
     if (!this.hasUpdated && this.clientId === genClientId()) {
@@ -97,11 +96,6 @@ export class HaAuthFlow extends LitElement {
   protected render() {
     return html`
       <style>
-        ha-auth-flow .store-token {
-          margin-left: -16px;
-          margin-inline-start: -16px;
-          margin-inline-end: initial;
-        }
         a.forgot-password {
           color: var(--primary-color);
           text-decoration: none;
@@ -121,6 +115,9 @@ export class HaAuthFlow extends LitElement {
           display: block;
           margin-top: 16px;
         }
+        .action {
+          margin-top: var(--ha-space-5);
+        }
         .action ha-button {
           width: 100%;
         }
@@ -129,7 +126,7 @@ export class HaAuthFlow extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
 
     if (this.clientId == null || this.redirectUri == null) {
@@ -151,7 +148,7 @@ export class HaAuthFlow extends LitElement {
     });
   }
 
-  protected updated(changedProps: PropertyValues): void {
+  protected updated(changedProps: PropertyValues<this>): void {
     super.updated(changedProps);
     if (changedProps.has("authProvider")) {
       this._providerChanged(this.authProvider);
@@ -249,17 +246,12 @@ export class HaAuthFlow extends LitElement {
             ${this.clientId === genClientId() &&
             !["select_mfa_module", "mfa"].includes(step.step_id)
               ? html`
-                  <ha-formfield
-                    class="store-token"
-                    .label=${this.localize(
-                      "ui.panel.page-authorize.store_token"
-                    )}
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
                   >
-                    <ha-checkbox
-                      .checked=${this._storeToken}
-                      @change=${this._storeTokenChanged}
-                    ></ha-checkbox>
-                  </ha-formfield>
+                    ${this.localize("ui.panel.page-authorize.store_token")}
+                  </ha-checkbox>
                 `
               : ""}
             <a

src/auth/ha-authorize.ts

@@ -213,7 +213,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     return this;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     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) {
+  protected updated(changedProps: PropertyValues<this>) {
     super.updated(changedProps);
     if (changedProps.has("language")) {
       document.querySelector("html")!.setAttribute("lang", this.language!);

src/common/datetime/format_duration.ts

@@ -1,4 +1,3 @@
-import type { DurationInput } from "@formatjs/intl-durationformat/src/types";
 import memoizeOne from "memoize-one";
 import type { HaDurationData } from "../../components/ha-duration-input";
 import type { FrontendLocaleData } from "../../data/translation";
@@ -114,7 +113,7 @@ export const formatDuration = (
     case "d": {
       const days = Math.floor(value);
       const hours = Math.floor((value - days) * 24);
-      const input: DurationInput = {
+      const input = {
         days,
         hours,
       };
@@ -123,7 +122,7 @@ export const formatDuration = (
     case "h": {
       const hours = Math.floor(value);
       const minutes = Math.floor((value - hours) * 60);
-      const input: DurationInput = {
+      const input = {
         hours,
         minutes,
       };
@@ -132,7 +131,7 @@ export const formatDuration = (
     case "min": {
       const minutes = Math.floor(value);
       const seconds = Math.floor((value - minutes) * 60);
-      const input: DurationInput = {
+      const input = {
         minutes,
         seconds,
       };

src/common/entity/state_active.ts

@@ -37,7 +37,7 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
     case "person":
       return compareState !== "not_home";
     case "lawn_mower":
-      return ["mowing", "error"].includes(compareState);
+      return !["docked", "paused"].includes(compareState);
     case "lock":
       return compareState !== "locked";
     case "media_player":

src/common/util/subscribe-one.ts

@@ -1,4 +1,8 @@
-import type { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
+import type {
+  Collection,
+  Connection,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
 
 export const subscribeOne = async <T>(
   conn: Connection,
@@ -13,3 +17,11 @@ export const subscribeOne = async <T>(
       resolve(items);
     });
   });
+
+export const subscribeOneCollection = async <T>(collection: Collection<T>) =>
+  new Promise<T>((resolve) => {
+    const unsub = collection.subscribe((data) => {
+      unsub();
+      resolve(data);
+    });
+  });

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

@@ -124,7 +124,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected willUpdate(changedProperties: PropertyValues): void {
+  protected willUpdate(changedProperties: PropertyValues<this>): 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): void {
+  protected updated(changedProperties: PropertyValues<this>): void {
     super.updated(changedProperties);
     if (changedProperties.has("searchFilter")) {
       const filter = this.searchFilter;

src/components/chart/round-caps.ts

@@ -0,0 +1,103 @@
+import type { BarSeriesOption } from "echarts/types/dist/shared";
+
+export function fillDataGapsAndRoundCaps(
+  datasets: BarSeriesOption[],
+  stacked = true
+) {
+  if (!stacked) {
+    // For non-stacked charts, we can simply apply an overall border to each stack
+    // to curve the top of the bar, and then override on any negative bars.
+    datasets.forEach((dataset) => {
+      // Add upper border radius to stack
+      dataset.itemStyle = {
+        ...dataset.itemStyle,
+        borderRadius: [4, 4, 0, 0],
+      };
+      // And override any negative points to have bottom border curved
+      for (let pointIdx = 0; pointIdx < dataset.data!.length; pointIdx++) {
+        const dataPoint = dataset.data![pointIdx];
+        const item: any =
+          dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+            ? dataPoint
+            : { value: dataPoint };
+        if (item.value?.[1] < 0) {
+          dataset.data![pointIdx] = {
+            ...item,
+            itemStyle: {
+              ...item.itemStyle,
+              borderRadius: [0, 0, 4, 4],
+            },
+          };
+        }
+      }
+    });
+    return;
+  }
+
+  // For stacked charts, we need to carefully work through the data points in each
+  // stack to ensure only the lowermost negative and uppermost positive values have
+  // a curved border.
+  const buckets = Array.from(
+    new Set(
+      datasets
+        .map((dataset) =>
+          dataset.data!.map((datapoint) => Number(datapoint![0]))
+        )
+        .flat()
+    )
+  ).sort((a, b) => a - b);
+
+  // make sure all datasets have the same buckets
+  // otherwise the chart will render incorrectly in some cases
+  buckets.forEach((bucket, index) => {
+    const capRounded = {};
+    const capRoundedNegative = {};
+    for (let i = datasets.length - 1; i >= 0; i--) {
+      const dataPoint = datasets[i].data![index];
+      const item: any =
+        dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+          ? dataPoint
+          : { value: dataPoint };
+      const x = item.value?.[0];
+      const stack = datasets[i].stack ?? "";
+      if (x === undefined) {
+        continue;
+      }
+      if (Number(x) !== bucket) {
+        datasets[i].data?.splice(index, 0, {
+          value: [bucket, 0],
+          itemStyle: {
+            borderWidth: 0,
+          },
+        });
+      } else if (item.value?.[1] === 0) {
+        // remove the border for zero values or it will be rendered
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderWidth: 0,
+          },
+        };
+      } else if (!capRounded[stack] && item.value?.[1] > 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [4, 4, 0, 0],
+          },
+        };
+        capRounded[stack] = true;
+      } else if (!capRoundedNegative[stack] && item.value?.[1] < 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [0, 0, 4, 4],
+          },
+        };
+        capRoundedNegative[stack] = true;
+      }
+    }
+  });
+}

src/components/chart/statistics-chart.ts

@@ -35,6 +35,7 @@ import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -67,7 +68,11 @@ export class StatisticsChart extends LitElement {
   @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
-  @property({ attribute: false }) public chartType: "line" | "bar" = "line";
+  @property({ attribute: false }) public chartType:
+    | "line"
+    | "line-stack"
+    | "bar"
+    | "bar-stack" = "line";
 
   @property({ attribute: false }) public minYAxis?: number;
 
@@ -111,7 +116,7 @@ export class StatisticsChart extends LitElement {
 
   private _previousYAxisLabelValue = 0;
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
+  protected shouldUpdate(changedProps: PropertyValues<this>): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
   }
 
@@ -326,7 +331,7 @@ export class StatisticsChart extends LitElement {
         },
         position: computeRTL(this.hass) ? "right" : "left",
         scale:
-          this.chartType !== "bar" ||
+          this.chartType.startsWith("line") ||
           this.logarithmicScale ||
           minYAxis !== undefined ||
           maxYAxis !== undefined,
@@ -386,6 +391,8 @@ export class StatisticsChart extends LitElement {
       (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));
 
     let colorIndex = 0;
+    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
+    const chartStacked = this.chartType.endsWith("stack");
     const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: typeof this._chartData = [];
     const legendData: {
@@ -471,19 +478,17 @@ export class StatisticsChart extends LitElement {
         }
         statDataSets.forEach((d, i) => {
           if (
-            this.chartType === "line" &&
+            chartType === "line" &&
             prevEndTime &&
             prevValues &&
             prevEndTime.getTime() !== start.getTime()
           ) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push(
-              this._transformDataValue([prevEndTime, ...prevValues[i]!])
-            );
+            d.data!.push([prevEndTime, ...prevValues[i]!]);
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
+          d.data!.push([start, ...dataValues[i]!]);
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -503,7 +508,8 @@ export class StatisticsChart extends LitElement {
         this.statTypes.includes("max") && statisticsHaveType(stats, "max");
       const hasMin =
         this.statTypes.includes("min") && statisticsHaveType(stats, "min");
-      const drawBands = [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+      const drawBands =
+        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
 
       const hasState = this.statTypes.includes("state");
 
@@ -535,8 +541,8 @@ export class StatisticsChart extends LitElement {
           const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
-            type: this.chartType,
-            smooth: this.chartType === "line" ? 0.4 : false,
+            type: chartType,
+            smooth: chartType === "line" ? 0.4 : false,
             cursor: "default",
             data: [],
             name: name
@@ -555,16 +561,23 @@ export class StatisticsChart extends LitElement {
               width: 1.5,
             },
             itemStyle:
-              this.chartType === "bar"
+              chartType === "bar"
                 ? {
-                    borderRadius: [4, 4, 0, 0],
                     borderColor,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: this.chartType === "bar" ? backgroundColor : borderColor,
+            color: chartType === "bar" ? backgroundColor : borderColor,
           };
-          if (band && this.chartType === "line") {
+          if (chartStacked) {
+            series.stack = `band-stacked`;
+            series.stackStrategy = "samesign";
+            if (chartType === "line") {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          } else if (band && chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
             if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
@@ -621,7 +634,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (
             type === bandTop &&
-            this.chartType === "line" &&
+            chartType === "line" &&
             drawBands &&
             !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
           ) {
@@ -645,11 +658,9 @@ export class StatisticsChart extends LitElement {
       // For line charts, close out the last stat segment at prevEndTime
       const lastEndTime = prevEndTime;
       const lastValues = prevValues;
-      if (this.chartType === "line" && lastEndTime && lastValues) {
+      if (chartType === "line" && lastEndTime && lastValues) {
         statDataSets.forEach((d, i) => {
-          d.data!.push(
-            this._transformDataValue([lastEndTime, ...lastValues[i]!])
-          );
+          d.data!.push([lastEndTime, ...lastValues[i]!]);
         });
       }
 
@@ -657,6 +668,7 @@ export class StatisticsChart extends LitElement {
       const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
       if (
         displayCurrentState &&
+        !chartStacked &&
         (!this.unit || !statisticUnit || this.unit === statisticUnit)
       ) {
         // Skip external statistics
@@ -677,7 +689,7 @@ export class StatisticsChart extends LitElement {
                 const val: (number | null)[] = [];
                 if (
                   type === bandTop &&
-                  this.chartType === "line" &&
+                  chartType === "line" &&
                   drawBands &&
                   !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
                 ) {
@@ -687,9 +699,7 @@ export class StatisticsChart extends LitElement {
                 } else {
                   val.push(currentValue);
                 }
-                statDataSets[i].data!.push(
-                  this._transformDataValue([now, ...val])
-                );
+                statDataSets[i].data!.push([now, ...val]);
               });
             }
           }
@@ -701,6 +711,13 @@ export class StatisticsChart extends LitElement {
       Array.prototype.push.apply(legendData, statLegendData);
     });
 
+    if (chartType === "bar") {
+      fillDataGapsAndRoundCaps(
+        totalDataSets as BarSeriesOption[],
+        chartStacked
+      );
+    }
+
     legendData.forEach(({ id, name, color, borderColor }) => {
       // Add an empty series for the legend
       totalDataSets.push({
@@ -710,7 +727,7 @@ export class StatisticsChart extends LitElement {
         itemStyle: {
           borderColor,
         },
-        type: this.chartType,
+        type: chartType,
         data: [],
         xAxisIndex: 1,
       });
@@ -728,13 +745,6 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
-  private _transformDataValue(val: [Date, ...(number | null)[]]) {
-    if (this.chartType === "bar" && val[1] && val[1] < 0) {
-      return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
-    }
-    return val;
-  }
-
   private _clampYAxis(value?: number | ((values: any) => number)) {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value

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

@@ -24,14 +24,13 @@ 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: 16px;
+        --md-filter-chip-container-shape: var(--ha-border-radius-md);
         --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) {
+  protected updated(changedProps: PropertyValues<this>) {
     if (!this._headerRow) {
       return;
     }
@@ -887,10 +887,20 @@ export class HaDataTable extends LitElement {
     this._lastSelectedRowId = null;
   }
 
-  private _handleRowCheckboxClicked = (
-    ev: HASSDomCurrentTargetEvent<HaCheckbox & { rowId: string }>
-  ) => {
-    const rowId = ev.currentTarget.rowId;
+  private _handleRowCheckboxClicked = (ev: MouseEvent) => {
+    // ha-checkbox label dispatches synthetic click on input, so handle the input click only
+    if (!(ev.composedPath()[0] instanceof HTMLInputElement) && !ev.shiftKey) {
+      return;
+    }
+
+    // In range select mode, use label click for Firefox since it doesn't fire input click events
+    if (ev.composedPath()[0] instanceof HTMLInputElement && ev.shiftKey) {
+      ev.preventDefault();
+    }
+
+    const checkboxElement = ev.currentTarget as HaCheckbox & { rowId: string };
+
+    const rowId = checkboxElement.rowId;
 
     const groupedData = this._groupData(
       this._filteredData,
@@ -927,7 +937,7 @@ export class HaDataTable extends LitElement {
           ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
         ];
       }
-    } else if (!ev.currentTarget.checked) {
+    } else if (checkboxElement.checked) {
       if (!this._checkedRows.includes(rowId)) {
         this._checkedRows = [...this._checkedRows, rowId];
       }
@@ -1474,6 +1484,10 @@ export class HaDataTable extends LitElement {
         lit-virtualizer:focus-visible {
           outline: none;
         }
+
+        ha-checkbox {
+          padding: var(--ha-space-1);
+        }
       `,
     ];
   }

src/components/date-picker/styles.ts

@@ -79,6 +79,8 @@ export const datePickerStyles = css`
     flex: 1;
     text-align: center;
     margin-left: 48px;
+    margin-inline-start: 48px;
+    margin-inline-end: initial;
   }
 `;
 

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

@@ -1,4 +1,5 @@
 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";
@@ -110,7 +111,7 @@ export abstract class HaDeviceAutomationPicker<
     </ha-generic-picker>`;
   }
 
-  protected updated(changedProps) {
+  protected updated(changedProps: PropertyValues<this>) {
     super.updated(changedProps);
 
     if (changedProps.has("deviceId")) {