20230606.0 (#16798)

.browserslistrc

@@ -10,12 +10,6 @@ supports es6-module-dynamic-import
 not Safari < 13
 not iOS < 13
 
-# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
-# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
-not KaiOS > 0
-not QQAndroid > 0
-not UCAndroid > 0
-
 # Exclude unsupported browsers
 not dead
 

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.11
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.10
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/release-drafter.yml

@@ -1,8 +1,3 @@
-categories:
-  - title: 'Dependency updates'
-    collapse-after: 3
-    labels:
-      - 'dependencies'
 template: |
   ## What's Changed
 

.github/workflows/cast_deployment.yaml

@@ -21,7 +21,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
         with:
           ref: dev
 
@@ -57,7 +57,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
         with:
           ref: master
 

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
       - name: Setup Node
         uses: actions/setup-node@v3.6.0
         with:
@@ -47,7 +47,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
       - name: Setup Node
         uses: actions/setup-node@v3.6.0
         with:
@@ -65,7 +65,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
       - name: Setup Node
         uses: actions/setup-node@v3.6.0
         with:
@@ -83,7 +83,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
       - name: Setup Node
         uses: actions/setup-node@v3.6.0
         with:

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3.5.3
+      uses: actions/checkout@v3.5.2
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.

.github/workflows/demo_deployment.yaml

@@ -22,7 +22,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
         with:
           ref: dev
 
@@ -58,7 +58,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
         with:
           ref: master
 

.github/workflows/design_deployment.yaml

@@ -16,7 +16,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
 
       - name: Setup Node
         uses: actions/setup-node@v3.6.0

.github/workflows/design_preview.yaml

@@ -21,7 +21,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
 
       - name: Setup Node
         uses: actions/setup-node@v3.6.0

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4.0.1
+      - uses: dessant/lock-threads@v4.0.0
         with:
           github-token: ${{ github.token }}
           issue-lock-inactive-days: "30"

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4

.github/workflows/release-drafter.yaml

@@ -5,17 +5,8 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 jobs:
   update_release_draft:
-    permissions:
-      # write permission for contents is required to create a github release
-      contents: write
-      # write permission for pull-requests is required for autolabeler
-      # otherwise, read permission is required at least
-      pull-requests: read
     runs-on: ubuntu-latest
     steps:
       - uses: release-drafter/release-drafter@v5

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -76,7 +76,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@2023.04.0
         with:
-          abi: cp311
+          abi: cp310
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/translations.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.3
+        uses: actions/checkout@v3.5.2
 
       - name: Upload Translations
         run: |

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.0.cjs
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

build-scripts/bundle.cjs

@@ -77,7 +77,6 @@ module.exports.htmlMinifierOptions = {
 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   safari10: !latestBuild,
   ecma: latestBuild ? 2015 : 5,
-  module: latestBuild,
   format: { comments: false },
   sourceMap: !isTestBuild,
 });
@@ -98,7 +97,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.31", proposals: true },
+        corejs: latestBuild ? false : { version: "3.30", proposals: true },
         bugfixes: true,
       },
     ],

build-scripts/gulp/locale-data.js

