20221026.0 (#14203)

2025-07-24 09:46:36 +00:00 · 2022-10-26 14:52:03 -04:00 · 2022-10-26 14:52:03 -04:00 · 69074df1ab
commit 69074df1ab
parent 45646eaf0b 16848d03ae
218 changed files with 5981 additions and 2155 deletions
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -75,7 +75,7 @@ jobs:
          echo "home-assistant-frontend==$version" > ./requirements.txt

      - name: Build wheels
-        uses: home-assistant/wheels@2022.06.7
+        uses: home-assistant/wheels@2022.10.1
        with:
          abi: cp310
          tag: musllinux_1_2
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v6.0.0
+        uses: actions/stale@v6.0.1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
--- a/.yarn/releases/yarn-3.2.0.cjs
+++ b/.yarn/releases/yarn-3.2.0.cjs
--- a/.yarn/releases/yarn-3.2.3.cjs
+++ b/.yarn/releases/yarn-3.2.3.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -6,4 +6,4 @@ plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs
--- a/build-scripts/gulp/download_translations.js
+++ b/build-scripts/gulp/download_translations.js
@ -1,17 +1,12 @@
-const del = require("del");
 const gulp = require("gulp");
 const fs = require("fs");
 const mapStream = require("map-stream");

 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";
-const downloadDir = "translations/downloads";
 const srcMeta = "src/translations/translationMetadata.json";
-
 const encoding = "utf8";

-const tasks = [];
-
 function hasHtml(data) {
  return /<[a-z][\s\S]*>/i.test(data);
 }
@ -46,20 +41,12 @@ function checkHtml() {
  });
 }

-let taskName = "clean-downloaded-translations";
-gulp.task(taskName, function () {
-  return del([`${downloadDir}/**`]);
+// Backend translations do not currently pass HTML check so are excluded here for now
+gulp.task("check-translations-html", function () {
+  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
 });
-tasks.push(taskName);

-taskName = "check-translations-html";
-gulp.task(taskName, function () {
-  return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
-});
-tasks.push(taskName);
-
-taskName = "check-all-files-exist";
-gulp.task(taskName, function () {
+gulp.task("check-all-files-exist", function () {
  const file = fs.readFileSync(srcMeta, { encoding });
  const meta = JSON.parse(file);
  Object.keys(meta).forEach((lang) => {
@ -72,24 +59,8 @@ gulp.task(taskName, function () {
  });
  return Promise.resolve();
 });
-tasks.push(taskName);

-taskName = "move-downloaded-translations";
-gulp.task(taskName, function () {
-  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDirFrontend));
-});
-tasks.push(taskName);
-
-taskName = "check-downloaded-translations";
 gulp.task(
-  taskName,
-  gulp.series(
-    "check-translations-html",
-    "move-downloaded-translations",
-    "check-all-files-exist",
-    "clean-downloaded-translations"
-  )
+  "check-downloaded-translations",
+  gulp.series("check-translations-html", "check-all-files-exist")
 );
-tasks.push(taskName);
-
-module.exports = tasks;
--- a/demo/src/configs/arsaboo/entities.ts
+++ b/demo/src/configs/arsaboo/entities.ts
@ -508,7 +508,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
        origin_addresses: ["XYZ"],
        status: "OK",
        mode: "driving",
-        units: "imperial",
+        units: "us_customary",
        duration_in_traffic: "41 mins",
        duration: "44 mins",
        distance: "34.3 mi",
@ -527,7 +527,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
        origin_addresses: ["XYZ"],
        status: "OK",
        mode: "driving",
-        units: "imperial",
+        units: "us_customary",
        duration_in_traffic: "37 mins",
        duration: "37 mins",
        distance: "30.2 mi",
--- a/demo/src/configs/jimpower/lovelace.ts
+++ b/demo/src/configs/jimpower/lovelace.ts
@ -1196,7 +1196,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                      left: "15%",
                    },
                    type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                  },
                  {
                    prefix: "Kitchen: ",
@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                      top: "89%",
                      left: "32%",
                    },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                  },
                  {
                    style: {
@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                      left: "60%",
                    },
                    type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                  },
                  {
                    prefix: "Bathroom: ",
@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                      top: "89%",
                      left: "77%",
                    },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                  },
                ],
                type: "picture-elements",
--- a/gallery/public/images/using-our-logo.png
+++ b/gallery/public/images/using-our-logo.png
--- a/gallery/src/pages/brand/logo.markdown
+++ b/gallery/src/pages/brand/logo.markdown
@ -2,8 +2,6 @@
 title: "Logo"
 ---

-![Using our logo](/images/using-our-logo.png)
-
 # Using our logo

 As a community, we are proud of our logo. Follow these guidelines to ensure it always looks its best. Our logo follows Google's material design spec and uses the blue interface color.
