Update .devcontainer.json

Bumps [webpack-cli](https://github.com/webpack/webpack-cli) from 4.8.0 to 5.0.1.
- [Release notes](https://github.com/webpack/webpack-cli/releases)
- [Changelog](https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-cli/compare/webpack-cli@4.8.0...webpack-cli@5.0.1)

---
updated-dependencies:
- dependency-name: webpack-cli
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.devcontainer.json

@@ -0,0 +1,50 @@
+{
+  "name": "Home Assistant Frontend",
+  "image": "mcr.microsoft.com/devcontainers/python:0-3.10",
+  "appPort": "8124:8123",
+  "postCreateCommand": "script/bootstrap",
+  "containerEnv": {
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
+    "DEVCONTAINER": "true"
+  },
+  "remoteUser": "vscode",
+  "remoteEnv": {
+    "PATH": "${containerEnv:PATH}:${containerWorkspaceFolder}/node_modules/.bin:/home/vscode/.local/bin"
+  },
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "16"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "runem.lit-plugin",
+        "github.vscode-pull-request-github",
+        "eamodio.gitlens"
+      ],
+      "settings": {
+        "files.eol": "\n",
+        "editor.tabSize": 2,
+        "editor.formatOnPaste": false,
+        "editor.formatOnSave": true,
+        "editor.formatOnType": true,
+        "editor.renderWhitespace": "boundary",
+        "editor.rulers": [80],
+        "[typescript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[javascript]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "files.trimTrailingWhitespace": true,
+        "terminal.integrated.shell.linux": "/usr/bin/zsh",
+        "gitlens.showWelcomeOnInstall": false,
+        "gitlens.showWhatsNewAfterUpgrades": false,
+        "workbench.startupEditor": "none"
+      }
+    }
+  }
+}

.devcontainer/Dockerfile

@@ -1,13 +0,0 @@
-# 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.9
-
-ENV \
-  DEBIAN_FRONTEND=noninteractive \
-  DEVCONTAINER=true \
-  PATH=$PATH:./node_modules/.bin
-
-# Install nvm
-COPY .nvmrc /tmp/.nvmrc
-RUN \
-  su vscode -c \
-    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

.devcontainer/devcontainer.json

@@ -1,37 +0,0 @@
-{
-  "name": "Home Assistant Frontend",
-  "build": {
-    "dockerfile": "Dockerfile",
-    "context": ".."
-  },
-  "appPort": "8124:8123",
-  "context": "..",
-  "postCreateCommand": "script/bootstrap",
-  "extensions": [
-    "github.vscode-pull-request-github",
-    "dbaeumer.vscode-eslint",
-    "ms-vscode.vscode-typescript-tslint-plugin",
-    "esbenp.prettier-vscode",
-    "bierner.lit-html",
-    "runem.lit-plugin",
-    "ms-python.vscode-pylance"
-  ],
-  "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
-  },
-  "settings": {
-    "terminal.integrated.shell.linux": "/bin/bash",
-    "files.eol": "\n",
-    "editor.tabSize": 2,
-    "editor.formatOnPaste": false,
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "[typescript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[javascript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "files.trimTrailingWhitespace": true
-  }
-}

.github/dependabot.yml

@@ -6,3 +6,13 @@ updates:
       interval: weekly
       time: "06:00"
     open-pull-requests-limit: 10
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+      time: "06:00"
+    open-pull-requests-limit: 5
+    ignore:
+      # Ignore rollup and plugins until everything else is updated
+      - dependency-name: "*rollup*"
+      - dependency-name: "@rollup/*"

.github/workflows/cast_deployment.yaml

@@ -0,0 +1,90 @@
+name: Cast deployment
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 0 * * *"
+  push:
+    branches:
+      - master
+
+env:
+  NODE_VERSION: 16
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  deploy_dev:
+    runs-on: ubuntu-latest
+    name: Deploy Development
+    if: github.event_name != 'push'
+    environment:
+      name: Cast Development
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v3.3.0
+        with:
+          ref: dev
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Cast
+        run: ./node_modules/.bin/gulp build-cast
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=cast/dist --alias dev
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
+
+  deploy_master:
+    runs-on: ubuntu-latest
+    name: Deploy Production
+    if: github.event_name == 'push'
+    environment:
+      name: Cast Production
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v3.3.0
+        with:
+          ref: master
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Cast
+        run: ./node_modules/.bin/gulp build-cast
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=cast/dist --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -13,15 +13,16 @@ on:
 env:
   NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -43,9 +44,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -62,9 +63,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -81,9 +82,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v3.3.0
       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.yaml

@@ -1,33 +0,0 @@
-name: Demo
-
-on:
-  push:
-    branches:
-      - dev
-
-env:
-  NODE_VERSION: 16
-  NODE_OPTIONS: --max_old_space_size=6144
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v3
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install
-        env:
-          CI: true
-      - name: Build Demo
-        run: ./node_modules/.bin/gulp build-demo
-      - name: Deploy to Netlify
-        run: npx netlify-cli deploy --dir=demo/dist --prod
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}

.github/workflows/demo_deployment.yaml

@@ -0,0 +1,91 @@
+name: Demo deployment
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 0 * * *"
+  push:
+    branches:
+      - dev
+      - master
+
+env:
+  NODE_VERSION: 16
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  deploy_dev:
+    runs-on: ubuntu-latest
+    name: Demo Development
+    if: github.event_name != 'push' || github.ref != 'master'
+    environment:
+      name: Demo Development
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v3.3.0
+        with:
+          ref: dev
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=demo/dist --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+
+  deploy_master:
+    runs-on: ubuntu-latest
+    name: Demo Production
+    if: github.event_name == 'push' && github.ref == 'master'
+    environment:
+      name: Demo Production
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v3.3.0
+        with:
+          ref: master
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=demo/dist --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -0,0 +1,45 @@
+name: Design deployment
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 0 * * *"
+
+env:
+  NODE_VERSION: 16
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: Design
+      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=gallery/dist --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -0,0 +1,54 @@
+name: Design preview
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+    branches:
+      - dev
+
+env:
+  NODE_VERSION: 16
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    # Skip running on forks since it won't have access to secrets
+    # Skip running PRs without 'needs design preview' label
+    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.3.0
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+        env:
+          CI: true
+
+      - name: Build Gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Deploy preview to Netlify
+        id: deploy
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}"
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
+
+      - name: Generate summary
+        run: |
+          echo "${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/lock.yml

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

.github/workflows/netflify.yml

@@ -1,19 +0,0 @@
-name: Netlify
-
-on:
-  schedule:
-    - cron: "0 0 * * *"
-
-jobs:
-  trigger_builds:
-    name: Trigger netlify build preview
-    runs-on: "ubuntu-latest"
-    steps:
-      - name: Trigger Cast build
-        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_CAST_DEV_BUILD_HOOK }}
-
-      - name: Trigger Demo build
-        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_DEMO_DEV_BUILD_HOOK }}
-
-      - name: Trigger Design build
-        run: curl -X POST -d "NIGHTLY" https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_GALLERY_DEV_BUILD_HOOK }}

.github/workflows/nightly.yaml

@@ -21,7 +21,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4
@@ -29,7 +29,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -49,9 +49,8 @@ jobs:
         run: |
           pip install build
           yarn install
-
+          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/build_frontend
-
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 

.github/workflows/release.yaml