@@ -17,7 +17,6 @@ const modules = {
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
   "intl-displaynames": "DisplayNames",
-  "intl-listformat": "ListFormat",
 };
 
 gulp.task("create-locale-data", (done) => {

build-scripts/webpack.cjs

@@ -41,7 +41,7 @@ const createWebpackConfig = ({
   return {
     name,
     mode: isProdBuild ? "production" : "development",
-    target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
+    target: ["web", latestBuild ? "es2017" : "es5"],
     // For tests/CI, source maps are skipped to gain build speed
     // For production, generate source maps for accurate stack traces without source code
     // For development, generate "cheap" versions that can map to original line numbers
@@ -84,13 +84,6 @@ const createWebpackConfig = ({
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
-      splitChunks: {
-        // Disable splitting for web workers with ESM output
-        // Imports of external chunks are broken
-        chunks: latestBuild
-          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
-          : undefined,
-      },
     },
     plugins: [
       !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
@@ -167,12 +160,9 @@ const createWebpackConfig = ({
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
-        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
-          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
       },
     },
     output: {
-      module: latestBuild,
       filename: ({ chunk }) =>
         !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
@@ -206,7 +196,7 @@ const createWebpackConfig = ({
           : undefined,
     },
     experiments: {
-      outputModule: true,
+      topLevelAwait: true,
     },
   };
 };

gallery/src/data/date-options.ts

@@ -1,24 +0,0 @@
-import type { ControlSelectOption } from "../../../src/components/ha-control-select";
-
-export const timeOptions: ControlSelectOption[] = [
-  {
-    value: "now",
-    label: "Now",
-  },
-  {
-    value: "00:15:30",
-    label: "12:15:30 AM",
-  },
-  {
-    value: "06:15:30",
-    label: "06:15:30 AM",
-  },
-  {
-    value: "12:15:30",
-    label: "12:15:30 PM",
-  },
-  {
-    value: "18:15:30",
-    label: "06:15:30 PM",
-  },
-];

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

@@ -41,7 +41,6 @@ const triggers = [
   { platform: "sun", event: "sunset" },
   { platform: "time_pattern" },
   { platform: "webhook" },
-  { platform: "persistent_notification" },
   {
     platform: "zone",
     entity_id: "person.person",

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

@@ -19,7 +19,6 @@ import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trig
 import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
 import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
 import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
-import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
 import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
 import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
@@ -73,16 +72,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
   },
 
-  {
-    name: "Persistent Notification",
-    triggers: [
-      {
-        platform: "persistent_notification",
-        ...HaPersistentNotificationTrigger.defaultConfig,
-      },
-    ],
-  },
-
   {
     name: "Zone",
     triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],

gallery/src/pages/components/ha-control-circular-slider.markdown

@@ -1,3 +0,0 @@
----
-title: Control Circular Slider
----

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

@@ -1,153 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-circular-slider";
-import "../../../../src/components/ha-slider";
-
-@customElement("demo-components-ha-control-circular-slider")
-export class DemoHaCircularSlider extends LitElement {
-  @state()
-  private current = 22;
-
-  @state()
-  private value = 19;
-
-  @state()
-  private high = 25;
-
-  @state()
-  private changingValue?: number;
-
-  @state()
-  private changingHigh?: number;
-
-  private _valueChanged(ev) {
-    this.value = ev.detail.value;
-  }
-
-  private _valueChanging(ev) {
-    this.changingValue = ev.detail.value;
-  }
-
-  private _highChanged(ev) {
-    this.high = ev.detail.value;
-  }
-
-  private _highChanging(ev) {
-    this.changingHigh = ev.detail.value;
-  }
-
-  private _currentChanged(ev) {
-    this.current = ev.currentTarget.value;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Config</b></p>
-          <div class="field">
-            <p>Current</p>
-            <ha-slider
-              min="10"
-              max="30"
-              .value=${this.current}
-              @change=${this._currentChanged}
-              pin
-            ></ha-slider>
-            <p>${this.current} °C</p>
-          </div>
-        </div>
-      </ha-card>
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Single</b></p>
-          <ha-control-circular-slider
-            @value-changed=${this._valueChanged}
-            @value-changing=${this._valueChanging}
-            .value=${this.value}
-            .current=${this.current}
-            step="1"
-            min="10"
-            max="30"
-          ></ha-control-circular-slider>
-          <div>
-            Value: ${this.value} °C
-            <br />
-            Changing:
-            ${this.changingValue != null ? `${this.changingValue} °C` : "-"}
-          </div>
-        </div>
-      </ha-card>
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Dual</b></p>
-          <ha-control-circular-slider
-            dual
-            @low-changed=${this._valueChanged}
-            @low-changing=${this._valueChanging}
-            @high-changed=${this._highChanged}
-            @high-changing=${this._highChanging}
-            .low=${this.value}
-            .high=${this.high}
-            .current=${this.current}
-            step="1"
-            min="10"
-            max="30"
-          ></ha-control-circular-slider>
-          <div>
-            Low value: ${this.value} °C
-            <br />
-            Low changing:
-            ${this.changingValue != null ? `${this.changingValue} °C` : "-"}
-            <br />
-            High value: ${this.high} °C
-            <br />
-            High changing:
-            ${this.changingHigh != null ? `${this.changingHigh} °C` : "-"}
-          </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;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      ha-control-circular-slider {
-        --control-circular-slider-color: #ff9800;
-        --control-circular-slider-background: #ff9800;
-        --control-circular-slider-background-opacity: 0.3;
-      }
-      ha-control-circular-slider[dual] {
-        --control-circular-slider-high-color: #2196f3;
-        --control-circular-slider-low-color: #ff9800;
-        --control-circular-slider-background: var(--disabled-color);
-      }
-      .field {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-control-circular-slider": DemoHaCircularSlider;
-  }
-}

gallery/src/pages/date-time/date-time-numeric.markdown

@@ -1,7 +0,0 @@
----
-title: Date-Time Format (Numeric)
----
-
-This pages lists all supported languages with their available date-time formats.
-
-Formatting function: `const formatDateTimeNumeric: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/date-time-numeric.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-date-time-numeric")
-export class DemoDateTimeDateTimeNumeric extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatDateTimeNumeric(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTimeNumeric(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTimeNumeric(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-date-time-numeric": DemoDateTimeDateTimeNumeric;
-  }
-}

gallery/src/pages/date-time/date-time-seconds.markdown

@@ -1,7 +0,0 @@
----
-title: Date-Time Format (Seconds)
----
-
-This pages lists all supported languages with their available date-time formats.
-
-Formatting function: `const formatDateTimeWithSeconds: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/date-time-seconds.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-date-time-seconds")
-export class DemoDateTimeDateTimeSeconds extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatDateTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-date-time-seconds": DemoDateTimeDateTimeSeconds;
-  }
-}

gallery/src/pages/date-time/date-time-short-year.markdown

@@ -1,7 +0,0 @@
----
-title: Date-Time Format (Short w/ Year)
----
-
-This pages lists all supported languages with their available date-time formats.
-
-Formatting function: `const formatShortDateTimeWithYear: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/date-time-short-year.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-date-time-short-year")
-export class DemoDateTimeDateTimeShortYear extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatShortDateTimeWithYear(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatShortDateTimeWithYear(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatShortDateTimeWithYear(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-date-time-short-year": DemoDateTimeDateTimeShortYear;
-  }
-}

gallery/src/pages/date-time/date-time-short.markdown

@@ -1,7 +0,0 @@
----
-title: Date-Time Format (Short)
----
-
-This pages lists all supported languages with their available date-time formats.
-
-Formatting function: `const formatShortDateTime: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/date-time-short.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-date-time-short")
-export class DemoDateTimeDateTimeShort extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatShortDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatShortDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatShortDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-date-time-short": DemoDateTimeDateTimeShort;
-  }
-}

gallery/src/pages/date-time/date-time.markdown

@@ -1,7 +0,0 @@
----
-title: Date-Time Format
----
-
-This pages lists all supported languages with their available date-time formats.
-
-Formatting function: `const formatDateTime: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/date-time.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-date-time")
-export class DemoDateTimeDateTime extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatDateTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 900px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-date-time": DemoDateTimeDateTime;
-  }
-}

gallery/src/pages/date-time/date.markdown

@@ -1,5 +1,5 @@
 ---
-title: Date Format (Numeric)
+title: (Numeric) Date Formatting
 ---
 
 This pages lists all supported languages with their available (numeric) date formats.

gallery/src/pages/date-time/date.ts

@@ -1,28 +1,27 @@
-import "@material/mwc-list/mwc-list";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import { formatDateNumeric } from "../../../../src/common/datetime/format_date";
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import { HomeAssistant } from "../../../../src/types";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { formatDateNumeric } from "../../../../src/common/datetime/format_date";
 import {
-  DateFormat,
-  FirstWeekday,
   FrontendLocaleData,
   NumberFormat,
   TimeFormat,
-  TimeZone,
+  DateFormat,
+  FirstWeekday,
 } from "../../../../src/data/translation";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
 
 @customElement("demo-date-time-date")
 export class DemoDateTimeDate extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
   protected render() {
     const defaultLocale: FrontendLocaleData = {
       language: "en",
       number_format: NumberFormat.language,
       time_format: TimeFormat.language,
       date_format: DateFormat.language,
-      time_zone: TimeZone.local,
       first_weekday: FirstWeekday.language,
     };
     const date = new Date();
@@ -42,48 +41,32 @@ export class DemoDateTimeDate extends LitElement {
               <div class="container">
                 <div>${value.nativeName}</div>
                 <div class="center">
-                  ${formatDateNumeric(
-                    date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      date_format: DateFormat.language,
-                    },
-                    demoConfig
-                  )}
+                  ${formatDateNumeric(date, {
+                    ...defaultLocale,
+                    language: key,
+                    date_format: DateFormat.language,
+                  })}
                 </div>
                 <div class="center">
-                  ${formatDateNumeric(
-                    date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      date_format: DateFormat.DMY,
-                    },
-                    demoConfig
-                  )}
+                  ${formatDateNumeric(date, {
+                    ...defaultLocale,
+                    language: key,
+                    date_format: DateFormat.DMY,
+                  })}
                 </div>
                 <div class="center">
-                  ${formatDateNumeric(
-                    date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      date_format: DateFormat.MDY,
-                    },
-                    demoConfig
-                  )}
+                  ${formatDateNumeric(date, {
+                    ...defaultLocale,
+                    language: key,
+                    date_format: DateFormat.MDY,
+                  })}
                 </div>
                 <div class="center">
-                  ${formatDateNumeric(
-                    date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      date_format: DateFormat.YMD,
-                    },
-                    demoConfig
-                  )}
+                  ${formatDateNumeric(date, {
+                    ...defaultLocale,
+                    language: key,
+                    date_format: DateFormat.YMD,
+                  })}
                 </div>
               </div>
             `

gallery/src/pages/date-time/time-seconds.markdown

@@ -1,7 +0,0 @@
----
-title: Time Format (Seconds)
----
-
-This pages lists all supported languages with their available time formats.
-
-Formatting function: `const formatTimeWithSeconds: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/time-seconds.ts

@@ -1,135 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-time-seconds")
-export class DemoDateTimeTimeSeconds extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTimeWithSeconds(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 600px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-time-seconds": DemoDateTimeTimeSeconds;
-  }
-}

gallery/src/pages/date-time/time-weekday.markdown

@@ -1,7 +0,0 @@
----
-title: Time Format (Weekday)
----
-
-This pages lists all supported languages with their available time formats.
-
-Formatting function: `const formatTimeWeekday: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/time-weekday.ts

@@ -1,135 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatTimeWeekday } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-time-weekday")
-export class DemoDateTimeTimeWeekday extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatTimeWeekday(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTimeWeekday(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTimeWeekday(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 800px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-time-weekday": DemoDateTimeTimeWeekday;
-  }
-}

gallery/src/pages/date-time/time.markdown

@@ -1,7 +0,0 @@
----
-title: Time Format
----
-
-This pages lists all supported languages with their available time formats.
-
-Formatting function: `const formatTime: (dateObj: Date, locale: FrontendLocaleData) => string`

gallery/src/pages/date-time/time.ts

@@ -1,136 +0,0 @@
-import { html, css, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatTime } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
-import {
-  FrontendLocaleData,
-  NumberFormat,
-  TimeFormat,
-  DateFormat,
-  FirstWeekday,
-  TimeZone,
-} from "../../../../src/data/translation";
-
-@customElement("demo-date-time-time")
-export class DemoDateTimeTime extends LitElement {
-  @state() private selection?: string = "now";
-
-  @state() private date: Date = new Date();
-
-  handleValueChanged(e: CustomEvent) {
-    this.selection = e.detail.value as string;
-    this.date = new Date();
-    if (this.selection !== "now") {
-      const [hours, minutes, seconds] = this.selection.split(":").map(Number);
-      this.date.setHours(hours);
-      this.date.setMinutes(minutes);
-      this.date.setSeconds(seconds);
-    }
-  }
-
-  protected render() {
-    const defaultLocale: FrontendLocaleData = {
-      language: "en",
-      number_format: NumberFormat.language,
-      time_format: TimeFormat.language,
-      date_format: DateFormat.language,
-      first_weekday: FirstWeekday.language,
-      time_zone: TimeZone.local,
-    };
-    return html`
-      <ha-control-select
-        .value=${this.selection}
-        .options=${timeOptions}
-        @value-changed=${this.handleValueChanged}
-      >
-      </ha-control-select>
-      <mwc-list>
-        <div class="container header">
-          <div>Language</div>
-          <div class="center">Default (lang)</div>
-          <div class="center">12 Hours</div>
-          <div class="center">24 Hours</div>
-        </div>
-        ${Object.entries(translationMetadata.translations)
-          .filter(([key, _]) => key !== "test")
-          .map(
-            ([key, value]) => html`
-              <div class="container">
-                <div>${value.nativeName}</div>
-                <div class="center">
-                  ${formatTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.language,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.am_pm,
-                    },
-                    demoConfig
-                  )}
-                </div>
-                <div class="center">
-                  ${formatTime(
-                    this.date,
-                    {
-                      ...defaultLocale,
-                      language: key,
-                      time_format: TimeFormat.twenty_four,
-                    },
-                    demoConfig
-                  )}
-                </div>
-              </div>
-            `
-          )}
-      </mwc-list>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-control-select {
-        max-width: 800px;
-        margin: 12px auto;
-      }
-      .header {
-        font-weight: bold;
-      }
-      .center {
-        text-align: center;
-      }
-      .container {
-        max-width: 600px;
-        margin: 12px auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-      }
-
-      .container > div {
-        flex-grow: 1;
-        width: 20%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-date-time-time": DemoDateTimeTime;
-  }
-}

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

@@ -9,7 +9,7 @@ const CONFIGS = [
     heading: "markdown-it demo",
     config: `
 - type: markdown
-  content: |
+  content: >-
     # h1 Heading 8-)
 
     ## h2 Heading
@@ -65,15 +65,6 @@ const CONFIGS = [
     >> ...by using additional greater-than signs right next to each other...
     > > > ...or with spaces between arrows.
 
-    > **Warning** Hey there
-    > This is a warning with a title
-
-    > **Note**
-    > This is a note
-
-    > **Note**
-    > This is a multiline note
-    > Lorem ipsum...
 
     ## Lists
 

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

@@ -135,9 +135,6 @@ const ENTITIES: HassEntity[] = [
   createEntity("climate.fan_only", "fan_only"),
   createEntity("climate.auto_idle", "auto", undefined, { hvac_action: "idle" }),
   createEntity("climate.auto_off", "auto", undefined, { hvac_action: "off" }),
-  createEntity("climate.auto_preheating", "auto", undefined, {
-    hvac_action: "preheating",
-  }),
   createEntity("climate.auto_heating", "auto", undefined, {
     hvac_action: "heating",
   }),
@@ -357,7 +354,6 @@ export class DemoEntityState extends LitElement {
               hass.localize,
               entry.stateObj,
               hass.locale,
-              hass.config,
               hass.entities
             )}`,
         },

hassio/src/backups/hassio-backups.ts

@@ -136,15 +136,6 @@ export class HassioBackups extends LitElement {
         sortable: true,
         template: (entry: number) => Math.ceil(entry * 10) / 10 + " MB",
       },
-      location: {
-        title: this.supervisor.localize("backup.location"),
-        width: "15%",
-        hidden: narrow,
-        filterable: true,
-        sortable: true,
-        template: (entry: string | null) =>
-          entry || this.supervisor.localize("backup.data_disk"),
-      },
       date: {
         title: this.supervisor.localize("backup.created"),
         width: "15%",

hassio/src/components/supervisor-backup-content.ts

@@ -143,11 +143,7 @@ export class SupervisorBackupContent extends LitElement {
               : this._localize("partial_backup")}
             (${Math.ceil(this.backup.size * 10) / 10 + " MB"})<br />
             ${this.hass
-              ? formatDateTime(
-                  new Date(this.backup.date),
-                  this.hass.locale,
-                  this.hass.config
-                )
+              ? formatDateTime(new Date(this.backup.date), this.hass.locale)
               : this.backup.date}
           </div>`
         : html`<paper-input
@@ -340,9 +336,7 @@ export class SupervisorBackupContent extends LitElement {
     const data: any = {};
 
     if (!this.backup) {
-      data.name =
-        this.backupName ||
-        formatDate(new Date(), this.hass.locale, this.hass.config);
+      data.name = this.backupName || formatDate(new Date(), this.hass.locale);
     }
 
     if (this.backupHasPassword) {

package.json

@@ -25,34 +25,33 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.22.5",
+    "@babel/runtime": "7.22.3",
     "@braintree/sanitize-url": "6.0.2",
-    "@codemirror/autocomplete": "6.8.0",
+    "@codemirror/autocomplete": "6.7.1",
     "@codemirror/commands": "6.2.4",
-    "@codemirror/language": "6.8.0",
+    "@codemirror/language": "6.7.0",
     "@codemirror/legacy-modes": "6.3.2",
-    "@codemirror/search": "6.5.0",
+    "@codemirror/search": "6.4.0",
     "@codemirror/state": "6.2.1",
-    "@codemirror/view": "6.13.2",
+    "@codemirror/view": "6.12.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.10.0",
-    "@formatjs/intl-displaynames": "6.5.0",
-    "@formatjs/intl-getcanonicallocales": "2.2.1",
-    "@formatjs/intl-listformat": "7.4.0",
-    "@formatjs/intl-locale": "3.3.2",
-    "@formatjs/intl-numberformat": "8.7.0",
-    "@formatjs/intl-pluralrules": "5.2.4",
-    "@formatjs/intl-relativetimeformat": "11.2.4",
+    "@formatjs/intl-datetimeformat": "6.8.0",
+    "@formatjs/intl-displaynames": "6.3.2",
+    "@formatjs/intl-getcanonicallocales": "2.2.0",
+    "@formatjs/intl-locale": "3.3.0",
+    "@formatjs/intl-numberformat": "8.5.0",
+    "@formatjs/intl-pluralrules": "5.2.2",
+    "@formatjs/intl-relativetimeformat": "11.2.2",
     "@fullcalendar/core": "6.1.8",
     "@fullcalendar/daygrid": "6.1.8",
     "@fullcalendar/interaction": "6.1.8",
     "@fullcalendar/list": "6.1.8",
     "@fullcalendar/timegrid": "6.1.8",
     "@lezer/highlight": "1.1.6",
-    "@lit-labs/context": "0.3.3",
+    "@lit-labs/context": "0.3.2",
     "@lit-labs/motion": "1.0.3",
-    "@lit-labs/virtualizer": "2.0.3",
-    "@lrnwebcomponents/simple-tooltip": "7.0.2",
+    "@lit-labs/virtualizer": "2.0.2",
+    "@lrnwebcomponents/simple-tooltip": "7.0.0",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-button": "0.27.0",
@@ -78,7 +77,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.0.0-pre.10",
+    "@material/web": "=1.0.0-pre.9",
     "@mdi/js": "7.2.96",
     "@mdi/svg": "7.2.96",
     "@polymer/app-layout": "3.1.0",
@@ -93,8 +92,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.1.1",
-    "@vaadin/vaadin-themable-mixin": "24.1.1",
+    "@vaadin/combo-box": "24.0.7",
+    "@vaadin/vaadin-themable-mixin": "24.0.7",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -104,7 +103,7 @@
     "app-datepicker": "5.1.1",
     "chart.js": "3.3.2",
     "comlink": "4.4.1",
-    "core-js": "3.31.0",
+    "core-js": "3.30.2",
     "cropperjs": "1.5.13",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
@@ -112,10 +111,10 @@
     "deep-freeze": "0.0.1",
     "fuse.js": "6.6.2",
     "google-timezones-json": "1.1.0",
-    "hls.js": "1.4.6",
+    "hls.js": "1.4.4",
     "home-assistant-js-websocket": "8.0.1",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.0",
+    "intl-messageformat": "10.3.5",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
@@ -132,36 +131,36 @@
     "rrule": "2.7.2",
     "sortablejs": "1.15.0",
     "superstruct": "1.0.3",
-    "tinykeys": "2.1.0",
-    "tsparticles-engine": "2.10.1",
-    "tsparticles-preset-links": "2.10.1",
+    "tinykeys": "1.4.0",
+    "tsparticles-engine": "2.9.3",
+    "tsparticles-preset-links": "2.9.3",
     "unfetch": "5.0.0",
     "vis-data": "7.1.6",
     "vis-network": "9.1.6",
     "vue": "2.7.14",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
-    "workbox-cacheable-response": "7.0.0",
-    "workbox-core": "7.0.0",
-    "workbox-expiration": "7.0.0",
-    "workbox-precaching": "7.0.0",
-    "workbox-routing": "7.0.0",
-    "workbox-strategies": "7.0.0",
+    "workbox-cacheable-response": "6.6.0",
+    "workbox-core": "6.6.0",
+    "workbox-expiration": "6.6.0",
+    "workbox-precaching": "6.6.0",
+    "workbox-routing": "6.6.0",
+    "workbox-strategies": "6.6.0",
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.22.5",
-    "@babel/plugin-proposal-decorators": "7.22.5",
-    "@babel/plugin-transform-runtime": "7.22.5",
-    "@babel/preset-env": "7.22.5",
-    "@babel/preset-typescript": "7.22.5",
+    "@babel/core": "7.22.1",
+    "@babel/plugin-proposal-decorators": "7.22.3",
+    "@babel/plugin-transform-runtime": "7.22.4",
+    "@babel/preset-env": "7.22.4",
+    "@babel/preset-typescript": "7.21.5",
     "@koa/cors": "4.0.0",
-    "@octokit/auth-oauth-device": "5.0.2",
-    "@octokit/plugin-retry": "5.0.4",
-    "@octokit/rest": "19.0.13",
+    "@octokit/auth-oauth-device": "4.0.4",
+    "@octokit/plugin-retry": "4.1.6",
+    "@octokit/rest": "19.0.11",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "25.0.1",
+    "@rollup/plugin-commonjs": "25.0.0",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
@@ -173,7 +172,7 @@
     "@types/html-minifier-terser": "7.0.0",
     "@types/js-yaml": "4.0.5",
     "@types/leaflet": "1.9.3",
-    "@types/leaflet-draw": "1.0.7",
+    "@types/leaflet-draw": "1.0.6",
     "@types/marked": "4.3.1",
     "@types/mocha": "10.0.1",
     "@types/qrcode": "1.5.0",
@@ -181,15 +180,15 @@
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.5",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.59.11",
-    "@typescript-eslint/parser": "5.59.11",
+    "@typescript-eslint/eslint-plugin": "5.59.8",
+    "@typescript-eslint/parser": "5.59.8",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",
     "babel-plugin-template-html-minifier": "4.1.0",
     "chai": "4.3.7",
     "del": "7.0.0",
-    "eslint": "8.43.0",
+    "eslint": "8.41.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.0.0",
     "eslint-config-prettier": "8.8.0",
@@ -197,13 +196,13 @@
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-lit": "1.8.3",
-    "eslint-plugin-lit-a11y": "3.0.0",
+    "eslint-plugin-lit-a11y": "2.4.1",
     "eslint-plugin-unused-imports": "2.0.0",
     "eslint-plugin-wc": "1.5.0",
     "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
-    "glob": "10.2.7",
+    "glob": "10.2.6",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.4.8",
@@ -215,7 +214,7 @@
     "instant-mocha": "1.5.1",
     "jszip": "3.10.1",
     "lint-staged": "13.2.2",
-    "lit-analyzer": "2.0.0-pre.3",
+    "lit-analyzer": "1.2.1",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.0",
     "map-stream": "0.0.7",
@@ -228,23 +227,23 @@
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.9.2",
+    "rollup-plugin-visualizer": "5.9.0",
     "serve-handler": "6.1.5",
-    "sinon": "15.1.2",
+    "sinon": "15.1.0",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.1",
     "tar": "6.1.15",
     "terser-webpack-plugin": "5.3.9",
-    "ts-lit-plugin": "2.0.0-pre.1",
-    "typescript": "5.1.3",
+    "ts-lit-plugin": "1.2.1",
+    "typescript": "4.9.5",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.87.0",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack": "5.84.1",
+    "webpack-cli": "5.1.1",
+    "webpack-dev-server": "4.15.0",
     "webpack-manifest-plugin": "5.0.0",
     "webpackbar": "5.0.2",
-    "workbox-build": "7.0.0"
+    "workbox-build": "6.6.0"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
@@ -256,5 +255,5 @@
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.6.0"
+  "packageManager": "yarn@3.5.1"
 }

pyproject.toml

@@ -4,14 +4,14 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230608.0"
+version      = "20230606.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
 ]
-requires-python = ">=3.10.0"
+requires-python = ">=3.4.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

renovate.json

@@ -19,20 +19,14 @@
   },
   "packageRules": [
     {
-      "description": "MDC packages are pinned to the same version as MWC",
+      "description": ["MDC packages are pinned to the same version as MWC"],
       "extends": ["monorepo:material-components-web"],
       "enabled": false
     },
     {
-      "description": "Vue is only used by date range which is only v2",
+      "description": ["Vue is only used by date range which is only v2"],
       "matchPackageNames": ["vue"],
       "allowedVersions": "< 3"
-    },
-    {
-      "description": "Group tsparticles engine and presets",
-      "groupName": "tsparticles",
-      "matchPackageNames": ["tsparticles-engine"],
-      "matchPackagePrefixes": ["tsparticles-preset-"]
     }
   ]
 }

script/bootstrap

@@ -8,9 +8,9 @@ cd "$(dirname "$0")/.."
 
 # Install/upgrade node when inside devcontainer
 if [[ -n "$DEVCONTAINER" ]]; then
-    nodeCurrent=$(nvm version default || :)
+    nodeCurrent=$(nvm version default || echo "")
     nodeLatest=$(nvm version-remote "$(cat .nvmrc)")
-    if [[ -z "$nodeCurrent" || "$nodeCurrent" == "N/A" ]]; then
+    if [[ -z "$nodeCurrent" ]]; then
         nvm install
     elif [[ "$nodeCurrent" != "$nodeLatest" ]]; then
         nvm install --reinstall-packages-from="$nodeCurrent" --default

src/common/const.ts

@@ -33,7 +33,6 @@ import {
   mdiGoogleCirclesCommunities,
   mdiHomeAssistant,
   mdiHomeAutomation,
-  mdiImage,
   mdiImageFilterFrames,
   mdiLightbulb,
   mdiLightningBolt,
@@ -91,7 +90,6 @@ export const FIXED_DOMAIN_ICONS = {
   group: mdiGoogleCirclesCommunities,
   homeassistant: mdiHomeAssistant,
   homekit: mdiHomeAutomation,
-  image: mdiImage,
   image_processing: mdiImageFilterFrames,
   input_button: mdiGestureTapButton,
   input_datetime: mdiCalendarClock,

src/common/datetime/absolute_time.ts

@@ -1,5 +1,4 @@
 import { isSameDay, isSameYear } from "date-fns";
-import { HassConfig } from "home-assistant-js-websocket";
 import { FrontendLocaleData } from "../../data/translation";
 import {
   formatShortDateTime,
@@ -10,16 +9,15 @@ import { formatTime } from "./format_time";
 export const absoluteTime = (
   from: Date,
   locale: FrontendLocaleData,
-  config: HassConfig,
   to?: Date
 ): string => {
   const _to = to ?? new Date();
 
   if (isSameDay(from, _to)) {
-    return formatTime(from, locale, config);
+    return formatTime(from, locale);
   }
   if (isSameYear(from, _to)) {
-    return formatShortDateTime(from, locale, config);
+    return formatShortDateTime(from, locale);
   }
-  return formatShortDateTimeWithYear(from, locale, config);
+  return formatShortDateTimeWithYear(from, locale);
 };

src/common/datetime/calc_date.ts

@@ -1,25 +0,0 @@
-import { utcToZonedTime, zonedTimeToUtc } from "date-fns-tz";
-import { HassConfig } from "home-assistant-js-websocket";
-import { FrontendLocaleData, TimeZone } from "../../data/translation";
-
-const calcZonedDate = (
-  date: Date,
-  tz: string,
-  fn: (date: Date, options?: any) => Date,
-  options?
-) => {
-  const inputZoned = utcToZonedTime(date, tz);
-  const fnZoned = fn(inputZoned, options);
-  return zonedTimeToUtc(fnZoned, tz);
-};
-
-export const calcDate = (
-  date: Date,
-  fn: (date: Date, options?: any) => Date,
-  locale: FrontendLocaleData,
-  config: HassConfig,
-  options?
-) =>
-  locale.time_zone === TimeZone.server
-    ? calcZonedDate(date, config.time_zone, fn, options)
-    : fn(date, options);

src/common/datetime/format_date.ts

@@ -1,4 +1,3 @@
-import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData, DateFormat } from "../../data/translation";
 import "../../resources/intl-polyfill";
@@ -6,44 +5,37 @@ import "../../resources/intl-polyfill";
 // Tuesday, August 10
 export const formatDateWeekdayDay = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateWeekdayDayMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatDateWeekdayDayMem(locale).format(dateObj);
 
 const formatDateWeekdayDayMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       weekday: "long",
       month: "long",
       day: "numeric",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // August 10, 2021
-export const formatDate = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateMem(locale, config.time_zone).format(dateObj);
+export const formatDate = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMem(locale).format(dateObj);
 
 const formatDateMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       year: "numeric",
       month: "long",
       day: "numeric",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // 10/08/2021
 export const formatDateNumeric = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
+  locale: FrontendLocaleData
 ) => {
-  const formatter = formatDateNumericMem(locale, config.time_zone);
+  const formatter = formatDateNumericMem(locale);
 
   if (
     locale.date_format === DateFormat.language ||
@@ -75,120 +67,83 @@ export const formatDateNumeric = (
   return formats[locale.date_format];
 };
 
-const formatDateNumericMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) => {
-    const localeString =
-      locale.date_format === DateFormat.system ? undefined : locale.language;
-
-    if (
-      locale.date_format === DateFormat.language ||
-      locale.date_format === DateFormat.system
-    ) {
-      return new Intl.DateTimeFormat(localeString, {
-        year: "numeric",
-        month: "numeric",
-        day: "numeric",
-        timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-      });
-    }
+const formatDateNumericMem = memoizeOne((locale: FrontendLocaleData) => {
+  const localeString =
+    locale.date_format === DateFormat.system ? undefined : locale.language;
 
+  if (
+    locale.date_format === DateFormat.language ||
+    locale.date_format === DateFormat.system
+  ) {
     return new Intl.DateTimeFormat(localeString, {
       year: "numeric",
       month: "numeric",
       day: "numeric",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     });
   }
-);
+
+  return new Intl.DateTimeFormat(localeString, {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+  });
+});
 
 // Aug 10
-export const formatDateShort = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateShortMem(locale, config.time_zone).format(dateObj);
+export const formatDateShort = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateShortMem(locale).format(dateObj);
 
 const formatDateShortMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       day: "numeric",
       month: "short",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // August 2021
 export const formatDateMonthYear = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateMonthYearMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatDateMonthYearMem(locale).format(dateObj);
 
 const formatDateMonthYearMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       month: "long",
       year: "numeric",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // August
-export const formatDateMonth = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateMonthMem(locale, config.time_zone).format(dateObj);
+export const formatDateMonth = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMonthMem(locale).format(dateObj);
 
 const formatDateMonthMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       month: "long",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // 2021
-export const formatDateYear = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateYearMem(locale, config.time_zone).format(dateObj);
+export const formatDateYear = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateYearMem(locale).format(dateObj);
 
 const formatDateYearMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       year: "numeric",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );
 
 // Monday
-export const formatDateWeekday = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateWeekdayMem(locale, config.time_zone).format(dateObj);
+export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateWeekdayMem(locale).format(dateObj);
 
 const formatDateWeekdayMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
       weekday: "long",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
-);
-
-// Mon
-export const formatDateWeekdayShort = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateWeekdayShortMem(locale, config.time_zone).format(dateObj);
-
-const formatDateWeekdayShortMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      weekday: "short",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );

src/common/datetime/format_date_time.ts

@@ -1,99 +1,102 @@
-import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import "../../resources/intl-polyfill";
+import { useAmPm } from "./use_am_pm";
 import { formatDateNumeric } from "./format_date";
 import { formatTime } from "./format_time";
-import { useAmPm } from "./use_am_pm";
 
 // August 9, 2021, 8:23 AM
-export const formatDateTime = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateTimeMem(locale, config.time_zone).format(dateObj);
+export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateTimeMem(locale).format(dateObj);
 
 const formatDateTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // Aug 9, 2021, 8:23 AM
 export const formatShortDateTimeWithYear = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatShortDateTimeWithYearMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatShortDateTimeWithYearMem(locale).format(dateObj);
 
 const formatShortDateTimeWithYearMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // Aug 9, 8:23 AM
 export const formatShortDateTime = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatShortDateTimeMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatShortDateTimeMem(locale).format(dateObj);
 
 const formatShortDateTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      month: "short",
-      day: "numeric",
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        month: "short",
+        day: "numeric",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatDateTimeWithSecondsMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatDateTimeWithSecondsMem(locale).format(dateObj);
 
 const formatDateTimeWithSecondsMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // 9/8/2021, 8:23 AM
 export const formatDateTimeNumeric = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) =>
-  `${formatDateNumeric(dateObj, locale, config)}, ${formatTime(
-    dateObj,
-    locale,
-    config
-  )}`;
+  locale: FrontendLocaleData
+) => `${formatDateNumeric(dateObj, locale)}, ${formatTime(dateObj, locale)}`;

src/common/datetime/format_time.ts

@@ -1,76 +1,76 @@
-import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import "../../resources/intl-polyfill";
 import { useAmPm } from "./use_am_pm";
 
 // 9:15 PM || 21:15
-export const formatTime = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatTimeMem(locale, config.time_zone).format(dateObj);
+export const formatTime = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatTimeMem(locale).format(dateObj);
 
 const formatTimeMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      hour: "numeric",
-      minute: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // 9:15:24 PM || 21:15:24
 export const formatTimeWithSeconds = (
   dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatTimeWithSecondsMem(locale, config.time_zone).format(dateObj);
+  locale: FrontendLocaleData
+) => formatTimeWithSecondsMem(locale).format(dateObj);
 
 const formatTimeWithSecondsMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // Tuesday 7:00 PM || Tuesday 19:00
-export const formatTimeWeekday = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatTimeWeekdayMem(locale, config.time_zone).format(dateObj);
+export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
+  formatTimeWeekdayMem(locale).format(dateObj);
 
 const formatTimeWeekdayMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
-    new Intl.DateTimeFormat(locale.language, {
-      weekday: "long",
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
-      minute: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
-    })
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        weekday: "long",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
 );
 
 // 21:15
-export const formatTime24h = (
-  dateObj: Date,
-  locale: FrontendLocaleData,
-  config: HassConfig
-) => formatTime24hMem(locale, config.time_zone).format(dateObj);
+export const formatTime24h = (dateObj: Date) =>
+  formatTime24hMem().format(dateObj);
 
 const formatTime24hMem = memoizeOne(
-  (locale: FrontendLocaleData, serverTimeZone: string) =>
+  () =>
     // en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
     new Intl.DateTimeFormat("en-GB", {
       hour: "numeric",
       minute: "2-digit",
       hour12: false,
-      timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
     })
 );

src/common/datetime/use_am_pm.ts

@@ -8,10 +8,8 @@ export const useAmPm = memoizeOne((locale: FrontendLocaleData): boolean => {
   ) {
     const testLanguage =
       locale.time_format === TimeFormat.language ? locale.language : undefined;
-    const test = new Date("January 1, 2023 22:00:00").toLocaleString(
-      testLanguage
-    );
-    return test.includes("10");
+    const test = new Date().toLocaleString(testLanguage);
+    return test.includes("AM") || test.includes("PM");
   }
 
   return locale.time_format === TimeFormat.am_pm;

src/common/decorators/local-storage.ts

@@ -1,15 +1,13 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { ReactiveElement } from "lit";
-import { InternalPropertyDeclaration } from "lit/decorators";
+import { PropertyDeclaration, ReactiveElement } from "lit";
 import type { ClassElement } from "../../types";
 
 type Callback = (oldValue: any, newValue: any) => void;
 
-class StorageClass {
-  constructor(storage = window.localStorage) {
+class Storage {
+  constructor(subscribe = true, storage = window.localStorage) {
     this.storage = storage;
-    if (storage !== window.localStorage) {
-      // storage events only work for localStorage
+    if (!subscribe) {
       return;
     }
     window.addEventListener("storage", (ev: StorageEvent) => {
@@ -79,7 +77,6 @@ class StorageClass {
   }
 
   public setValue(storageKey: string, value: any): any {
-    const oldValue = this._storage[storageKey];
     this._storage[storageKey] = value;
     try {
       if (value === undefined) {
@@ -89,68 +86,49 @@ class StorageClass {
       }
     } catch (err: any) {
       // Safari in private mode doesn't allow localstorage
-    } finally {
-      if (this._listeners[storageKey]) {
-        this._listeners[storageKey].forEach((listener) =>
-          listener(oldValue, value)
-        );
-      }
     }
   }
 }
 
-const storages: Record<string, StorageClass> = {};
+const subscribeStorage = new Storage();
 
-export const storage =
-  (options: {
-    key?: string;
-    storage?: "localStorage" | "sessionStorage";
-    subscribe?: boolean;
-    state?: boolean;
-    stateOptions?: InternalPropertyDeclaration;
-  }): any =>
+export const LocalStorage =
+  (
+    storageKey?: string,
+    property?: boolean,
+    subscribe = true,
+    storageType?: globalThis.Storage,
+    propertyOptions?: PropertyDeclaration
+  ): any =>
   (clsElement: ClassElement) => {
-    const storageName = options.storage || "localStorage";
-
-    let storageInstance: StorageClass;
-    if (storageName && storageName in storages) {
-      storageInstance = storages[storageName];
-    } else {
-      storageInstance = new StorageClass(window[storageName]);
-      storages[storageName] = storageInstance;
-    }
+    const storage =
+      subscribe && !storageType
+        ? subscribeStorage
+        : new Storage(subscribe, storageType);
 
     const key = String(clsElement.key);
-    const storageKey = options.key || String(clsElement.key);
+    storageKey = storageKey || String(clsElement.key);
     const initVal = clsElement.initializer
       ? clsElement.initializer()
       : undefined;
 
-    storageInstance.addFromStorage(storageKey);
+    storage.addFromStorage(storageKey);
 
-    const subscribeChanges =
-      options.subscribe !== false
-        ? (el: ReactiveElement): UnsubscribeFunc =>
-            storageInstance.subscribeChanges(
-              storageKey!,
-              (oldValue, _newValue) => {
-                el.requestUpdate(clsElement.key, oldValue);
-              }
-            )
-        : undefined;
+    const subscribeChanges = (el: ReactiveElement): UnsubscribeFunc =>
+      storage.subscribeChanges(storageKey!, (oldValue) => {
+        el.requestUpdate(clsElement.key, oldValue);
+      });
 
     const getValue = (): any =>
-      storageInstance.hasKey(storageKey!)
-        ? storageInstance.getValue(storageKey!)
-        : initVal;
+      storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
 
     const setValue = (el: ReactiveElement, value: any) => {
       let oldValue: unknown | undefined;
-      if (options.state) {
+      if (property) {
         oldValue = getValue();
       }
-      storageInstance.setValue(storageKey!, value);
-      if (options.state) {
+      storage.setValue(storageKey!, value);
+      if (property) {
         el.requestUpdate(clsElement.key, oldValue);
       }
     };
@@ -170,23 +148,22 @@ export const storage =
         configurable: true,
       },
       finisher(cls: typeof ReactiveElement) {
-        if (options.state && options.subscribe) {
+        if (property && subscribe) {
           const connectedCallback = cls.prototype.connectedCallback;
           const disconnectedCallback = cls.prototype.disconnectedCallback;
           cls.prototype.connectedCallback = function () {
             connectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`] = subscribeChanges?.(this);
+            this[`__unbsubLocalStorage${key}`] = subscribeChanges(this);
           };
           cls.prototype.disconnectedCallback = function () {
             disconnectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`]?.();
-            this[`__unbsubLocalStorage${key}`] = undefined;
+            this[`__unbsubLocalStorage${key}`]();
           };
         }
-        if (options.state) {
+        if (property) {
           cls.createProperty(clsElement.key, {
             noAccessor: true,
-            ...options.stateOptions,
+            ...propertyOptions,
           });
         }
       },

src/common/entity/compute_attribute_display.ts

@@ -1,4 +1,4 @@
-import { HassConfig, HassEntity } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import { html, TemplateResult } from "lit";
 import { until } from "lit/directives/until";
 import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
@@ -20,7 +20,6 @@ export const computeAttributeValueDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
-  config: HassConfig,
   entities: HomeAssistant["entities"],
   attribute: string,
   value?: any
@@ -60,14 +59,14 @@ export const computeAttributeValueDisplay = (
       if (isTimestamp(attributeValue)) {
         const date = new Date(attributeValue);
         if (checkValidDate(date)) {
-          return formatDateTimeWithSeconds(date, locale, config);
+          return formatDateTimeWithSeconds(date, locale);
         }
       }
 
       // Value was not a timestamp, so only do date formatting
       const date = new Date(attributeValue);
       if (checkValidDate(date)) {
-        return formatDate(date, locale, config);
+        return formatDate(date, locale);
       }
     }
   }
@@ -93,7 +92,6 @@ export const computeAttributeValueDisplay = (
           localize,
           stateObj,
           locale,
-          config,
           entities,
           attribute,
           item

src/common/entity/compute_state_display.ts

@@ -1,7 +1,7 @@
-import { HassConfig, HassEntity } from "home-assistant-js-websocket";
+import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
-import { FrontendLocaleData, TimeZone } from "../../data/translation";
+import { FrontendLocaleData } from "../../data/translation";
 import {
   updateIsInstallingFromAttributes,
   UPDATE_SUPPORT_PROGRESS,
@@ -28,14 +28,12 @@ export const computeStateDisplaySingleEntity = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
-  config: HassConfig,
   entity: EntityRegistryDisplayEntry | undefined,
   state?: string
 ): string =>
   computeStateDisplayFromEntityAttributes(
     localize,
     locale,
-    config,
     entity,
     stateObj.entity_id,
     stateObj.attributes,
@@ -46,7 +44,6 @@ export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
-  config: HassConfig,
   entities: HomeAssistant["entities"],
   state?: string
 ): string => {
@@ -57,7 +54,6 @@ export const computeStateDisplay = (
   return computeStateDisplayFromEntityAttributes(
     localize,
     locale,
-    config,
     entity,
     stateObj.entity_id,
     stateObj.attributes,
@@ -68,7 +64,6 @@ export const computeStateDisplay = (
 export const computeStateDisplayFromEntityAttributes = (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
-  config: HassConfig,
   entity: EntityRegistryDisplayEntry | undefined,
   entityId: string,
   attributes: any,
@@ -124,40 +119,29 @@ export const computeStateDisplayFromEntityAttributes = (
 
   if (domain === "datetime") {
     const time = new Date(state);
-    return formatDateTime(time, locale, config);
+    return formatDateTime(time, locale);
   }
 
   if (["date", "input_datetime", "time"].includes(domain)) {
     // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
     // Attributes aren't available, we have to use `state`.
-
-    // These are timezone agnostic, so we should NOT use the system timezone here.
     try {
       const components = state.split(" ");
       if (components.length === 2) {
         // Date and time.
-        return formatDateTime(
-          new Date(components.join("T")),
-          { ...locale, time_zone: TimeZone.local },
-          config
-        );
+        return formatDateTime(new Date(components.join("T")), locale);
       }
       if (components.length === 1) {
         if (state.includes("-")) {
           // Date only.
-          return formatDate(
-            new Date(`${state}T00:00`),
-            { ...locale, time_zone: TimeZone.local },
-            config
-          );
+          return formatDate(new Date(`${state}T00:00`), locale);
         }
         if (state.includes(":")) {
           // Time only.
           const now = new Date();
           return formatTime(
             new Date(`${now.toISOString().split("T")[0]}T${state}`),
-            { ...locale, time_zone: TimeZone.local },
-            config
+            locale
           );
         }
       }
@@ -191,13 +175,11 @@ export const computeStateDisplayFromEntityAttributes = (
 
   // state is a timestamp
   if (
-    ["button", "image", "input_button", "scene", "stt", "tts"].includes(
-      domain
-    ) ||
+    ["button", "input_button", "scene", "stt", "tts"].includes(domain) ||
     (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(state), locale, config);
+      return formatDateTime(new Date(state), locale);
     } catch (_err) {
       return state;
     }

src/common/entity/get_states.ts

@@ -102,15 +102,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
     frontend_stream_type: ["hls", "web_rtc"],
   },
   climate: {
-    hvac_action: [
-      "off",
-      "idle",
-      "preheating",
-      "heating",
-      "cooling",
-      "drying",
-      "fan",
-    ],
+    hvac_action: ["off", "idle", "heating", "cooling", "drying", "fan"],
   },
   cover: {
     device_class: [

src/common/translations/day_names.ts

@@ -1,12 +1,10 @@
 import { addDays, startOfWeek } from "date-fns";
-import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { formatDateWeekday } from "../datetime/format_date";
 
-export const dayNames = memoizeOne(
-  (locale: FrontendLocaleData, config: HassConfig): string[] =>
-    Array.from({ length: 7 }, (_, d) =>
-      formatDateWeekday(addDays(startOfWeek(new Date()), d), locale, config)
-    )
+export const dayNames = memoizeOne((locale: FrontendLocaleData): string[] =>
+  Array.from({ length: 7 }, (_, d) =>
+    formatDateWeekday(addDays(startOfWeek(new Date()), d), locale)
+  )
 );

src/common/translations/month_names.ts

@@ -1,12 +1,10 @@
 import { addMonths, startOfYear } from "date-fns";
-import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
 import { formatDateMonth } from "../datetime/format_date";
 
-export const monthNames = memoizeOne(
-  (locale: FrontendLocaleData, config: HassConfig): string[] =>
-    Array.from({ length: 12 }, (_, m) =>
-      formatDateMonth(addMonths(startOfYear(new Date()), m), locale, config)
-    )
+export const monthNames = memoizeOne((locale: FrontendLocaleData): string[] =>
+  Array.from({ length: 12 }, (_, m) =>
+    formatDateMonth(addMonths(startOfYear(new Date()), m), locale)
+  )
 );

src/components/chart/chart-date-adapter.ts

@@ -80,89 +80,33 @@ _adapters._date.override({
   format: function (time, fmt: keyof typeof FORMATS) {
     switch (fmt) {
       case "datetime":
-        return formatDateTime(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateTime(new Date(time), this.options.locale);
       case "datetimeseconds":
-        return formatDateTimeWithSeconds(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateTimeWithSeconds(new Date(time), this.options.locale);
       case "millisecond":
-        return formatTimeWithSeconds(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatTimeWithSeconds(new Date(time), this.options.locale);
       case "second":
-        return formatTimeWithSeconds(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatTimeWithSeconds(new Date(time), this.options.locale);
       case "minute":
-        return formatTime(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatTime(new Date(time), this.options.locale);
       case "hour":
-        return formatTime(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatTime(new Date(time), this.options.locale);
       case "weekday":
-        return formatDateWeekdayDay(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateWeekdayDay(new Date(time), this.options.locale);
       case "date":
-        return formatDate(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDate(new Date(time), this.options.locale);
       case "day":
-        return formatDateShort(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateShort(new Date(time), this.options.locale);
       case "week":
-        return formatDate(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDate(new Date(time), this.options.locale);
       case "month":
-        return formatDateMonth(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateMonth(new Date(time), this.options.locale);
       case "monthyear":
-        return formatDateMonthYear(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateMonthYear(new Date(time), this.options.locale);
       case "quarter":
-        return formatDate(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDate(new Date(time), this.options.locale);
       case "year":
-        return formatDateYear(
-          new Date(time),
-          this.options.locale,
-          this.options.config
-        );
+        return formatDateYear(new Date(time), this.options.locale);
       default:
         return "";
     }

src/components/chart/state-history-chart-line.ts

@@ -30,8 +30,6 @@ class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
-  @property({ attribute: false }) public startTime!: Date;
-
   @property({ attribute: false }) public endTime!: Date;
 
   @property({ type: Number }) public paddingYAxis = 0;
@@ -59,12 +57,7 @@ class StateHistoryChartLine extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
-    if (
-      !this.hasUpdated ||
-      changedProps.has("showNames") ||
-      changedProps.has("startTime") ||
-      changedProps.has("endTime")
-    ) {
+    if (!this.hasUpdated || changedProps.has("showNames")) {
       this._chartOptions = {
         parsing: false,
         animation: false,
@@ -78,10 +71,8 @@ class StateHistoryChartLine extends LitElement {
             adapters: {
               date: {
                 locale: this.hass.locale,
-                config: this.hass.config,
               },
             },
-            suggestedMin: this.startTime,
             suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,
@@ -154,8 +145,6 @@ class StateHistoryChartLine extends LitElement {
     }
     if (
       changedProps.has("data") ||
-      changedProps.has("startTime") ||
-      changedProps.has("endTime") ||
       this._chartTime <
         new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
     ) {
@@ -386,9 +375,6 @@ class StateHistoryChartLine extends LitElement {
             lastNullDate = date;
           }
         });
-        if (lastNullDate !== null) {
-          pushData(lastNullDate, [null]);
-        }
       }
 
       // Add an entry for final values

src/components/chart/state-history-chart-timeline.ts

@@ -98,7 +98,6 @@ export class StateHistoryChartTimeline extends LitElement {
           adapters: {
             date: {
               locale: this.hass.locale,
-              config: this.hass.config,
             },
           },
           suggestedMin: this.startTime,
@@ -182,16 +181,8 @@ export class StateHistoryChartTimeline extends LitElement {
 
               return [
                 d.label || "",
-                formatDateTimeWithSeconds(
-                  d.start,
-                  this.hass.locale,
-                  this.hass.config
-                ),
-                formatDateTimeWithSeconds(
-                  d.end,
-                  this.hass.locale,
-                  this.hass.config
-                ),
+                formatDateTimeWithSeconds(d.start, this.hass.locale),
+                formatDateTimeWithSeconds(d.end, this.hass.locale),
                 formattedDuration,
               ];
             },

src/components/chart/state-history-charts.ts

@@ -52,12 +52,8 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ attribute: false }) public startTime?: Date;
-
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
-  @property() public hoursToShow?: number;
-
   @property({ type: Boolean }) public showNames = true;
 
   @property({ type: Boolean }) public isLoadingData = false;
@@ -99,24 +95,13 @@ export class StateHistoryCharts extends LitElement {
     this._computedEndTime =
       this.upToNow || !this.endTime || this.endTime > now ? now : this.endTime;
 
-    if (this.startTime) {
-      this._computedStartTime = this.startTime;
-    } else if (this.hoursToShow) {
-      this._computedStartTime = new Date(
-        new Date().getTime() - 60 * 60 * this.hoursToShow * 1000
-      );
-    } else {
-      this._computedStartTime = new Date(
-        this.historyData.timeline.reduce(
-          (minTime, stateInfo) =>
-            Math.min(
-              minTime,
-              new Date(stateInfo.data[0].last_changed).getTime()
-            ),
-          new Date().getTime()
-        )
-      );
-    }
+    this._computedStartTime = new Date(
+      this.historyData.timeline.reduce(
+        (minTime, stateInfo) =>
+          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
+        new Date().getTime()
+      )
+    );
 
     const combinedItems = this.historyData.timeline.length
       ? (this.virtualize
@@ -157,7 +142,6 @@ export class StateHistoryCharts extends LitElement {
           .data=${item.data}
           .identifier=${item.identifier}
           .showNames=${this.showNames}
-          .startTime=${this._computedStartTime}
           .endTime=${this._computedEndTime}
           .paddingYAxis=${this._maxYWidth}
           .names=${this.names}

src/components/chart/statistics-chart.ts

@@ -146,7 +146,6 @@ class StatisticsChart extends LitElement {
           adapters: {
             date: {
               locale: this.hass.locale,
-              config: this.hass.config,
             },
           },
           ticks: {

src/components/data-table/sort-filter.ts

@@ -1,5 +1,5 @@
 import { Remote, wrap } from "comlink";
-import type { Api } from "./sort-filter-worker";
+import type { Api } from "./sort_filter_worker";
 
 type FilterDataType = Api["filterData"];
 type FilterDataParamTypes = Parameters<FilterDataType>;
@@ -9,28 +9,27 @@ type SortDataParamTypes = Parameters<SortDataType>;
 
 let worker: Remote<Api> | undefined;
 
-const getWorker = () => {
-  if (!worker) {
-    worker = wrap(
-      new Worker(
-        /* webpackChunkName: "sort-filter-worker" */
-        new URL("./sort-filter-worker", import.meta.url)
-      )
-    );
-  }
-  return worker;
-};
-
 export const filterData = (
   data: FilterDataParamTypes[0],
   columns: FilterDataParamTypes[1],
   filter: FilterDataParamTypes[2]
-): Promise<ReturnType<FilterDataType>> =>
-  getWorker().filterData(data, columns, filter);
+): Promise<ReturnType<FilterDataType>> => {
+  if (!worker) {
+    worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
+  }
+
+  return worker.filterData(data, columns, filter);
+};
+
 export const sortData = (
   data: SortDataParamTypes[0],
   columns: SortDataParamTypes[1],
   direction: SortDataParamTypes[2],
   sortColumn: SortDataParamTypes[3]
-): Promise<ReturnType<SortDataType>> =>
-  getWorker().sortData(data, columns, direction, sortColumn);
+): Promise<ReturnType<SortDataType>> => {
+  if (!worker) {
+    worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
+  }
+
+  return worker.sortData(data, columns, direction, sortColumn);
+};

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

@@ -26,10 +26,6 @@ import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { ValueChangedEvent, HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import {
-  fuzzyFilterSort,
-  ScorableTextItem,
-} from "../../common/string/filter/sequence-matching";
 
 interface Device {
   name: string;
@@ -37,8 +33,6 @@ interface Device {
   id: string;
 }
 
-type ScorableDevice = ScorableTextItem & Device;
-
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
@@ -125,14 +119,13 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       deviceFilter: this["deviceFilter"],
       entityFilter: this["entityFilter"],
       excludeDevices: this["excludeDevices"]
-    ): ScorableDevice[] => {
+    ): Device[] => {
       if (!devices.length) {
         return [
           {
             id: "no_devices",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_devices"),
-            strings: [],
           },
         ];
       }
@@ -242,7 +235,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           device.area_id && areaLookup[device.area_id]
             ? areaLookup[device.area_id].name
             : this.hass.localize("ui.components.device-picker.no_area"),
-        strings: [device.name || ""],
       }));
       if (!outputDevices.length) {
         return [
@@ -250,7 +242,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
             id: "no_devices",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_match"),
-            strings: [],
           },
         ];
       }
@@ -293,7 +284,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       (this._init && changedProps.has("_opened") && this._opened)
     ) {
       this._init = true;
-      const devices = this._getDevices(
+      (this.comboBox as any).items = this._getDevices(
         this.devices!,
         this.areas!,
         this.entities!,
@@ -304,8 +295,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         this.entityFilter,
         this.excludeDevices
       );
-      this.comboBox.items = devices;
-      this.comboBox.filteredItems = devices;
     }
   }
 
@@ -325,7 +314,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         item-label-path="name"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._deviceChanged}
-        @filter-changed=${this._filterChanged}
       ></ha-combo-box>
     `;
   }
@@ -334,14 +322,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     return this.value || "";
   }
 
-  private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value.toLowerCase();
-    target.filteredItems = filterString.length
-      ? fuzzyFilterSort<ScorableDevice>(filterString, target.items || [])
-      : target.items;
-  }
-
   private _deviceChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     let newValue = ev.detail.value;

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

@@ -111,10 +111,10 @@ class HaDevicesPicker extends LitElement {
     event.stopPropagation();
     const curValue = (event.currentTarget as any).curValue;
     const newValue = event.detail.value;
-    if (newValue === curValue) {
+    if (newValue === curValue || newValue !== "") {
       return;
     }
-    if (newValue === undefined) {
+    if (newValue === "") {
       this._updateDevices(
         this._currentDevices.filter((dev) => dev !== curValue)
       );

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

@@ -7,19 +7,15 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import {
-  fuzzyFilterSort,
-  ScorableTextItem,
-} from "../../common/string/filter/sequence-matching";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { ValueChangedEvent, HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
 
-interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
+interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
 }
 
@@ -163,7 +159,6 @@ export class HaEntityPicker extends LitElement {
               ),
               icon: "mdi:magnify",
             },
-            strings: [],
           },
         ];
       }
@@ -174,14 +169,10 @@ export class HaEntityPicker extends LitElement {
         );
 
         return entityIds
-          .map((key) => {
-            const friendly_name = computeStateName(hass!.states[key]) || key;
-            return {
-              ...hass!.states[key],
-              friendly_name,
-              strings: [key, friendly_name],
-            };
-          })
+          .map((key) => ({
+            ...hass!.states[key],
+            friendly_name: computeStateName(hass!.states[key]) || key,
+          }))
           .sort((entityA, entityB) =>
             caseInsensitiveStringCompare(
               entityA.friendly_name,
@@ -210,14 +201,10 @@ export class HaEntityPicker extends LitElement {
       }
 
       states = entityIds
-        .map((key) => {
-          const friendly_name = computeStateName(hass!.states[key]) || key;
-          return {
-            ...hass!.states[key],
-            friendly_name,
-            strings: [key, friendly_name],
-          };
-        })
+        .map((key) => ({
+          ...hass!.states[key],
+          friendly_name: computeStateName(hass!.states[key]) || key,
+        }))
         .sort((entityA, entityB) =>
           caseInsensitiveStringCompare(
             entityA.friendly_name,
@@ -273,7 +260,6 @@ export class HaEntityPicker extends LitElement {
               ),
               icon: "mdi:magnify",
             },
-            strings: [],
           },
         ];
       }
@@ -307,7 +293,7 @@ export class HaEntityPicker extends LitElement {
         this.excludeEntities
       );
       if (this._initedStates) {
-        this.comboBox.filteredItems = this._states;
+        (this.comboBox as any).filteredItems = this._states;
       }
       this._initedStates = true;
     }
@@ -354,11 +340,12 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
     const filterString = ev.detail.value.toLowerCase();
-    target.filteredItems = filterString.length
-      ? fuzzyFilterSort<HassEntityWithCachedName>(filterString, this._states)
-      : this._states;
+    (this.comboBox as any).filteredItems = this._states.filter(
+      (entityState) =>
+        entityState.entity_id.toLowerCase().includes(filterString) ||
+        computeStateName(entityState).toLowerCase().includes(filterString)
+    );
   }
 
   private _setValue(value: string) {

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

@@ -62,7 +62,6 @@ class HaEntityStatePicker extends LitElement {
                     this.hass.localize,
                     state,
                     this.hass.locale,
-                    this.hass.config,
                     this.hass.entities,
                     key
                   )
@@ -70,7 +69,6 @@ class HaEntityStatePicker extends LitElement {
                     this.hass.localize,
                     state,
                     this.hass.locale,
-                    this.hass.config,
                     this.hass.entities,
                     this.attribute,
                     key

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

@@ -192,7 +192,6 @@ export class HaStateLabelBadge extends LitElement {
               this.hass!.localize,
               entityState,
               this.hass!.locale,
-              this.hass!.config,
               this.hass!.entities
             );
     }

src/components/ha-absolute-time.ts

@@ -64,11 +64,7 @@ class HaAbsoluteTime extends ReactiveElement {
     if (!this.datetime) {
       this.innerHTML = this.hass.localize("ui.components.absolute_time.never");
     } else {
-      this.innerHTML = absoluteTime(
-        new Date(this.datetime),
-        this.hass.locale,
-        this.hass.config
-      );
+      this.innerHTML = absoluteTime(new Date(this.datetime), this.hass.locale);
     }
   }
 }