--- a/gallery/src/pages/components/ha-bar-slider.markdown
+++ b/gallery/src/pages/components/ha-bar-slider.markdown
@ -0,0 +1,3 @@
+---
+title: Bar Sliders
+---
--- a/gallery/src/pages/components/ha-bar-slider.ts
+++ b/gallery/src/pages/components/ha-bar-slider.ts
@ -0,0 +1,169 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-bar-slider";
+import "../../../../src/components/ha-card";
+
+const sliders: {
+  id: string;
+  label: string;
+  mode?: "start" | "end" | "indicator";
+  class?: string;
+}[] = [
+  {
+    id: "slider-start",
+    label: "Slider (start mode)",
+    mode: "start",
+  },
+  {
+    id: "slider-end",
+    label: "Slider (end mode)",
+    mode: "end",
+  },
+  {
+    id: "slider-indicator",
+    label: "Slider (indicator mode)",
+    mode: "indicator",
+  },
+  {
+    id: "slider-start-custom",
+    label: "Slider (start mode) and custom style",
+    mode: "start",
+    class: "custom",
+  },
+  {
+    id: "slider-end-custom",
+    label: "Slider (end mode) and custom style",
+    mode: "end",
+    class: "custom",
+  },
+  {
+    id: "slider-indicator-custom",
+    label: "Slider (indicator mode) and custom style",
+    mode: "indicator",
+    class: "custom",
+  },
+];
+
+@customElement("demo-components-ha-bar-slider")
+export class DemoHaBarSlider extends LitElement {
+  @state() private value = 50;
+
+  @state() private sliderPosition?: number;
+
+  handleValueChanged(e: CustomEvent) {
+    this.value = e.detail.value as number;
+  }
+
+  handleSliderMoved(e: CustomEvent) {
+    this.sliderPosition = e.detail.value as number;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <p><b>Slider values</b></p>
+          <table>
+            <tbody>
+              <tr>
+                <td>position</td>
+                <td>${this.sliderPosition ?? "-"}</td>
+              </tr>
+              <tr>
+                <td>value</td>
+                <td>${this.value ?? "-"}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </ha-card>
+      ${repeat(sliders, (slider) => {
+        const { id, label, ...config } = slider;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-bar-slider
+                .value=${this.value}
+                .mode=${config.mode}
+                class=${ifDefined(config.class)}
+                @value-changed=${this.handleValueChanged}
+                @slider-moved=${this.handleSliderMoved}
+                aria-labelledby=${id}
+              >
+              </ha-bar-slider>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-sliders">
+            ${repeat(sliders, (slider) => {
+              const { id, label, ...config } = slider;
+              return html`
+                <ha-bar-slider
+                  .value=${this.value}
+                  .mode=${config.mode}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @value-changed=${this.handleValueChanged}
+                  @slider-moved=${this.handleSliderMoved}
+                  aria-label=${label}
+                >
+                </ha-bar-slider>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --slider-bar-color: #ffcf4c;
+        --slider-bar-background: #ffcf4c64;
+        --slider-bar-thickness: 100px;
+        --slider-bar-border-radius: 24px;
+      }
+      .vertical-sliders {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-sliders > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-bar-slider": DemoHaBarSlider;
+  }
+}
--- a/gallery/src/pages/more-info/update.ts
+++ b/gallery/src/pages/more-info/update.ts
@ -139,6 +139,13 @@ const ENTITIES = [
    title: undefined,
    friendly_name: "Installing without title",
  }),
+  getEntity("update", "update21", "on", {
+    ...base_attributes,
+    in_progress: true,
+    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+  }),
 ];

@customElement("demo-more-info-update")
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/hassio/src/addon-store/hassio-addon-repository.ts
@ -118,7 +118,7 @@ class HassioAddonRepositoryEl extends LitElement {
  }

  private _addonTapped(ev) {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
  }

  static get styles(): CSSResultGroup {
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@ -53,7 +53,13 @@ class HassioAddonDashboard extends LitElement {

  @property({ type: Boolean }) public narrow!: boolean;

-  @state() _error?: string;
+  @state() private _error?: string;
+
+  private _backPath = new URLSearchParams(window.parent.location.search).get(
+    "store"
+  )
+    ? "/hassio/store"
+    : "/hassio/dashboard";

  private _computeTail = memoizeOne((route: Route) => {
    const dividerPos = route.path.indexOf("/", 1);
@ -119,6 +125,7 @@ class HassioAddonDashboard extends LitElement {
        .narrow=${this.narrow}
        .route=${route}
        .tabs=${addonTabs}
+        .backPath=${this._backPath}
        supervisor
      >
        <span slot="header">${this.addon.name}</span>
--- a/package.json
+++ b/package.json
@ -43,7 +43,6 @@
    "@formatjs/intl-numberformat": "^7.2.5",
    "@formatjs/intl-pluralrules": "^4.1.5",
    "@formatjs/intl-relativetimeformat": "^9.3.2",
-    "@formatjs/intl-utils": "^3.8.4",
    "@fullcalendar/common": "5.9.0",
    "@fullcalendar/core": "5.9.0",
    "@fullcalendar/daygrid": "5.9.0",
@ -111,6 +110,7 @@
    "deep-freeze": "^0.0.1",
    "fuse.js": "^6.0.0",
    "google-timezones-json": "^1.0.2",
+    "hammerjs": "^2.0.8",
    "hls.js": "^1.2.3",
    "home-assistant-js-websocket": "^8.0.0",
    "idb-keyval": "^5.1.3",
@ -138,6 +138,7 @@
    "vis-network": "^8.5.4",
    "vue": "^2.6.12",
    "vue2-daterange-picker": "^0.5.1",
+    "weekstart": "^1.1.0",
    "workbox-cacheable-response": "^6.4.2",
    "workbox-core": "^6.4.2",
    "workbox-expiration": "^6.4.2",
@ -169,6 +170,7 @@
    "@types/chromecast-caf-receiver": "5.0.12",
    "@types/chromecast-caf-sender": "^1.0.3",
    "@types/glob": "^7",
+    "@types/hammerjs": "^2.0.41",
    "@types/js-yaml": "^4",
    "@types/leaflet": "^1",
    "@types/leaflet-draw": "^1",
@ -253,5 +255,5 @@
    "trailingComma": "es5",
    "arrowParens": "always"
  },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.3"
 }
--- a/pyproject.toml
+++ b/pyproject.toml
@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20221010.0"
+version      = "20221026.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
--- a/script/translations_download
+++ b/script/translations_download
@ -20,24 +20,28 @@ fi
 # Load token from file if not already in the environment
 [ -z "${LOKALISE_TOKEN-}" ] && LOKALISE_TOKEN="$(<.lokalise_token)"

-PROJECT_ID="3420425759f6d6d241f598.13594006"
-LOCAL_DIR="$(pwd)/translations/downloads"
-FILE_FORMAT=json
+declare -A PROJECT_ID=( \
+    [frontend]="3420425759f6d6d241f598.13594006" \
+    [backend]="130246255a974bd3b5e8a1.51616605" \
+    )

-mkdir -p ${LOCAL_DIR}
-
-docker run \
-     -v ${LOCAL_DIR}:/opt/dest/locale \
-     --rm \
-     lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d lokalise2 \
-     --token ${LOKALISE_TOKEN} \
-     --project-id ${PROJECT_ID} \
-     file download \
-     --export-empty-as skip \
-     --format json \
-     --json-unescaped-slashes=true \
-     --replace-breaks=false \
-     --original-filenames=false \
-     --unzip-to /opt/dest
+for project in ${!PROJECT_ID[*]}; do
+LOCAL_DIR=`pwd`/translations/${project}
+rm -f ${LOCAL_DIR}/* || mkdir -p ${LOCAL_DIR}
+    docker run \
+        -v ${LOCAL_DIR}:/opt/dest/locale \
+        --rm \
+        lokalise/lokalise-cli-2@sha256:f1860b26be22fa73b8c93bc5f8690f2afc867610a42de6fc27adc790e5d4425d \
+        lokalise2 \
+            --token ${LOKALISE_TOKEN} \
+            --project-id ${PROJECT_ID[${project}]} \
+            file download \
+            --export-empty-as skip \
+            --format json \
+            --json-unescaped-slashes=true \
+            --replace-breaks=false \
+            --original-filenames=false \
+            --unzip-to /opt/dest
+done

 ./node_modules/.bin/gulp check-downloaded-translations
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@ -15,7 +15,7 @@ import { computeInitialHaFormData } from "../components/ha-form/compute-initial-
 import "../components/ha-form/ha-form";
 import "../components/ha-formfield";
 import "../components/ha-markdown";
-import { AuthProvider } from "../data/auth";
+import { AuthProvider, autocompleteLoginFields } from "../data/auth";
 import {
  DataEntryFlowStep,
  DataEntryFlowStepForm,
@ -204,7 +204,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
            : html``}
          <ha-form
            .data=${this._stepData}
-            .schema=${step.data_schema}
+            .schema=${autocompleteLoginFields(step.data_schema)}
            .error=${step.errors}
            .disabled=${this._submitting}
            .computeLabel=${this._computeLabelCallback(step)}
--- a/src/auth/ha-password-manager-polyfill.ts
+++ b/src/auth/ha-password-manager-polyfill.ts
@ -3,6 +3,7 @@ import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HaFormSchema } from "../components/ha-form/types";
+import { autocompleteLoginFields } from "../data/auth";
 import type { DataEntryFlowStep } from "../data/data_entry_flow";

 declare global {
@ -69,7 +70,9 @@ export class HaPasswordManagerPolyfill extends LitElement {
          aria-hidden="true"
          @submit=${this._handleSubmit}
        >
-          ${this.step.data_schema.map((input) => this.render_input(input))}
+          ${autocompleteLoginFields(this.step.data_schema).map((input) =>
+            this.render_input(input)
+          )}
          <input type="submit" />
          <style>
            ${this.styles}
@ -91,6 +94,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
        .id=${schema.name}
        .type=${inputType}
        .value=${this.stepData[schema.name] || ""}
+        .autocomplete=${schema.autocomplete}
        @input=${this._valueChanged}
      />
    `;
--- a/src/common/color/compute-color.ts
+++ b/src/common/color/compute-color.ts
@ -0,0 +1,42 @@
+import { hex2rgb } from "./convert-color";
+
+export const THEME_COLORS = new Set([
+  "primary",
+  "accent",
+  "disabled",
+  "red",
+  "pink",
+  "purple",
+  "deep-purple",
+  "indigo",
+  "blue",
+  "light-blue",
+  "cyan",
+  "teal",
+  "green",
+  "light-green",
+  "lime",
+  "yellow",
+  "amber",
+  "orange",
+  "deep-orange",
+  "brown",
+  "grey",
+  "blue-grey",
+  "black",
+  "white",
+]);
+
+export function computeRgbColor(color: string): string {
+  if (THEME_COLORS.has(color)) {
+    return `var(--rgb-${color}-color)`;
+  }
+  if (color.startsWith("#")) {
+    try {
+      return hex2rgb(color).join(", ");
+    } catch (err) {
+      return "";
+    }
+  }
+  return color;
+}
--- a/src/common/const.ts
+++ b/src/common/const.ts
@ -13,6 +13,7 @@ import {
  mdiBullhorn,
  mdiCalendar,
  mdiCalendarClock,
+  mdiCarCoolantLevel,
  mdiCash,
  mdiClock,
  mdiCloudUpload,
@ -55,8 +56,11 @@ import {
  mdiThermostat,
  mdiTimerOutline,
  mdiVideo,
+  mdiWater,
  mdiWaterPercent,
  mdiWeatherCloudy,
+  mdiWeatherPouring,
+  mdiWeatherWindy,
  mdiWeight,
  mdiWhiteBalanceSunny,
  mdiWifi,
@ -143,6 +147,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
  pm25: mdiMolecule,
  power: mdiFlash,
  power_factor: mdiAngleAcute,
+  precipitation_intensity: mdiWeatherPouring,
  pressure: mdiGauge,
  reactive_power: mdiFlash,
  signal_strength: mdiWifi,
@ -152,8 +157,10 @@ export const FIXED_DEVICE_CLASS_ICONS = {
  timestamp: mdiClock,
  volatile_organic_compounds: mdiMolecule,
  voltage: mdiSineWave,
-  // volume: TBD, => no well matching icon found
+  volume: mdiCarCoolantLevel,
+  water: mdiWater,
  weight: mdiWeight,
+  wind_speed: mdiWeatherWindy,
 };

 /** Domains that have a state card. */
--- a/src/common/datetime/first_weekday.ts
+++ b/src/common/datetime/first_weekday.ts
@ -0,0 +1,29 @@
+import { getWeekStartByLocale } from "weekstart";
+import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+
+export const firstWeekdayIndex = (locale: FrontendLocaleData): number => {
+  if (locale.first_weekday === FirstWeekday.language) {
+    // @ts-ignore
+    if ("weekInfo" in Intl.Locale.prototype) {
+      // @ts-ignore
+      return new Intl.Locale(locale.language).weekInfo.firstDay % 7;
+    }
+    return getWeekStartByLocale(locale.language) % 7;
+  }
+  return weekdays.indexOf(locale.first_weekday);
+};
+
+export const firstWeekday = (locale: FrontendLocaleData) => {
+  const index = firstWeekdayIndex(locale);
+  return weekdays[index];
+};
--- a/src/common/datetime/format_duration.ts
+++ b/src/common/datetime/format_duration.ts
@ -10,7 +10,7 @@ export const formatDuration = (duration: HaDurationData) => {
  const ms = duration.milliseconds || 0;

  if (d > 0) {
-    return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
+    return `${d} day${d === 1 ? "" : "s"} ${h}:${leftPad(m)}:${leftPad(s)}`;
  }
  if (h > 0) {
    return `${h}:${leftPad(m)}:${leftPad(s)}`;
@ -19,10 +19,10 @@ export const formatDuration = (duration: HaDurationData) => {
    return `${m}:${leftPad(s)}`;
  }
  if (s > 0) {
-    return `${s} seconds`;
+    return `${s} second${s === 1 ? "" : "s"}`;
  }
  if (ms > 0) {
-    return `${ms} milliseconds`;
+    return `${ms} millisecond${ms === 1 ? "" : "s"}`;
  }
  return null;
 };
--- a/src/common/datetime/relative_time.ts
+++ b/src/common/datetime/relative_time.ts
@ -1,7 +1,7 @@
-import { selectUnit } from "@formatjs/intl-utils";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { polyfillsLoaded } from "../translations/localize";
+import { selectUnit } from "../util/select-unit";

 if (__BUILD__ === "latest" && polyfillsLoaded) {
  await polyfillsLoaded;
--- a/src/common/entity/color/alarm_control_panel_color.ts
+++ b/src/common/entity/color/alarm_control_panel_color.ts
@ -0,0 +1,18 @@
+export const alarmControlPanelColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "armed_away":
+    case "armed_vacation":
+    case "armed_home":
+    case "armed_night":
+    case "armed_custom_bypass":
+      return "alarm-armed";
+    case "pending":
+      return "alarm-pending";
+    case "triggered":
+      return "alarm-triggered";
+    case "disarmed":
+      return "alarm-disarmed";
+    default:
+      return undefined;
+  }
+};
--- a/src/common/entity/color/battery_color.ts
+++ b/src/common/entity/color/battery_color.ts
@ -0,0 +1,15 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const batteryStateColor = (stateObj: HassEntity) => {
+  const value = Number(stateObj.state);
+  if (isNaN(value)) {
+    return "sensor-battery-unknown";
+  }
+  if (value >= 70) {
+    return "sensor-battery-high";
+  }
+  if (value >= 30) {
+    return "sensor-battery-medium";
+  }
+  return "sensor-battery-low";
+};
--- a/src/common/entity/color/binary_sensor_color.ts
+++ b/src/common/entity/color/binary_sensor_color.ts
@ -0,0 +1,20 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+const NORMAL_DEVICE_CLASSES = new Set([
+  "battery_charging",
+  "connectivity",
+  "light",
+  "moving",
+  "plug",
+  "power",
+  "presence",
+  "running",
+]);
+
+export const binarySensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  return deviceClass && NORMAL_DEVICE_CLASSES.has(deviceClass)
+    ? "binary-sensor"
+    : "binary-sensor-danger";
+};
--- a/src/common/entity/color/climate_color.ts
+++ b/src/common/entity/color/climate_color.ts
@ -0,0 +1,18 @@
+export const climateColor = (state: string): string | undefined => {
+  switch (state) {
+    case "auto":
+      return "climate-auto";
+    case "cool":
+      return "climate-cool";
+    case "dry":
+      return "climate-dry";
+    case "fan_only":
+      return "climate-fan-only";
+    case "heat":
+      return "climate-heat";
+    case "heat_cool":
+      return "climate-heat-cool";
+    default:
+      return undefined;
+  }
+};
--- a/src/common/entity/color/cover_color.ts
+++ b/src/common/entity/color/cover_color.ts
@ -0,0 +1,10 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+const SECURE_DEVICE_CLASSES = new Set(["door", "gate", "garage", "window"]);
+
+export const coverColor = (stateObj?: HassEntity): string | undefined => {
+  const isSecure =
+    stateObj?.attributes.device_class &&
+    SECURE_DEVICE_CLASSES.has(stateObj.attributes.device_class);
+  return isSecure ? "cover-secure" : "cover";
+};
--- a/src/common/entity/color/lock_color.ts
+++ b/src/common/entity/color/lock_color.ts
@ -0,0 +1,15 @@
+export const lockColor = (state?: string): string | undefined => {
+  switch (state) {
+    case "locked":
+      return "lock-locked";
+    case "unlocked":
+      return "lock-unlocked";
+    case "jammed":
+      return "lock-jammed";
+    case "locking":
+    case "unlocking":
+      return "lock-pending";
+    default:
+      return undefined;
+  }
+};
--- a/src/common/entity/color/sensor_color.ts
+++ b/src/common/entity/color/sensor_color.ts
@ -0,0 +1,32 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { batteryStateColor } from "./battery_color";
+
+export const sensorColor = (stateObj: HassEntity): string | undefined => {
+  const deviceClass = stateObj?.attributes.device_class;
+
+  if (deviceClass === "battery") {
+    return batteryStateColor(stateObj);
+  }
+
+  switch (deviceClass) {
+    case "apparent_power":
+    case "current":
+    case "energy":
+    case "gas":
+    case "power_factor":
+    case "power":
+    case "reactive_power":
+    case "voltage":
+      return "sensor-energy";
+    case "temperature":
+      return "sensor-temperature";
+    case "humidity":
+      return "sensor-humidity";
+    case "illuminance":
+      return "sensor-illuminance";
+    case "moisture":
+      return "sensor-moisture";
+  }
+
+  return "sensor";
+};
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@ -9,7 +9,11 @@ import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+  isNumericFromAttributes,
+} from "../number/format_number";
 import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
 import { computeDomain } from "./compute_domain";
@ -70,7 +74,11 @@ export const computeStateDisplayFromEntityAttributes = (
      : attributes.unit_of_measurement === "%"
      ? blankBeforePercent(locale) + "%"
      : ` ${attributes.unit_of_measurement}`;
-    return `${formatNumber(state, locale)}${unit}`;
+    return `${formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    )}${unit}`;
  }

  const domain = computeDomain(entityId);
@ -143,7 +151,12 @@ export const computeStateDisplayFromEntityAttributes = (
    domain === "number" ||
    domain === "input_number"
  ) {
-    return formatNumber(state, locale);
+    // Format as an integer if the value and step are integers
+    return formatNumber(
+      state,
+      locale,
+      getNumberFormatOptions({ state, attributes } as HassEntity)
+    );
  }

  // state of button is a timestamp
@ -169,7 +182,8 @@ export const computeStateDisplayFromEntityAttributes = (
    // When update is not available and there is no latest_version show "Unavailable"
    return state === "on"
      ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
+          typeof attributes.in_progress === "number"
          ? localize("ui.card.update.installing_with_progress", {
              progress: attributes.in_progress,
            })
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@ -25,6 +25,8 @@ import {
  mdiPackageUp,
  mdiPowerPlug,
  mdiPowerPlugOff,
+  mdiAudioVideo,
+  mdiAudioVideoOff,
  mdiRestart,
  mdiSpeaker,
  mdiSpeakerOff,
@ -159,6 +161,13 @@ export const domainIconWithoutDefault = (
            default:
              return mdiTelevision;
          }
+        case "receiver":
+          switch (compareState) {
+            case "off":
+              return mdiAudioVideoOff;
+            default:
+              return mdiAudioVideo;
+          }
        default:
          switch (compareState) {
            case "playing":
--- a/src/common/entity/state_active.ts
+++ b/src/common/entity/state_active.ts
@ -0,0 +1,36 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { OFF_STATES } from "../../data/entity";
+import { computeDomain } from "./compute_domain";
+
+const NORMAL_UNKNOWN_DOMAIN = ["button", "input_button", "scene"];
+const NORMAL_OFF_DOMAIN = ["script"];
+
+export function stateActive(stateObj: HassEntity): boolean {
+  const domain = computeDomain(stateObj.entity_id);
+  const state = stateObj.state;
+
+  if (
+    OFF_STATES.includes(state) &&
+    !(NORMAL_UNKNOWN_DOMAIN.includes(domain) && state === "unknown") &&
+    !(NORMAL_OFF_DOMAIN.includes(domain) && state === "script")
+  ) {
+    return false;
+  }
+
+  // Custom cases
+  switch (domain) {
+    case "cover":
+      return state === "open" || state === "opening";
+    case "device_tracker":
+    case "person":
+      return state !== "not_home";
+    case "media-player":
+      return state !== "idle";
+    case "vacuum":
+      return state === "on" || state === "cleaning";
+    case "plant":
+      return state === "problem";
+    default:
+      return true;
+  }
+}
--- a/src/common/entity/state_color.ts
+++ b/src/common/entity/state_color.ts
@ -0,0 +1,76 @@
+/** Return an color representing a state. */
+import { HassEntity } from "home-assistant-js-websocket";
+import { UpdateEntity, updateIsInstalling } from "../../data/update";
+import { alarmControlPanelColor } from "./color/alarm_control_panel_color";
+import { binarySensorColor } from "./color/binary_sensor_color";
+import { climateColor } from "./color/climate_color";
+import { coverColor } from "./color/cover_color";
+import { lockColor } from "./color/lock_color";
+import { sensorColor } from "./color/sensor_color";
+import { computeDomain } from "./compute_domain";
+import { stateActive } from "./state_active";
+
+export const stateColorCss = (stateObj?: HassEntity) => {
+  if (!stateObj || !stateActive(stateObj)) {
+    return `var(--rgb-disabled-color)`;
+  }
+
+  const color = stateColor(stateObj);
+
+  if (color) {
+    return `var(--rgb-state-${color}-color)`;
+  }
+
+  return `var(--rgb-primary-color)`;
+};
+
+export const stateColor = (stateObj: HassEntity) => {
+  const state = stateObj.state;
+  const domain = computeDomain(stateObj.entity_id);
+
+  switch (domain) {
+    case "alarm_control_panel":
+      return alarmControlPanelColor(state);
+
+    case "binary_sensor":
+      return binarySensorColor(stateObj);
+
+    case "cover":
+      return coverColor(stateObj);
+
+    case "climate":
+      return climateColor(state);
+
+    case "lock":
+      return lockColor(state);
+
+    case "light":
+      return "light";
+
+    case "humidifier":
+      return "humidifier";
+
+    case "media_player":
+      return "media-player";
+
+    case "person":
+    case "device_tracker":
+      return "person";
+
+    case "sensor":
+      return sensorColor(stateObj);
+
+    case "vacuum":
+      return "vacuum";
+
+    case "sun":
+      return state === "above_horizon" ? "sun-day" : "sun-night";
+
+    case "update":
+      return updateIsInstalling(stateObj as UpdateEntity)
+        ? "update-installing"
+        : "update";
+  }
+
+  return undefined;
+};
--- a/src/common/integrations/protocolIntegrationPicked.ts
+++ b/src/common/integrations/protocolIntegrationPicked.ts
@ -1,5 +1,7 @@
 import { html } from "lit";
 import { getConfigEntries } from "../../data/config_entries";
+import { domainToName } from "../../data/integration";
+import { getIntegrationDescriptions } from "../../data/integrations";
 import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
@ -11,20 +13,38 @@ import { navigate } from "../navigate";
 export const protocolIntegrationPicked = async (
  element: HTMLElement,
  hass: HomeAssistant,
-  slug: string
+  domain: string,
+  options?: { brand?: string; domain?: string }
 ) => {
-  if (slug === "zwave_js") {
+  if (options?.domain) {
+    const localize = await hass.loadBackendTranslation("title", options.domain);
+    options.domain = domainToName(localize, options.domain);
+  }
+
+  if (options?.brand) {
+    const integrationDescriptions = await getIntegrationDescriptions(hass);
+    options.brand =
+      integrationDescriptions.core.integration[options.brand]?.name ||
+      options.brand;
+  }
+
+  if (domain === "zwave_js") {
    const entries = await getConfigEntries(hass, {
-      domain: "zwave_js",
+      domain,
    });

    if (!isComponentLoaded(hass, "zwave_js") || !entries.length) {
      // If the component isn't loaded, ask them to load the integration first
      showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Z-Wave" }
+        ),
        text: hass.localize(
          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
          {
            integration: "Z-Wave",
+            brand: options?.brand || options?.domain || "Z-Wave",
            supported_hardware_link: html`<a
              href=${documentationUrl(hass, "/docs/z-wave/controllers")}
              target="_blank"
@ -50,14 +70,23 @@ export const protocolIntegrationPicked = async (
    showZWaveJSAddNodeDialog(element, {
      entry_id: entries[0].entry_id,
    });
-  } else if (slug === "zha") {
-    // If the component isn't loaded, ask them to load the integration first
-    if (!isComponentLoaded(hass, "zha")) {
+  } else if (domain === "zha") {
+    const entries = await getConfigEntries(hass, {
+      domain,
+    });
+
+    if (!isComponentLoaded(hass, "zha") || !entries.length) {
+      // If the component isn't loaded, ask them to load the integration first
      showConfirmationDialog(element, {
+        title: hass.localize(
+          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee_title",
+          { integration: "Zigbee" }
+        ),
        text: hass.localize(
          "ui.panel.config.integrations.config_flow.missing_zwave_zigbee",
          {
            integration: "Zigbee",
+            brand: options?.brand || options?.domain || "Z-Wave",
            supported_hardware_link: html`<a
              href=${documentationUrl(
                hass,
--- a/src/common/number/format_number.ts
+++ b/src/common/number/format_number.ts
@ -1,4 +1,7 @@
-import { HassEntity } from "home-assistant-js-websocket";
+import {
+  HassEntity,
+  HassEntityAttributeBase,
+} from "home-assistant-js-websocket";
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 import { round } from "./round";

@ -9,9 +12,9 @@ import { round } from "./round";
 export const isNumericState = (stateObj: HassEntity): boolean =>
  isNumericFromAttributes(stateObj.attributes);

-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+export const isNumericFromAttributes = (
+  attributes: HassEntityAttributeBase
+): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;

 export const numberFormatToLocale = (
  localeOptions: FrontendLocaleData
@ -34,7 +37,7 @@ export const numberFormatToLocale = (
 * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
 *
 * @param num The number to format
- * @param locale The user-selected language and number format, from `hass.locale`
+ * @param localeOptions The user-selected language and formatting, from `hass.locale`
 * @param options Intl.NumberFormatOptions to use
 */
 export const formatNumber = (
@ -81,12 +84,29 @@ export const formatNumber = (
  }`;
 };

+/**
+ * Checks if the current entity state should be formatted as an integer based on the `state` and `step` attribute and returns the appropriate `Intl.NumberFormatOptions` object with `maximumFractionDigits` set
+ * @param entityState The state object of the entity
+ * @returns An `Intl.NumberFormatOptions` object with `maximumFractionDigits` set to 0, or `undefined`
+ */
+export const getNumberFormatOptions = (
+  entityState: HassEntity
+): Intl.NumberFormatOptions | undefined => {
+  if (
+    Number.isInteger(Number(entityState.attributes?.step)) &&
+    Number.isInteger(Number(entityState.state))
+  ) {
+    return { maximumFractionDigits: 0 };
+  }
+  return undefined;
+};
+
 /**
 * Generates default options for Intl.NumberFormat
 * @param num The number to be formatted
 * @param options The Intl.NumberFormatOptions that should be included in the returned options
 */
-const getDefaultFormatOptions = (
+export const getDefaultFormatOptions = (
  num: string | number,
  options?: Intl.NumberFormatOptions
 ): Intl.NumberFormatOptions => {
@ -102,7 +122,8 @@ const getDefaultFormatOptions = (
  // Keep decimal trailing zeros if they are present in a string numeric value
  if (
    !options ||
-    (!options.minimumFractionDigits && !options.maximumFractionDigits)
+    (options.minimumFractionDigits === undefined &&
+      options.maximumFractionDigits === undefined)
  ) {
    const digits = num.indexOf(".") > -1 ? num.split(".")[1].length : 0;
    defaultOptions.minimumFractionDigits = digits;
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@ -22,9 +22,7 @@ export type LocalizeKeys =
  | `ui.components.selectors.file.${string}`
  | `ui.dialogs.entity_registry.editor.${string}`
  | `ui.dialogs.more_info_control.vacuum.${string}`
-  | `ui.dialogs.options_flow.loading.${string}`
  | `ui.dialogs.quick-bar.commands.${string}`
-  | `ui.dialogs.repair_flow.loading.${string}`
  | `ui.dialogs.unhealthy.reason.${string}`
  | `ui.dialogs.unsupported.reason.${string}`
  | `ui.panel.config.${string}.${"caption" | "description"}`
@ -34,7 +32,6 @@ export type LocalizeKeys =
  | `ui.panel.config.energy.${string}`
  | `ui.panel.config.helpers.${string}`
  | `ui.panel.config.info.${string}`
-  | `ui.panel.config.integrations.${string}`
  | `ui.panel.config.logs.${string}`
  | `ui.panel.config.lovelace.${string}`
  | `ui.panel.config.network.${string}`
@ -42,7 +39,6 @@ export type LocalizeKeys =
  | `ui.panel.config.url.${string}`
  | `ui.panel.config.zha.${string}`
  | `ui.panel.config.zwave_js.${string}`
-  | `ui.panel.developer-tools.tabs.${string}`
  | `ui.panel.lovelace.card.${string}`
  | `ui.panel.lovelace.editor.${string}`
  | `ui.panel.page-authorize.form.${string}`
--- a/src/common/util/select-unit.ts
+++ b/src/common/util/select-unit.ts
@ -0,0 +1,97 @@
+export type Unit =
+  | "second"
+  | "minute"
+  | "hour"
+  | "day"
+  | "week"
+  | "month"
+  | "quarter"
+  | "year";
+
+const MS_PER_SECOND = 1e3;
+const SECS_PER_MIN = 60;
+const SECS_PER_HOUR = SECS_PER_MIN * 60;
+const SECS_PER_DAY = SECS_PER_HOUR * 24;
+const SECS_PER_WEEK = SECS_PER_DAY * 7;
+
+// Adapted from https://github.com/formatjs/formatjs/blob/186cef62f980ec66252ee232f438a42d0b51b9f9/packages/intl-utils/src/diff.ts
+export function selectUnit(
+  from: Date | number,
+  to: Date | number = Date.now(),
+  thresholds: Partial<Thresholds> = {}
+): { value: number; unit: Unit } {
+  const resolvedThresholds: Thresholds = {
+    ...DEFAULT_THRESHOLDS,
+    ...(thresholds || {}),
+  };
+
+  const secs = (+from - +to) / MS_PER_SECOND;
+  if (Math.abs(secs) < resolvedThresholds.second) {
+    return {
+      value: Math.round(secs),
+      unit: "second",
+    };
+  }
+
+  const mins = secs / SECS_PER_MIN;
+  if (Math.abs(mins) < resolvedThresholds.minute) {
+    return {
+      value: Math.round(mins),
+      unit: "minute",
+    };
+  }
+
+  const hours = secs / SECS_PER_HOUR;
+  if (Math.abs(hours) < resolvedThresholds.hour) {
+    return {
+      value: Math.round(hours),
+      unit: "hour",
+    };
+  }
+
+  const days = secs / SECS_PER_DAY;
+  if (Math.abs(days) < resolvedThresholds.day) {
+    return {
+      value: Math.round(days),
+      unit: "day",
+    };
+  }
+
+  const weeks = secs / SECS_PER_WEEK;
+  if (Math.abs(weeks) < resolvedThresholds.week) {
+    return {
+      value: Math.round(weeks),
+      unit: "week",
+    };
+  }
+
+  const fromDate = new Date(from);
+  const toDate = new Date(to);
+  const years = fromDate.getFullYear() - toDate.getFullYear();
+  const months = years * 12 + fromDate.getMonth() - toDate.getMonth();
+  if (Math.round(Math.abs(months)) < resolvedThresholds.month) {
+    return {
+      value: Math.round(months),
+      unit: "month",
+    };
+  }
+
+  return {
+    value: Math.round(years),
+    unit: "year",
+  };
+}
+
+type Thresholds = Record<
+  "second" | "minute" | "hour" | "day" | "week" | "month",
+  number
+>;
+
+export const DEFAULT_THRESHOLDS: Thresholds = {
+  second: 45, // seconds to minute
+  minute: 45, // minutes to hour
+  hour: 22, // hour to day
+  day: 5, // day to week
+  week: 4, // week to months
+  month: 11, // month to years
+};
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@ -14,6 +14,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
      <ha-progress-button
        id="progress"
        progress="[[progress]]"
+        disabled="[[disabled]]"
        on-click="buttonTapped"
        tabindex="0"
        ><slot></slot
@ -48,6 +49,10 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
      confirmation: {
        type: String,
      },
+
+      disabled: {
+        type: Boolean,
+      },
    };
  }

--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@ -118,101 +118,9 @@ export class StateHistoryChartTimeline extends LitElement {

  public willUpdate(changedProps: PropertyValues) {
    if (!this.hasUpdated) {
-      const narrow = this.narrow;
-      this._chartOptions = {
-        maintainAspectRatio: false,
-        parsing: false,
-        animation: false,
-        scales: {
-          x: {
-            type: "timeline",
-            position: "bottom",
-            adapters: {
-              date: {
-                locale: this.hass.locale,
-              },
-            },
-            suggestedMin: this.startTime,
-            suggestedMax: this.endTime,
-            ticks: {
-              autoSkip: true,
-              maxRotation: 0,
-              sampleSize: 5,
-              autoSkipPadding: 20,
-              major: {
-                enabled: true,
-              },
-              font: (context) =>
-                context.tick && context.tick.major
-                  ? ({ weight: "bold" } as any)
-                  : {},
-            },
-            grid: {
-              offset: false,
-            },
-            time: {
-              tooltipFormat: "datetimeseconds",
-            },
-          },
-          y: {
-            type: "category",
-            barThickness: 20,
-            offset: true,
-            grid: {
-              display: false,
-              drawBorder: false,
-              drawTicks: false,
-            },
-            ticks: {
-              display:
-                this.chunked || !this.isSingleDevice || this.data.length !== 1,
-            },
-            afterSetDimensions: (y) => {
-              y.maxWidth = y.chart.width * 0.18;
-            },
-            afterFit: (scaleInstance) => {
-              if (this.chunked) {
-                // ensure all the chart labels are the same width
-                scaleInstance.width = narrow ? 105 : 185;
-              }
-            },
-            position: computeRTL(this.hass) ? "right" : "left",
-          },
-        },
-        plugins: {
-          tooltip: {
-            mode: "nearest",
-            callbacks: {
-              title: (context) =>
-                context![0].chart!.data!.labels![
-                  context[0].datasetIndex
-                ] as string,
-              beforeBody: (context) => context[0].dataset.label || "",
-              label: (item) => {
-                const d = item.dataset.data[item.dataIndex] as TimeLineData;
-                return [
-                  d.label || "",
-                  formatDateTimeWithSeconds(d.start, this.hass.locale),
-                  formatDateTimeWithSeconds(d.end, this.hass.locale),
-                ];
-              },
-              labelColor: (item) => ({
-                borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
-                  .color!,
-                backgroundColor: (
-                  item.dataset.data[item.dataIndex] as TimeLineData
-                ).color!,
-              }),
-            },
-          },
-          filler: {
-            propagate: true,
-          },
-        },
-        // @ts-expect-error
-        locale: numberFormatToLocale(this.hass.locale),
-      };
+      this._createOptions();
    }
+
    if (
      changedProps.has("data") ||
      this._chartTime <
@ -222,6 +130,107 @@ export class StateHistoryChartTimeline extends LitElement {
      // so the X axis grows even if there is no new data
      this._generateData();
    }
+
+    if (changedProps.has("startTime") || changedProps.has("endTime")) {
+      this._createOptions();
+    }
+  }
+
+  private _createOptions() {
+    const narrow = this.narrow;
+    this._chartOptions = {
+      maintainAspectRatio: false,
+      parsing: false,
+      animation: false,
+      scales: {
+        x: {
+          type: "timeline",
+          position: "bottom",
+          adapters: {
+            date: {
+              locale: this.hass.locale,
+            },
+          },
+          suggestedMin: this.startTime,
+          suggestedMax: this.endTime,
+          ticks: {
+            autoSkip: true,
+            maxRotation: 0,
+            sampleSize: 5,
+            autoSkipPadding: 20,
+            major: {
+              enabled: true,
+            },
+            font: (context) =>
+              context.tick && context.tick.major
+                ? ({ weight: "bold" } as any)
+                : {},
+          },
+          grid: {
+            offset: false,
+          },
+          time: {
+            tooltipFormat: "datetimeseconds",
+          },
+        },
+        y: {
+          type: "category",
+          barThickness: 20,
+          offset: true,
+          grid: {
+            display: false,
+            drawBorder: false,
+            drawTicks: false,
+          },
+          ticks: {
+            display:
+              this.chunked || !this.isSingleDevice || this.data.length !== 1,
+          },
+          afterSetDimensions: (y) => {
+            y.maxWidth = y.chart.width * 0.18;
+          },
+          afterFit: (scaleInstance) => {
+            if (this.chunked) {
+              // ensure all the chart labels are the same width
+              scaleInstance.width = narrow ? 105 : 185;
+            }
+          },
+          position: computeRTL(this.hass) ? "right" : "left",
+        },
+      },
+      plugins: {
+        tooltip: {
+          mode: "nearest",
+          callbacks: {
+            title: (context) =>
+              context![0].chart!.data!.labels![
+                context[0].datasetIndex
+              ] as string,
+            beforeBody: (context) => context[0].dataset.label || "",
+            label: (item) => {
+              const d = item.dataset.data[item.dataIndex] as TimeLineData;
+              return [
+                d.label || "",
+                formatDateTimeWithSeconds(d.start, this.hass.locale),
+                formatDateTimeWithSeconds(d.end, this.hass.locale),
+              ];
+            },
+            labelColor: (item) => ({
+              borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
+                .color!,
+              backgroundColor: (
+                item.dataset.data[item.dataIndex] as TimeLineData
+              ).color!,
+            }),
+          },
+        },
+        filler: {
+          propagate: true,
+        },
+      },
+      // @ts-expect-error
+      locale: numberFormatToLocale(this.hass.locale),
+    };
  }

  private _generateData() {
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@ -724,6 +724,11 @@ export class HaDataTable extends LitElement {
          width: 54px;
        }

+        .mdc-data-table__cell--icon img {
+          width: 24px;
+          height: 24px;
+        }
+
        .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
          text-align: center;
        }
@ -740,6 +745,7 @@ export class HaDataTable extends LitElement {
        }

        .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child img,
        .mdc-data-table__cell--icon:first-child ha-state-icon,
        .mdc-data-table__cell--icon:first-child ha-svg-icon {
          margin-left: 8px;
@ -748,7 +754,12 @@ export class HaDataTable extends LitElement {
        :host([dir="rtl"])
          .mdc-data-table__cell--icon:first-child
          ha-state-icon,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-svg-icon
+          :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          img {
          margin-left: auto;
          margin-right: 8px;
        }
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@ -33,6 +33,10 @@ const Component = Vue.extend({
        return new Date();
      },
    },
+    firstDay: {
+      type: Number,
+      default: 1,
+    },
  },
  render(createElement) {
    // @ts-ignore
@ -48,6 +52,10 @@ const Component = Vue.extend({
        disabled: this.disabled,
        // @ts-ignore
        ranges: this.ranges ? {} : false,
+        "locale-data": {
+          // @ts-ignore
+          firstDay: this.firstDay,
+        },
      },
      model: {
        value: {
@ -103,14 +111,14 @@ class DateRangePickerElement extends WrappedElement {
          .daterangepicker {
            left: 0px !important;
            top: auto;
+            box-shadow: var(--ha-card-box-shadow, none);
            background-color: var(--card-background-color);
-            border: none;
-            border-radius: var(--ha-card-border-radius, 4px);
-            box-shadow: var(
-              --ha-card-box-shadow,
-              0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-              0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-              0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+            border-radius: var(--ha-card-border-radius, 12px);
+            border-width: var(--ha-card-border-width, 1px);
+            border-style: solid;
+            border-color: var(
+              --ha-card-border-color,
+              var(--divider-color, #e0e0e0)
            );
            color: var(--primary-text-color);
            min-width: initial !important;
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@ -221,12 +221,14 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
    }
  );

-  public open() {
-    this.comboBox?.open();
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
  }

-  public focus() {
-    this.comboBox?.focus();
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
  }

  public hassSubscribe(): UnsubscribeFunc[] {
@ -246,7 +248,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
  protected updated(changedProps: PropertyValues) {
    if (
      (!this._init && this.devices && this.areas && this.entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
    ) {
      this._init = true;
      (this.comboBox as any).items = this._getDevices(
@ -262,9 +264,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
  }

  protected render(): TemplateResult {
-    if (!this.devices || !this.areas || !this.entities) {
-      return html``;
-    }
    return html`
      <ha-combo-box
        .hass=${this.hass}
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@ -107,16 +107,14 @@ export class HaEntityPicker extends LitElement {

  @query("ha-combo-box", true) public comboBox!: HaComboBox;

-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
  }

-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
  }

  private _initedStates = false;
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@ -16,6 +16,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import {
  formatNumber,
+  getNumberFormatOptions,
  isNumericState,
 } from "../../common/number/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
@ -149,7 +150,11 @@ export class HaStateLabelBadge extends LitElement {
          entityState.state === UNAVAILABLE
          ? "—"
          : isNumericState(entityState)
-          ? formatNumber(entityState.state, this.hass!.locale)
+          ? formatNumber(
+              entityState.state,
+              this.hass!.locale,
+              getNumberFormatOptions(entityState)
+            )
          : computeStateDisplay(
              this.hass!.localize,
              entityState,
--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@ -52,6 +52,13 @@ export class HaStatisticPicker extends LitElement {
  @property({ attribute: "include-unit-class" })
  public includeUnitClass?: string | string[];

+  /**
+   * Show only statistics with these device classes.
+   * @attr include-device-class
+   */
+  @property({ attribute: "include-device-class" })
+  public includeDeviceClass?: string | string[];
+
  /**
   * Show only statistics on entities.
   * @type {Boolean}
@ -94,6 +101,7 @@ export class HaStatisticPicker extends LitElement {
      statisticIds: StatisticsMetaData[],
      includeStatisticsUnitOfMeasurement?: string | string[],
      includeUnitClass?: string | string[],
+      includeDeviceClass?: string | string[],
      entitiesOnly?: boolean
    ): Array<{ id: string; name: string; state?: HassEntity }> => {
      if (!statisticIds.length) {
@ -122,6 +130,19 @@ export class HaStatisticPicker extends LitElement {
          includeUnitClasses.includes(meta.unit_class)
        );
      }
+      if (includeDeviceClass) {
+        const includeDeviceClasses: (string | null)[] =
+          ensureArray(includeDeviceClass);
+        statisticIds = statisticIds.filter((meta) => {
+          const stateObj = this.hass.states[meta.statistic_id];
+          if (!stateObj) {
+            return true;
+          }
+          return includeDeviceClasses.includes(
+            stateObj.attributes.device_class || ""
+          );
+        });
+      }

      const output: Array<{
        id: string;
@ -195,6 +216,7 @@ export class HaStatisticPicker extends LitElement {
          this.statisticIds!,
          this.includeStatisticsUnitOfMeasurement,
          this.includeUnitClass,
+          this.includeDeviceClass,
          this.entitiesOnly
        );
      } else {
@ -203,6 +225,7 @@ export class HaStatisticPicker extends LitElement {
            this.statisticIds!,
            this.includeStatisticsUnitOfMeasurement,
            this.includeUnitClass,
+            this.includeDeviceClass,
            this.entitiesOnly
          );
        });
--- a/src/components/entity/ha-statistics-picker.ts
+++ b/src/components/entity/ha-statistics-picker.ts
@ -38,6 +38,13 @@ class HaStatisticsPicker extends LitElement {
  @property({ attribute: "include-unit-class" })
  public includeUnitClass?: string | string[];

+  /**
+   * Show only statistics with these device classes.
+   * @attr include-device-class
+   */
+  @property({ attribute: "include-device-class" })
+  public includeDeviceClass?: string | string[];
+
  /**
   * Ignore filtering of statistics type and units when only a single statistic is selected.
   * @type {boolean}
@ -92,6 +99,7 @@ class HaStatisticsPicker extends LitElement {
          .includeStatisticsUnitOfMeasurement=${this
            .includeStatisticsUnitOfMeasurement}
          .includeUnitClass=${this.includeUnitClass}
+          .includeDeviceClass=${this.includeDeviceClass}
          .statisticTypes=${this.statisticTypes}
          .statisticIds=${this.statisticIds}
          .label=${this.pickStatisticLabel}
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@ -116,16 +116,14 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
    ];
  }

-  public open() {
-    this.updateComplete.then(() => {
-      this.comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    await this.comboBox?.open();
  }

-  public focus() {
-    this.updateComplete.then(() => {
-      this.comboBox?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this.comboBox?.focus();
  }

  private _getAreas = memoizeOne(
@ -290,7 +288,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
  protected updated(changedProps: PropertyValues) {
    if (
      (!this._init && this._devices && this._areas && this._entities) ||
-      (changedProps.has("_opened") && this._opened)
+      (this._init && changedProps.has("_opened") && this._opened)
    ) {
      this._init = true;
      (this.comboBox as any).items = this._getAreas(
@ -308,9 +306,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
  }

  protected render(): TemplateResult {
-    if (!this._devices || !this._areas || !this._entities) {
-      return html``;
-    }
    return html`
      <ha-combo-box
        .hass=${this.hass}
--- a/src/components/ha-bar-slider.ts
+++ b/src/components/ha-bar-slider.ts
@ -0,0 +1,426 @@
+import "hammerjs";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../common/dom/fire_event";
+
+declare global {
+  interface HASSDomEvents {
+    "slider-moved": { value?: number };
+  }
+}
+
+const A11Y_KEY_CODES = new Set([
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowDown",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End",
+]);
+
+const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
+  if (vertical) {
+    const y = e.center.y;
+    const offset = e.target.getBoundingClientRect().top;
+    const total = e.target.clientHeight;
+    return Math.max(Math.min(1, 1 - (y - offset) / total), 0);
+  }
+  const x = e.center.x;
+  const offset = e.target.getBoundingClientRect().left;
+  const total = e.target.clientWidth;
+  return Math.max(Math.min(1, (x - offset) / total), 0);
+};
+
+@customElement("ha-bar-slider")
+export class HaBarSlider extends LitElement {
+  @property({ type: Boolean })
+  public disabled = false;
+
+  @property()
+  public mode?: "start" | "end" | "indicator" = "start";
+
+  @property({ type: Boolean })
+  public vertical = false;
+
+  @property({ type: Number })
+  public value?: number;
+
+  @property({ type: Number })
+  public step = 1;
+
+  @property({ type: Number })
+  public min = 0;
+
+  @property({ type: Number })
+  public max = 100;
+
+  @property()
+  public label?: string;
+
+  private _mc?: HammerManager;
+
+  @property({ type: Boolean, reflect: true })
+  public pressed = false;
+
+  valueToPercentage(value: number) {
+    return (value - this.min) / (this.max - this.min);
+  }
+
+  percentageToValue(value: number) {
+    return (this.max - this.min) * value + this.min;
+  }
+
+  steppedValue(value: number) {
+    return Math.round(value / this.step) * this.step;
+  }
+
+  boundedValue(value: number) {
+    return Math.min(Math.max(value, this.min), this.max);
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    this.setupListeners();
+    this.setAttribute("role", "slider");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const valuenow = this.steppedValue(this.value ?? 0);
+      this.setAttribute("aria-valuenow", valuenow.toString());
+    }
+    if (changedProps.has("min")) {
+      this.setAttribute("aria-valuemin", this.min.toString());
+    }
+    if (changedProps.has("max")) {
+      this.setAttribute("aria-valuemax", this.max.toString());
+    }
+    if (changedProps.has("vertical")) {
+      const orientation = this.vertical ? "vertical" : "horizontal";
+      this.setAttribute("aria-orientation", orientation);
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setupListeners();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.destroyListeners();
+  }
+
+  @query("#slider")
+  private slider;
+
+  setupListeners() {
+    if (this.slider && !this._mc) {
+      this._mc = new Hammer.Manager(this.slider, {
+        touchAction: this.vertical ? "pan-x" : "pan-y",
+      });
+      this._mc.add(
+        new Hammer.Pan({
+          threshold: 10,
+          direction: Hammer.DIRECTION_ALL,
+          enable: true,
+        })
+      );
+
+      this._mc.add(new Hammer.Tap({ event: "singletap" }));
+
+      let savedValue;
+      this._mc.on("panstart", () => {
+        if (this.disabled) return;
+        this.pressed = true;
+        savedValue = this.value;
+      });
+      this._mc.on("pancancel", () => {
+        if (this.disabled) return;
+        this.pressed = false;
+        this.value = savedValue;
+      });
+      this._mc.on("panmove", (e) => {
+        if (this.disabled) return;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.percentageToValue(percentage);
+        const value = this.steppedValue(this.value);
+        fireEvent(this, "slider-moved", { value });
+      });
+      this._mc.on("panend", (e) => {
+        if (this.disabled) return;
+        this.pressed = false;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.steppedValue(this.percentageToValue(percentage));
+        fireEvent(this, "slider-moved", { value: undefined });
+        fireEvent(this, "value-changed", { value: this.value });
+      });
+
+      this._mc.on("singletap", (e) => {
+        if (this.disabled) return;
+        const percentage = getPercentageFromEvent(e, this.vertical);
+        this.value = this.steppedValue(this.percentageToValue(percentage));
+        fireEvent(this, "value-changed", { value: this.value });
+      });
+
+      this.addEventListener("keydown", this._handleKeyDown);
+      this.addEventListener("keyup", this._handleKeyUp);
+    }
+  }
+
+  destroyListeners() {
+    if (this._mc) {
+      this._mc.destroy();
+      this._mc = undefined;
+    }
+    this.removeEventListener("keydown", this._handleKeyDown);
+    this.removeEventListener("keyup", this._handleKeyDown);
+  }
+
+  private get _tenPercentStep() {
+    return Math.max(this.step, (this.max - this.min) / 10);
+  }
+
+  _handleKeyDown(e: KeyboardEvent) {
+    if (!A11Y_KEY_CODES.has(e.code)) return;
+    e.preventDefault();
+    switch (e.code) {
+      case "ArrowRight":
+      case "ArrowUp":
+        this.value = this.boundedValue((this.value ?? 0) + this.step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        this.value = this.boundedValue((this.value ?? 0) - this.step);
+        break;
+      case "PageUp":
+        this.value = this.steppedValue(
+          this.boundedValue((this.value ?? 0) + this._tenPercentStep)
+        );
+        break;
+      case "PageDown":
+        this.value = this.steppedValue(
+          this.boundedValue((this.value ?? 0) - this._tenPercentStep)
+        );
+        break;
+      case "Home":
+        this.value = this.min;
+        break;
+      case "End":
+        this.value = this.max;
+        break;
+    }
+    fireEvent(this, "slider-moved", { value: this.value });
+  }
+
+  _handleKeyUp(e: KeyboardEvent) {
+    if (!A11Y_KEY_CODES.has(e.code)) return;
+    e.preventDefault();
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        id="slider"
+        class="slider"
+        style=${styleMap({
+          "--value": `${this.valueToPercentage(this.value ?? 0)}`,
+        })}
+      >
+        <div class="slider-track-background"></div>
+        ${this.mode === "indicator"
+          ? html`
+              <div
+                class=${classMap({
+                  "slider-track-indicator": true,
+                  vertical: this.vertical,
+                })}
+              ></div>
+            `
+          : html`
+              <div
+                class=${classMap({
+                  "slider-track-bar": true,
+                  vertical: this.vertical,
+                  [this.mode ?? "start"]: true,
+                })}
+              ></div>
+            `}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+        --slider-bar-color: rgb(var(--rgb-primary-color));
+        --slider-bar-background: rgba(var(--rgb-disabled-color), 0.2);
+        --slider-bar-thickness: 40px;
+        --slider-bar-border-radius: 12px;
+        height: var(--slider-bar-thickness);
+        width: 100%;
+      }
+      :host([vertical]) {
+        width: var(--slider-bar-thickness);
+        height: 100%;
+      }
+      .slider {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        border-radius: var(--slider-bar-border-radius);
+        transform: translateZ(0);
+        overflow: hidden;
+        cursor: pointer;
+      }
+      .slider * {
+        pointer-events: none;
+      }
+      .slider .slider-track-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background: var(--slider-bar-background);
+      }
+      .slider .slider-track-bar {
+        --border-radius: calc(var(--slider-bar-border-radius) / 2);
+        --handle-size: 4px;
+        --handle-margin: calc(var(--slider-bar-thickness) / 8);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: var(--slider-bar-color);
+        transition: transform 180ms ease-in-out;
+      }
+      .slider .slider-track-bar::after {
+        display: block;
+        content: "";
+        position: absolute;
+        margin: auto;
+        border-radius: var(--handle-size);
+        background-color: white;
+      }
+      .slider .slider-track-bar {
+        top: 0;
+        left: 0;
+        transform: translate3d(calc((var(--value, 0) - 1) * 100%), 0, 0);
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+      }
+      .slider .slider-track-bar:after {
+        top: 0;
+        bottom: 0;
+        right: var(--handle-margin);
+        height: 50%;
+        width: var(--handle-size);
+      }
+      .slider .slider-track-bar.end {
+        right: 0;
+        left: initial;
+        transform: translate3d(calc(var(--value, 0) * 100%), 0, 0);
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+      }
+      .slider .slider-track-bar.end::after {
+        right: initial;
+        left: var(--handle-margin);
+      }
+
+      .slider .slider-track-bar.vertical {
+        bottom: 0;
+        left: 0;
+        transform: translate3d(0, calc((1 - var(--value, 0)) * 100%), 0);
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+      }
+      .slider .slider-track-bar.vertical:after {
+        top: var(--handle-margin);
+        right: 0;
+        left: 0;
+        bottom: initial;
+        width: 50%;
+        height: var(--handle-size);
+      }
+      .slider .slider-track-bar.vertical.end {
+        top: 0;
+        bottom: initial;
+        transform: translate3d(0, calc((0 - var(--value, 0)) * 100%), 0);
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      }
+      .slider .slider-track-bar.vertical.end::after {
+        top: initial;
+        bottom: var(--handle-margin);
+      }
+
+      .slider .slider-track-indicator:after {
+        display: block;
+        content: "";
+        background-color: rgb(var(--rgb-secondary-text-color));
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+        border-radius: var(--handle-size);
+      }
+
+      .slider .slider-track-indicator {
+        --indicator-size: calc(var(--slider-bar-thickness) / 4);
+        --handle-size: 4px;
+        position: absolute;
+        background-color: white;
+        border-radius: var(--handle-size);
+        transition: left 180ms ease-in-out, bottom 180ms ease-in-out;
+        top: 0;
+        bottom: 0;
+        left: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        width: var(--indicator-size);
+      }
+      .slider .slider-track-indicator:after {
+        height: 50%;
+        width: var(--handle-size);
+      }
+
+      .slider .slider-track-indicator.vertical {
+        top: initial;
+        right: 0;
+        left: 0;
+        bottom: calc(var(--value, 0) * (100% - var(--indicator-size)));
+        height: var(--indicator-size);
+        width: 100%;
+      }
+      .slider .slider-track-indicator.vertical:after {
+        height: var(--handle-size);
+        width: 50%;
+      }
+
+      :host([pressed]) .slider-track-bar,
+      :host([pressed]) .slider-track-indicator {
+        transition: none;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-bar-slider": HaBarSlider;
+  }
+}
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@ -139,7 +139,7 @@ export class HaBaseTimeInput extends LitElement {
                .value=${this.days.toFixed()}
                .label=${this.dayLabel}
                name="days"
-                @input=${this._valueChanged}
+                @change=${this._valueChanged}
                @focusin=${this._onFocus}
                no-spinner
                .required=${this.required}
@ -160,7 +160,7 @@ export class HaBaseTimeInput extends LitElement {
          .value=${this.hours.toFixed()}
          .label=${this.hourLabel}
          name="hours"
-          @input=${this._valueChanged}
+          @change=${this._valueChanged}
          @focusin=${this._onFocus}
          no-spinner
          .required=${this.required}
@ -179,7 +179,7 @@ export class HaBaseTimeInput extends LitElement {
          inputmode="numeric"
          .value=${this._formatValue(this.minutes)}
          .label=${this.minLabel}
-          @input=${this._valueChanged}
+          @change=${this._valueChanged}
          @focusin=${this._onFocus}
          name="minutes"
          no-spinner
@ -200,7 +200,7 @@ export class HaBaseTimeInput extends LitElement {
              inputmode="numeric"
              .value=${this._formatValue(this.seconds)}
              .label=${this.secLabel}
-              @input=${this._valueChanged}
+              @change=${this._valueChanged}
              @focusin=${this._onFocus}
              name="seconds"
              no-spinner
@ -221,7 +221,7 @@ export class HaBaseTimeInput extends LitElement {
              type="number"
              .value=${this._formatValue(this.milliseconds, 3)}
              .label=${this.millisecLabel}
-              @input=${this._valueChanged}
+              @change=${this._valueChanged}
              @focusin=${this._onFocus}
              name="milliseconds"
              no-spinner
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
 export class HaCard extends LitElement {
  @property() public header?: string;

-  @property({ type: Boolean, reflect: true }) public outlined = false;
+  @property({ type: Boolean, reflect: true }) public raised = false;

  static get styles(): CSSResultGroup {
    return css`
@ -14,12 +14,14 @@ export class HaCard extends LitElement {
          --ha-card-background,
          var(--card-background-color, white)
        );
-        border-radius: var(--ha-card-border-radius, 4px);
-        box-shadow: var(
-          --ha-card-box-shadow,
-          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+        box-shadow: var(--ha-card-box-shadow, none);
+        box-sizing: border-box;
+        border-radius: var(--ha-card-border-radius, 12px);
+        border-width: var(--ha-card-border-width, 1px);
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
        );
        color: var(--primary-text-color);
        display: block;
@ -27,13 +29,13 @@ export class HaCard extends LitElement {
        position: relative;
      }

-      :host([outlined]) {
-        box-shadow: none;
-        border-width: var(--ha-card-border-width, 1px);
-        border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
+      :host([raised]) {
+        border: none;
+        box-shadow: var(
+          --ha-card-box-shadow,
+          0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+          0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 3px 0px rgba(0, 0, 0, 0.12)
        );
      }

--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -1,5 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
 import type {
  ComboBoxLight,
@ -16,13 +17,13 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
 import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";

 registerStyles(
  "vaadin-combo-box-item",
@ -108,18 +109,19 @@ export class HaComboBox extends LitElement {

  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;

+  @query("ha-textfield", true) private _inputElement!: HaTextField;
+
  private _overlayMutationObserver?: MutationObserver;

-  public open() {
-    this.updateComplete.then(() => {
-      this._comboBox?.open();
-    });
+  public async open() {
+    await this.updateComplete;
+    this._comboBox?.open();
  }

-  public focus() {
-    this.updateComplete.then(() => {
-      this._comboBox?.inputElement?.focus();
-    });
+  public async focus() {
+    await this.updateComplete;
+    await this._inputElement?.updateComplete;
+    this._inputElement?.focus();
  }

  public disconnectedCallback() {
--- a/src/components/ha-config-entry-picker.ts
+++ b/src/components/ha-config-entry-picker.ts
@ -105,7 +105,7 @@ class HaConfigEntryPicker extends LitElement {

  private async _getConfigEntries() {
    getConfigEntries(this.hass, {
-      type: "integration",
+      type: ["device", "hub", "service"],
      domain: this.integration,
    }).then((configEntries) => {
      this._configEntries = configEntries
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@ -2,6 +2,7 @@ import { mdiCalendar } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateNumeric } from "../common/datetime/format_date";
+import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
@ -14,6 +15,7 @@ export interface datePickerDialogParams {
  min?: string;
  max?: string;
  locale?: string;
+  firstWeekday?: number;
  onChange: (value: string) => void;
 }

@ -67,6 +69,7 @@ export class HaDateInput extends LitElement {
      value: this.value,
      onChange: (value) => this._valueChanged(value),
      locale: this.locale.language,
+      firstWeekday: firstWeekdayIndex(this.locale),
    });
  }

--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@ -14,6 +14,7 @@ import {
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../common/datetime/format_date_time";
 import { useAmPm } from "../common/datetime/use_am_pm";
+import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
@ -58,6 +59,7 @@ export class HaDateRangePicker extends LitElement {
        start-date=${this.startDate}
        end-date=${this.endDate}
        ?ranges=${this.ranges !== undefined}
+        first-day=${firstWeekdayIndex(this.hass.locale)}
      >
        <div slot="input" class="date-range-inputs">
          <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
@ -164,7 +166,7 @@ export class HaDateRangePicker extends LitElement {
      ha-textfield {
        display: inline-block;
        max-width: 250px;
-        min-width: 200px;
+        min-width: 220px;
      }

      ha-textfield:last-child {
--- a/src/components/ha-dialog-date-picker.ts
+++ b/src/components/ha-dialog-date-picker.ts
@ -40,6 +40,7 @@ export class HaDialogDatePicker extends LitElement {
        .max=${this._params.max}
        .locale=${this._params.locale}
        @datepicker-value-updated=${this._valueChanged}
+        .firstDayOfWeek=${this._params.firstWeekday}
      ></app-datepicker>
      <mwc-button slot="secondaryAction" @click=${this._setToday}
        >today</mwc-button
@ -56,7 +57,8 @@ export class HaDialogDatePicker extends LitElement {
  }

  private _setToday() {
-    this._value = new Date().toISOString().split("T")[0];
+    // en-CA locale used for date format YYYY-MM-DD
+    this._value = new Date().toLocaleDateString("en-CA");
  }

  private _setValue() {
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -55,7 +55,7 @@ export class HaDialog extends DialogBase {
        flex: var(--primary-action-button-flex, unset);
      }
      .mdc-dialog__container {
-        align-items: var(--vertial-align-dialog, center);
+        align-items: var(--vertical-align-dialog, center);
      }
      .mdc-dialog__title {
        padding: 24px 24px 0 24px;
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement {
          --ha-card-border-color,
          var(--divider-color, #e0e0e0)
        );
-        border-radius: var(--ha-card-border-radius, 4px);
+        border-radius: var(--ha-card-border-radius, 12px);
      }

      .summary-icon {
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@ -11,7 +11,9 @@ export class HaFormFloat extends LitElement implements HaFormElement {

  @property({ attribute: false }) public data!: HaFormFloatData;

-  @property() public label!: string;
+  @property() public label?: string;
+
+  @property() public helper?: string;

  @property({ type: Boolean }) public disabled = false;

@ -29,6 +31,8 @@ export class HaFormFloat extends LitElement implements HaFormElement {
        type="numeric"
        inputMode="decimal"
        .label=${this.label}
+        .helper=${this.helper}
+        helperPersistent
        .value=${this.data !== undefined ? this.data : ""}
        .disabled=${this.disabled}
        .required=${this.schema.required}
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@ -82,7 +82,6 @@ export class HaFormGrid extends LitElement implements HaFormElement {
      }
      :host > ha-form {
        display: block;
-        margin-bottom: 24px;
      }
    `;
  }
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@ -21,6 +21,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {

  @property() public label?: string;

+  @property() public helper?: string;
+
  @property({ type: Boolean }) public disabled = false;

  @query("ha-textfield ha-slider") private _input?:
@ -74,6 +76,8 @@ export class HaFormInteger extends LitElement implements HaFormElement {
        type="number"
        inputMode="numeric"
        .label=${this.label}
+        .helper=${this.helper}
+        helperPersistent
        .value=${this.data !== undefined ? this.data : ""}
        .disabled=${this.disabled}
        .required=${this.schema.required}
--- a/src/components/ha-form/ha-form-select.ts
+++ b/src/components/ha-form/ha-form-select.ts
@ -19,7 +19,9 @@ export class HaFormSelect extends LitElement implements HaFormElement {

  @property() public data!: HaFormSelectData;

-  @property() public label!: string;
+  @property() public label?: string;
+
+  @property() public helper?: string;

  @property({ type: Boolean }) public disabled = false;

@ -41,6 +43,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
        .schema=${this.schema}
        .value=${this.data}
        .label=${this.label}
+        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .selector=${this._selectSchema(this.schema.options)}
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@ -60,6 +60,7 @@ export class HaFormString extends LitElement implements HaFormElement {
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
+        .autocomplete=${this.schema.autocomplete}
        .suffix=${isPassword
          ? // reserve some space for the icon.
            html`<div style="width: 24px"></div>`
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@ -1,34 +1,26 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
 import "../ha-alert";
+import "../ha-selector/ha-selector";
 import "./ha-form-boolean";
 import "./ha-form-constant";
-import "./ha-form-grid";
 import "./ha-form-float";
+import "./ha-form-grid";
 import "./ha-form-integer";
 import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
-import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
-import { HomeAssistant } from "../../types";
+import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";

 const getValue = (obj, item) =>
  obj ? (!item.name ? obj : obj[item.name]) : null;

 const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);

-let selectorImported = false;
-
@customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@ -63,18 +55,6 @@ export class HaForm extends LitElement implements HaFormElement {
    }
  }

-  willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-    if (
-      !selectorImported &&
-      changedProperties.has("schema") &&
-      this.schema?.some((item) => "selector" in item)
-    ) {
-      selectorImported = true;
-      import("../ha-selector/ha-selector");
-    }
-  }
-
  protected render(): TemplateResult {
    return html`
      <div class="root" part="root">
@ -112,6 +92,7 @@ export class HaForm extends LitElement implements HaFormElement {
                  schema: item,
                  data: getValue(this.data, item),
                  label: this._computeLabel(item, this.data),
+                  helper: this._computeHelper(item),
                  disabled: this.disabled,
                  hass: this.hass,
                  computeLabel: this.computeLabel,
@ -174,14 +155,10 @@ export class HaForm extends LitElement implements HaFormElement {

  static get styles(): CSSResultGroup {
    return css`
-      .root {
-        margin-bottom: -24px;
-        overflow: clip visible;
-      }
      .root > * {
        display: block;
      }
-      .root > *:not([own-margin]) {
+      .root > *:not([own-margin]):not(:last-child) {
        margin-bottom: 24px;
      }
      ha-alert[own-margin] {
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@ -71,6 +71,7 @@ export interface HaFormFloatSchema extends HaFormBaseSchema {
 export interface HaFormStringSchema extends HaFormBaseSchema {
  type: "string";
  format?: string;
+  autocomplete?: string;
 }

 export interface HaFormBooleanSchema extends HaFormBaseSchema {
--- a/src/components/ha-selector/ha-selector-action.ts
+++ b/src/components/ha-selector/ha-selector-action.ts
@ -18,11 +18,13 @@ export class HaActionSelector extends LitElement {
  @property({ type: Boolean, reflect: true }) public disabled = false;

  protected render() {
-    return html`<ha-automation-action
-      .disabled=${this.disabled}
-      .actions=${this.value || []}
-      .hass=${this.hass}
-    ></ha-automation-action>`;
+    return html`
+      <ha-automation-action
+        .disabled=${this.disabled}
+        .actions=${this.value || []}
+        .hass=${this.hass}
+      ></ha-automation-action>
+    `;
  }

  static get styles(): CSSResultGroup {
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@ -39,7 +39,7 @@ export class HaTextSelector extends LitElement {
        .disabled=${this.disabled}
        @input=${this._handleChange}
        autocapitalize="none"
-        autocomplete="off"
+        .autocomplete=${this.selector.text.autofill}
        spellcheck="false"
        .required=${this.required}
        autogrow
@ -59,6 +59,7 @@ export class HaTextSelector extends LitElement {
            html`<div style="width: 24px"></div>`
          : this.selector.text?.suffix}
        .required=${this.required}
+        .autocomplete=${this.selector.text.autofill}
      ></ha-textfield>
      ${this.selector.text?.type === "password"
        ? html`<ha-icon-button
--- a/src/components/ha-selector/ha-selector-ui-action.ts
+++ b/src/components/ha-selector/ha-selector-ui-action.ts
@ -0,0 +1,43 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { UiActionSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../../panels/lovelace/components/hui-action-editor";
+import { ActionConfig } from "../../data/lovelace";
+
+@customElement("ha-selector-ui-action")
+export class HaSelectorUiAction extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: UiActionSelector;
+
+  @property() public value?: ActionConfig;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  protected render() {
+    return html`
+      <hui-action-editor
+        .label=${this.label}
+        .hass=${this.hass}
+        .config=${this.value}
+        .actions=${this.selector["ui-action"].actions}
+        .tooltipText=${this.helper}
+        @value-changed=${this._valueChanged}
+      ></hui-action-editor>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui-action": HaSelectorUiAction;
+  }
+}
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@ -1,35 +1,39 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "./ha-selector-action";
-import "./ha-selector-addon";
-import "./ha-selector-area";
-import "./ha-selector-attribute";
-import "./ha-selector-boolean";
-import "./ha-selector-color-rgb";
-import "./ha-selector-config-entry";
-import "./ha-selector-date";
-import "./ha-selector-datetime";
-import "./ha-selector-device";
-import "./ha-selector-duration";
-import "./ha-selector-entity";
-import "./ha-selector-file";
-import "./ha-selector-navigation";
-import "./ha-selector-number";
-import "./ha-selector-object";
-import "./ha-selector-select";
-import "./ha-selector-state";
-import "./ha-selector-target";
-import "./ha-selector-template";
-import "./ha-selector-text";
-import "./ha-selector-time";
-import "./ha-selector-icon";
-import "./ha-selector-media";
-import "./ha-selector-theme";
-import "./ha-selector-location";
-import "./ha-selector-color-temp";
+
+const LOAD_ELEMENTS = {
+  action: () => import("./ha-selector-action"),
+  addon: () => import("./ha-selector-addon"),
+  area: () => import("./ha-selector-area"),
+  attribute: () => import("./ha-selector-attribute"),
+  boolean: () => import("./ha-selector-boolean"),
+  "color-rgb": () => import("./ha-selector-color-rgb"),
+  "config-entry": () => import("./ha-selector-config-entry"),
+  date: () => import("./ha-selector-date"),
+  datetime: () => import("./ha-selector-datetime"),
+  device: () => import("./ha-selector-device"),
+  duration: () => import("./ha-selector-duration"),
+  entity: () => import("./ha-selector-entity"),
+  file: () => import("./ha-selector-file"),
+  navigation: () => import("./ha-selector-navigation"),
+  number: () => import("./ha-selector-number"),
+  object: () => import("./ha-selector-object"),
+  select: () => import("./ha-selector-select"),
+  state: () => import("./ha-selector-state"),
+  target: () => import("./ha-selector-target"),
+  template: () => import("./ha-selector-template"),
+  text: () => import("./ha-selector-text"),
+  time: () => import("./ha-selector-time"),
+  icon: () => import("./ha-selector-icon"),
+  media: () => import("./ha-selector-media"),
+  theme: () => import("./ha-selector-theme"),
+  location: () => import("./ha-selector-location"),
+  "color-temp": () => import("./ha-selector-color-temp"),
+  "ui-action": () => import("./ha-selector-ui-action"),
+};

@customElement("ha-selector")
 export class HaSelector extends LitElement {
@ -59,6 +63,12 @@ export class HaSelector extends LitElement {
    return Object.keys(this.selector)[0];
  }

+  protected willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("selector") && this.selector) {
+      LOAD_ELEMENTS[this._type]?.();
+    }
+  }
+
  protected render() {
    return html`
      ${dynamicElement(`ha-selector-${this._type}`, {
--- a/src/components/ha-slider.js
+++ b/src/components/ha-slider.js
@ -35,8 +35,8 @@ export class HaSlider extends PaperSliderClass {

              bottom: calc(15px + var(--calculated-paper-slider-height)/2);
              left: 50%;
-              width: 2.2em;
-              height: 2.2em;
+              width: 2.6em;
+              height: 2.6em;

              -webkit-transform-origin: left bottom;
              transform-origin: left bottom;
@ -55,9 +55,9 @@ export class HaSlider extends PaperSliderClass {

              bottom: calc(15px + var(--calculated-paper-slider-height)/2);
              left: 50%;
-              margin-left: -1.1em;
-              width: 2.2em;
-              height: 2.1em;
+              margin-left: -1.3em;
+              width: 2.6em;
+              height: 2.5em;

              -webkit-transform-origin: center bottom;
              transform-origin: center bottom;
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@ -251,10 +251,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
  private async _showPicker(ev) {
    this._addMode = ev.currentTarget.type;
    await this.updateComplete;
-    setTimeout(() => {
-      this._inputElement?.open();
-      this._inputElement?.focus();
-    }, 0);
+    await this._inputElement?.focus();
+    await this._inputElement?.open();
  }

  private _renderChip(
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@ -15,6 +15,8 @@ export class HaTextField extends TextFieldBase {
  // @ts-ignore
  @property({ type: Boolean }) public iconTrailing?: boolean;

+  @property() public autocomplete?: string;
+
  override updated(changedProperties: PropertyValues) {
    super.updated(changedProperties);
    if (
@ -27,6 +29,13 @@ export class HaTextField extends TextFieldBase {
      );
      this.reportValidity();
    }
+    if (changedProperties.has("autocomplete")) {
+      if (this.autocomplete) {
+        this.formElement.setAttribute("autocomplete", this.autocomplete);
+      } else {
+        this.formElement.removeAttribute("autocomplete");
+      }
+    }
  }

  protected override renderIcon(
--- a/src/components/tile/ha-tile-icon.ts
+++ b/src/components/tile/ha-tile-icon.ts
@ -0,0 +1,54 @@
+import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../ha-icon";
+import "../ha-svg-icon";
+
+@customElement("ha-tile-icon")
+export class HaTileIcon extends LitElement {
+  @property() public iconPath?: string;
+
+  @property() public icon?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="shape">
+        ${this.icon
+          ? html`<ha-icon .icon=${this.icon}></ha-icon>`
+          : html`<ha-svg-icon .path=${this.iconPath}></ha-svg-icon>`}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        --icon-color: rgb(var(--color));
+        --shape-color: rgba(var(--color), 0.2);
+        --mdc-icon-size: 24px;
+      }
+      .shape {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--shape-color);
+        transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
+      }
+      .shape ha-icon,
+      .shape ha-svg-icon {
+        display: flex;
+        color: var(--icon-color);
+        transition: color 180ms ease-in-out;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-icon": HaTileIcon;
+  }
+}
--- a/src/components/tile/ha-tile-image.ts
+++ b/src/components/tile/ha-tile-image.ts
@ -0,0 +1,41 @@
+import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-tile-image")
+export class HaTileImage extends LitElement {
+  @property() public imageUrl?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="image">
+        ${this.imageUrl ? html`<img src=${this.imageUrl} />` : null}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .image {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .image img {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-image": HaTileImage;
+  }
+}
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@ -0,0 +1,57 @@
+import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-tile-info")
+export class HaTileInfo extends LitElement {
+  @property() public primary?: string;
+
+  @property() public secondary?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="info">
+        <span class="primary">${this.primary}</span>
+        ${this.secondary
+          ? html`<span class="secondary">${this.secondary}</span>`
+          : null}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .info {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        width: 100%;
+      }
+      .primary {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.1px;
+        color: var(--primary-text-color);
+      }
+      .secondary {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        letter-spacing: 0.4px;
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-info": HaTileInfo;
+  }
+}
--- a/src/data/auth.ts
+++ b/src/data/auth.ts
@ -1,3 +1,4 @@
+import { HaFormSchema } from "../components/ha-form/types";
 import { HomeAssistant } from "../types";

 export interface AuthUrlSearchParams {
@ -22,6 +23,21 @@ export interface SignedPath {

 export const hassUrl = `${location.protocol}//${location.host}`;

+export const autocompleteLoginFields = (schema: HaFormSchema[]) =>
+  schema.map((field) => {
+    if (field.type !== "string") return field;
+    switch (field.name) {
+      case "username":
+        return { ...field, autocomplete: "username" };
+      case "password":
+        return { ...field, autocomplete: "current-password" };
+      case "code":
+        return { ...field, autocomplete: "one-time-code" };
+      default:
+        return field;
+    }
+  });
+
 export const getSignedPath = (
  hass: HomeAssistant,
  path: string
--- a/src/data/automation_i18n.ts
+++ b/src/data/automation_i18n.ts
@ -60,18 +60,32 @@ export const describeTrigger = (

    base += ` ${entity} is`;

-    if ("above" in trigger) {
+    if (trigger.above !== undefined) {
      base += ` above ${trigger.above}`;
    }

-    if ("below" in trigger && "above" in trigger) {
+    if (trigger.below !== undefined && trigger.above !== undefined) {
      base += " and";
    }

-    if ("below" in trigger) {
+    if (trigger.below !== undefined) {
      base += ` below ${trigger.below}`;
    }

+    if (trigger.for) {
+      let duration: string | null;
+      if (typeof trigger.for === "number") {
+        duration = secondsToDuration(trigger.for);
+      } else if (typeof trigger.for === "string") {
+        duration = trigger.for;
+      } else {
+        duration = formatDuration(trigger.for);
+      }
+      if (duration) {
+        base += ` for ${duration}`;
+      }
+    }
+
    return base;
  }

@ -188,15 +202,16 @@ export const describeTrigger = (

  // Time Trigger
  if (trigger.platform === "time" && trigger.at) {
-    const at = trigger.at.includes(".")
-      ? `entity ${
-          hass.states[trigger.at]
-            ? computeStateName(hass.states[trigger.at])
-            : trigger.at
-        }`
-      : trigger.at;
+    const result = ensureArray(trigger.at).map((at) =>
+      at.toString().includes(".")
+        ? `entity ${hass.states[at] ? computeStateName(hass.states[at]) : at}`
+        : at
+    );

-    return `When the time is equal to ${at}`;
+    const last = result.splice(-1, 1)[0];
+    return `When the time is equal to ${
+      result.length ? `${result.join(", ")} or ` : ""
+    }${last}`;
  }

  // Time Patter Trigger
@ -359,35 +374,35 @@ export const describeCondition = (
  if (condition.condition === "or") {
    const conditions = ensureArray(condition.conditions);

-    let count = "condition";
-
-    if (conditions && conditions.length > 0) {
-      count = `of ${conditions.length} conditions`;
+    if (!conditions || conditions.length === 0) {
+      return "Test if any condition matches";
    }
-
-    return `Test if any ${count} matches`;
+    const count = conditions.length;
+    return `Test if any of ${count} condition${count === 1 ? "" : "s"} matches`;
  }

  if (condition.condition === "and") {
    const conditions = ensureArray(condition.conditions);

-    const count =
-      conditions && conditions.length > 0
-        ? `${conditions.length} `
-        : "multiple";
-
-    return `Test if ${count} conditions match`;
+    if (!conditions || conditions.length === 0) {
+      return "Test if multiple conditions match";
+    }
+    const count = conditions.length;
+    return `Test if ${count} condition${count === 1 ? "" : "s"} match${
+      count === 1 ? "es" : ""
+    }`;
  }

  if (condition.condition === "not") {
    const conditions = ensureArray(condition.conditions);

-    const what =
-      conditions && conditions.length > 0
-        ? `none of ${conditions.length} conditions match`
-        : "no condition matches";
-
-    return `Test if ${what}`;
+    if (!conditions || conditions.length === 0) {
+      return "Test if no condition matches";
+    }
+    if (conditions.length === 1) {
+      return "Test if 1 condition does not match";
+    }
+    return `Test if none of ${conditions.length} conditions match`;
  }

  // State Condition
@ -424,16 +439,18 @@ export const describeCondition = (

    base += ` ${entity} is ${states}`;

-    if ("for" in condition) {
-      let duration: string;
+    if (condition.for) {
+      let duration: string | null;
      if (typeof condition.for === "number") {
-        duration = `for ${secondsToDuration(condition.for)!}`;
+        duration = secondsToDuration(condition.for);
      } else if (typeof condition.for === "string") {
-        duration = `for ${condition.for}`;
+        duration = condition.for;
      } else {
-        duration = `for ${JSON.stringify(condition.for)}`;
+        duration = formatDuration(condition.for);
+      }
+      if (duration) {
+        base += ` for ${duration}`;
      }
-      base += ` for ${duration}`;
    }

    return base;
--- a/src/data/config_entries.ts
+++ b/src/data/config_entries.ts
@ -1,5 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
+import { IntegrationType } from "./integration";

 export interface ConfigEntry {
  entry_id: string;
@ -54,7 +55,10 @@ export interface ConfigEntryUpdate {
 export const subscribeConfigEntries = (
  hass: HomeAssistant,
  callbackFunction: (message: ConfigEntryUpdate[]) => void,
-  filters?: { type?: "helper" | "integration"; domain?: string }
+  filters?: {
+    type?: IntegrationType[];
+    domain?: string;
+  }
 ): Promise<UnsubscribeFunc> => {
  const params: any = {
    type: "config_entries/subscribe",
@ -70,7 +74,10 @@ export const subscribeConfigEntries = (

 export const getConfigEntries = (
  hass: HomeAssistant,
-  filters?: { type?: "helper" | "integration"; domain?: string }
+  filters?: {
+    type?: IntegrationType[];
+    domain?: string;
+  }
 ): Promise<ConfigEntry[]> => {
  const params: any = {};
  if (filters) {
--- a/src/data/config_flow.ts
+++ b/src/data/config_flow.ts
@ -3,7 +3,7 @@ import { LocalizeFunc } from "../common/translations/localize";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { DataEntryFlowProgress, DataEntryFlowStep } from "./data_entry_flow";
-import { domainToName } from "./integration";
+import { domainToName, IntegrationType } from "./integration";

 export const DISCOVERY_SOURCES = [
  "bluetooth",
@ -68,7 +68,7 @@ export const deleteConfigFlow = (hass: HomeAssistant, flowId: string) =>

 export const getConfigFlowHandlers = (
  hass: HomeAssistant,
-  type?: "helper" | "integration"
+  type?: IntegrationType[]
 ) =>
  hass.callApi<string[]>(
    "GET",
--- a/src/data/core.ts
+++ b/src/data/core.ts
@ -6,7 +6,7 @@ export interface ConfigUpdateValues {
  latitude: number;
  longitude: number;
  elevation: number;
-  unit_system: "metric" | "imperial";
+  unit_system: "metric" | "us_customary";
  time_zone: string;
  external_url?: string | null;
  internal_url?: string | null;
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@ -62,6 +62,7 @@ export const emptyBatteryEnergyPreference =
    stat_energy_from: "",
    stat_energy_to: "",
  });
+
 export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
  type: "gas",
  stat_energy_from: "",
@ -70,6 +71,15 @@ export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
  number_energy_price: null,
 });

+export const emptyWaterEnergyPreference =
+  (): WaterSourceTypeEnergyPreference => ({
+    type: "water",
+    stat_energy_from: "",
+    stat_cost: null,
+    entity_energy_price: null,
+    number_energy_price: null,
+  });
+
 interface EnergySolarForecast {
  wh_hours: Record<string, number>;
 }
@ -130,7 +140,22 @@ export interface BatterySourceTypeEnergyPreference {
 export interface GasSourceTypeEnergyPreference {
  type: "gas";

-  // kWh meter
+  // kWh/volume meter
+  stat_energy_from: string;
+
+  // $ meter
+  stat_cost: string | null;
+
+  // Can be used to generate costs if stat_cost omitted
+  entity_energy_price: string | null;
+  number_energy_price: number | null;
+  unit_of_measurement?: string | null;
+}
+
+export interface WaterSourceTypeEnergyPreference {
+  type: "water";
+
+  // volume meter
  stat_energy_from: string;

  // $ meter
@ -146,7 +171,8 @@ type EnergySource =
  | SolarSourceTypeEnergyPreference
  | GridSourceTypeEnergyPreference
  | BatterySourceTypeEnergyPreference
-  | GasSourceTypeEnergyPreference;
+  | GasSourceTypeEnergyPreference
+  | WaterSourceTypeEnergyPreference;

 export interface EnergyPreferences {
  energy_sources: EnergySource[];
@ -222,6 +248,7 @@ interface EnergySourceByType {
  solar?: SolarSourceTypeEnergyPreference[];
  battery?: BatterySourceTypeEnergyPreference[];
  gas?: GasSourceTypeEnergyPreference[];
+  water?: WaterSourceTypeEnergyPreference[];
 }

 export const energySourcesByType = (prefs: EnergyPreferences) =>
@ -255,7 +282,7 @@ export const getReferencedStatisticIds = (
      continue;
    }

-    if (source.type === "gas") {
+    if (source.type === "gas" || source.type === "water") {
      statIDs.push(source.stat_energy_from);
      if (source.stat_cost) {
        statIDs.push(source.stat_cost);
@ -642,3 +669,6 @@ export const getEnergyGasUnit = (
    ? "m³"
    : "ft³";
 };
+
+export const getEnergyWaterUnit = (hass: HomeAssistant): string | undefined =>
+  hass.config.unit_system.length === "km" ? "m³" : "ft³";
--- a/src/data/entity.ts
+++ b/src/data/entity.ts
@ -1,4 +1,7 @@
 export const UNAVAILABLE = "unavailable";
 export const UNKNOWN = "unknown";
+export const ON = "on";
+export const OFF = "off";

 export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN];
+export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF];
--- a/src/data/integration.ts
+++ b/src/data/integration.ts
@ -1,6 +1,8 @@
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";

+export type IntegrationType = "device" | "helper" | "hub" | "service";
+
 export interface IntegrationManifest {
  is_built_in: boolean;
  domain: string;
@ -15,6 +17,7 @@ export interface IntegrationManifest {
  ssdp?: Array<{ manufacturer?: string; modelName?: string; st?: string }>;
  zeroconf?: string[];
  homekit?: { models: string[] };
+  integration_type?: IntegrationType;
  quality_scale?: "gold" | "internal" | "platinum" | "silver";
  iot_class:
    | "assumed_state"
@ -23,7 +26,6 @@ export interface IntegrationManifest {
    | "local_polling"
    | "local_push";
 }
-
 export interface IntegrationSetup {
  domain: string;
  seconds?: number;
--- a/src/data/integrations.ts
+++ b/src/data/integrations.ts
@ -1,30 +1,41 @@
 import { HomeAssistant } from "../types";
+import { IntegrationType } from "./integration";

 export type IotStandards = "zwave" | "zigbee" | "homekit" | "matter";

 export interface Integration {
+  integration_type: IntegrationType;
  name?: string;
  config_flow?: boolean;
-  integrations?: Integrations;
  iot_standards?: IotStandards[];
-  is_built_in?: boolean;
  iot_class?: string;
+  supported_by?: string;
+  is_built_in?: boolean;
 }

 export interface Integrations {
  [domain: string]: Integration;
 }

+export interface Brand {
+  name?: string;
+  integrations?: Integrations;
+  iot_standards?: IotStandards[];
+  is_built_in?: boolean;
+}
+
+export interface Brands {
+  [domain: string]: Integration | Brand;
+}
+
 export interface IntegrationDescriptions {
  core: {
-    integration: Integrations;
-    hardware: Integrations;
+    integration: Brands;
    helper: Integrations;
    translated_name: string[];
  };
  custom: {
-    integration: Integrations;
-    hardware: Integrations;
+    integration: Brands;
    helper: Integrations;
  };
 }
@ -35,3 +46,28 @@ export const getIntegrationDescriptions = (
  hass.callWS<IntegrationDescriptions>({
    type: "integration/descriptions",
  });
+
+export const findIntegration = (
+  integrations: Brands | undefined,
+  domain: string
+): Integration | undefined => {
+  if (!integrations) {
+    return undefined;
+  }
+  if (domain in integrations) {
+    const integration = integrations[domain];
+    if ("integration_type" in integration) {
+      return integration;
+    }
+  }
+  for (const integration of Object.values(integrations)) {
+    if (
+      "integrations" in integration &&
+      integration.integrations &&
+      domain in integration.integrations
+    ) {
+      return integration.integrations[domain];
+    }
+  }
+  return undefined;
+};
--- a/src/data/light.ts
+++ b/src/data/light.ts
@ -67,12 +67,15 @@ export const getLightCurrentModeRgbColor = (
    : entity.attributes.rgb_color;

 interface LightEntityAttributes extends HassEntityAttributeBase {
+  min_color_temp_kelvin?: number;
+  max_color_temp_kelvin?: number;
  min_mireds?: number;
  max_mireds?: number;
  brightness?: number;
  xy_color?: [number, number];
  hs_color?: [number, number];
  color_temp?: number;
+  color_temp_kelvin?: number;
  rgb_color?: [number, number, number];
  rgbw_color?: [number, number, number, number];
  rgbww_color?: [number, number, number, number, number];
--- a/src/data/recorder.ts
+++ b/src/data/recorder.ts
@ -67,7 +67,7 @@ export interface StatisticsValidationResultUnitsChanged {
 }

 export interface StatisticsUnitConfiguration {
-  energy?: "Wh" | "kWh" | "MWh";
+  energy?: "Wh" | "kWh" | "MWh" | "GJ";
  power?: "W" | "kW";
  pressure?:
    | "Pa"
@ -110,7 +110,7 @@ export const fetchStatistics = (
  startTime: Date,
  endTime?: Date,
  statistic_ids?: string[],
-  period: "5minute" | "hour" | "day" | "month" = "hour",
+  period: "5minute" | "hour" | "day" | "week" | "month" = "hour",
  units?: StatisticsUnitConfiguration
 ) =>
  hass.callWS<Statistics>({
--- a/src/data/script.ts
+++ b/src/data/script.ts
@ -185,7 +185,7 @@ interface BaseRepeat extends BaseAction {
 }

 export interface CountRepeat extends BaseRepeat {
-  count: number;
+  count: number | string;
 }

 export interface WhileRepeat extends BaseRepeat {
--- a/src/data/script_i18n.ts
+++ b/src/data/script_i18n.ts
@ -159,7 +159,7 @@ export const describeAction = <T extends ActionType>(
      return "Activate a scene";
    }
    const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Active scene ${
+    return `Activate scene ${
      sceneStateObj ? computeStateName(sceneStateObj) : entityId
    }`;
  }
@ -231,32 +231,37 @@ export const describeAction = <T extends ActionType>(

  if (actionType === "choose") {
    const config = action as ChooseAction;
-    return config.choose
-      ? `Choose between ${
-          ensureArray(config.choose).length + (config.default ? 1 : 0)
-        } actions`
-      : "Choose an action";
+    if (config.choose) {
+      const numActions =
+        ensureArray(config.choose).length + (config.default ? 1 : 0);
+      return `Choose between ${numActions} action${
+        numActions === 1 ? "" : "s"
+      }`;
+    }
+    return "Choose an action";
  }

  if (actionType === "repeat") {
    const config = action as RepeatAction;
-    return `Repeat an action ${
-      "count" in config.repeat ? `${config.repeat.count} times` : ""
-    }${
-      "while" in config.repeat
-        ? `while ${ensureArray(config.repeat.while)
-            .map((condition) => describeCondition(condition, hass))
-            .join(", ")} is true`
-        : "until" in config.repeat
-        ? `until ${ensureArray(config.repeat.until)
-            .map((condition) => describeCondition(condition, hass))
-            .join(", ")} is true`
-        : "for_each" in config.repeat
-        ? `for every item: ${ensureArray(config.repeat.for_each)
-            .map((item) => JSON.stringify(item))
-            .join(", ")}`
-        : ""
-    }`;
+
+    let base = "Repeat an action";
+    if ("count" in config.repeat) {
+      const count = config.repeat.count;
+      base += ` ${count} time${Number(count) === 1 ? "" : "s"}`;
+    } else if ("while" in config.repeat) {
+      base += ` while ${ensureArray(config.repeat.while)
+        .map((condition) => describeCondition(condition, hass))
+        .join(", ")} is true`;
+    } else if ("until" in config.repeat) {
+      base += ` until ${ensureArray(config.repeat.until)
+        .map((condition) => describeCondition(condition, hass))
+        .join(", ")} is true`;
+    } else if ("for_each" in config.repeat) {
+      base += ` for every item: ${ensureArray(config.repeat.for_each)
+        .map((item) => JSON.stringify(item))
+        .join(", ")}`;
+    }
+    return base;
  }

  if (actionType === "check_condition") {
@ -280,7 +285,8 @@ export const describeAction = <T extends ActionType>(

  if (actionType === "parallel") {
    const config = action as ParallelAction;
-    return `Run  ${ensureArray(config.parallel).length} actions in parallel`;
+    const numActions = ensureArray(config.parallel).length;
+    return `Run ${numActions} action${numActions === 1 ? "" : "s"} in parallel`;
  }

  return actionType;
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@ -1,5 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { UiAction } from "../panels/lovelace/components/hui-action-editor";
 import type { DeviceRegistryEntry } from "./device_registry";
 import type { EntitySources } from "./entity_sources";

@ -30,7 +31,8 @@ export type Selector =
  | TargetSelector
  | TemplateSelector
  | ThemeSelector
-  | TimeSelector;
+  | TimeSelector
+  | UiActionSelector;

 export interface ActionSelector {
  // eslint-disable-next-line @typescript-eslint/ban-types
@ -232,6 +234,7 @@ export interface StringSelector {
      | "datetime-local"
      | "color";
    suffix?: string;
+    autofill?: string;
  };
 }

@ -256,6 +259,12 @@ export interface TimeSelector {
  time: {};
 }

+export interface UiActionSelector {
+  "ui-action": {
+    actions?: UiAction[];
+  };
+}
+
 export const filterSelectorDevices = (
  filterDevice: SelectorDevice,
  device: DeviceRegistryEntry,
--- a/src/data/supported_brands.ts
+++ b/src/data/supported_brands.ts
@ -1,34 +0,0 @@
-import type { HomeAssistant } from "../types";
-
-export interface SupportedBrandObj {
-  name: string;
-  slug: string;
-  is_add?: boolean;
-  is_helper?: boolean;
-  supported_flows: string[];
-}
-
-export type SupportedBrandHandler = Record<string, string>;
-
-export const getSupportedBrands = (hass: HomeAssistant) =>
-  hass.callWS<Record<string, SupportedBrandHandler>>({
-    type: "supported_brands",
-  });
-
-export const getSupportedBrandsLookup = (
-  supportedBrands: Record<string, SupportedBrandHandler>
-): Record<string, Partial<SupportedBrandObj>> => {
-  const supportedBrandsIntegrations: Record<
-    string,
-    Partial<SupportedBrandObj>
-  > = {};
-  for (const [d, domainBrands] of Object.entries(supportedBrands)) {
-    for (const [slug, name] of Object.entries(domainBrands)) {
-      supportedBrandsIntegrations[slug] = {
-        name,
-        supported_flows: [d],
-      };
-    }
-  }
-  return supportedBrandsIntegrations;
-};
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@ -17,10 +17,22 @@ export enum TimeFormat {
  twenty_four = "24",
 }

+export enum FirstWeekday {
+  language = "language",
+  monday = "monday",
+  tuesday = "tuesday",
+  wednesday = "wednesday",
+  thursday = "thursday",
+  friday = "friday",
+  saturday = "saturday",
+  sunday = "sunday",
+}
+
 export interface FrontendLocaleData {
  language: string;
  number_format: NumberFormat;
  time_format: TimeFormat;
+  first_weekday: FirstWeekday;
 }

 declare global {
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@ -106,6 +106,7 @@ export interface Command {
  name: string;
  id: number;
  type: string;
+  schema: HaFormSchema[];
 }

 export interface ReadAttributeServiceData {
--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-config-flow.ts
@ -204,7 +204,7 @@ export const showConfigFlowDialog = (
    },

    renderLoadingDescription(hass, reason, handler, step) {
-      if (!["loading_flow", "loading_step"].includes(reason)) {
+      if (reason !== "loading_flow" && reason !== "loading_step") {
        return "";
      }
      const domain = step?.handler || handler;
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@ -11,14 +11,8 @@ import {
  DataEntryFlowStepProgress,
 } from "../../data/data_entry_flow";
 import type { IntegrationManifest } from "../../data/integration";
-import type { SupportedBrandHandler } from "../../data/supported_brands";
 import type { HomeAssistant } from "../../types";

-export interface FlowHandlers {
-  integrations: string[];
-  helpers: string[];
-  supportedBrands: Record<string, SupportedBrandHandler>;
-}
 export interface FlowConfig {
  loadDevicesAndAreas: boolean;

--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@ -181,9 +181,11 @@ export const showOptionsFlowDialog = (
      renderLoadingDescription(hass, reason) {
        return (
          hass.localize(`component.${configEntry.domain}.options.loading`) ||
-          hass.localize(`ui.dialogs.options_flow.loading.${reason}`, {
-            integration: domainToName(hass.localize, configEntry.domain),
-          })
+          (reason === "loading_flow" || reason === "loading_step"
+            ? hass.localize(`ui.dialogs.options_flow.loading.${reason}`, {
+                integration: domainToName(hass.localize, configEntry.domain),
+              })
+            : "")
        );
      },
    }
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@ -16,6 +16,7 @@ import { computeInitialHaFormData } from "../../components/ha-form/compute-initi
 import "../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../components/ha-form/types";
 import "../../components/ha-markdown";
+import { autocompleteLoginFields } from "../../data/auth";
 import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
@ -51,7 +52,7 @@ class StepFlowForm extends LitElement {
          .data=${stepData}
          .disabled=${this._loading}
          @value-changed=${this._stepDataChanged}
-          .schema=${step.data_schema}
+          .schema=${autocompleteLoginFields(step.data_schema)}
          .error=${step.errors}
          .computeLabel=${this._labelCallback}
          .computeHelper=${this._helperCallback}
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@ -12,7 +12,7 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
 /**
 * Entity Domains that should always be editable; {@see shouldShowEditIcon}.
 * */
-export const EDITABLE_DOMAINS = ["script"];
+export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];

 /** Domains with separate more info dialog. */
 export const DOMAINS_WITH_MORE_INFO = [
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@ -121,8 +121,8 @@ class MoreInfoLight extends LitElement {
                        "ui.card.light.color_temperature"
                      )}
                      icon="hass:thermometer"
-                      .min=${this.stateObj.attributes.min_mireds}
-                      .max=${this.stateObj.attributes.max_mireds}
+                      .min=${this.stateObj.attributes.min_color_temp_kelvin}
+                      .max=${this.stateObj.attributes.max_color_temp_kelvin}
                      .value=${this._ctSliderValue}
                      @change=${this._ctSliderChanged}
                      pin
@ -231,7 +231,7 @@ class MoreInfoLight extends LitElement {
        <ha-attributes
          .hass=${this.hass}
          .stateObj=${this.stateObj}
-          extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode"
+          extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
        ></ha-attributes>
      </div>
    `;
@ -273,7 +273,7 @@ class MoreInfoLight extends LitElement {
      this._brightnessSliderValue = Math.round(
        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
      );
-      this._ctSliderValue = stateObj.attributes.color_temp;
+      this._ctSliderValue = stateObj.attributes.color_temp_kelvin;
      this._wvSliderValue =
        stateObj.attributes.color_mode === LightColorMode.RGBW
          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
@ -384,7 +384,7 @@ class MoreInfoLight extends LitElement {

    this.hass.callService("light", "turn_on", {
      entity_id: this.stateObj!.entity_id,
-      color_temp: ct,
+      color_temp_kelvin: ct,
    });
  }

@ -580,9 +580,9 @@ class MoreInfoLight extends LitElement {
      .color_temp {
        --ha-slider-background: -webkit-linear-gradient(
          var(--float-end),
-          rgb(255, 160, 0) 0%,
+          rgb(166, 209, 255) 0%,
          white 50%,
-          rgb(166, 209, 255) 100%
+          rgb(255, 160, 0) 100%
        );
        /* The color temp minimum value shouldn't be rendered differently. It's not "off". */
        --paper-slider-knob-start-border-color: var(--primary-color);
--- a/Show More
+++ b/Show More