@@ -24,7 +24,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.3.0
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -35,7 +35,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -52,11 +52,11 @@ jobs:
           python3 -m pip install twine build
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
-
+          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v0.1.14
+        uses: softprops/action-gh-release@v0.1.15
         with:
           files: |
             dist/*.whl

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v6.0.1
+        uses: actions/stale@v7.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

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

.gitignore

@@ -2,9 +2,10 @@
 .reify-cache
 
 # build
-build
+build/
-hass_frontend/*
+dist/
-dist
+/hass_frontend/
+/translations/
 
 # yarn
 .yarn/*
@@ -14,7 +15,7 @@ dist
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-node_modules/*
+/node_modules/
 yarn-error.log
 npm-debug.log
 
@@ -26,7 +27,7 @@ npm-debug.log
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv/*
+/venv/
 .venv
 
 # vscode
@@ -45,4 +46,4 @@ src/cast/dev_const.ts
 .tool-versions
 
 # Home Assistant config
-/config
+/config/

.vscode/extensions.json

@@ -2,7 +2,8 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "bierner.lit-html",
+    "runem.lit-plugin",
-    "runem.lit-plugin"
+    "github.vscode-pull-request-github",
+    "eamodio.gitlens"
   ]
 }

.vscode/tasks.json

@@ -191,7 +191,13 @@
       "runOptions": {
         "instanceLimit": 1
       }
-    }
+    },
+    {
+      "label": "Setup and fetch nightly translations",
+      "type": "gulp",
+      "task": "setup-and-fetch-nightly-translations",
+      "problemMatcher": []
+          }
   ],
   "inputs": [
     {

.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch

@@ -1,29 +0,0 @@
-diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
-index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
---- a/polyfillLoaders/EventTarget.js
-+++ b/polyfillLoaders/EventTarget.js
-@@ -6,16 +6,15 @@
- let _ET;
- let ET;
- export default async function EventTarget() {
--    return ET || init();
-+  return ET || init();
- }
- async function init() {
--    _ET = window.EventTarget;
--    try {
--        new _ET();
--    }
--    catch (_a) {
--        _ET = (await import('event-target-shim')).EventTarget;
--    }
--    return (ET = _ET);
-+  _ET = window.EventTarget;
-+  try {
-+    new _ET();
-+  } catch (_a) {
-+    _ET = (await import("event-target-shim")).default.EventTarget;
-+  }
-+  return (ET = _ET);
- }
- //# sourceMappingURL=EventTarget.js.map

.yarn/patches/@material/mwc-icon-button/remove-icon.patch

@@ -1,12 +0,0 @@
-diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
-index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
---- a/mwc-icon-button-base.js
-+++ b/mwc-icon-button-base.js
-@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
-         @touchend="${this.handleRippleDeactivate}"
-         @touchcancel="${this.handleRippleDeactivate}"
-     >${this.renderRipple()}
--    <i class="material-icons">${this.icon}</i>
-     <span
-       ><slot></slot
-     ></span>

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

build-scripts/.eslintrc

@@ -1,7 +0,0 @@
-{
-  "rules": {
-    "import/no-extraneous-dependencies": 0,
-    "no-restricted-syntax": 0,
-    "no-console": 0
-  }
-}

build-scripts/.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "extends": "../.eslintrc.json",
   "rules": {
-    "import/no-extraneous-dependencies": 0,
+    "no-console": "off",
-    "global-require": 0
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
+    "global-require": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "prefer-arrow-callback": "off"
   }
 }

build-scripts/babel-plugins/inline-constants-plugin.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 // Currently only supports CommonJS modules, as require is synchronous. `import` would need babel running asynchronous.
@@ -29,7 +28,6 @@ module.exports = function inlineConstants(babel, options, cwd) {
       const absolute = module.startsWith(".")
         ? require.resolve(module, { paths: [cwd] })
         : module;
-      // eslint-disable-next-line import/no-dynamic-require
       return [absolute, require(absolute)];
     })
   );

build-scripts/bundle.js

@@ -1,9 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
+// eslint-disable-next-line unused-imports/no-unused-vars
 module.exports.ignorePackages = ({ latestBuild }) => [
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),

build-scripts/env.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.js");

build-scripts/gulp/clean.js

@@ -1,36 +1,40 @@
-const del = require("del");
+const del = import("del");
 const gulp = require("gulp");
 const paths = require("../paths");
 require("./translations");
 
 gulp.task(
   "clean",
-  gulp.parallel("clean-translations", () =>
+  gulp.parallel("clean-translations", async () =>
-    del([paths.app_output_root, paths.build_dir])
+    (await del).deleteSync([paths.app_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-demo",
-  gulp.parallel("clean-translations", () =>
+  gulp.parallel("clean-translations", async () =>
-    del([paths.demo_output_root, paths.build_dir])
+    (await del).deleteSync([paths.demo_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-cast",
-  gulp.parallel("clean-translations", () =>
+  gulp.parallel("clean-translations", async () =>
-    del([paths.cast_output_root, paths.build_dir])
+    (await del).deleteSync([paths.cast_output_root, paths.build_dir])
   )
 );
 
-gulp.task("clean-hassio", () =>
+gulp.task("clean-hassio", async () =>
-  del([paths.hassio_output_root, paths.build_dir])
+  (await del).deleteSync([paths.hassio_output_root, paths.build_dir])
 );
 
 gulp.task(
   "clean-gallery",
-  gulp.parallel("clean-translations", () =>
+  gulp.parallel("clean-translations", async () =>
-    del([paths.gallery_output_root, paths.gallery_build, paths.build_dir])
+    (await del).deleteSync([
+      paths.gallery_output_root,
+      paths.gallery_build,
+      paths.build_dir,
+    ])
   )
 );

build-scripts/gulp/download_translations.js

@@ -1,5 +1,5 @@
 const gulp = require("gulp");
-const fs = require("fs");
+const fs = require("fs/promises");
 const mapStream = require("map-stream");
 
 const inDirFrontend = "translations/frontend";
@@ -46,18 +46,21 @@ gulp.task("check-translations-html", function () {
   return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
 });
 
-gulp.task("check-all-files-exist", function () {
+gulp.task("check-all-files-exist", async function () {
-  const file = fs.readFileSync(srcMeta, { encoding });
+  const file = await fs.readFile(srcMeta, { encoding });
   const meta = JSON.parse(file);
+  const writings = [];
   Object.keys(meta).forEach((lang) => {
-    if (!fs.existsSync(`${inDirFrontend}/${lang}.json`)) {
+    writings.push(
-      fs.writeFileSync(`${inDirFrontend}/${lang}.json`, JSON.stringify({}));
+      fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
-    }
+        flag: "wx",
-    if (!fs.existsSync(`${inDirBackend}/${lang}.json`)) {
+      }),
-      fs.writeFileSync(`${inDirBackend}/${lang}.json`, JSON.stringify({}));
+      fs.writeFile(`${inDirBackend}/${lang}.json`, JSON.stringify({}), {
-    }
+        flag: "wx",
+      })
+    );
   });
-  return Promise.resolve();
+  await Promise.allSettled(writings);
 });
 
 gulp.task(

build-scripts/gulp/entry-html.js

@@ -1,6 +1,4 @@
 // Tasks to generate entry HTML
-/* eslint-disable import/no-dynamic-require */
-/* eslint-disable global-require */
 const gulp = require("gulp");
 const fs = require("fs-extra");
 const path = require("path");
@@ -91,7 +89,9 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
-  let latestAppJS, latestCoreJS, latestCustomPanelJS;
+  let latestAppJS;
+  let latestCoreJS;
+  let latestCustomPanelJS;
 
   if (env.useWDS()) {
     latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";

build-scripts/gulp/fetch-nightly-translations.js

@@ -0,0 +1,174 @@
+// Task to download the latest Lokalise translations from the nightly workflow artifacts
+
+const del = import("del");
+const fs = require("fs/promises");
+const path = require("path");
+const process = require("process");
+const gulp = require("gulp");
+const jszip = require("jszip");
+const tar = require("tar");
+const { Octokit } = require("@octokit/rest");
+const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
+
+const MAX_AGE = 24; // hours
+const OWNER = "home-assistant";
+const REPO = "frontend";
+const WORKFLOW_NAME = "nightly.yaml";
+const ARTIFACT_NAME = "translations";
+const CLIENT_ID = "Iv1.3914e28cb27834d1";
+const EXTRACT_DIR = "translations";
+const TOKEN_FILE = path.posix.join(EXTRACT_DIR, "token.json");
+const ARTIFACT_FILE = path.posix.join(EXTRACT_DIR, "artifact.json");
+
+let allowTokenSetup = false;
+gulp.task("allow-setup-fetch-nightly-translations", (done) => {
+  allowTokenSetup = true;
+  done();
+});
+
+gulp.task("fetch-nightly-translations", async function () {
+  // Skip all when environment flag is set (assumes translations are already in place)
+  if (process.env?.SKIP_FETCH_NIGHTLY_TRANSLATIONS) {
+    console.log("Skipping fetch due to environment signal");
+    return;
+  }
+
+  // Read current translations artifact info if it exists,
+  // and stop if they are not old enough
+  let currentArtifact;
+  try {
+    currentArtifact = JSON.parse(await fs.readFile(ARTIFACT_FILE, "utf-8"));
+    const currentAge =
+      (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
+    if (currentAge < MAX_AGE) {
+      console.log(
+        "Keeping current translations (only %s hours old)",
+        currentAge.toFixed(1)
+      );
+      return;
+    }
+  } catch {
+    currentArtifact = null;
+  }
+
+  // To store file writing promises
+  const createExtractDir = fs.mkdir(EXTRACT_DIR, { recursive: true });
+  const writings = [];
+
+  // Authenticate to GitHub using GitHub action token if it exists,
+  // otherwise look for a saved user token or generate a new one if none
+  let tokenAuth;
+  if (process.env.GITHUB_TOKEN) {
+    tokenAuth = { token: process.env.GITHUB_TOKEN };
+  } else {
+    try {
+      tokenAuth = JSON.parse(await fs.readFile(TOKEN_FILE, "utf-8"));
+    } catch {
+      if (!allowTokenSetup) {
+        console.log("No token found so  build wil continue with English only");
+        return;
+      }
+      const auth = createOAuthDeviceAuth({
+        clientType: "github-app",
+        clientId: CLIENT_ID,
+        onVerification: (verification) => {
+          console.log(
+            "Task needs to authenticate to GitHub to fetch the translations from nightly workflow\n" +
+              "Please go to %s to authorize this task\n" +
+              "\nEnter user code: %s\n\n" +
+              "This code will expire in %s minutes\n" +
+              "Task will automatically continue after authorization and token will be saved for future use",
+            verification.verification_uri,
+            verification.user_code,
+            (verification.expires_in / 60).toFixed(0)
+          );
+        },
+      });
+      tokenAuth = await auth({ type: "oauth" });
+      writings.push(
+        createExtractDir.then(
+          fs.writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
+        )
+      );
+    }
+  }
+
+  // Authenticate with token and request workflow runs from GitHub
+  console.log("Fetching new translations...");
+  const octokit = new Octokit({
+    userAgent: "Fetch Nightly Translations",
+    auth: tokenAuth.token,
+  });
+
+  const workflowRunsResponse = await octokit.rest.actions.listWorkflowRuns({
+    owner: OWNER,
+    repo: REPO,
+    workflow_id: WORKFLOW_NAME,
+    status: "success",
+    event: "schedule",
+    per_page: 1,
+    exclude_pull_requests: true,
+  });
+  if (workflowRunsResponse.data.total_count === 0) {
+    throw Error("No successful nightly workflow runs found");
+  }
+  const latestNightlyRun = workflowRunsResponse.data.workflow_runs[0];
+
+  // Stop if current is already the latest, otherwise Find the translations artifact
+  if (currentArtifact?.workflow_run.id === latestNightlyRun.id) {
+    console.log("Stopping because current translations are still the latest");
+    return;
+  }
+  const latestArtifact = (
+    await octokit.actions.listWorkflowRunArtifacts({
+      owner: OWNER,
+      repo: REPO,
+      run_id: latestNightlyRun.id,
+    })
+  ).data.artifacts.find((artifact) => artifact.name === ARTIFACT_NAME);
+  if (!latestArtifact) {
+    throw Error("Latest nightly workflow run has no translations artifact");
+  }
+  writings.push(
+    createExtractDir.then(
+      fs.writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+    )
+  );
+
+  // Remove the current translations
+  const deleteCurrent = Promise.all(writings).then(
+    (await del).deleteAsync([
+      `${EXTRACT_DIR}/*`,
+      `!${ARTIFACT_FILE}`,
+      `!${TOKEN_FILE}`,
+    ])
+  );
+
+  // Get the download URL and follow the redirect to download (stored as ArrayBuffer)
+  const downloadResponse = await octokit.actions.downloadArtifact({
+    owner: OWNER,
+    repo: REPO,
+    artifact_id: latestArtifact.id,
+    archive_format: "zip",
+  });
+  if (downloadResponse.status !== 200) {
+    throw Error("Failure downloading translations artifact");
+  }
+
+  // Artifact is a tarball, but GitHub adds it to a zip file
+  console.log("Unpacking downloaded translations...");
+  const zip = await jszip.loadAsync(downloadResponse.data);
+  await deleteCurrent;
+  const extractStream = zip.file(/.*/)[0].nodeStream().pipe(tar.extract());
+  await new Promise((resolve, reject) => {
+    extractStream.on("close", resolve).on("error", reject);
+  });
+});
+
+gulp.task(
+  "setup-and-fetch-nightly-translations",
+  gulp.series(
+    "allow-setup-fetch-nightly-translations",
+    "fetch-nightly-translations"
+  )
+);

build-scripts/gulp/gallery.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // Run demo develop mode
 const gulp = require("gulp");
 const fs = require("fs");
@@ -41,7 +40,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
     }
     processed.add(pageId);
 
-    const [category, name] = pageId.split("/", 2);
+    const [category] = pageId.split("/", 2);
 
     const demoFile = path.resolve(pageDir, `${pageId}.ts`);
     const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);