src/components/ha-area-picker.ts

@@ -7,10 +7,6 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
-import {
-  fuzzyFilterSort,
-  ScorableTextItem,
-} from "../common/string/filter/sequence-matching";
 import {
   AreaRegistryEntry,
   createAreaRegistryEntry,
@@ -32,8 +28,6 @@ import type { HaComboBox } from "./ha-combo-box";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 
-type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
-
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
   item
 ) => html`<mwc-list-item
@@ -312,12 +306,9 @@ export class HaAreaPicker extends LitElement {
         this.entityFilter,
         this.noAdd,
         this.excludeAreas
-      ).map((area) => ({
-        ...area,
-        strings: [area.area_id, ...area.aliases, area.name],
-      }));
-      this.comboBox.items = areas;
-      this.comboBox.filteredItems = areas;
+      );
+      (this.comboBox as any).items = areas;
+      (this.comboBox as any).filteredItems = areas;
     }
   }
 
@@ -354,9 +345,8 @@ export class HaAreaPicker extends LitElement {
       return;
     }
 
-    const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
-      filter,
-      this.comboBox?.items || []
+    const filteredItems = this.comboBox.items?.filter((item) =>
+      item.name.toLowerCase().includes(filter!.toLowerCase())
     );
     if (!this.noAdd && filteredItems?.length === 0) {
       this._suggestion = filter;
@@ -419,7 +409,7 @@ export class HaAreaPicker extends LitElement {
             name,
           });
           const areas = [...Object.values(this.hass.areas), area];
-          this.comboBox.filteredItems = this._getAreas(
+          (this.comboBox as any).filteredItems = this._getAreas(
             areas,
             Object.values(this.hass.devices)!,
             Object.values(this.hass.entities)!,

src/components/ha-attributes.ts

@@ -62,7 +62,6 @@ class HaAttributes extends LitElement {
                           this.hass.localize,
                           this.stateObj!,
                           this.hass.locale,
-                          this.hass.config,
                           this.hass.entities,
                           attribute
                         )}

src/components/ha-climate-state.ts

@@ -28,7 +28,6 @@ class HaClimateState extends LitElement {
                       this.hass.localize,
                       this.stateObj,
                       this.hass.locale,
-                      this.hass.config,
                       this.hass.entities,
                       "preset_mode"
                     )}`
@@ -137,7 +136,6 @@ class HaClimateState extends LitElement {
       this.hass.localize,
       this.stateObj,
       this.hass.locale,
-      this.hass.config,
       this.hass.entities
     );
 
@@ -146,7 +144,6 @@ class HaClimateState extends LitElement {
           this.hass.localize,
           this.stateObj,
           this.hass.locale,
-          this.hass.config,
           this.hass.entities,
           "hvac_action"
         )} (${stateString})`

src/components/ha-control-circular-slider.ts

@@ -1,546 +0,0 @@
-import {
-  DIRECTION_ALL,
-  Manager,
-  Pan,
-  Tap,
-  TouchMouseInput,
-} from "@egjs/hammerjs";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-  svg,
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { styleMap } from "lit/directives/style-map";
-import { fireEvent } from "../common/dom/fire_event";
-import { clamp } from "../common/number/clamp";
-import { arc } from "../resources/svg-arc";
-
-const MAX_ANGLE = 270;
-const ROTATE_ANGLE = 360 - MAX_ANGLE / 2 - 90;
-const RADIUS = 145;
-
-function xy2polar(x: number, y: number) {
-  const r = Math.sqrt(x * x + y * y);
-  const phi = Math.atan2(y, x);
-  return [r, phi];
-}
-
-function rad2deg(rad: number) {
-  return (rad / (2 * Math.PI)) * 360;
-}
-
-type ActiveSlider = "low" | "high" | "value";
-
-declare global {
-  interface HASSDomEvents {
-    "value-changing": { value: unknown };
-    "low-changing": { value: unknown };
-    "low-changed": { value: unknown };
-    "high-changing": { value: unknown };
-    "high-changed": { value: unknown };
-  }
-}
-
-const A11Y_KEY_CODES = new Set([
-  "ArrowRight",
-  "ArrowUp",
-  "ArrowLeft",
-  "ArrowDown",
-  "PageUp",
-  "PageDown",
-  "Home",
-  "End",
-]);
-
-@customElement("ha-control-circular-slider")
-export class HaControlCircularSlider extends LitElement {
-  @property({ type: Boolean, reflect: true })
-  public disabled = false;
-
-  @property({ type: Boolean })
-  public dual?: boolean;
-
-  @property({ type: String })
-  public label?: string;
-
-  @property({ type: String, attribute: "low-label" })
-  public lowLabel?: string;
-
-  @property({ type: String, attribute: "high-label" })
-  public highLabel?: string;
-
-  @property({ type: Number })
-  public value?: number;
-
-  @property({ type: Number })
-  public current?: number;
-
-  @property({ type: Number })
-  public low?: number;
-
-  @property({ type: Number })
-  public high?: number;
-
-  @property({ type: Number })
-  public step = 1;
-
-  @property({ type: Number })
-  public min = 0;
-
-  @property({ type: Number })
-  public max = 100;
-
-  @state()
-  public _activeSlider?: ActiveSlider;
-
-  @state()
-  public _lastSlider?: ActiveSlider;
-
-  private _valueToPercentage(value: number) {
-    return (
-      (clamp(value, this.min, this.max) - this.min) / (this.max - this.min)
-    );
-  }
-
-  private _percentageToValue(value: number) {
-    return (this.max - this.min) * value + this.min;
-  }
-
-  private _steppedValue(value: number) {
-    return Math.round(value / this.step) * this.step;
-  }
-
-  private _boundedValue(value: number) {
-    const min =
-      this._activeSlider === "high" ? Math.min(this.low ?? this.max) : this.min;
-    const max =
-      this._activeSlider === "low" ? Math.max(this.high ?? this.min) : this.max;
-    return Math.min(Math.max(value, min), max);
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    this._setupListeners();
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this._setupListeners();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-  }
-
-  private _mc?: HammerManager;
-
-  private _getPercentageFromEvent = (e: HammerInput) => {
-    const bound = this._slider.getBoundingClientRect();
-    const x = (2 * (e.center.x - bound.left - bound.width / 2)) / bound.width;
-    const y = (2 * (e.center.y - bound.top - bound.height / 2)) / bound.height;
-
-    const [, phi] = xy2polar(x, y);
-
-    const offset = (360 - MAX_ANGLE) / 2;
-
-    const angle = ((rad2deg(phi) + offset - ROTATE_ANGLE + 360) % 360) - offset;
-
-    return Math.max(Math.min(angle / MAX_ANGLE, 1), 0);
-  };
-
-  @query("#slider")
-  private _slider;
-
-  @query("#interaction")
-  private _interaction;
-
-  private _findActiveSlider(value: number): ActiveSlider {
-    if (!this.dual) return "value";
-    const low = Math.max(this.low ?? this.min, this.min);
-    const high = Math.min(this.high ?? this.max, this.max);
-    if (low >= value) {
-      return "low";
-    }
-    if (high <= value) {
-      return "high";
-    }
-    const lowDistance = Math.abs(value - low);
-    const highDistance = Math.abs(value - high);
-    return lowDistance <= highDistance ? "low" : "high";
-  }
-
-  private _setActiveValue(value: number) {
-    if (!this._activeSlider) return;
-    this[this._activeSlider] = value;
-  }
-
-  private _getActiveValue(): number | undefined {
-    if (!this._activeSlider) return undefined;
-    return this[this._activeSlider];
-  }
-
-  _setupListeners() {
-    if (this._interaction && !this._mc) {
-      this._mc = new Manager(this._interaction, {
-        inputClass: TouchMouseInput,
-      });
-      this._mc.add(
-        new Pan({
-          direction: DIRECTION_ALL,
-          enable: true,
-          threshold: 0,
-        })
-      );
-
-      this._mc.add(new Tap({ event: "singletap" }));
-
-      this._mc.on("pan", (e) => {
-        e.srcEvent.stopPropagation();
-        e.srcEvent.preventDefault();
-      });
-      this._mc.on("panstart", (e) => {
-        if (this.disabled) return;
-        const percentage = this._getPercentageFromEvent(e);
-        const raw = this._percentageToValue(percentage);
-        this._activeSlider = this._findActiveSlider(raw);
-        this._lastSlider = this._activeSlider;
-        this.shadowRoot?.getElementById("#slider")?.focus();
-      });
-      this._mc.on("pancancel", () => {
-        if (this.disabled) return;
-        this._activeSlider = undefined;
-      });
-      this._mc.on("panmove", (e) => {
-        if (this.disabled) return;
-        const percentage = this._getPercentageFromEvent(e);
-        const raw = this._percentageToValue(percentage);
-        const bounded = this._boundedValue(raw);
-        this._setActiveValue(bounded);
-        const stepped = this._steppedValue(bounded);
-        if (this._activeSlider) {
-          fireEvent(this, `${this._activeSlider}-changing`, { value: stepped });
-        }
-      });
-      this._mc.on("panend", (e) => {
-        if (this.disabled) return;
-        const percentage = this._getPercentageFromEvent(e);
-        const raw = this._percentageToValue(percentage);
-        const bounded = this._boundedValue(raw);
-        const stepped = this._steppedValue(bounded);
-        if (this._activeSlider) {
-          fireEvent(this, `${this._activeSlider}-changing`, {
-            value: undefined,
-          });
-          fireEvent(this, `${this._activeSlider}-changed`, { value: stepped });
-        }
-        this._activeSlider = undefined;
-      });
-      this._mc.on("singletap", (e) => {
-        if (this.disabled) return;
-        const percentage = this._getPercentageFromEvent(e);
-        const raw = this._percentageToValue(percentage);
-        this._activeSlider = this._findActiveSlider(raw);
-        const bounded = this._boundedValue(raw);
-        const stepped = this._steppedValue(bounded);
-        this._setActiveValue(stepped);
-        if (this._activeSlider) {
-          fireEvent(this, `${this._activeSlider}-changing`, {
-            value: undefined,
-          });
-          fireEvent(this, `${this._activeSlider}-changed`, { value: stepped });
-        }
-        this._lastSlider = this._activeSlider;
-        this.shadowRoot?.getElementById("#slider")?.focus();
-        this._activeSlider = undefined;
-      });
-    }
-  }
-
-  private get _tenPercentStep() {
-    return Math.max(this.step, (this.max - this.min) / 10);
-  }
-
-  private _handleKeyDown(e: KeyboardEvent) {
-    if (!A11Y_KEY_CODES.has(e.code)) return;
-    e.preventDefault();
-    if (this._lastSlider) {
-      this.shadowRoot?.getElementById(this._lastSlider)?.focus();
-    }
-    this._activeSlider =
-      this._lastSlider ?? ((e.currentTarget as any).id as ActiveSlider);
-    this._lastSlider = undefined;
-
-    const value = this._getActiveValue();
-
-    switch (e.code) {
-      case "ArrowRight":
-      case "ArrowUp":
-        this._setActiveValue(
-          this._boundedValue((value ?? this.min) + this.step)
-        );
-        break;
-      case "ArrowLeft":
-      case "ArrowDown":
-        this._setActiveValue(
-          this._boundedValue((value ?? this.min) - this.step)
-        );
-        break;
-      case "PageUp":
-        this._setActiveValue(
-          this._steppedValue(
-            this._boundedValue((value ?? this.min) + this._tenPercentStep)
-          )
-        );
-        break;
-      case "PageDown":
-        this._setActiveValue(
-          this._steppedValue(
-            this._boundedValue((value ?? this.min) - this._tenPercentStep)
-          )
-        );
-        break;
-      case "Home":
-        this._setActiveValue(this._boundedValue(this.min));
-        break;
-      case "End":
-        this._setActiveValue(this._boundedValue(this.max));
-        break;
-    }
-    fireEvent(this, `${this._activeSlider}-changing`, {
-      value: this._getActiveValue(),
-    });
-    this._activeSlider = undefined;
-  }
-
-  _handleKeyUp(e: KeyboardEvent) {
-    if (!A11Y_KEY_CODES.has(e.code)) return;
-    this._activeSlider = (e.currentTarget as any).id as ActiveSlider;
-    e.preventDefault();
-    fireEvent(this, `${this._activeSlider}-changing`, {
-      value: undefined,
-    });
-    fireEvent(this, `${this._activeSlider}-changed`, {
-      value: this._getActiveValue(),
-    });
-    this._activeSlider = undefined;
-  }
-
-  destroyListeners() {
-    if (this._mc) {
-      this._mc.destroy();
-      this._mc = undefined;
-    }
-  }
-
-  protected render(): TemplateResult {
-    const trackPath = arc({ x: 0, y: 0, start: 0, end: MAX_ANGLE, r: RADIUS });
-
-    const maxRatio = MAX_ANGLE / 360;
-
-    const f = RADIUS * 2 * Math.PI;
-    const lowValue = this.dual ? this.low : this.value;
-    const highValue = this.high;
-    const lowPercentage = this._valueToPercentage(lowValue ?? this.min);
-    const highPercentage = this._valueToPercentage(highValue ?? this.max);
-
-    const lowArcLength = lowPercentage * f * maxRatio;
-    const lowStrokeDasharray = `${lowArcLength} ${f - lowArcLength}`;
-
-    const highArcLength = (1 - highPercentage) * f * maxRatio;
-    const highStrokeDasharray = `${highArcLength} ${f - highArcLength}`;
-    const highStrokeDashOffset = `${highArcLength + f * (1 - maxRatio)}`;
-
-    const currentPercentage = this._valueToPercentage(this.current ?? 0);
-    const currentAngle = currentPercentage * MAX_ANGLE;
-
-    return html`
-      <svg
-        id="slider"
-        viewBox="0 0 320 320"
-        overflow="visible"
-        class=${classMap({
-          pressed: Boolean(this._activeSlider),
-        })}
-        @keydown=${this._handleKeyDown}
-        tabindex=${this._lastSlider ? "0" : "-1"}
-      >
-        <g
-          id="container"
-          transform="translate(160 160) rotate(${ROTATE_ANGLE})"
-        >
-          <g id="interaction">
-            <path d=${trackPath} />
-          </g>
-          <g id="display">
-            <path class="background" d=${trackPath} />
-            <circle
-              .id=${this.dual ? "low" : "value"}
-              class="track"
-              cx="0"
-              cy="0"
-              r=${RADIUS}
-              stroke-dasharray=${lowStrokeDasharray}
-              stroke-dashoffset="0"
-              role="slider"
-              tabindex="0"
-              aria-valuemin=${this.min}
-              aria-valuemax=${this.max}
-              aria-valuenow=${lowValue != null
-                ? this._steppedValue(lowValue)
-                : undefined}
-              aria-disabled=${this.disabled}
-              aria-label=${ifDefined(this.lowLabel ?? this.label)}
-              @keydown=${this._handleKeyDown}
-              @keyup=${this._handleKeyUp}
-            />
-            ${this.dual
-              ? svg`
-                    <circle
-                      id="high"
-                      class="track"
-                      cx="0"
-                      cy="0"
-                      r=${RADIUS}
-                      stroke-dasharray=${highStrokeDasharray}
-                      stroke-dashoffset=${highStrokeDashOffset}
-                      role="slider"
-                      tabindex="0"
-                      aria-valuemin=${this.min}
-                      aria-valuemax=${this.max}
-                      aria-valuenow=${
-                        highValue != null
-                          ? this._steppedValue(highValue)
-                          : undefined
-                      }
-                      aria-disabled=${this.disabled}
-                      aria-label=${ifDefined(this.highLabel)}
-                      @keydown=${this._handleKeyDown}
-                      @keyup=${this._handleKeyUp}
-                    />
-                  `
-              : nothing}
-            ${this.current != null
-              ? svg`
-                <g
-                  style=${styleMap({ "--current-angle": `${currentAngle}deg` })}
-                  class="current"
-                >
-                  <line 
-                    x1=${RADIUS - 12} 
-                    y1="0" 
-                    x2=${RADIUS - 15} 
-                    y2="0" 
-                    stroke-width="4" 
-                  />
-                  <line
-                    x1=${RADIUS - 15}
-                    y1="0"
-                    x2=${RADIUS - 20}
-                    y2="0"
-                    stroke-linecap="round"
-                    stroke-width="4"
-                  />
-                </g>
-            `
-              : nothing}
-          </g>
-        </g>
-      </svg>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        --control-circular-slider-color: var(--primary-color);
-        --control-circular-slider-background: #8b97a3;
-        --control-circular-slider-background-opacity: 0.3;
-        --control-circular-slider-low-color: var(
-          --control-circular-slider-color
-        );
-        --control-circular-slider-high-color: var(
-          --control-circular-slider-color
-        );
-      }
-      svg {
-        width: 320px;
-        display: block;
-      }
-      #slider {
-        outline: none;
-      }
-      #interaction {
-        display: flex;
-        fill: none;
-        stroke: transparent;
-        stroke-linecap: round;
-        stroke-width: 48px;
-        cursor: pointer;
-      }
-      #display {
-        pointer-events: none;
-      }
-      :host([disabled]) #interaction {
-        cursor: initial;
-      }
-
-      .background {
-        fill: none;
-        stroke: var(--control-circular-slider-background);
-        opacity: var(--control-circular-slider-background-opacity);
-        stroke-linecap: round;
-        stroke-width: 24px;
-      }
-
-      .track {
-        outline: none;
-        fill: none;
-        stroke-linecap: round;
-        stroke-width: 24px;
-        transition: stroke-width 300ms ease-in-out,
-          stroke-dasharray 300ms ease-in-out,
-          stroke-dashoffset 300ms ease-in-out;
-      }
-
-      .track:focus-visible {
-        stroke-width: 28px;
-      }
-
-      .pressed .track {
-        transition: stroke-width 300ms ease-in-out;
-      }
-
-      .current {
-        stroke: var(--primary-text-color);
-        transform: rotate(var(--current-angle, 0));
-        transition: transform 300ms ease-in-out;
-      }
-
-      #value {
-        stroke: var(--control-circular-slider-color);
-      }
-
-      #low {
-        stroke: var(--control-circular-slider-low-color);
-      }
-
-      #high {
-        stroke: var(--control-circular-slider-high-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-control-circular-slider": HaControlCircularSlider;
-  }
-}