build-scripts/gulp/locale-data.js

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+const del = import("del");
-
-const del = require("del");
 const path = require("path");
 const gulp = require("gulp");
 const fs = require("fs");
@@ -8,7 +6,7 @@ const paths = require("../paths");
 
 const outDir = "build/locale-data";
 
-gulp.task("clean-locale-data", () => del([outDir]));
+gulp.task("clean-locale-data", async () => (await del).deleteSync([outDir]));
 
 gulp.task("ensure-locale-data-build-dir", (done) => {
   if (!fs.existsSync(outDir)) {

build-scripts/gulp/rollup.js

@@ -5,9 +5,9 @@ const rollup = require("rollup");
 const handler = require("serve-handler");
 const http = require("http");
 const log = require("fancy-log");
+const open = require("open");
 const rollupConfig = require("../rollup");
 const paths = require("../paths");
-const open = require("open");
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(
@@ -30,11 +30,11 @@ const bothBuilds = (createConfigFunc, params) =>
   );
 
 function createServer(serveOptions) {
-  const server = http.createServer((request, response) => {
+  const server = http.createServer((request, response) =>
-    return handler(request, response, {
+    handler(request, response, {
       public: serveOptions.root,
-    });
+    })
-  });
+  );
 
   server.listen(
     serveOptions.port,

build-scripts/gulp/service-worker.js

@@ -1,7 +1,5 @@
 // Generate service worker.
 // Based on manifest, create a file with the content as service_worker.js
-/* eslint-disable import/no-dynamic-require */
-/* eslint-disable global-require */
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs-extra");

build-scripts/gulp/translations.js

@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+const del = import("del");
-
 const crypto = require("crypto");
-const del = require("del");
 const path = require("path");
 const source = require("vinyl-source-stream");
 const vinylBuffer = require("vinyl-buffer");
@@ -15,6 +13,8 @@ const { mapFiles } = require("../util");
 const env = require("../env");
 const paths = require("../paths");
 
+require("./fetch-nightly-translations");
+
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
 const workDir = "build/translations";
@@ -23,10 +23,13 @@ const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
 let mergeBackend = false;
 
-gulp.task("translations-enable-merge-backend", (done) => {
+gulp.task(
-  mergeBackend = true;
+  "translations-enable-merge-backend",
-  done();
+  gulp.parallel((done) => {
-});
+    mergeBackend = true;
+    done();
+  }, "allow-setup-fetch-nightly-translations")
+);
 
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
@@ -117,7 +120,7 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", () => del([workDir]));
+gulp.task("clean-translations", async () => (await del).deleteSync([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -170,17 +173,24 @@ gulp.task("build-master-translation", () => {
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       merge({
-        fileName: "translationMaster.json",
+        fileName: "en.json",
       })
     )
-    .pipe(gulp.dest(workDir));
+    .pipe(gulp.dest(fullDir));
 });
 
 gulp.task("build-merged-translations", () =>
   gulp
-    .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
+    .src(
-      allowEmpty: true,
+      [
-    })
+        inFrontendDir + "/*.json",
+        "!" + inFrontendDir + "/en.json",
+        workDir + "/test.json",
+      ],
+      {
+        allowEmpty: true,
+      }
+    )
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       flatmap((stream, file) => {
@@ -193,7 +203,7 @@ gulp.task("build-merged-translations", () =>
         //       than a base translation + region.
         const tr = path.basename(file.history[0], ".json");
         const subtags = tr.split("-");
-        const src = [workDir + "/translationMaster.json"];
+        const src = [fullDir + "/en.json"];
         for (let i = 1; i <= subtags.length; i++) {
           const lang = subtags.slice(0, i).join("-");
           if (lang === "test") {
@@ -378,7 +388,6 @@ gulp.task("build-translation-write-metadata", () =>
           if (value.nativeName) {
             newData[key] = value;
           } else {
-            // eslint-disable-next-line no-console
             console.warn(
               `Skipping language ${key}. Native name was not translated.`
             );
@@ -411,8 +420,10 @@ gulp.task(
 gulp.task(
   "build-translations",
   gulp.series(
-    "clean-translations",
+    gulp.parallel(
-    "ensure-translations-build-dir",
+      "fetch-nightly-translations",
+      gulp.series("clean-translations", "ensure-translations-build-dir")
+    ),
     "create-translations",
     "build-translation-fingerprints",
     "build-translation-write-metadata"
@@ -422,8 +433,10 @@ gulp.task(
 gulp.task(
   "build-supervisor-translations",
   gulp.series(
-    "clean-translations",
+    gulp.parallel(
-    "ensure-translations-build-dir",
+      "fetch-nightly-translations",
+      gulp.series("clean-translations", "ensure-translations-build-dir")
+    ),
     "build-master-translation",
     "build-merged-translations",
     "build-translation-fragment-supervisor",

build-scripts/gulp/webpack.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
 const fs = require("fs");
 const gulp = require("gulp");
@@ -69,7 +68,6 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
-    // eslint-disable-next-line no-console
     console.log(stats.toString("minimal"));
   }
 

build-scripts/paths.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {

build-scripts/rollup-plugins/worker-plugin.js

@@ -81,13 +81,13 @@ module.exports = function (opts = {}) {
         opts.workerRegexp.flags
       );
       if (!workerRegexp.test(code)) {
-        return;
+        return undefined;
       }
 
       const ms = new MagicString(code);
       // Reset the regexp
       workerRegexp.lastIndex = 0;
-      while (true) {
+      for (;;) {
         const match = workerRegexp.exec(code);
         if (!match) {
           break;
@@ -98,6 +98,7 @@ module.exports = function (opts = {}) {
         // Parse the optional options object
         if (match[3] && match[3].length > 0) {
           // FIXME: ooooof!
+          // eslint-disable-next-line @typescript-eslint/no-implied-eval
           optionsObject = new Function(`return ${match[3].slice(1)};`)();
         }
         delete optionsObject.type;
@@ -110,12 +111,14 @@ module.exports = function (opts = {}) {
         }
 
         // Find worker file and store it as a chunk with ID prefixed for our loader
+        // eslint-disable-next-line no-await-in-loop
         const resolvedWorkerFile = (await this.resolve(workerFile, id)).id;
         let chunkRefId;
         if (resolvedWorkerFile in refIds) {
           chunkRefId = refIds[resolvedWorkerFile];
         } else {
           this.addWatchFile(resolvedWorkerFile);
+          // eslint-disable-next-line no-await-in-loop
           const source = await getBundledWorker(
             resolvedWorkerFile,
             rollupOptions

build-scripts/rollup.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 const commonjs = require("@rollup/plugin-commonjs");

build-scripts/util.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const fs = require("fs");
 

build-scripts/webpack.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -103,7 +102,6 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
-            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,

cast/src/html/launcher-faq.html.template

@@ -213,7 +213,7 @@
         </p>
         <ul>
           <li>Google Chrome (all platforms except iOS)</li>
-          <li>Microsoft Edge (all platforms)</li>
+          <li>Microsoft Edge (all platforms except iOS)</li>
         </ul>
       </div>
 

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

@@ -88,7 +88,7 @@ class HcCast extends LitElement {
               >
                 ${(this.lovelaceConfig
                   ? this.lovelaceConfig.views
-                  : [generateDefaultViewConfig([], [], [], {}, () => "")]
+                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
                 ).map(
                   (view, idx) => html`
                     <paper-icon-item
@@ -181,7 +181,7 @@ class HcCast extends LitElement {
   private async _handlePickView(ev: Event) {
     const path = (ev.currentTarget as any).getAttribute("data-path");
     await ensureConnectedCastSession(this.castManager!, this.auth!);
-    castSendShowLovelaceView(this.castManager, path);
+    castSendShowLovelaceView(this.castManager, path, this.auth.data.hassUrl);
   }
 
   private async _handleLogout() {

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

@@ -22,7 +22,11 @@ class HcLayout extends LitElement {
     return html`
       <ha-card>
         <div class="layout">
-          <img class="hero" src="/images/google-nest-hub.png" />
+          <img
+            class="hero"
+            alt="A Google Nest Hub with a Home Assistant dashboard on its screen"
+            src="/images/google-nest-hub.png"
+          />
           <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
@@ -44,7 +48,7 @@ class HcLayout extends LitElement {
       <div class="footer">
         <a href="./faq.html">Frequently Asked Questions</a> – Found a bug?
         <a
-          href="https://github.com/home-assistant/home-assistant-polymer/issues"
+          href="https://github.com/home-assistant/frontend/issues"
           target="_blank"
           >Let us know!</a
         >

cast/src/receiver/layout/hc-launch-screen.ts

@@ -12,6 +12,7 @@ class HcLaunchScreen extends LitElement {
     return html`
       <div class="container">
         <img
+          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
           src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
         />
         <div class="status">

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

@@ -33,7 +33,6 @@ import { castContext } from "../cast_context";
 import "./hc-launch-screen";
 
 let resourcesLoaded = false;
-
 @customElement("hc-main")
 export class HcMain extends HassElement {
   @state() private _showDemo = false;
@@ -46,6 +45,8 @@ export class HcMain extends HassElement {
 
   @state() private _urlPath?: string | null;
 
+  private _hassUUID?: string;
+
   private _unsubLovelace?: UnsubscribeFunc;
 
   public processIncomingMessage(msg: HassMessage) {
@@ -125,6 +126,7 @@ export class HcMain extends HassElement {
 
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
+      status.hassUUID = this._hassUUID;
       status.lovelacePath = this._lovelacePath;
       status.urlPath = this._urlPath;
     }
@@ -163,6 +165,18 @@ export class HcMain extends HassElement {
   };
 
   private async _handleGetStatusMessage(msg: GetStatusMessage) {
+    if (
+      (this.hass && msg.hassUUID && msg.hassUUID !== this._hassUUID) ||
+      (this.hass && msg.hassUrl && msg.hassUrl !== this.hass.auth.data.hassUrl)
+    ) {
+      this._error = "Not connected to the same Home Assistant instance.";
+      this._sendError(
+        ReceiverErrorCode.WRONG_INSTANCE,
+        this._error,
+        msg.senderId!
+      );
+    }
+
     this._sendStatus(msg.senderId!);
   }
 
@@ -179,6 +193,7 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
+      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
       const errorMessage = this._getErrorMessage(err);
       this._error = errorMessage;
@@ -209,9 +224,29 @@ export class HcMain extends HassElement {
     if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
-      this._sendError(ReceiverErrorCode.NOT_CONNECTED, this._error);
+      this._sendError(
+        ReceiverErrorCode.NOT_CONNECTED,
+        this._error,
+        msg.senderId!
+      );
       return;
     }
+
+    if (
+      (msg.hassUUID && msg.hassUUID !== this._hassUUID) ||
+      (msg.hassUrl && msg.hassUrl !== this.hass.auth.data.hassUrl)
+    ) {
+      this._sendStatus(msg.senderId!);
+      this._error =
+        "Cannot show Lovelace because we're not connected to the same Home Assistant instance.";
+      this._sendError(
+        ReceiverErrorCode.WRONG_INSTANCE,
+        this._error,
+        msg.senderId!
+      );
+      return;
+    }
+
     this._error = undefined;
     if (msg.urlPath === "lovelace") {
       msg.urlPath = null;

demo/src/custom-cards/card-tools.js

@@ -138,7 +138,7 @@ if (!window.cardTools) {
       return cardTools.createThing("row", config);
 
     const domain = config.entity.split(".", 1)[0];
-    Object.assign(config, { type: DEFAULT_ROWS[domain] || "text" });
+    Object.assign(config, { type: DEFAULT_ROWS[domain] || "simple" });
     return cardTools.createThing("entity-row", config);
   };
 

demo/src/stubs/recorder.ts

@@ -13,7 +13,6 @@ import {
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 const generateMeanStatistics = (
-  id: string,
   start: Date,
   end: Date,
   period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -29,13 +28,12 @@ const generateMeanStatistics = (
     const delta = Math.random() * maxDiff;
     const mean = lastVal + delta;
     statistics.push({
-      statistic_id: id,
+      start: currentDate.getTime(),
-      start: currentDate.toISOString(),
+      end: currentDate.getTime(),
-      end: currentDate.toISOString(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: mean,
       sum: null,
     });
@@ -51,7 +49,6 @@ const generateMeanStatistics = (
 };
 
 const generateSumStatistics = (
-  id: string,
   start: Date,
   end: Date,
   period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -67,13 +64,12 @@ const generateSumStatistics = (
     const add = Math.random() * maxDiff;
     sum += add;
     statistics.push({
-      statistic_id: id,
+      start: currentDate.getTime(),
-      start: currentDate.toISOString(),
+      end: currentDate.getTime(),
-      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: initValue + sum,
       sum,
     });
@@ -88,7 +84,6 @@ const generateSumStatistics = (
 };
 
 const generateCurvedStatistics = (
-  id: string,
   start: Date,
   end: Date,
   _period: "5minute" | "hour" | "day" | "month" = "hour",
@@ -108,13 +103,12 @@ const generateCurvedStatistics = (
     const add = Math.random() * maxDiff;
     sum += i * add;
     statistics.push({
-      statistic_id: id,
+      start: currentDate.getTime(),
-      start: currentDate.toISOString(),
+      end: currentDate.getTime(),
-      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
+      last_reset: 0,
       state: initValue + sum,
       sum: metered ? sum : null,
     });
@@ -137,14 +131,13 @@ const statisticsFunctions: Record<
   ) => StatisticValue[]
 > = {
   "sensor.energy_consumption_tarif_1": (
-    id: string,
+    _id: string,
     start: Date,
     end: Date,
     period = "hour"
   ) => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -153,20 +146,12 @@ const statisticsFunctions: Record<
       );
     }
     const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
+    const morningLow = generateSumStatistics(start, morningEnd, period, 0, 0.7);
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const morningFinalVal = morningLow.length
       ? morningLow[morningLow.length - 1].sum!
       : 0;
     const empty = generateSumStatistics(
-      id,
       morningEnd,
       eveningStart,
       period,
@@ -174,7 +159,6 @@ const statisticsFunctions: Record<
       0
     );
     const eveningLow = generateSumStatistics(
-      id,
       eveningStart,
       end,
       period,
@@ -184,14 +168,13 @@ const statisticsFunctions: Record<
     return [...morningLow, ...empty, ...eveningLow];
   },
   "sensor.energy_consumption_tarif_2": (
-    id: string,
+    _id: string,
     start: Date,
     end: Date,
     period = "hour"
   ) => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -202,7 +185,6 @@ const statisticsFunctions: Record<
     const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const highTarif = generateSumStatistics(
-      id,
       morningEnd,
       eveningStart,
       period,
@@ -212,9 +194,8 @@ const statisticsFunctions: Record<
     const highTarifFinalVal = highTarif.length
       ? highTarif[highTarif.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const morning = generateSumStatistics(start, morningEnd, period, 0, 0);
     const evening = generateSumStatistics(
-      id,
       eveningStart,
       end,
       period,
@@ -223,18 +204,17 @@ const statisticsFunctions: Record<
     );
     return [...morning, ...highTarif, ...evening];
   },
-  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+  "sensor.energy_production_tarif_1": (_id, start, end, period = "hour") =>
-    generateSumStatistics(id, start, end, period, 0, 0),
+    generateSumStatistics(start, end, period, 0, 0),
   "sensor.energy_production_tarif_1_compensation": (
-    id,
+    _id,
     start,
     end,
     period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  ) => generateSumStatistics(start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+  "sensor.energy_production_tarif_2": (_id, start, end, period = "hour") => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -246,7 +226,6 @@ const statisticsFunctions: Record<
     const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
     const production = generateCurvedStatistics(
-      id,
       productionStart,
       productionEnd,
       period,
@@ -257,16 +236,8 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
+    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
     const evening = generateSumStatistics(
-      id,
       productionEnd,
       dayEnd,
       period,
@@ -274,7 +245,6 @@ const statisticsFunctions: Record<
       0
     );
     const rest = generateSumStatistics(
-      id,
       dayEnd,
       end,
       period,
@@ -283,10 +253,9 @@ const statisticsFunctions: Record<
     );
     return [...morning, ...production, ...evening, ...rest];
   },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
+  "sensor.solar_production": (_id, start, end, period = "hour") => {
     if (period !== "hour") {
       return generateSumStatistics(
-        id,
         start,
         end,
         period,
@@ -298,7 +267,6 @@ const statisticsFunctions: Record<
     const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
     const production = generateCurvedStatistics(
-      id,
       productionStart,
       productionEnd,
       period,
@@ -309,16 +277,8 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(
+    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
     const evening = generateSumStatistics(
-      id,
       productionEnd,
       dayEnd,
       period,
@@ -326,7 +286,6 @@ const statisticsFunctions: Record<
       0
     );
     const rest = generateSumStatistics(
-      id,
       dayEnd,
       end,
       period,
@@ -362,7 +321,6 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
           statistics[id] =
             entityState && "last_reset" in entityState.attributes
               ? generateSumStatistics(
-                  id,
                   start,
                   end,
                   period,
@@ -370,7 +328,6 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   state * (state > 80 ? 0.01 : 0.05)
                 )
               : generateMeanStatistics(
-                  id,
                   start,
                   end,
                   period,

gallery/script/netlify_build_gallery

@@ -1,35 +0,0 @@
-#!/bin/bash
-
-TARGET_LABEL="needs design preview"
-
-if [[ "$NETLIFY" != "true" ]]; then
-  echo "This script can only be run on Netlify"
-  exit 1
-fi
-
-function createStatus() {
-  state="$1"
-  description="$2"
-  target_url="$3"
-  curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
-    "https://api.github.com/repos/home-assistant/frontend/statuses/$COMMIT_REF" \
-    -d '{"state": "'"${state}"'", "context": "Netlify/Design Preview Build", "description": "'"$description"'", "target_url":  "'"$target_url"'"}'
-}
-
-
-if [[ "${PULL_REQUEST}" == "true" ]]; then
-  if [[ "$(curl -sSLf -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
-    "https://api.github.com/repos/home-assistant/frontend/pulls/${REVIEW_ID}" | jq '.labels[].name' -r)" =~ "$TARGET_LABEL" ]]; then
-    createStatus "pending" "Building design preview" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
-    gulp build-gallery
-    if [ $? -eq 0 ]; then
-      createStatus "success" "Build complete" "$DEPLOY_PRIME_URL"
-    else
-      createStatus "error" "Build failed" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
-    fi
-  else
-    createStatus "success" "Build was not requested by PR label"
-  fi
-elif [[ "$INCOMING_HOOK_BODY" == "NIGHTLY" ]]; then
-  gulp build-gallery
-fi

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

@@ -1,5 +1,5 @@
 ---
-title: Alerts
+title: Alert
 subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 

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

@@ -98,7 +98,9 @@ const alerts: {
     description: "Alert with slotted image",
     type: "warning",
     iconSlot: html`<span slot="icon" class="image"
-      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
+      ><img
+        alt="Home Assistant logo"
+        src="https://www.home-assistant.io/images/home-assistant-logo.svg"
     /></span>`,
   },
   {

gallery/src/pages/components/ha-bar-slider.markdown

@@ -1,3 +1,3 @@
 ---
-title: Bar Sliders
+title: Bar Slider
 ---

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

@@ -8,7 +8,7 @@ import "../../../../src/components/ha-card";
 const sliders: {
   id: string;
   label: string;
-  mode?: "start" | "end" | "indicator";
+  mode?: "start" | "end" | "cursor";
   class?: string;
 }[] = [
   {
@@ -22,9 +22,9 @@ const sliders: {
     mode: "end",
   },
   {
-    id: "slider-indicator",
+    id: "slider-cursor",
-    label: "Slider (indicator mode)",
+    label: "Slider (cursor mode)",
-    mode: "indicator",
+    mode: "cursor",
   },
   {
     id: "slider-start-custom",
@@ -39,9 +39,9 @@ const sliders: {
     class: "custom",
   },
   {
-    id: "slider-indicator-custom",
+    id: "slider-cursor-custom",
-    label: "Slider (indicator mode) and custom style",
+    label: "Slider (cursor mode) and custom style",
-    mode: "indicator",
+    mode: "cursor",
     class: "custom",
   },
 ];
@@ -142,7 +142,8 @@ export class DemoHaBarSlider extends LitElement {
       }
       .custom {
         --slider-bar-color: #ffcf4c;
-        --slider-bar-background: #ffcf4c64;
+        --slider-bar-background: #ffcf4c;
+        --slider-bar-background-opacity: 0.2;
         --slider-bar-thickness: 100px;
         --slider-bar-border-radius: 24px;
       }

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

@@ -0,0 +1,3 @@
+---
+title: Bar Switch
+---

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

@@ -0,0 +1,145 @@
+import {
+  mdiGarage,
+  mdiGarageOpen,
+  mdiLightbulb,
+  mdiLightbulbOff,
+} from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-bar-switch";
+import "../../../../src/components/ha-card";
+
+const switches: {
+  id: string;
+  label: string;
+  class?: string;
+  reversed?: boolean;
+  disabled?: boolean;
+}[] = [
+  {
+    id: "switch",
+    label: "Switch",
+  },
+  {
+    id: "switch-reversed",
+    label: "Switch Reversed",
+    reversed: true,
+  },
+  {
+    id: "switch-custom",
+    label: "Switch and custom style",
+    class: "custom",
+  },
+  {
+    id: "switch-disabled",
+    label: "Disabled Switch",
+    disabled: true,
+  },
+];
+
+@customElement("demo-components-ha-bar-switch")
+export class DemoHaBarSwitch extends LitElement {
+  @state() private checked = false;
+
+  handleValueChanged(e: any) {
+    this.checked = e.target.checked as boolean;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${repeat(switches, (sw) => {
+        const { id, label, ...config } = sw;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-bar-switch
+                .checked=${this.checked}
+                class=${ifDefined(config.class)}
+                @change=${this.handleValueChanged}
+                .pathOn=${mdiLightbulb}
+                .pathOff=${mdiLightbulbOff}
+                aria-labelledby=${id}
+                disabled=${ifDefined(config.disabled)}
+                reversed=${ifDefined(config.reversed)}
+              >
+              </ha-bar-switch>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-switches">
+            ${repeat(switches, (sw) => {
+              const { id, label, ...config } = sw;
+              return html`
+                <ha-bar-switch
+                  .checked=${this.checked}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @change=${this.handleValueChanged}
+                  aria-label=${label}
+                  .pathOn=${mdiGarageOpen}
+                  .pathOff=${mdiGarage}
+                  disabled=${ifDefined(config.disabled)}
+                  reversed=${ifDefined(config.reversed)}
+                >
+                </ha-bar-switch>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --switch-bar-on-color: var(--green-color);
+        --switch-bar-off-color: var(--red-color);
+        --switch-bar-thickness: 100px;
+        --switch-bar-border-radius: 24px;
+        --switch-bar-padding: 6px;
+        --mdc-icon-size: 24px;
+      }
+      .vertical-switches {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-switches > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-bar-switch": DemoHaBarSwitch;
+  }
+}

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

@@ -1,3 +1,4 @@
 ---
-title: Progress Bars
+title: Bar
+subtitle: Can be used to communicate progress of a task.
 ---

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

@@ -1,3 +1,3 @@
 ---
-title: Chips
+title: Chip
 ---

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

@@ -1,11 +1,11 @@
 ---
-title: Dialogs
+title: Dialog
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview). 
 
 # Highlighted guidelines
 

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

@@ -99,16 +99,19 @@ const AREAS = [
     area_id: "backyard",
     name: "Backyard",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
     picture: null,
+    aliases: [],
   },
 ];
 

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

@@ -0,0 +1,61 @@
+---
+title: Gauge
+---
+
+<style>
+  ha-gauge {
+    display: block;
+    width: 200px;
+    margin-top: 15px;
+    margin-bottom: 50px;
+  }
+</style>
+
+# Gauge `<ha-gauge>`
+
+A gauge that can be used to represent sensor data and provide visual feedback about the value and the corresponding severity (success, warning, error).
+
+## Examples
+
+Info color gauge
+<ha-gauge value="75" style="--gauge-color: var(--info-color)"></ha-gauge>
+
+Success color gauge
+<ha-gauge value="25" style="--gauge-color: var(--success-color)" label="°C"></ha-gauge>
+
+Warning color gauge
+<ha-gauge value="50" style="--gauge-color: var(--warning-color)" label="°C"></ha-gauge>
+
+Error color gauge
+<ha-gauge value="75" style="--gauge-color: var(--error-color)" label="°C"></ha-gauge>
+
+Gauge with background color
+<ha-gauge value="75" style="--gauge-color: var(--info-color); --primary-background-color: lightgray"></ha-gauge>
+
+
+## CSS variables
+
+### Gauge
+
+`primary-background-color`  
+Background color of the dial (rounded arch)
+
+`primary-text-color`  
+Text color below dial (value and unit of measurement) plus needle color (if gauge is in needle mode)
+
+#### Dial colors
+
+`gauge-color`  
+Used in the coding to control what color the gauge value is rendered with, but cannot be set via theme since its value will dynamically be set (either to `info-color` or to the matching severity variable if the severity color mode is used). To control the used colors, adjust the following variables.
+
+`success-color`  
+Dial color for the "green" severity level
+
+`warning-color`  
+Dial color for the "yellow" severity level
+
+`error-color`  
+Dial color for the "red" severity level
+
+`info-color`  
+Static dial color if not in severity color mode

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

@@ -0,0 +1 @@
+import "../../../../src/components/ha-gauge";

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

@@ -1,5 +1,5 @@
 ---
-title: Selectors
+title: Selector
 ---
 
 See the website for [list of available selectors](https://www.home-assistant.io/docs/blueprint/selectors/).

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

@@ -95,16 +95,19 @@ const AREAS = [
     area_id: "backyard",
     name: "Backyard",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
     picture: null,
+    aliases: [],
   },
 ];
 

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

@@ -0,0 +1,39 @@
+---
+title: Switch / Toggle
+---
+
+<style>
+  ha-switch {
+    display: block;
+  }
+</style>
+
+# Switch `<ha-switch>`
+
+A toggle switch can represent two states: on and off.
+
+## Examples
+
+Switch in on state
+<ha-switch checked></ha-switch>
+
+Switch in off state
+<ha-switch></ha-switch>
+
+Disabled switch
+<ha-switch disabled></ha-switch>
+
+## CSS variables
+
+For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
+
+The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
+
+`switch-checked-color` / `switch-unchecked-color`  
+Set both the color of the round handle  and the track behind it. If you want to control them separately, use the variables below instead.
+
+`switch-checked-button-color` / `switch-unchecked-button-color`  
+Color of the round handle
+
+`switch-checked-track-color` / `switch-unchecked-track-color`  
+Color of the track behind the round handle

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

@@ -0,0 +1 @@
+import "../../../../src/components/ha-switch";

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

@@ -1,3 +1,3 @@
 ---
-title: Tips
+title: Tip
 ---

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

@@ -98,6 +98,9 @@ const ENTITIES = [
     minimum: 0,
     maximum: 10,
   }),
+  getEntity("text", "message", "Hello!", {
+    friendly_name: "Message",
+  }),
 
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Bed Light",
@@ -129,6 +132,9 @@ const ENTITIES = [
     friendly_name: "Who cooks",
     icon: "mdi:cheff",
   }),
+  getEntity("text", "unavailable", "unavailable", {
+    friendly_name: "Message",
+  }),
 ];
 
 const CONFIGS = [
@@ -147,6 +153,26 @@ const CONFIGS = [
     - climate.ecobee
     - input_number.number
     - sensor.humidity
+    - text.message
+    `,
+  },
+  {
+    heading: "With enabled state color",
+    config: `
+- type: entities
+  state_color: true
+  entities:
+    - scene.romantic_lights
+    - device_tracker.demo_paulus
+    - cover.kitchen_window
+    - group.kitchen
+    - lock.kitchen_door
+    - light.bed_light
+    - light.non_existing
+    - climate.ecobee
+    - input_number.number
+    - sensor.humidity
+    - text.message
     `,
   },
   {
@@ -219,6 +245,7 @@ const CONFIGS = [
     - climate.unavailable
     - input_number.unavailable
     - input_select.unavailable
+    - text.unavailable
     `,
   },
   {

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

@@ -35,11 +35,11 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Without State",
+    heading: "With State",
     config: `
 - type: button
   entity: light.bed_light
-  show_state: false
+  show_state: true
     `,
   },
   {

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

@@ -23,13 +23,12 @@ const CONFIGS = [
     heading: "Basic example",
     config: `
 - type: gauge
-  title: Humidity
   entity: sensor.outside_humidity
   name: Outside Humidity
     `,
   },
   {
-    heading: "Custom Unit of Measurement",
+    heading: "Custom unit of measurement",
     config: `
 - type: gauge
   entity: sensor.outside_temperature
@@ -38,7 +37,16 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Rendering needle",
+    config: `
+- type: gauge
+  entity: sensor.outside_humidity
+  name: Outside Humidity
+  needle: true
+    `,
+  },
+  {
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -50,7 +58,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_medium
@@ -62,7 +70,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Severity Levels",
+    heading: "Setting severity levels",
     config: `
 - type: gauge
   entity: sensor.brightness_high
@@ -74,7 +82,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Setting Min (0) and Max (15) Values",
+    heading: "Setting min (0) and mx (15) values",
     config: `
 - type: gauge
   entity: sensor.brightness
@@ -84,14 +92,14 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Invalid Entity",
+    heading: "Invalid entity",
     config: `
 - type: gauge
   entity: sensor.invalid_entity
     `,
   },
   {
-    heading: "Non-Numeric Value",
+    heading: "Non-numeric value",
     config: `
 - type: gauge
   entity: plant.bonsai

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

@@ -62,6 +62,21 @@ const CONFIGS = [
     heading: "Basic example",
     config: `
 - type: glance
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No state colors",
+    config: `
+- type: glance
+  state_color: false
   entities:
     - device_tracker.demo_paulus
     - media_player.living_room

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

@@ -1,3 +1,3 @@
 ---
-title: Grid And Stack Card
+title: Grid and Stack Card
 ---

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

@@ -0,0 +1,3 @@
+---
+title: Entity State
+---

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

@@ -0,0 +1,422 @@
+import {
+  HassEntity,
+  HassEntityAttributeBase,
+} from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { computeDomain } from "../../../../src/common/entity/compute_domain";
+import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
+import "../../../../src/components/data-table/ha-data-table";
+import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
+import "../../../../src/components/entity/state-badge";
+import "../../../../src/components/ha-chip";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const SENSOR_DEVICE_CLASSES = [
+  "apparent_power",
+  "aqi",
+  // "battery"
+  "carbon_dioxide",
+  "carbon_monoxide",
+  "current",
+  "date",
+  "distance",
+  "duration",
+  "energy",
+  "frequency",
+  "gas",
+  "humidity",
+  "illuminance",
+  "moisture",
+  "monetary",
+  "nitrogen_dioxide",
+  "nitrogen_monoxide",
+  "nitrous_oxide",
+  "ozone",
+  "pm1",
+  "pm10",
+  "pm25",
+  "power_factor",
+  "power",
+  "precipitation",
+  "precipitation_intensity",
+  "pressure",
+  "reactive_power",
+  "signal_strength",
+  "speed",
+  "sulphur_dioxide",
+  "temperature",
+  "timestamp",
+  "volatile_organic_compounds",
+  "voltage",
+  "volume",
+  "water",
+  "weight",
+  "wind_speed",
+];
+
+const BINARY_SENSOR_DEVICE_CLASSES = [
+  "battery",
+  "battery_charging",
+  "carbon_monoxide",
+  "cold",
+  "connectivity",
+  "door",
+  "garage_door",
+  "gas",
+  "heat",
+  "light",
+  "lock",
+  "moisture",
+  "motion",
+  "moving",
+  "occupancy",
+  "opening",
+  "plug",
+  "power",
+  "presence",
+  "problem",
+  "running",
+  "safety",
+  "smoke",
+  "sound",
+  "tamper",
+  "update",
+  "vibration",
+  "window",
+];
+
+const ENTITIES: HassEntity[] = [
+  // Alarm control panel
+  createEntity("alarm_control_panel.disarmed", "disarmed"),
+  createEntity("alarm_control_panel.armed_home", "armed_home"),
+  createEntity("alarm_control_panel.armed_away", "armed_away"),
+  createEntity("alarm_control_panel.armed_night", "armed_night"),
+  createEntity("alarm_control_panel.armed_vacation", "armed_vacation"),
+  createEntity(
+    "alarm_control_panel.armed_custom_bypass",
+    "armed_custom_bypass"
+  ),
+  createEntity("alarm_control_panel.pending", "pending"),
+  createEntity("alarm_control_panel.arming", "arming"),
+  createEntity("alarm_control_panel.disarming", "disarming"),
+  createEntity("alarm_control_panel.triggered", "triggered"),
+  // Alert
+  createEntity("alert.idle", "idle"),
+  createEntity("alert.off", "off"),
+  createEntity("alert.on", "on"),
+  // Automation
+  createEntity("automation.off", "off"),
+  createEntity("automation.on", "on"),
+  // Binary Sensor
+  ...BINARY_SENSOR_DEVICE_CLASSES.map((dc) => [
+    createEntity(`binary_sensor.${dc}`, "off", dc),
+    createEntity(`binary_sensor.${dc}`, "on", dc),
+  ]).reduce((arr, item) => [...arr, ...item], []),
+  // Button
+  createEntity("button.restart", "unknown", "restart"),
+  createEntity("button.update", "unknown", "update"),
+  // Calendar
+  createEntity("calendar.off", "off"),
+  createEntity("calendar.on", "on"),
+  // Camera
+  createEntity("camera.idle", "idle"),
+  createEntity("camera.streaming", "streaming"),
+  // Climate
+  createEntity("climate.off", "off"),
+  createEntity("climate.heat", "heat"),
+  createEntity("climate.cool", "cool"),
+  createEntity("climate.heat_cool", "heat_cool"),
+  createEntity("climate.auto", "auto"),
+  createEntity("climate.dry", "dry"),
+  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_heating", "auto", undefined, {
+    hvac_action: "heating",
+  }),
+  createEntity("climate.auto_cooling", "auto", undefined, {
+    hvac_action: "cooling",
+  }),
+  createEntity("climate.auto_dry", "auto", undefined, {
+    hvac_action: "drying",
+  }),
+  createEntity("climate.auto_fan", "auto", undefined, {
+    hvac_action: "fan",
+  }),
+  // Cover
+  createEntity("cover.closing", "closing"),
+  createEntity("cover.closed", "closed"),
+  createEntity("cover.opening", "opening"),
+  createEntity("cover.open", "open"),
+  createEntity("cover.awning", "open", "awning"),
+  createEntity("cover.blind", "open", "blind"),
+  createEntity("cover.curtain", "open", "curtain"),
+  createEntity("cover.damper", "open", "damper"),
+  createEntity("cover.door", "open", "door"),
+  createEntity("cover.garage", "open", "garage"),
+  createEntity("cover.gate", "open", "gate"),
+  createEntity("cover.shade", "open", "shade"),
+  createEntity("cover.shutter", "open", "shutter"),
+  createEntity("cover.window", "open", "window"),
+  // Device tracker/person
+  createEntity("device_tracker.not_home", "not_home"),
+  createEntity("device_tracker.home", "home"),
+  createEntity("device_tracker.work", "work"),
+  createEntity("person.home", "home"),
+  createEntity("person.not_home", "not_home"),
+  createEntity("person.work", "work"),
+  // Fan
+  createEntity("fan.off", "off"),
+  createEntity("fan.on", "on"),
+  // Camera
+  createEntity("group.off", "off"),
+  createEntity("group.on", "on"),
+  // Humidifier
+  createEntity("humidifier.off", "off"),
+  createEntity("humidifier.on", "on"),
+  // Helpers
+  createEntity("input_boolean.off", "off"),
+  createEntity("input_boolean.on", "on"),
+  // Light
+  createEntity("light.off", "off"),
+  createEntity("light.on", "on"),
+  // Locks
+  createEntity("lock.locked", "locked"),
+  createEntity("lock.unlocked", "unlocked"),
+  createEntity("lock.locking", "locking"),
+  createEntity("lock.unlocking", "unlocking"),
+  createEntity("lock.jammed", "jammed"),
+  // Media Player
+  createEntity("media_player.off", "off"),
+  createEntity("media_player.on", "on"),
+  createEntity("media_player.idle", "idle"),
+  createEntity("media_player.playing", "playing"),
+  createEntity("media_player.paused", "paused"),
+  createEntity("media_player.standby", "standby"),
+  createEntity("media_player.buffering", "buffering"),
+  createEntity("media_player.tv_off", "off", "tv"),
+  createEntity("media_player.tv_playing", "playing", "tv"),
+  createEntity("media_player.tv_paused", "paused", "tv"),
+  createEntity("media_player.tv_standby", "standby", "tv"),
+  createEntity("media_player.receiver_off", "off", "receiver"),
+  createEntity("media_player.receiver_playing", "playing", "receiver"),
+  createEntity("media_player.receiver_paused", "paused", "receiver"),
+  createEntity("media_player.receiver_standby", "standby", "receiver"),
+  createEntity("media_player.speaker_off", "off", "speaker"),
+  createEntity("media_player.speaker_playing", "playing", "speaker"),
+  createEntity("media_player.speaker_paused", "paused", "speaker"),
+  createEntity("media_player.speaker_standby", "standby", "speaker"),
+  // Plant
+  createEntity("plant.ok", "ok"),
+  createEntity("plant.problem", "problem"),
+  // Remote
+  createEntity("remote.off", "off"),
+  createEntity("remote.on", "on"),
+  // Schedule
+  createEntity("schedule.off", "off"),
+  createEntity("schedule.on", "on"),
+  // Script
+  createEntity("script.off", "off"),
+  createEntity("script.on", "on"),
+  // Sensor
+  ...SENSOR_DEVICE_CLASSES.map((dc) => createEntity(`sensor.${dc}`, "10", dc)),
+  // Battery sensor
+  ...[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, "unknown", "not_valid"].map(
+    (value) =>
+      createEntity(`sensor.battery_${value}`, value.toString(), "battery")
+  ),
+  // Siren
+  createEntity("siren.off", "off"),
+  createEntity("siren.on", "on"),
+  // Sun
+  createEntity("sun.below", "below_horizon"),
+  createEntity("sun.above", "above_horizon"),
+  createEntity("sun.unknown", "unknown"),
+  createEntity("sun.unavailable", "unavailable"),
+  // Switch
+  createEntity("switch.off", "off"),
+  createEntity("switch.on", "on"),
+  createEntity("switch.outlet_off", "off", "outlet"),
+  createEntity("switch.outlet_on", "on", "outlet"),
+  createEntity("switch.switch_off", "off", "switch"),
+  createEntity("switch.switch_on", "on", "switch"),
+  // Timer
+  createEntity("timer.idle", "idle"),
+  createEntity("timer.active", "active"),
+  createEntity("timer.paused", "paused"),
+  // Vacuum
+  createEntity("vacuum.docked", "docked"),
+  createEntity("vacuum.cleaning", "cleaning"),
+  createEntity("vacuum.paused", "paused"),
+  createEntity("vacuum.idle", "idle"),
+  createEntity("vacuum.returning", "returning"),
+  createEntity("vacuum.error", "error"),
+  createEntity("vacuum.cleaning", "cleaning"),
+  createEntity("vacuum.off", "off"),
+  createEntity("vacuum.on", "on"),
+  // Update
+  createEntity("update.off", "off", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.on", "on", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.installing", "on", undefined, {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+    in_progress: true,
+  }),
+  createEntity("update.off", "off", "firmware", {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+  createEntity("update.on", "on", "firmware", {
+    installed_version: "1.0.0",
+    latest_version: "2.0.0",
+  }),
+];
+
+function createEntity(
+  entity_id: string,
+  state: string,
+  device_class?: string,
+  attributes?: HassEntityAttributeBase | HassEntity["attributes"]
+): HassEntity {
+  return {
+    entity_id,
+    state,
+    attributes: {
+      ...attributes,
+      device_class: device_class,
+    },
+    last_changed: new Date().toString(),
+    last_updated: new Date().toString(),
+    context: {
+      id: "1",
+      parent_id: null,
+      user_id: null,
+    },
+  };
+}
+
+type EntityRowData = {
+  stateObj: HassEntity;
+  entity_id: string;
+  state: string;
+  device_class?: string;
+  domain: string;
+};
+
+function createRowData(stateObj: HassEntity): EntityRowData {
+  return {
+    stateObj,
+    entity_id: stateObj.entity_id,
+    state: stateObj.state,
+    device_class: stateObj.attributes.device_class,
+    domain: computeDomain(stateObj.entity_id),
+  };
+}
+
+@customElement("demo-misc-entity-state")
+export class DemoEntityState extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  private _columns = memoizeOne(
+    (hass: HomeAssistant): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<EntityRowData> = {
+        icon: {
+          title: "Icon",
+          template: (_, entry) => html`
+            <state-badge
+              .stateObj=${entry.stateObj}
+              .stateColor=${true}
+            ></state-badge>
+          `,
+        },
+        entity_id: {
+          title: "Entity ID",
+          width: "30%",
+          filterable: true,
+          sortable: true,
+        },
+        state: {
+          title: "State",
+          width: "20%",
+          sortable: true,
+          template: (_, entry) =>
+            html`${computeStateDisplay(
+              hass.localize,
+              entry.stateObj,
+              hass.locale,
+              hass.entities
+            )}`,
+        },
+        device_class: {
+          title: "Device class",
+          template: (dc) => html`${dc ?? "-"}`,
+          width: "20%",
+          filterable: true,
+          sortable: true,
+        },
+        domain: {
+          title: "Domain",
+          template: (_, entry) => html`${computeDomain(entry.entity_id)}`,
+          width: "20%",
+          filterable: true,
+          sortable: true,
+        },
+      };
+
+      return columns;
+    }
+  );
+
+  private _rows = memoizeOne((): EntityRowData[] =>
+    ENTITIES.map(createRowData)
+  );
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-data-table
+        .hass=${this.hass}
+        .columns=${this._columns(this.hass)}
+        .data=${this._rows()}
+        auto-height
+      ></ha-data-table>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .color {
+        display: block;
+        height: 20px;
+        width: 20px;
+        border-radius: 10px;
+        background-color: rgb(--color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-entity-state": DemoEntityState;
+  }
+}

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

@@ -283,7 +283,7 @@ export class DemoIntegrationCard extends LitElement {
               .deviceRegistryEntries=${createDeviceRegistryEntries(
                 info.items[0]
               )}
-              ?disabled=${info.disabled}
+              ?entryDisabled=${info.disabled}
               .selectedConfigEntryId=${info.highlight}
             ></ha-integration-card>
           `

hassio/src/addon-store/hassio-addon-repository.ts

@@ -29,7 +29,9 @@ class HassioAddonRepositoryEl extends LitElement {
     if (filter) {
       return filterAndSort(addons, filter);
     }
-    return addons.sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
+    return addons.sort((a, b) =>
+      caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)
+    );
   });
 
   protected render(): TemplateResult {

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -404,6 +404,7 @@ class HassioAddonInfo extends LitElement {
                 ? html`
                     <img
                       class="logo"
+                      alt=""
                       src="/api/hassio/addons/${this.addon.slug}/logo"
                     />
                   `

hassio/src/components/supervisor-formfield-label.ts

@@ -15,7 +15,7 @@ class SupervisorFormfieldLabel extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.imageUrl
-        ? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
+        ? html`<img loading="lazy" alt="" src=${this.imageUrl} class="icon" />`
         : this.iconPath
         ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
         : ""}

hassio/src/dashboard/hassio-addons.ts

@@ -35,7 +35,13 @@ class HassioAddons extends LitElement {
                 </ha-card>
               `
             : this.supervisor.addon.addons
-                .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
+                .sort((a, b) =>
+                  caseInsensitiveStringCompare(
+                    a.name,
+                    b.name,
+                    this.hass.locale.language
+                  )
+                )
                 .map(
                   (addon) => html`
                     <ha-card

hassio/src/dashboard/hassio-dashboard.ts

@@ -28,6 +28,7 @@ class HassioDashboard extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        back-path="/config"
         .header=${this.supervisor.localize("panel.addons")}
       >
         <hassio-addons

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -15,7 +15,12 @@ import { HomeAssistant } from "../../../../src/types";
 import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
 
 const _filterDevices = memoizeOne(
-  (showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
+  (
+    showAdvanced: boolean,
+    hardware: HassioHardwareInfo,
+    filter: string,
+    language: string
+  ) =>
     hardware.devices
       .filter(
         (device) =>
@@ -28,7 +33,7 @@ const _filterDevices = memoizeOne(
               .toLocaleLowerCase()
               .includes(filter))
       )
-      .sort((a, b) => stringCompare(a.name, b.name))
+      .sort((a, b) => stringCompare(a.name, b.name, language))
 );
 
 @customElement("dialog-hassio-hardware")
@@ -56,7 +61,8 @@ class HassioHardwareDialog extends LitElement {
     const devices = _filterDevices(
       this.hass.userData?.showAdvanced || false,
       this._dialogParams.hardware,
-      (this._filter || "").toLowerCase()
+      (this._filter || "").toLowerCase(),
+      this.hass.locale.language
     );
 
     return html`

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -68,7 +68,9 @@ class HassioRepositoriesDialog extends LitElement {
           repo.slug !== "a0d7b954" && // Home Assistant Community Add-ons
           repo.slug !== "5c53de3b" // The ESPHome repository
       )
-      .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
+      .sort((a, b) =>
+        caseInsensitiveStringCompare(a.name, b.name, this.hass.locale.language)
+      )
   );
 
   private _filteredUsedRepositories = memoizeOne(

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -59,7 +59,11 @@ class HassioIngressView extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const iframe = html`<iframe src=${this._addon.ingress_url!}></iframe>`;
+    const iframe = html`<iframe
+      title=${this._addon.name}
+      src=${this._addon.ingress_url!}
+    >
+    </iframe>`;
 
     if (!this.ingressPanel) {
       return html`<hass-subpage

lint-staged.config.js

@@ -1,11 +1,9 @@
 module.exports = {
-  "*.{js,ts}": [
+  "*.{js,ts}": ["prettier --write", "eslint --fix"],
-    "prettier --write",
-    'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
-  ],
   "!(/translations)*.{json,css,md,html}": "prettier --write",
   "translations/*/*.json": (files) =>
-    'printf "%s\n" "These files should not be modified.  Instead, make the necessary modifications in src/translations/en.json.  Please see translations/README.md for details." ' +
+    'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
     files.join(" ") +
     " >&2 && exit 1",
+  "/yarn.lock": () => "yarn dedupe",
 };

package.json

@@ -24,22 +24,17 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.2",
+    "@braintree/sanitize-url": "^6.0.0",
-    "@codemirror/autocomplete": "^0.19.12",
+    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^0.19.8",
+    "@codemirror/commands": "^6.1.3",
-    "@codemirror/gutter": "^0.19.9",
+    "@codemirror/language": "^6.4.0",
-    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/legacy-modes": "^6.3.1",
-    "@codemirror/history": "^0.19.2",
+    "@codemirror/search": "^6.2.3",
-    "@codemirror/legacy-modes": "^0.19.0",
+    "@codemirror/state": "^6.2.0",
-    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/view": "^6.7.1",
-    "@codemirror/search": "^0.19.6",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/stream-parser": "^0.19.5",
-    "@codemirror/text": "^0.19.6",
-    "@codemirror/view": "^0.19.40",
     "@formatjs/intl-datetimeformat": "^4.2.5",
-    "@formatjs/intl-getcanonicallocales": "^1.8.0",
+    "@formatjs/intl-getcanonicallocales": "^2.0.5",
-    "@formatjs/intl-locale": "^2.4.40",
+    "@formatjs/intl-locale": "^3.0.11",
     "@formatjs/intl-numberformat": "^7.2.5",
     "@formatjs/intl-pluralrules": "^4.1.5",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
@@ -49,34 +44,35 @@
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
     "@fullcalendar/timegrid": "5.9.0",
-    "@lit-labs/motion": "^1.0.2",
+    "@lezer/highlight": "^1.1.3",
-    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
+    "@lit-labs/motion": "^1.0.3",
-    "@material/chips": "14.0.0-canary.261f2db59.0",
+    "@lit-labs/virtualizer": "^1.0.1",
-    "@material/data-table": "14.0.0-canary.261f2db59.0",
+    "@material/chips": "=14.0.0-canary.53b3cad2f.0",
-    "@material/mwc-button": "0.25.3",
+    "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
-    "@material/mwc-checkbox": "0.25.3",
+    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-circular-progress": "0.25.3",
+    "@material/mwc-checkbox": "^0.27.0",
-    "@material/mwc-dialog": "0.25.3",
+    "@material/mwc-circular-progress": "^0.27.0",
-    "@material/mwc-drawer": "^0.25.3",
+    "@material/mwc-dialog": "^0.27.0",
-    "@material/mwc-fab": "0.25.3",
+    "@material/mwc-drawer": "^0.27.0",
-    "@material/mwc-formfield": "0.25.3",
+    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
+    "@material/mwc-formfield": "^0.27.0",
-    "@material/mwc-linear-progress": "0.25.3",
+    "@material/mwc-icon-button": "^0.27.0",
-    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-linear-progress": "^0.27.0",
-    "@material/mwc-menu": "0.25.3",
+    "@material/mwc-list": "^0.27.0",
-    "@material/mwc-radio": "0.25.3",
+    "@material/mwc-menu": "^0.27.0",
-    "@material/mwc-ripple": "0.25.3",
+    "@material/mwc-radio": "^0.27.0",
-    "@material/mwc-select": "0.25.3",
+    "@material/mwc-ripple": "^0.27.0",
-    "@material/mwc-slider": "0.25.3",
+    "@material/mwc-select": "^0.27.0",
-    "@material/mwc-switch": "0.25.3",
+    "@material/mwc-slider": "^0.27.0",
-    "@material/mwc-tab": "0.25.3",
+    "@material/mwc-switch": "^0.27.0",
-    "@material/mwc-tab-bar": "0.25.3",
+    "@material/mwc-tab": "^0.27.0",
-    "@material/mwc-textarea": "^0.25.3",
+    "@material/mwc-tab-bar": "^0.27.0",
-    "@material/mwc-textfield": "0.25.3",
+    "@material/mwc-textarea": "^0.27.0",
-    "@material/mwc-top-app-bar-fixed": "^0.25.3",
+    "@material/mwc-textfield": "^0.27.0",
-    "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
+    "@material/mwc-top-app-bar-fixed": "^0.27.0",
-    "@mdi/js": "7.0.96",
+    "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@mdi/svg": "7.0.96",
+    "@mdi/js": "7.1.96",
+    "@mdi/svg": "7.1.96",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -91,46 +87,48 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
-    "@thomasloven/round-slider": "0.5.4",
+    "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "^23.2.0",
+    "@vaadin/combo-box": "^23.3.5",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.3.5",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
-    "@vue/web-component-wrapper": "^1.2.0",
+    "@vue/web-component-wrapper": "^1.3.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "app-datepicker": "^5.0.1",
+    "app-datepicker": "^5.1.0",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
-    "cropperjs": "^1.5.12",
+    "cropperjs": "^1.5.13",
-    "date-fns": "^2.23.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^1.3.7",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
-    "fuse.js": "^6.0.0",
+    "fuse.js": "^6.6.2",
     "google-timezones-json": "^1.0.2",
     "hammerjs": "^2.0.8",
-    "hls.js": "^1.2.3",
+    "hls.js": "^1.3.1",
-    "home-assistant-js-websocket": "^8.0.0",
+    "home-assistant-js-websocket": "^8.0.1",
     "idb-keyval": "^5.1.3",
-    "intl-messageformat": "^9.9.1",
+    "intl-messageformat": "^10.2.5",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.1.2",
+    "lit": "^2.6.1",
     "marked": "^4.0.12",
-    "memoize-one": "^5.2.1",
+    "memoize-one": "^6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
-    "punycode": "^2.1.1",
+    "punycode": "^2.3.0",
     "qr-scanner": "^1.3.0",
-    "qrcode": "^1.4.4",
+    "qrcode": "^1.5.1",
-    "regenerator-runtime": "^0.13.8",
+    "regenerator-runtime": "^0.13.11",
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
+    "rrule": "^2.7.1",
     "sortablejs": "^1.14.0",
-    "superstruct": "^0.15.2",
+    "superstruct": "^1.0.3",
     "tinykeys": "^1.1.3",
     "tsparticles": "^1.34.0",
     "unfetch": "^4.1.0",
@@ -139,28 +137,30 @@
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "weekstart": "^1.1.0",
-    "workbox-cacheable-response": "^6.4.2",
+    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.4.2",
+    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.4.2",
+    "workbox-expiration": "^6.5.4",
-    "workbox-precaching": "^6.4.2",
+    "workbox-precaching": "^6.5.4",
-    "workbox-routing": "^6.4.2",
+    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.4.2",
+    "workbox-strategies": "^6.5.4",
-    "xss": "^1.0.9"
+    "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.20.2",
-    "@babel/plugin-external-helpers": "^7.14.5",
+    "@babel/plugin-external-helpers": "^7.18.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.15.4",
+    "@babel/plugin-proposal-decorators": "^7.20.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.15.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@koa/cors": "^3.1.0",
+    "@octokit/auth-oauth-device": "^4.0.2",
+    "@octokit/rest": "^19.0.7",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -169,91 +169,89 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/glob": "^7",
+    "@types/glob": "^8",
     "@types/hammerjs": "^2.0.41",
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
     "@types/marked": "^4",
     "@types/mocha": "^8",
-    "@types/qrcode": "^1.4.2",
+    "@types/qrcode": "^1.5.0",
     "@types/sortablejs": "^1",
+    "@types/tar": "^6",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.0",
     "chai": "^4.3.4",
-    "del": "^4.0.0",
+    "del": "^7.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-airbnb-typescript": "^14.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-unused-imports": "^1.1.5",
-    "eslint-plugin-wc": "^1.3.2",
+    "eslint-plugin-wc": "^1.4.0",
-    "fancy-log": "^1.3.3",
+    "fancy-log": "^2.0.0",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "^11.1.0",
-    "glob": "^7.2.0",
+    "glob": "^8.1.0",
     "gulp": "^4.0.2",
     "gulp-flatmap": "^1.0.2",
     "gulp-json-transform": "^0.4.6",
-    "gulp-merge-json": "^1.3.1",
+    "gulp-merge-json": "^2.1.2",
     "gulp-rename": "^2.0.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "instant-mocha": "^1.3.1",
-    "lint-staged": "^13.0.3",
+    "jszip": "^3.10.1",
+    "lint-staged": "^13.1.0",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
     "mocha": "^8.4.0",
-    "object-hash": "^2.0.3",
+    "object-hash": "^3.0.0",
-    "open": "^7.0.4",
+    "open": "^8.4.0",
     "pinst": "^3.0.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.8.3",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-visualizer": "^4.0.4",
+    "rollup-plugin-visualizer": "^5.9.0",
     "serve": "^11.3.2",
-    "sinon": "^11.0.0",
+    "sinon": "^15.0.1",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
+    "tar": "^6.1.11",
     "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "typescript": "^4.4.3",
+    "typescript": "^4.9.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0",
+    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.3.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-manifest-plugin": "^4.0.2",
-    "webpackbar": "^5.0.0-3",
+    "webpackbar": "^5.0.2",
-    "workbox-build": "^6.4.2"
+    "workbox-build": "^6.5.4"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
-    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "@webcomponents/webcomponentsjs": "^2.2.10"
-    "lit": "^2.1.2",
-    "lit-html": "2.1.2",
-    "lit-element": "3.1.2",
-    "@lit/reactive-element": "1.2.1"
   },
   "main": "src/home-assistant.js",
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"
   },
-  "packageManager": "yarn@3.2.3"
+  "packageManager": "yarn@3.3.1"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20221027.0"
+version      = "20230128.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

script/bootstrap

@@ -7,4 +7,4 @@ set -e
 cd "$(dirname "$0")/.."
 
 # Install node modules
-yarn install
+yarn install

script/setup_translations

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Setup translation fetching during development
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+./node_modules/.bin/gulp setup-and-fetch-nightly-translations

src/auth/ha-password-manager-polyfill.ts

@@ -92,6 +92,7 @@ export class HaPasswordManagerPolyfill extends LitElement {
       <input
         tabindex="-1"
         .id=${schema.name}
+        .name=${schema.name}
         .type=${inputType}
         .value=${this.stepData[schema.name] || ""}
         .autocomplete=${schema.autocomplete}

src/cast/receiver_messages.ts

@@ -8,6 +8,8 @@ import { BaseCastMessage } from "./types";
 
 export interface GetStatusMessage extends BaseCastMessage {
   type: "get_status";
+  hassUrl?: string;
+  hassUUID?: string;
 }
 
 export interface ConnectMessage extends BaseCastMessage {
@@ -15,12 +17,15 @@ export interface ConnectMessage extends BaseCastMessage {
   refreshToken: string;
   clientId: string | null;
   hassUrl: string;
+  hassUUID?: string;
 }
 
 export interface ShowLovelaceViewMessage extends BaseCastMessage {
   type: "show_lovelace_view";
   viewPath: string | number | null;
   urlPath: string | null;
+  hassUrl: string;
+  hassUUID?: string;
 }
 
 export interface ShowDemoMessage extends BaseCastMessage {
@@ -43,6 +48,7 @@ export const castSendAuth = (cast: CastManager, auth: Auth) =>
 
 export const castSendShowLovelaceView = (
   cast: CastManager,
+  hassUrl: string,
   viewPath: ShowLovelaceViewMessage["viewPath"],
   urlPath?: string | null
 ) =>
@@ -50,6 +56,7 @@ export const castSendShowLovelaceView = (
     type: "show_lovelace_view",
     viewPath,
     urlPath: urlPath || null,
+    hassUrl: CAST_DEV ? CAST_DEV_HASS_URL : hassUrl,
   });
 
 export const castSendShowDemo = (cast: CastManager) =>

src/cast/sender_messages.ts

@@ -7,6 +7,7 @@ export interface ReceiverStatusMessage extends BaseCastMessage {
   connected: boolean;
   showDemo: boolean;
   hassUrl?: string;
+  hassUUID?: string;
   lovelacePath?: string | number | null;
   urlPath?: string | null;
 }
@@ -23,6 +24,7 @@ export const enum ReceiverErrorCode {
   CONNECTION_LOST = 3,
   HASS_URL_MISSING = 4,
   NO_HTTPS = 5,
+  WRONG_INSTANCE = 20,
   NOT_CONNECTED = 21,
   FETCH_CONFIG_FAILED = 22,
 }

src/common/array/literal-includes.ts

@@ -0,0 +1,5 @@
+// Creates a type predicate function for determining if an array literal includes a given value
+export const arrayLiteralIncludes =
+  <T extends readonly unknown[]>(array: T) =>
+  (searchElement: unknown, fromIndex?: number): searchElement is T[number] =>
+    array.includes(searchElement as T[number], fromIndex);

src/common/color/compute-color.ts

@@ -1,5 +1,3 @@
-import { hex2rgb } from "./convert-color";
-
 export const THEME_COLORS = new Set([
   "primary",
   "accent",
@@ -21,22 +19,17 @@ export const THEME_COLORS = new Set([
   "orange",
   "deep-orange",
   "brown",
+  "light-grey",
   "grey",
+  "dark-grey",
   "blue-grey",
   "black",
   "white",
 ]);
 
-export function computeRgbColor(color: string): string {
+export function computeCssColor(color: string): string {
   if (THEME_COLORS.has(color)) {
-    return `var(--rgb-${color}-color)`;
+    return `var(--${color}-color)`;
-  }
-  if (color.startsWith("#")) {
-    try {
-      return hex2rgb(color).join(", ");
-    } catch (err) {
-      return "";
-    }
   }
   return color;
 }

src/common/const.ts

@@ -21,6 +21,8 @@ import {
   mdiCommentAlert,
   mdiCounter,
   mdiCurrentAc,
+  mdiDatabase,
+  mdiEarHearing,
   mdiEye,
   mdiFan,
   mdiFlash,
@@ -52,14 +54,18 @@ import {
   mdiScriptText,
   mdiSineWave,
   mdiSpeedometer,
+  mdiSunWireless,
   mdiThermometer,
+  mdiThermometerLines,
   mdiThermostat,
   mdiTimerOutline,
+  mdiTransmissionTower,
   mdiVideo,
   mdiWater,
   mdiWaterPercent,
   mdiWeatherCloudy,
   mdiWeatherPouring,
+  mdiWeatherRainy,
   mdiWeatherWindy,
   mdiWeight,
   mdiWhiteBalanceSunny,
@@ -113,6 +119,7 @@ export const FIXED_DOMAIN_ICONS = {
   siren: mdiBullhorn,
   simple_alarm: mdiBell,
   sun: mdiWhiteBalanceSunny,
+  text: mdiFormTextbox,
   timer: mdiTimerOutline,
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
@@ -124,10 +131,13 @@ export const FIXED_DOMAIN_ICONS = {
 export const FIXED_DEVICE_CLASS_ICONS = {
   apparent_power: mdiFlash,
   aqi: mdiAirFilter,
+  atmospheric_pressure: mdiThermometerLines,
   // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
   carbon_dioxide: mdiMoleculeCo2,
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
+  data_rate: mdiTransmissionTower,
+  data_size: mdiDatabase,
   date: mdiCalendar,
   distance: mdiArrowLeftRight,
   duration: mdiProgressClock,
@@ -136,6 +146,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   gas: mdiMeterGas,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
+  irradiance: mdiSunWireless,
   moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
@@ -147,10 +158,12 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pm25: mdiMolecule,
   power: mdiFlash,
   power_factor: mdiAngleAcute,
+  precipitation: mdiWeatherRainy,
   precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
   signal_strength: mdiWifi,
+  sound_pressure: mdiEarHearing,
   speed: mdiSpeedometer,
   sulphur_dioxide: mdiMolecule,
   temperature: mdiThermometer,
@@ -180,10 +193,20 @@ export const DOMAINS_WITH_CARD = [
   "script",
   "select",
   "timer",
+  "text",
   "vacuum",
   "water_heater",
 ];
 
+export const SENSOR_ENTITIES = [
+  "sensor",
+  "binary_sensor",
+  "calendar",
+  "camera",
+  "device_tracker",
+  "weather",
+];
+
 /** Domains that render an input element instead of a text value when displayed in a row.
  *  Those rows should then not show a cursor pointer when hovered (which would normally
  *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
@@ -212,6 +235,7 @@ export const DOMAINS_INPUT_ROW = [
   "script",
   "select",
   "switch",
+  "text",
   "vacuum",
 ];