src/components/ha-control-slider.ts

@@ -176,7 +176,7 @@ export class HaControlSlider extends LitElement {
       this._mc = undefined;
     }
     this.removeEventListener("keydown", this._handleKeyDown);
-    this.removeEventListener("keyup", this._handleKeyUp);
+    this.removeEventListener("keyup", this._handleKeyDown);
   }
 
   private get _tenPercentStep() {

src/components/ha-date-input.ts

@@ -1,11 +1,9 @@
 import { mdiCalendar } from "@mdi/js";
-import { HassConfig } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { formatDateNumeric } from "../common/datetime/format_date";
+import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { fireEvent } from "../common/dom/fire_event";
-import { TimeZone } from "../data/translation";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 import "./ha-textfield";
@@ -61,11 +59,7 @@ export class HaDateInput extends LitElement {
       .value=${this.value
         ? formatDateNumeric(
             new Date(`${this.value.split("T")[0]}T00:00:00`),
-            {
-              ...this.locale,
-              time_zone: TimeZone.local,
-            },
-            {} as HassConfig
+            this.locale
           )
         : ""}
       .required=${this.required}

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

@@ -3,13 +3,6 @@ import "@material/mwc-list/mwc-list";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
-import {
-  addDays,
-  endOfDay,
-  endOfWeek,
-  startOfDay,
-  startOfWeek,
-} from "date-fns";
 import {
   css,
   CSSResultGroup,
@@ -19,11 +12,10 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { calcDate } from "../common/datetime/calc_date";
-import { firstWeekdayIndex } from "../common/datetime/first_weekday";
-import { formatDate } from "../common/datetime/format_date";
 import { formatDateTime } from "../common/datetime/format_date_time";
+import { formatDate } from "../common/datetime/format_date";
 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";
@@ -42,7 +34,7 @@ export class HaDateRangePicker extends LitElement {
 
   @property() public endDate!: Date;
 
-  @property() public ranges?: DateRangePickerRanges | false;
+  @property() public ranges?: DateRangePickerRanges;
 
   @property() public autoApply = false;
 
@@ -54,70 +46,6 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: String }) private _rtlDirection = "ltr";
 
-  protected willUpdate() {
-    if (!this.hasUpdated && this.ranges === undefined) {
-      const today = new Date();
-      const weekStartsOn = firstWeekdayIndex(this.hass.locale);
-      const weekStart = calcDate(
-        today,
-        startOfWeek,
-        this.hass.locale,
-        this.hass.config,
-        {
-          weekStartsOn,
-        }
-      );
-      const weekEnd = calcDate(
-        today,
-        endOfWeek,
-        this.hass.locale,
-        this.hass.config,
-        {
-          weekStartsOn,
-        }
-      );
-
-      this.ranges = {
-        [this.hass.localize("ui.components.date-range-picker.ranges.today")]: [
-          calcDate(today, startOfDay, this.hass.locale, this.hass.config, {
-            weekStartsOn,
-          }),
-          calcDate(today, endOfDay, this.hass.locale, this.hass.config, {
-            weekStartsOn,
-          }),
-        ],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.yesterday"
-        )]: [
-          calcDate(
-            addDays(today, -1),
-            startOfDay,
-            this.hass.locale,
-            this.hass.config,
-            {
-              weekStartsOn,
-            }
-          ),
-          calcDate(
-            addDays(today, -1),
-            endOfDay,
-            this.hass.locale,
-            this.hass.config,
-            {
-              weekStartsOn,
-            }
-          ),
-        ],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.this_week"
-        )]: [weekStart, weekEnd],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.last_week"
-        )]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
-      };
-    }
-  }
-
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
@@ -137,19 +65,15 @@ export class HaDateRangePicker extends LitElement {
         twentyfour-hours=${this._hour24format}
         start-date=${this.startDate}
         end-date=${this.endDate}
-        ?ranges=${this.ranges !== false}
+        ?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>
           <ha-textfield
             .value=${this.timePicker
-              ? formatDateTime(
-                  this.startDate,
-                  this.hass.locale,
-                  this.hass.config
-                )
-              : formatDate(this.startDate, this.hass.locale, this.hass.config)}
+              ? formatDateTime(this.startDate, this.hass.locale)
+              : formatDate(this.startDate, this.hass.locale)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.start_date"
             )}
@@ -159,8 +83,8 @@ export class HaDateRangePicker extends LitElement {
           ></ha-textfield>
           <ha-textfield
             .value=${this.timePicker
-              ? formatDateTime(this.endDate, this.hass.locale, this.hass.config)
-              : formatDate(this.endDate, this.hass.locale, this.hass.config)}
+              ? formatDateTime(this.endDate, this.hass.locale)
+              : formatDate(this.endDate, this.hass.locale)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.end_date"
             )}

src/components/ha-hls-player.ts

@@ -109,8 +109,7 @@ class HaHLSPlayer extends LitElement {
   private async _startHls(): Promise<void> {
     const masterPlaylistPromise = fetch(this.url);
 
-    const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.mjs"))
-      .default;
+    const Hls: typeof HlsType = (await import("hls.js/dist/hls.light")).default;
 
     if (!this.isConnected) {
       return;

src/components/ha-hs-color-picker.ts

@@ -186,8 +186,9 @@ class HaHsColorPicker extends LitElement {
     }
     if (changedProps.has("value")) {
       if (
-        this._localValue?.[0] !== this.value?.[0] ||
-        this._localValue?.[1] !== this.value?.[1]
+        this.value !== undefined &&
+        (this._localValue?.[0] !== this.value[0] ||
+          this._localValue?.[1] !== this.value[1])
       ) {
         this._resetPosition();
       }
@@ -242,11 +243,7 @@ class HaHsColorPicker extends LitElement {
   }
 
   private _resetPosition() {
-    if (this.value === undefined) {
-      this._cursorPosition = undefined;
-      this._localValue = undefined;
-      return;
-    }
+    if (this.value === undefined) return;
     this._cursorPosition = this._getCoordsFromValue(this.value);
     this._localValue = this.value;
   }
@@ -376,20 +373,17 @@ class HaHsColorPicker extends LitElement {
     return css`
       :host {
         display: block;
-        outline: none;
       }
       .container {
         position: relative;
         width: 100%;
         height: 100%;
+        cursor: pointer;
         display: flex;
       }
       canvas {
         width: 100%;
         height: 100%;
-        object-fit: contain;
-        border-radius: 50%;
-        cursor: pointer;
       }
       svg {
         position: absolute;

src/components/ha-icon-button-group.ts

@@ -1,38 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-icon-button-group")
-export class HaIconButtonGroup extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 56px;
-        border-radius: 28px;
-        background-color: rgba(139, 145, 151, 0.1);
-        box-sizing: border-box;
-        width: auto;
-        padding: 4px;
-        gap: 4px;
-      }
-      ::slotted(.separator) {
-        background-color: rgba(var(--rgb-primary-text-color), 0.15);
-        width: 1px;
-        height: 40px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-icon-button-group": HaIconButtonGroup;
-  }
-}

src/components/ha-icon-button-toggle.ts

@@ -1,52 +0,0 @@
-import { css, CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
-import { HaIconButton } from "./ha-icon-button";
-
-@customElement("ha-icon-button-toggle")
-export class HaIconButtonToggle extends HaIconButton {
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        position: relative;
-      }
-      mwc-icon-button {
-        position: relative;
-        transition: color 180ms ease-in-out;
-      }
-      mwc-icon-button::before {
-        opacity: 0;
-        transition: opacity 180ms ease-in-out;
-        background-color: var(--primary-text-color);
-        border-radius: 20px;
-        height: 40px;
-        width: 40px;
-        content: "";
-        position: absolute;
-        top: -10px;
-        left: -10px;
-        bottom: -10px;
-        right: -10px;
-        margin: auto;
-        box-sizing: border-box;
-      }
-      :host([border-only]) mwc-icon-button::before {
-        background-color: transparent;
-        border: 2px solid var(--primary-text-color);
-      }
-      :host([selected]) mwc-icon-button {
-        color: var(--primary-background-color);
-      }
-      :host([selected]) mwc-icon-button::before {
-        opacity: 1;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-icon-button-toggle": HaIconButtonToggle;
-  }
-}

src/components/ha-markdown-element.ts

@@ -3,8 +3,6 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 
-const _blockQuoteToAlert = { Note: "info", Warning: "warning" };
-
 @customElement("ha-markdown-element")
 class HaMarkdownElement extends ReactiveElement {
   @property() public content?;
@@ -67,34 +65,6 @@ class HaMarkdownElement extends ReactiveElement {
           node.loading = "lazy";
         }
         node.addEventListener("load", this._resize);
-      } else if (node instanceof HTMLQuoteElement) {
-        // Map GitHub blockquote elements to our ha-alert element
-        const firstElementChild = node.firstElementChild;
-        const quoteTitleElement = firstElementChild?.firstElementChild;
-        const quoteType =
-          quoteTitleElement?.textContent &&
-          _blockQuoteToAlert[quoteTitleElement.textContent];
-
-        // GitHub is strict on how these are defined, we need to make sure we know what we have before starting to replace it
-        if (quoteTitleElement?.nodeName === "STRONG" && quoteType) {
-          const alertNote = document.createElement("ha-alert");
-          alertNote.alertType = quoteType;
-          alertNote.title =
-            (firstElementChild!.childNodes[1].nodeName === "#text" &&
-              firstElementChild!.childNodes[1].textContent?.trimStart()) ||
-            "";
-
-          const childNodes = Array.from(firstElementChild!.childNodes);
-          for (const child of childNodes.slice(
-            childNodes.findIndex(
-              // There is always a line break between the title and the content, we want to skip that
-              (childNode) => childNode instanceof HTMLBRElement
-            ) + 1
-          )) {
-            alertNote.appendChild(child);
-          }
-          node.firstElementChild!.replaceWith(alertNote);
-        }
       }
     }
   }

src/components/ha-menu-button.ts

@@ -74,16 +74,11 @@ class HaMenuButton extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-
-    let oldNarrow: boolean | undefined;
-    let newNarrow: boolean | undefined;
-    if (changedProps.has("narrow")) {
-      oldNarrow = changedProps.get("narrow");
-      newNarrow = this.narrow;
-    } else if (oldHass) {
-      oldNarrow = oldHass.dockedSidebar === "always_hidden";
-      newNarrow = this.hass.dockedSidebar === "always_hidden";
-    }
+    const oldNarrow =
+      changedProps.get("narrow") ||
+      (oldHass && oldHass.dockedSidebar === "always_hidden");
+    const newNarrow =
+      this.narrow || this.hass.dockedSidebar === "always_hidden";
 
     if (oldNarrow === newNarrow) {
       return;
@@ -103,9 +98,6 @@ class HaMenuButton extends LitElement {
   }
 
   private _subscribeNotifications() {
-    if (this._unsubNotifications) {
-      throw new Error("Already subscribed");
-    }
     this._unsubNotifications = subscribeNotifications(
       this.hass.connection,
       (notifications) => {

src/components/ha-picture-upload.ts

@@ -2,7 +2,7 @@ import { mdiImagePlus } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { createImage, generateImageThumbnailUrl } from "../data/image_upload";
+import { createImage, generateImageThumbnailUrl } from "../data/image";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import {
   CropOptions,

src/components/ha-related-items.ts

@@ -1,10 +1,6 @@
 import "@material/mwc-list/mwc-list";
-import {
-  mdiAlertCircleOutline,
-  mdiDevices,
-  mdiPaletteSwatch,
-  mdiSofa,
-} from "@mdi/js";
+import { mdiDevices, mdiPaletteSwatch, mdiSofa } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -15,11 +11,10 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
+import { SceneEntity } from "../data/scene";
 import { findRelated, ItemType, RelatedResult } from "../data/search";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
@@ -77,55 +72,13 @@ export class HaRelatedItems extends LitElement {
     }
   }
 
-  private _relatedEntities = memoizeOne((entityIds: string[]) =>
-    this._toEntities(entityIds)
-  );
-
-  private _relatedAutomations = memoizeOne((automationEntityIds: string[]) =>
-    this._toEntities(automationEntityIds)
-  );
-
-  private _relatedScripts = memoizeOne((scriptEntityIds: string[]) =>
-    this._toEntities(scriptEntityIds)
-  );
-
-  private _relatedGroups = memoizeOne((groupEntityIds: string[]) =>
-    this._toEntities(groupEntityIds)
-  );
-
-  private _relatedScenes = memoizeOne((sceneEntityIds: string[]) =>
-    this._toEntities(sceneEntityIds)
-  );
-
-  private _toEntities = (entityIds: string[]) =>
-    entityIds
-      .map((entityId) => this.hass.states[entityId])
-      .filter((entity) => entity)
-      .sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.attributes.friendly_name ?? a.entity_id,
-          b.attributes.friendly_name ?? b.entity_id,
-          this.hass.language
-        )
-      );
-
   protected render() {
     if (!this._related) {
       return nothing;
     }
     if (Object.keys(this._related).length === 0) {
       return html`
-        <mwc-list>
-          <ha-list-item hasMeta graphic="icon" noninteractive>
-            <ha-svg-icon
-              .path=${mdiAlertCircleOutline}
-              slot="graphic"
-            ></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.components.related-items.no_related_found"
-            )}
-          </ha-list-item>
-        </mwc-list>
+        ${this.hass.localize("ui.components.related-items.no_related_found")}
       `;
     }
     return html`
@@ -139,7 +92,7 @@ export class HaRelatedItems extends LitElement {
                   (configEntry) => configEntry.entry_id === relatedConfigEntryId
                 );
                 if (!entry) {
-                  return nothing;
+                  return "";
                 }
                 return html`
                   <a
@@ -164,7 +117,7 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : nothing}
+        : ""}
       ${this._related.device
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.device")}
@@ -172,7 +125,7 @@ export class HaRelatedItems extends LitElement {
             ${this._related.device.map((relatedDeviceId) => {
               const device = this.hass.devices[relatedDeviceId];
               if (!device) {
-                return nothing;
+                return "";
               }
               return html`
                 <a
@@ -191,7 +144,7 @@ export class HaRelatedItems extends LitElement {
               `;
             })}            </mwc-list>
             `
-        : nothing}
+        : ""}
       ${this._related.area
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.area")}
@@ -200,7 +153,7 @@ export class HaRelatedItems extends LitElement {
               >${this._related.area.map((relatedAreaId) => {
                 const area = this.hass.areas[relatedAreaId];
                 if (!area) {
-                  return nothing;
+                  return "";
                 }
                 return html`
                   <a
@@ -230,16 +183,21 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : nothing}
+        : ""}
       ${this._related.entity
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
             <mwc-list>
-              ${this._relatedEntities(this._related.entity).map(
-                (entity) => html`
+              ${this._related.entity.map((entityId) => {
+                const entity: HassEntity | undefined =
+                  this.hass.states[entityId];
+                if (!entity) {
+                  return "";
+                }
+                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${entity.entity_id}
+                    .entityId=${entityId}
                     hasMeta
                     graphic="icon"
                   >
@@ -250,20 +208,24 @@ export class HaRelatedItems extends LitElement {
                     ${entity.attributes.friendly_name || entity.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `
-              )}
+                `;
+              })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.group
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
             <mwc-list>
-              ${this._relatedGroups(this._related.group).map(
-                (group) => html`
+              ${this._related.group.map((groupId) => {
+                const group: HassEntity | undefined = this.hass.states[groupId];
+                if (!group) {
+                  return "";
+                }
+                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${group.entity_id}
+                    .entityId=${groupId}
                     hasMeta
                     graphic="icon"
                   >
@@ -274,20 +236,25 @@ export class HaRelatedItems extends LitElement {
                     ${group.attributes.friendly_name || group.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `
-              )}
+                `;
+              })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.scene
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.scene")}</h3>
             <mwc-list>
-              ${this._relatedScenes(this._related.scene).map(
-                (scene) => html`
+              ${this._related.scene.map((sceneId) => {
+                const scene: SceneEntity | undefined =
+                  this.hass.states[sceneId];
+                if (!scene) {
+                  return "";
+                }
+                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${scene.entity_id}
+                    .entityId=${sceneId}
                     hasMeta
                     graphic="icon"
                   >
@@ -298,11 +265,11 @@ export class HaRelatedItems extends LitElement {
                     ${scene.attributes.friendly_name || scene.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `
-              )}
+                `;
+              })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.automation_blueprint
         ? html`
             <h3>
@@ -331,18 +298,23 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.automation
         ? html`
             <h3>
               ${this.hass.localize("ui.components.related-items.automation")}
             </h3>
             <mwc-list>
-              ${this._relatedAutomations(this._related.automation).map(
-                (automation) => html`
+              ${this._related.automation.map((automationId) => {
+                const automation: HassEntity | undefined =
+                  this.hass.states[automationId];
+                if (!automation) {
+                  return "";
+                }
+                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${automation.entity_id}
+                    .entityId=${automationId}
                     hasMeta
                     graphic="icon"
                   >
@@ -354,11 +326,11 @@ export class HaRelatedItems extends LitElement {
                     automation.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `
-              )}
+                `;
+              })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.script_blueprint
         ? html`
             <h3>
@@ -387,16 +359,21 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
       ${this._related.script
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.script")}</h3>
             <mwc-list>
-              ${this._relatedScripts(this._related.script).map(
-                (script) => html`
+              ${this._related.script.map((scriptId) => {
+                const script: HassEntity | undefined =
+                  this.hass.states[scriptId];
+                if (!script) {
+                  return "";
+                }
+                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${script.entity_id}
+                    .entityId=${scriptId}
                     hasMeta
                     graphic="icon"
                   >
@@ -407,11 +384,11 @@ export class HaRelatedItems extends LitElement {
                     ${script.attributes.friendly_name || script.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `
-              )}
+                `;
+              })}
             </mwc-list>
           `
-        : nothing}
+        : ""}
     `;
   }
 

src/components/ha-selector/ha-selector-select.ts

@@ -4,7 +4,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
-import { ensureArray } from "../../common/array/ensure-array";
 import type { SelectOption, SelectSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-checkbox";
@@ -41,7 +40,7 @@ export class HaSelectSelector extends LitElement {
 
   protected render() {
     const options =
-      this.selector.select?.options?.map((option) =>
+      this.selector.select?.options.map((option) =>
         typeof option === "object"
           ? (option as SelectOption)
           : ({ value: option, label: option } as SelectOption)
@@ -78,8 +77,7 @@ export class HaSelectSelector extends LitElement {
           ${this._renderHelper()}
         `;
       }
-      const value =
-        !this.value || this.value === "" ? [] : ensureArray(this.value);
+
       return html`
         <div>
           ${this.label}
@@ -87,7 +85,7 @@ export class HaSelectSelector extends LitElement {
             (item: SelectOption) => html`
               <ha-formfield .label=${item.label}>
                 <ha-checkbox
-                  .checked=${value.includes(item.value)}
+                  .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
                   .disabled=${item.disabled || this.disabled}
                   @change=${this._checkboxChanged}
@@ -102,7 +100,7 @@ export class HaSelectSelector extends LitElement {
 
     if (this.selector.select?.multiple) {
       const value =
-        !this.value || this.value === "" ? [] : ensureArray(this.value);
+        !this.value || this.value === "" ? [] : (this.value as string[]);
 
       const optionItems = options.filter(
         (option) => !option.disabled && !value?.includes(option.value)
@@ -233,19 +231,19 @@ export class HaSelectSelector extends LitElement {
     const value: string = ev.target.value;
     const checked = ev.target.checked;
 
-    const oldValue =
-      !this.value || this.value === "" ? [] : ensureArray(this.value);
-
     if (checked) {
-      if (oldValue.includes(value)) {
+      if (!this.value) {
+        newValue = [value];
+      } else if (this.value.includes(value)) {
         return;
+      } else {
+        newValue = [...this.value, value];
       }
-      newValue = [...oldValue, value];
     } else {
-      if (!oldValue?.includes(value)) {
+      if (!this.value?.includes(value)) {
         return;
       }
-      newValue = oldValue.filter((v) => v !== value);
+      newValue = (this.value as string[]).filter((v) => v !== value);
     }
 
     fireEvent(this, "value-changed", {
@@ -254,7 +252,7 @@ export class HaSelectSelector extends LitElement {
   }
 
   private async _removeItem(ev) {
-    const value: string[] = [...ensureArray(this.value!)];
+    const value: string[] = [...(this.value! as string[])];
     value.splice(ev.target.idx, 1);
 
     fireEvent(this, "value-changed", {
@@ -279,10 +277,7 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
-    const currentValue =
-      !this.value || this.value === "" ? [] : ensureArray(this.value);
-
-    if (newValue !== undefined && currentValue.includes(newValue)) {
+    if (newValue !== undefined && this.value?.includes(newValue)) {
       return;
     }
 
@@ -291,6 +286,9 @@ export class HaSelectSelector extends LitElement {
       this.comboBox.setInputValue("");
     }, 0);
 
+    const currentValue =
+      !this.value || this.value === "" ? [] : (this.value as string[]);
+
     fireEvent(this, "value-changed", {
       value: [...currentValue, newValue],
     });

src/components/ha-selector/ha-selector-theme.ts

@@ -24,7 +24,6 @@ export class HaThemeSelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
-        .includeDefault=${this.selector.theme?.include_default}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-theme-picker>

src/components/ha-sidebar.ts

@@ -23,19 +23,19 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
+  css,
   CSSResult,
   CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  css,
   html,
+  LitElement,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
-import { storage } from "../common/decorators/storage";
+import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { stringCompare } from "../common/string/compare";
@@ -47,10 +47,10 @@ import {
   subscribeNotifications,
 } from "../data/persistent_notification";
 import { subscribeRepairsIssueRegistry } from "../data/repairs";
-import { UpdateEntity, updateCanInstall } from "../data/update";
+import { updateCanInstall, UpdateEntity } from "../data/update";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
-import { SortableInstance, loadSortable } from "../resources/sortable.ondemand";
+import { loadSortable, SortableInstance } from "../resources/sortable.ondemand";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
@@ -214,17 +214,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private sortableStyleLoaded = false;
 
-  @storage({
-    key: "sidebarPanelOrder",
-    state: true,
-    subscribe: true,
+  // @ts-ignore
+  @LocalStorage("sidebarPanelOrder", true, {
+    attribute: false,
   })
   private _panelOrder: string[] = [];
 
-  @storage({
-    key: "sidebarHiddenPanels",
-    state: true,
-    subscribe: true,
+  // @ts-ignore
+  @LocalStorage("sidebarHiddenPanels", true, {
+    attribute: false,
   })
   private _hiddenPanels: string[] = [];
 

src/components/ha-temp-color-picker.ts

@@ -7,8 +7,6 @@ import { rgb2hex } from "../common/color/convert-color";
 import { temperature2rgb } from "../common/color/convert-light-color";
 import { fireEvent } from "../common/dom/fire_event";
 
-const SAFE_ZONE_FACTOR = 0.9;
-
 declare global {
   interface HASSDomEvents {
     "cursor-moved": { value?: any };
@@ -52,12 +50,9 @@ function drawColorWheel(
   for (let y = -radius; y < radius; y += 1) {
     const x = radius * Math.sqrt(1 - (y / radius) ** 2);
 
-    const fraction = (y / (radius * SAFE_ZONE_FACTOR) + 1) / 2;
+    const fraction = (y / radius + 1) / 2;
 
-    const temperature = Math.max(
-      Math.min(min + fraction * (max - min), max),
-      min
-    );
+    const temperature = min + fraction * (max - min);
 
     const color = rgb2hex(temperature2rgb(temperature));
 
@@ -139,7 +134,7 @@ class HaTempColorPicker extends LitElement {
       this.setAttribute("aria-valuemax", this.max.toString());
     }
     if (changedProps.has("value")) {
-      if (this._localValue !== this.value) {
+      if (this.value != null && this._localValue !== this.value) {
         this._resetPosition();
       }
     }
@@ -197,11 +192,7 @@ class HaTempColorPicker extends LitElement {
   }
 
   private _resetPosition() {
-    if (this.value === undefined) {
-      this._cursorPosition = undefined;
-      this._localValue = undefined;
-      return;
-    }
+    if (this.value === undefined) return;
     const [, y] = this._getCoordsFromValue(this.value);
     const currentX = this._cursorPosition?.[0] ?? 0;
     const x =
@@ -211,23 +202,14 @@ class HaTempColorPicker extends LitElement {
   }
 
   private _getCoordsFromValue = (temperature: number): [number, number] => {
-    if (this.value === this.min) {
-      return [0, -1];
-    }
-    if (this.value === this.max) {
-      return [0, 1];
-    }
     const fraction = (temperature - this.min) / (this.max - this.min);
-    const y = (2 * fraction - 1) * SAFE_ZONE_FACTOR;
+    const y = 2 * fraction - 1;
     return [0, y];
   };
 
   private _getValueFromCoord = (_x: number, y: number): number => {
-    const fraction = (y / SAFE_ZONE_FACTOR + 1) / 2;
-    const temperature = Math.max(
-      Math.min(this.min + fraction * (this.max - this.min), this.max),
-      this.min
-    );
+    const fraction = (y + 1) / 2;
+    const temperature = this.min + fraction * (this.max - this.min);
     return Math.round(temperature);
   };
 
@@ -385,23 +367,21 @@ class HaTempColorPicker extends LitElement {
       :host {
         display: block;
         outline: none;
+        border-radius: 9999px;
+      }
+      :host(:focus-visible) {
+        box-shadow: 0 0 0 2px rgb(255, 160, 0);
       }
       .container {
         position: relative;
         width: 100%;
         height: 100%;
+        cursor: pointer;
         display: flex;
       }
       canvas {
         width: 100%;
         height: 100%;
-        object-fit: contain;
-        border-radius: 50%;
-        transition: box-shadow 180ms ease-in-out;
-        cursor: pointer;
-      }
-      :host(:focus-visible) canvas {
-        box-shadow: 0 0 0 2px rgb(255, 160, 0);
       }
       svg {
         position: absolute;

src/components/ha-textfield.ts

@@ -99,10 +99,6 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
-      .mdc-text-field__icon--trailing {
-        padding: var(--textfield-icon-trailing-padding, 12px);
-      }
-
       .mdc-floating-label:not(.mdc-floating-label--float-above) {
         text-overflow: ellipsis;
         width: inherit;

src/components/ha-theme-picker.ts

@@ -1,28 +1,17 @@
 import "@material/mwc-list/mwc-list-item";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  nothing,
-  LitElement,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { HomeAssistant } from "../types";
 import "./ha-select";
 
-const DEFAULT_THEME = "default";
-
 @customElement("ha-theme-picker")
 export class HaThemePicker extends LitElement {
   @property() public value?: string;
 
   @property() public label?: string;
 
-  @property() includeDefault?: boolean = false;
-
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
@@ -47,13 +36,6 @@ export class HaThemePicker extends LitElement {
             "ui.components.theme-picker.no_theme"
           )}</mwc-list-item
         >
-        ${this.includeDefault
-          ? html`<mwc-list-item .value=${DEFAULT_THEME}
-              >${this.hass!.localize(
-                "ui.components.theme-picker.default"
-              )}</mwc-list-item
-            >`
-          : nothing}
         ${Object.keys(this.hass!.themes.themes)
           .sort()
           .map(

src/components/map/ha-map.ts

@@ -471,11 +471,6 @@ export class HaMap extends ReactiveElement {
         background: #090909;
         --map-filter: invert(0.9) hue-rotate(170deg) grayscale(0.7);
       }
-      #map:active {
-        cursor: grabbing;
-        cursor: -moz-grabbing;
-        cursor: -webkit-grabbing;
-      }
       .light {
         color: #000000;
       }

src/components/media-player/ha-browse-media-tts.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { storage } from "../../common/decorators/storage";
+import { LocalStorage } from "../../common/decorators/local-storage";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   MediaPlayerBrowseAction,
@@ -43,12 +43,7 @@ class BrowseMediaTTS extends LitElement {
 
   @state() private _provider?: TTSEngine;
 
-  @storage({
-    key: "TtsMessage",
-    state: true,
-    subscribe: false,
-  })
-  private _message!: string;
+  @LocalStorage("TtsMessage", true, false) private _message!: string;
 
   protected render() {
     return html`<ha-card>

src/components/trace/ha-trace-path-details.ts

@@ -127,8 +127,7 @@ export class HaTracePathDetails extends LitElement {
             Executed:
             ${formatDateTimeWithSeconds(
               new Date(timestamp),
-              this.hass.locale,
-              this.hass.config
+              this.hass.locale
             )}<br />
             ${result
               ? html`Result: