Fix Z-Wave JS Node Config Panel handling null values (#8710)

* attempt fix for null values

* cleanup

.devcontainer/Dockerfile

@@ -0,0 +1,13 @@
+# 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

@@ -0,0 +1,34 @@
+{
+  "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"
+  ],
+  "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/ISSUE_TEMPLATE.md

@@ -74,12 +74,12 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 
 ```
 
-## Problem-relevant configuration
+## Problem-relevant frontend configuration
 
 <!--
-  An example configuration that caused the problem for you. Fill this out even
-  if it seems unimportant to you. Please be sure to remove personal information
-  like passwords, private URLs and other credentials.
+  An example configuration that caused the problem for you, e.g. the YAML configuration
+  of the used cards. Fill this out even if it seems unimportant to you. Please be sure
+  to remove personal information like passwords, private URLs and other credentials.
 -->
 
 ```yaml
@@ -89,7 +89,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ## Javascript errors shown in your browser console/inspector
 
 <!--
-  If you come across any javascript or other error logs, e.g., in your browser
+  If you come across any Javascript or other error logs, e.g. in your browser
   console/inspector please provide them.
 -->
 

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,138 @@
+name: Report a bug with the UI, Frontend or Lovelace
+about: Report an issue related to the Home Assistant frontend.
+labels: bug
+title: ""
+issue_body: true
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
+
+        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
+
+        **Please not not report issues for custom Lovelace cards.**
+
+        [fr]: https://github.com/home-assistant/frontend/discussions
+        [releases]: https://github.com/home-assistant/home-assistant/releases
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Please verify that you've followed these steps
+      options:
+        - label: I have updated to the latest available Home Assistant version.
+          required: true
+        - label: I have cleared the cache of my browser.
+          required: true
+        - label: I have tried a different browser to see if it is related to my browser.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## The problem
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the issue you are experiencing
+      description: Provide a clear and concise description of what the bug is.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the behavior you expected
+      description: Describe what you expected to happen or it should look/behave.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Steps to reproduce the issue
+      description: |
+        Please tell us exactly how to reproduce your issue.
+        Provide clear and concise step by step instructions and add code snippets if needed.
+      value: |
+        1.
+        2.
+        3.
+        ...
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment
+  - type: input
+    validations:
+      required: true
+    attributes:
+      label: What version of Home Assistant Core has the issue?
+      placeholder: core-
+      description: >
+        Can be found in the Configuration panel -> Info.
+  - type: input
+    attributes:
+      label: What was the last working version of Home Assistant Core?
+      placeholder: core-
+      description: >
+        If known, otherwise leave blank.
+  - type: input
+    attributes:
+      label: In which browser are you experiencing the issue with?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
+  - type: input
+    attributes:
+      label: Which operating system are you using to run this browser?
+      placeholder: macOS Big Sur (1.11)
+      description: >
+        Don't forget to add the version!
+  - type: markdown
+    attributes:
+      value: |
+        # Details
+
+  - type: textarea
+    attributes:
+      label: State of relevant entities
+      description: >
+        If your issue is about how an entity is shown in the UI, please add the
+        state and attributes for all situations. You can find this information
+        at Developer Tools -> States.
+      value: |
+        ```yaml
+        # Paste your state here.
+
+        ```
+  - type: textarea
+    attributes:
+      label: Problem-relevant frontend configuration
+      description: >
+        An example configuration that caused the problem for you, e.g., the YAML
+        configuration of the used cards. Fill this out even if it seems
+        unimportant to you. Please be sure to remove personal information like
+        passwords, private URLs and other credentials.
+      value: |
+        ```yaml
+        # Paste your YAML here.
+
+        ```
+  - type: textarea
+    attributes:
+      label: Javascript errors shown in your browser console/inspector
+      description: >
+        If you come across any Javascript or other error logs, e.g., in your
+        browser console/inspector please provide them.
+      value: |
+        ```txt
+        # Paste your logs here.
+
+        ```
+  - type: markdown
+    attributes:
+      value: |
+        ## Additional information
+  - type: markdown
+    attributes:
+      value: |
+        If you have any additional information for us, use the field below.
+        Please note, you can attach screenshots or screen recordings here,
+        by dragging and dropping files in the field below.

.github/workflows/netflify.yml

@@ -0,0 +1,19 @@
+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 Gallery build
+        run: curl -X POST -d {} https://api.netlify.com/build_hooks/${{ secrets.NETLIFY_GALLERY_DEV_BUILD_HOOK }}

.github/workflows/release.yaml

@@ -0,0 +1,81 @@
+name: Release
+
+on:
+  release:
+    types:
+      - published
+
+env:
+  WHEELS_TAG: 3.7-alpine3.11
+  PYTHON_VERSION: 3.7
+  NODE_VERSION: 12.1
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Verify version
+        uses: home-assistant/actions/helpers/verify-version@master
+
+      - name: Set up Python ${{ env.PYTHON_VERSION }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Build and release package
+        run: |
+          python3 -m pip install twine
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
+
+          script/release
+
+  wheels-init:
+    name: Init wheels build
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate requirements.txt
+        run: |
+          # Sleep to give pypi time to populate the new version across mirrors
+          sleep 240
+          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
+          echo "home-assistant-frontend==$version" > ./requirements.txt
+
+      - name: Upload requirements.txt
+        uses: actions/upload-artifact@v2
+        with:
+          name: requirements
+          path: ./requirements.txt
+
+  build-wheels:
+    name: Build wheels for ${{ matrix.arch }}
+    needs: wheels-init
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+    steps:
+      - name: Download requirements.txt
+        uses: actions/download-artifact@v2
+        with:
+          name: requirements
+
+      - name: Build wheels
+        uses: home-assistant/wheels@master
+        with:
+          tag: ${{ env.WHEELS_TAG }}
+          arch: ${{ matrix.arch }}
+          wheels-host: ${{ secrets.WHEELS_HOST }}
+          wheels-key: ${{ secrets.WHEELS_KEY }}
+          wheels-user: wheels
+          requirements: "requirements.txt"

.github/workflows/translations.yaml

@@ -0,0 +1,65 @@
+name: Translations
+
+on:
+  schedule:
+    - cron: "30 0 * * *"
+  push:
+    branches:
+      - dev
+    paths:
+      - src/translations/en.json
+
+env:
+  NODE_VERSION: 12
+
+jobs:
+  upload:
+    name: Upload
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Upload Translations
+        run: |
+          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+
+          ./script/translations_upload_base
+
+  download:
+    name: Download
+    needs: upload
+    if: github.event_name == 'schedule'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Download Translations
+        run: |
+          export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+
+          npm install
+          ./script/translations_download
+
+      - name: Initialize git
+        uses: home-assistant/actions/helpers/git-init@master
+        with:
+          name: GitHub Action
+          email: [email protected]
+
+      - name: Update translation
+        run: |
+          git add translations
+          git commit -am "Translation update"
+          git push

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log
 
 #asdf
 .tool-versions
+
+# Home Assistant config
+/config

.hound.yml

@@ -1,6 +0,0 @@
-jshint:
-  enabled: false
-
-eslint:
-  enabled: true
-  config_file: .eslintrc-hound.json

.vscode/tasks.json

@@ -37,6 +37,37 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Develop Supervisor panel",
+      "type": "gulp",
+      "task": "develop-hassio",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
     {
       "label": "Develop Gallery",
       "type": "gulp",
@@ -133,5 +164,45 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Run HA Core in devcontainer",
+      "type": "shell",
+      "command": "script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Run HA Core for Supervisor in devcontainer",
+      "type": "shell",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    }
+  ],
+  "inputs": [
+    {
+      "id": "supervisorHost",
+      "type": "promptString",
+      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
+    },
+    {
+      "id": "supervisorToken",
+      "type": "promptString",
+      "description": "The token for the Remote API proxy add-on"
+    }
   ]
 }

README.md

@@ -14,7 +14,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
-- Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
+- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)
 
 ## Frontend development
 

azure-pipelines-netlify.yml

@@ -1,30 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger: none
-pr: none
-schedules:
-  - cron: "0 0 * * *"
-    displayName: "build preview"
-    branches:
-      include:
-      - dev
-    always: true
-variables:
-  - group: netlify
-
-jobs:
-
-- job: 'Netlify_preview'
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - script: |
-      # Cast
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_CAST}
-
-      # Demo
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_DEMO}
-
-      # Gallery
-      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_GALLERY}
-    displayName: 'Trigger netlify build preview'

azure-pipelines-release.yml

@@ -1,59 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger:
-  batch: true
-  tags:
-    include:
-      - "*"
-pr: none
-variables:
-  - name: versionWheels
-    value: '1.10.1-3.7-alpine3.11'
-  - name: versionNode
-    value: '12.1'
-  - group: twine
-resources:
-  repositories:
-    - repository: azure
-      type: github
-      name: 'home-assistant/ci-azure'
-      endpoint: 'home-assistant'
-
-
-stages:
-  - stage: "Validate"
-    jobs:
-    - template: templates/azp-job-version.yaml@azure
-
-  - stage: "Build"
-    jobs:
-      - job: "ReleasePython"
-        pool:
-          vmImage: "ubuntu-latest"
-        steps:
-          - task: UsePythonVersion@0
-            displayName: "Use Python 3.7"
-            inputs:
-              versionSpec: "3.7"
-          - task: NodeTool@0
-            displayName: "Use Node $(versionNode)"
-            inputs:
-              versionSpec: "$(versionNode)"
-          - script: pip install twine wheel
-            displayName: "Install tools"
-          - script: |
-              export TWINE_USERNAME="$(twineUser)"
-              export TWINE_PASSWORD="$(twinePassword)"
-
-              script/release
-            displayName: "Build and release package"
-  - stage: "Wheels"
-    jobs:
-      - template: templates/azp-job-wheels.yaml@azure
-        parameters:
-          builderVersion: '$(versionWheels)'
-          wheelsRequirement: 'requirement.txt'
-          preBuild:
-          - script: |
-              sleep 240
-              echo "home-assistant-frontend==$(Build.SourceBranchName)" > requirement.txt

azure-pipelines-translation.yml

@@ -1,70 +0,0 @@
-# https://dev.azure.com/home-assistant
-
-trigger:
-  batch: true
-  branches:
-    include:
-    - dev
-  paths:
-    include:
-    - translations/en.json
-pr: none
-schedules:
-  - cron: "30 0 * * *"
-    displayName: "frontend translation update"
-    branches:
-      include:
-      - dev
-    always: true
-variables:
-- group: translation
-resources:
-  repositories:
-  - repository: azure
-    type: github
-    name: 'home-assistant/ci-azure'
-    endpoint: 'home-assistant'
-
-
-jobs:
-
-- job: 'Upload'
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - task: NodeTool@0
-    displayName: 'Use Node 12.x'
-    inputs:
-      versionSpec: '12.x'
-  - script: |
-      export LOKALISE_TOKEN="$(lokaliseToken)"
-      export AZURE_BRANCH="$(Build.SourceBranchName)"
-
-      ./script/translations_upload_base
-    displayName: 'Upload Translation'
-
-- job: 'Download'
-  dependsOn:
-  - 'Upload'
-  condition: or(eq(variables['Build.Reason'], 'Schedule'), eq(variables['Build.Reason'], 'Manual'))
-  pool:
-    vmImage: 'ubuntu-latest'
-  steps:
-  - task: NodeTool@0
-    displayName: 'Use Node 12.x'
-    inputs:
-      versionSpec: '12.x'
-  - template: templates/azp-step-git-init.yaml@azure
-  - script: |
-      export LOKALISE_TOKEN="$(lokaliseToken)"
-      export AZURE_BRANCH="$(Build.SourceBranchName)"
-
-      npm install
-      ./script/translations_download
-    displayName: 'Download Translation'
-  - script: |
-      git checkout dev
-      git add translation
-      git commit -am "[ci skip] Translation update"
-      git push
-    displayName: 'Update translation'

build-scripts/README.md

@@ -0,0 +1,39 @@
+# Bundling Home Assistant Frontend
+
+The Home Assistant build pipeline contains various steps to prepare a build.
+
+- Generating icon files to be included
+- Generating translation files to be included
+- Converting TypeScript, CSS and JSON files to JavaScript
+- Bundling
+- Minifying the files
+- Generating the HTML entrypoint files
+- Generating the service worker
+- Compressing the files
+
+## Converting files
+
+Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands.
+
+We currently rely on Webpack but also have experimental Rollup support. Both of these programs bundle the converted files in both production and development.
+
+For development, bundling is optional. We just want to get the right files in the browser.
+
+Responsibilities of the converter during development:
+
+- Convert TypeScript to JavaScript
+- Convert CSS to JavaScript that sets the content as the default export
+- Convert JSON to JavaScript that sets the content as the default export
+- Make sure import, dynamic import and web worker references work
+  - Add extensions where missing
+  - Resolve absolute package imports
+- Filter out specific imports/packages
+- Replace constants with values
+
+In production, the following responsibilities are added:
+
+- Minify HTML
+- Bundle multiple imports so that the browser can fetch less files
+- Generate a second version that is ES5 compatible
+
+Configuration for all these steps are specified in [bundle.js](bundle.js).

build-scripts/bundle.js

@@ -44,7 +44,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
 });
 
 module.exports.terserOptions = (latestBuild) => ({
-  safari10: true,
+  safari10: !latestBuild,
   ecma: latestBuild ? undefined : 5,
   output: { comments: false },
 });
@@ -117,7 +117,7 @@ BundleConfig {
 */
 
 module.exports.config = {
-  app({ isProdBuild, latestBuild, isStatsBuild }) {
+  app({ isProdBuild, latestBuild, isStatsBuild, isWDS }) {
     return {
       entry: {
         service_worker: "./src/entrypoints/service_worker.ts",
@@ -132,6 +132,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isWDS,
     };
   },
 

build-scripts/env.js

@@ -6,6 +6,9 @@ module.exports = {
   useRollup() {
     return process.env.ROLLUP === "1";
   },
+  useWDS() {
+    return process.env.WDS === "1";
+  },
   isProdBuild() {
     return (
       process.env.NODE_ENV === "production" || module.exports.isStatsBuild()

build-scripts/gulp/app.js

@@ -12,6 +12,7 @@ require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
+require("./wds.js");
 
 gulp.task(
   "develop-app",
@@ -28,7 +29,11 @@ gulp.task(
       "build-translations"
     ),
     "copy-static-app",
-    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
+    env.useWDS()
+      ? "wds-watch-app"
+      : env.useRollup()
+      ? "rollup-watch-app"
+      : "webpack-watch-app"
   )
 );
 

build-scripts/gulp/entry-html.js

@@ -19,6 +19,7 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   return compiled({
     ...data,
     useRollup: env.useRollup(),
+    useWDS: env.useWDS(),
     renderTemplate,
   });
 };
@@ -90,10 +91,23 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
+  let latestAppJS, latestCoreJS, latestCustomPanelJS;
+
+  if (env.useWDS()) {
+    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+    latestCustomPanelJS =
+      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+  } else {
+    latestAppJS = "/frontend_latest/app.js";
+    latestCoreJS = "/frontend_latest/core.js";
+    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+  }
+
   const content = renderTemplate("index", {
-    latestAppJS: "/frontend_latest/app.js",
-    latestCoreJS: "/frontend_latest/core.js",
-    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestAppJS,
+    latestCoreJS,
+    latestCustomPanelJS,
 
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",

build-scripts/gulp/gather-static.js

@@ -85,6 +85,11 @@ gulp.task("copy-translations-app", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files

build-scripts/gulp/hassio.js

@@ -10,6 +10,8 @@ require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
+require("./gather-static.js");
+require("./translations.js");
 
 gulp.task(
   "develop-hassio",
@@ -20,6 +22,8 @@ gulp.task(
     "clean-hassio",
     "gen-icons-json",
     "gen-index-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -32,6 +36,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/translations.js

@@ -33,21 +33,10 @@ String.prototype.rsplit = function (sep, maxsplit) {
     : split;
 };
 
-// Panel translations which should be split from the core translations. These
-// should mirror the fragment definitions in polymer.json, so that we load
-// additional resources at equivalent points.
-const TRANSLATION_FRAGMENTS = [
-  "config",
-  "history",
-  "logbook",
-  "mailbox",
-  "profile",
-  "shopping-list",
-  "page-authorize",
-  "page-demo",
-  "page-onboarding",
-  "developer-tools",
-];
+// Panel translations which should be split from the core translations.
+const TRANSLATION_FRAGMENTS = Object.keys(
+  require("../../src/translations/en.json").ui.panel
+);
 
 function recursiveFlatten(prefix, data) {
   let output = {};
@@ -277,6 +266,7 @@ gulp.task(taskName, function () {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
+        delete data.supervisor;
         return data;
       })
     )
@@ -353,6 +343,62 @@ gulp.task(
   }
 );
 
+gulp.task("build-translation-fragment-supervisor", function () {
+  return gulp
+    .src(fullDir + "/*.json")
+    .pipe(transform((data) => data.supervisor))
+    .pipe(gulp.dest(workDir + "/supervisor"));
+});
+
+gulp.task("build-translation-flatten-supervisor", function () {
+  return gulp
+    .src(workDir + "/supervisor/*.json")
+    .pipe(
+      transform(function (data) {
+        // Polymer.AppLocalizeBehavior requires flattened json
+        return flatten(data);
+      })
+    )
+    .pipe(gulp.dest(outDir));
+});
+
+gulp.task("build-translation-write-metadata", function writeMetadata() {
+  return gulp
+    .src(
+      [
+        path.join(paths.translations_src, "translationMetadata.json"),
+        workDir + "/testMetadata.json",
+        workDir + "/translationFingerprints.json",
+      ],
+      { allowEmpty: true }
+    )
+    .pipe(merge({}))
+    .pipe(
+      transform(function (data) {
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          // Filter out translations without native name.
+          if (value.nativeName) {
+            newData[key] = value;
+          } else {
+            console.warn(
+              `Skipping language ${key}. Native name was not translated.`
+            );
+          }
+        });
+        return newData;
+      })
+    )
+    .pipe(
+      transform((data) => ({
+        fragments: TRANSLATION_FRAGMENTS,
+        translations: data,
+      }))
+    )
+    .pipe(rename("translationMetadata.json"))
+    .pipe(gulp.dest(workDir));
+});
+
 gulp.task(
   "build-translations",
   gulp.series(
@@ -364,42 +410,20 @@ gulp.task(
     gulp.parallel(...splitTasks),
     "build-flattened-translations",
     "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .pipe(
-          transform(function (data) {
-            const newData = {};
-            Object.entries(data).forEach(([key, value]) => {
-              // Filter out translations without native name.
-              if (data[key].nativeName) {
-                newData[key] = data[key];
-              } else {
-                console.warn(
-                  `Skipping language ${key}. Native name was not translated.`
-                );
-              }
-              if (data[key]) newData[key] = value;
-            });
-            return newData;
-          })
-        )
-        .pipe(
-          transform((data) => ({
-            fragments: TRANSLATION_FRAGMENTS,
-            translations: data,
-          }))
-        )
-        .pipe(rename("translationMetadata.json"))
-        .pipe(gulp.dest(workDir));
-    }
+    "build-translation-write-metadata"
+  )
+);
+
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(
+    "clean-translations",
+    "ensure-translations-build-dir",
+    "build-master-translation",
+    "build-merged-translations",
+    "build-translation-fragment-supervisor",
+    "build-translation-flatten-supervisor",
+    "build-translation-fingerprints",
+    "build-translation-write-metadata"
   )
 );

build-scripts/gulp/wds.js

@@ -0,0 +1,11 @@
+// Tasks to run Rollup
+const gulp = require("gulp");
+const { startDevServer } = require("@web/dev-server");
+
+gulp.task("wds-watch-app", () => {
+  startDevServer({
+    config: {
+      watch: true,
+    },
+  });
+});

build-scripts/gulp/webpack.js

@@ -47,7 +47,7 @@ const runDevServer = ({
     );
   });
 
-const handler = (done) => (err, stats) => {
+const doneHandler = (done) => (err, stats) => {
   if (err) {
     log.error(err.stack || err);
     if (err.details) {
@@ -67,11 +67,20 @@ const handler = (done) => (err, stats) => {
   }
 };
 
+const prodBuild = (conf) =>
+  new Promise((resolve) => {
+    webpack(
+      conf,
+      // Resolve promise when done. Because we pass a callback, webpack closes itself
+      doneHandler(resolve)
+    );
+  });
+
 gulp.task("webpack-watch-app", () => {
-  // we are not calling done, so this command will run forever
+  // This command will run forever because we don't close compiler
   webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
     { ignored: /build-translations/ },
-    handler()
+    doneHandler()
   );
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
@@ -79,15 +88,12 @@ gulp.task("webpack-watch-app", () => {
   );
 });
 
-gulp.task(
-  "webpack-prod-app",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createAppConfig, { isProdBuild: true }),
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-app", () =>
+  prodBuild(
+    bothBuilds(createAppConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
 gulp.task("webpack-dev-server-demo", () => {
@@ -98,17 +104,12 @@ gulp.task("webpack-dev-server-demo", () => {
   });
 });
 
-gulp.task(
-  "webpack-prod-demo",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createDemoConfig, {
-          isProdBuild: true,
-        }),
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-demo", () =>
+  prodBuild(
+    bothBuilds(createDemoConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
 gulp.task("webpack-dev-server-cast", () => {
@@ -121,41 +122,35 @@ gulp.task("webpack-dev-server-cast", () => {
   });
 });
 
-gulp.task(
-  "webpack-prod-cast",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createCastConfig, {
-          isProdBuild: true,
-        }),
-
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-cast", () =>
+  prodBuild(
+    bothBuilds(createCastConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
 gulp.task("webpack-watch-hassio", () => {
-  // we are not calling done, so this command will run forever
+  // This command will run forever because we don't close compiler
   webpack(
     createHassioConfig({
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({}, handler());
+  ).watch({ ignored: /build-translations/ }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
 });
 
-gulp.task(
-  "webpack-prod-hassio",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        bothBuilds(createHassioConfig, {
-          isProdBuild: true,
-        }),
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-hassio", () =>
+  prodBuild(
+    bothBuilds(createHassioConfig, {
+      isProdBuild: true,
+    })
+  )
 );
 
 gulp.task("webpack-dev-server-gallery", () => {
@@ -167,17 +162,11 @@ gulp.task("webpack-dev-server-gallery", () => {
   });
 });
 
-gulp.task(
-  "webpack-prod-gallery",
-  () =>
-    new Promise((resolve) =>
-      webpack(
-        createGalleryConfig({
-          isProdBuild: true,
-          latestBuild: true,
-        }),
-
-        handler(resolve)
-      )
-    )
+gulp.task("webpack-prod-gallery", () =>
+  prodBuild(
+    createGalleryConfig({
+      isProdBuild: true,
+      latestBuild: true,
+    })
+  )
 );

build-scripts/paths.js

@@ -34,6 +34,7 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
   hassio_output_latest: path.resolve(
     __dirname,
     "../hassio/build/frontend_latest"

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

@@ -1,5 +1,3 @@
-const path = require("path");
-
 module.exports = function (userOptions = {}) {
   // Files need to be absolute paths.
   // This only works if the file has no exports

build-scripts/rollup.js

@@ -3,7 +3,7 @@ const path = require("path");
 const commonjs = require("@rollup/plugin-commonjs");
 const resolve = require("@rollup/plugin-node-resolve");
 const json = require("@rollup/plugin-json");
-const babel = require("rollup-plugin-babel");
+const babel = require("@rollup/plugin-babel").babel;
 const replace = require("@rollup/plugin-replace");
 const visualizer = require("rollup-plugin-visualizer");
 const { string } = require("rollup-plugin-string");
@@ -31,6 +31,7 @@ const createRollupConfig = ({
   isStatsBuild,
   publicPath,
   dontHash,
+  isWDS,
 }) => {
   return {
     /**
@@ -61,6 +62,7 @@ const createRollupConfig = ({
           ...bundle.babelOptions({ latestBuild }),
           extensions,
           exclude: bundle.babelExclude(),
+          babelHelpers: isWDS ? "inline" : "bundled",
         }),
         string({
           // Import certain extensions as strings
@@ -69,19 +71,21 @@ const createRollupConfig = ({
         replace(
           bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
         ),
-        manifest({
-          publicPath,
-        }),
-        worker(),
-        dontHashPlugin({ dontHash }),
-        isProdBuild && terser(bundle.terserOptions(latestBuild)),
-        isStatsBuild &&
+        !isWDS &&
+          manifest({
+            publicPath,
+          }),
+        !isWDS && worker(),
+        !isWDS && dontHashPlugin({ dontHash }),
+        !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
+        !isWDS &&
+          isStatsBuild &&
           visualizer({
             // https://github.com/btd/rollup-plugin-visualizer#options
             open: true,
             sourcemap: true,
           }),
-      ],
+      ].filter(Boolean),
     },
     /**
      * @type { import("rollup").OutputOptions }
@@ -108,12 +112,13 @@ const createRollupConfig = ({
   };
 };
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
   return createRollupConfig(
     bundle.config.app({
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isWDS,
     })
   );
 };

build-scripts/webpack.js

@@ -1,7 +1,7 @@
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const ManifestPlugin = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
 const log = require("fancy-log");
@@ -36,6 +36,7 @@ const createWebpackConfig = ({
   const ignorePackages = bundle.ignorePackages({ latestBuild });
   return {
     mode: isProdBuild ? "production" : "development",
+    target: ["web", latestBuild ? "es2017" : "es5"],
     devtool: isProdBuild
       ? "cheap-module-source-map"
       : "eval-cheap-module-source-map",
@@ -67,7 +68,7 @@ const createWebpackConfig = ({
       ],
     },
     plugins: [
-      new ManifestPlugin({
+      new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
@@ -131,22 +132,6 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
-      environment: {
-        // The environment supports arrow functions ('() => { ... }').
-        arrowFunction: latestBuild,
-        // The environment supports BigInt as literal (123n).
-        bigIntLiteral: false,
-        // The environment supports const and let for variable declarations.
-        const: latestBuild,
-        // The environment supports destructuring ('{ a, b } = obj').
-        destructuring: latestBuild,
-        // The environment supports an async import() function to import EcmaScript modules.
-        dynamicImport: latestBuild,
-        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-        forOf: latestBuild,
-        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-        module: latestBuild,
-      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

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

@@ -48,7 +48,7 @@ class HcCast extends LitElement {
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
+      return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
     const error =

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

@@ -98,8 +98,12 @@ class HcLayout extends LitElement {
         line-height: 32px;
         padding: 24px 16px 16px;
         display: block;
+        margin: 0;
       }
 
+      .hero {
+        border-radius: 4px 4px 0 0;
+      }
       .subtitle {
         font-size: 14px;
         color: var(--secondary-text-color);

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

@@ -1,8 +1,8 @@
 import {
   customElement,
   html,
-  property,
   internalProperty,
+  property,
   TemplateResult,
 } from "lit-element";
 import { mockHistory } from "../../../../demo/src/stubs/history";

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

@@ -94,6 +94,7 @@ class HcLovelace extends LitElement {
     return css`
       :host {
         min-height: 100vh;
+        height: 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;

cast/src/receiver/second-load.ts

@@ -1,4 +1,4 @@
 import "web-animations-js/web-animations-next-lite.min";
-import "../../../src/resources/roboto";
 import "../../../src/resources/ha-style";
+import "../../../src/resources/roboto";
 import "./layout/hc-lovelace";

demo/src/configs/arsaboo/entities.ts

@@ -54,6 +54,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "21",
       attributes: {
         friendly_name: "Living room temperature",
+        device_class: "temperature",
+        unit_of_measurement: "°C",
       },
     },
     "sensor.study_temp_rounded": {
@@ -61,6 +63,8 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "23",
       attributes: {
         friendly_name: "Study temperature",
+        device_class: "temperature",
+        unit_of_measurement: "°C",
       },
     },
     "sensor.living_room": {
@@ -261,7 +265,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       entity_id: "light.kitchen_lights",
       state: "off",
       attributes: {
-        friendly_name: "Kitchen lights",
+        friendly_name: "Kitchen Lights",
         supported_features: 1,
       },
     },
@@ -484,7 +488,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
-        friendly_name: "Garage lights",
+        friendly_name: "Garage Lights",
         supported_features: 55,
       },
     },

demo/src/configs/arsaboo/lovelace.ts

@@ -12,6 +12,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
         {
           type: "entities",
           title: localize("ui.panel.page-demo.config.arsaboo.labels.lights"),
+          state_color: true,
           entities: [
             {
               entity: "light.kitchen_lights",

demo/src/configs/demo-configs.ts

@@ -3,22 +3,10 @@ import { Lovelace } from "../../../src/panels/lovelace/types";
 import { DemoConfig } from "./types";
 
 export const demoConfigs: Array<() => Promise<DemoConfig>> = [
-  () =>
-    import(/* webpackChunkName: "arsaboo" */ "./arsaboo").then(
-      (mod) => mod.demoArsaboo
-    ),
-  () =>
-    import(/* webpackChunkName: "teachingbirds" */ "./teachingbirds").then(
-      (mod) => mod.demoTeachingbirds
-    ),
-  () =>
-    import(/* webpackChunkName: "kernehed" */ "./kernehed").then(
-      (mod) => mod.demoKernehed
-    ),
-  () =>
-    import(/* webpackChunkName: "jimpower" */ "./jimpower").then(
-      (mod) => mod.demoJimpower
-    ),
+  () => import("./arsaboo").then((mod) => mod.demoArsaboo),
+  () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),
+  () => import("./kernehed").then((mod) => mod.demoKernehed),
+  () => import("./jimpower").then((mod) => mod.demoJimpower),
 ];
 
 // eslint-disable-next-line import/no-mutable-exports

demo/src/configs/jimpower/entities.ts

@@ -653,7 +653,7 @@ export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
       entity_id: "binary_sensor.smoke_sensor_158d0001b8ddc7",
       state: "off",
       attributes: {
-        Density: 0,
+        density: 0,
         battery_level: 59,
         friendly_name: "Downstairs Smoke Detector",
         device_class: "smoke",
@@ -663,7 +663,7 @@ export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
       entity_id: "binary_sensor.smoke_sensor_158d0001b8deba",
       state: "off",
       attributes: {
-        Density: 0,
+        density: 0,
         battery_level: 65,
         friendly_name: "Upstairs Smoke Detector",
         device_class: "smoke",

demo/src/configs/jimpower/lovelace.ts

@@ -3,49 +3,7 @@ import { DemoConfig } from "../types";
 
 export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
   name: "Kingia Castle",
-  resources: [
-    // {
-    //   url: "/local/custom_ui/dark-sky-weather-card.js?v=4",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom_ui/mini-media-player-bundle.js?v=0.9.8",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom_ui/tracker-card.js?v=0.1.5",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom_ui/surveillance-card.js?v=0.0.1",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom_ui/mini-graph-card-bundle.js?v=0.1.0",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom_ui/slider-entity-row.js?v=d6da75",
-    //   type: "js",
-    // },
-    // {
-    //   url:
-    //     "/local/custom_ui/compact-custom-header/compact-custom-header.js?v=0.2.7",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom_ui/waze-card.js?v=1.1.1",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom_ui/circle-sensor-card.js?v=1.2.0",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom_ui/monster-card.js?v=0.2.3",
-    //   type: "js",
-    // },
-  ],
+  resources: [],
   views: [
     {
       cards: [
@@ -603,89 +561,6 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
         },
         {
           cards: [
-            // {
-            //   style: {
-            //     "background-image": 'url("/assets/jimpower/cardbackK.png")',
-            //     "background-size": "100% 400px",
-            //     "box-shadow": "3px 3px rgba(0,0,0,0.4)",
-            //     "background-repeat": "no-repeat",
-            //     color: "#999999",
-            //     "border-radius": "20px",
-            //     border: "solid 1px rgba(100,100,100,0.3)",
-            //     "background-color": "rgba(50,50,50,0.3)",
-            //   },
-            //   type: "custom:card-modder",
-            //   card: {
-            //     entity_visibility: "sensor.dark_sky_visibility",
-            //     entity_sun: "sun.sun",
-            //     entity_daily_summary:
-            //       "sensor.bom_gc_forecast_detailed_summary_0",
-            //     entity_temperature: "sensor.bom_temp",
-            //     entity_forecast_high_temp_3:
-            //       "sensor.bom_gc_forecast_max_temp_c_3",
-            //     entity_forecast_high_temp_2:
-            //       "sensor.bom_gc_forecast_max_temp_c_2",
-            //     entity_forecast_high_temp_5:
-            //       "sensor.bom_gc_forecast_max_temp_c_5",
-            //     entity_forecast_high_temp_4:
-            //       "sensor.bom_gc_forecast_max_temp_c_4",
-            //     entity_wind_speed: "sensor.bom_wind_sp",
-            //     entity_forecast_icon_4: "sensor.dark_sky_icon_4",
-            //     entity_forecast_icon_5: "sensor.dark_sky_icon_5",
-            //     entity_forecast_icon_2: "sensor.dark_sky_icon_2",
-            //     entity_forecast_icon_3: "sensor.dark_sky_icon_3",
-            //     entity_forecast_icon_1: "sensor.dark_sky_icon_1",
-            //     entity_forecast_high_temp_1:
-            //       "sensor.bom_gc_forecast_max_temp_c_1",
-            //     entity_wind_bearing: "sensor.bom_wind_bear",
-            //     entity_forecast_low_temp_2:
-            //       "sensor.bom_gc_forecast_min_temp_c_2",
-            //     entity_forecast_low_temp_3:
-            //       "sensor.bom_gc_forecast_min_temp_c_3",
-            //     entity_pressure: "sensor.bom_pres",
-            //     entity_forecast_low_temp_1:
-            //       "sensor.bom_gc_forecast_min_temp_c_1",
-            //     entity_forecast_low_temp_4:
-            //       "sensor.bom_gc_forecast_min_temp_c_4",
-            //     entity_forecast_low_temp_5:
-            //       "sensor.bom_gc_forecast_min_temp_c_5",
-            //     entity_humidity: "sensor.bom_humd",
-            //     type: "custom:dark-sky-weather-card",
-            //     entity_current_conditions: "sensor.dark_sky_icon",
-            //   },
-            // },
-            // {
-            //   style: {
-            //     "background-image": 'url("/assets/jimpower/home/waze_5.png")',
-            //     "background-size": "100% 400px",
-            //     "box-shadow": "3px 3px rgba(0,0,0,0.4)",
-            //     "background-repeat": "no-repeat",
-            //     "border-radius": "20px",
-            //     border: "solid 1px rgba(100,100,100,0.3)",
-            //     "background-color": "rgba(50,50,50,0.3)",
-            //   },
-            //   type: "custom:card-modder",
-            //   card: {
-            //     entities: [
-            //       {
-            //         name: "James",
-            //         zone: "zone.home",
-            //         entity: "sensor.james_to_home",
-            //       },
-            //       {
-            //         name: "Tina",
-            //         zone: "zone.home",
-            //         entity: "sensor.tina_to_home",
-            //       },
-            //       {
-            //         name: "Work",
-            //         zone: "zone.powertec",
-            //         entity: "sensor.commute_to_work",
-            //       },
-            //     ],
-            //     type: "custom:waze-card",
-            //   },
-            // },
             {
               style: {
                 "border-radius": "20px",
@@ -722,46 +597,8 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
           ],
           type: "vertical-stack",
         },
-        // {
-        //   cards: [
-        //     {
-        //       style: {
-        //         "border-radius": "20px",
-        //         color: "#999999",
-        //         "box-shadow": "3px 3px rgba(0,0,0,0.4)",
-        //         border: "solid 1px rgba(100,100,100,0.3)",
-        //       },
-        //       type: "custom:card-modder",
-        //       card: {
-        //         type: "picture-entity",
-        //         entity: "camera.bom_radar",
-        //       },
-        //     },
-        //     // {
-        //     //   style: {
-        //     //     "background-image": 'url("/assets/jimpower/cardbackK.png")',
-        //     //     "background-size": "100% 525px",
-        //     //     "box-shadow": "3px 3px rgba(0,0,0,0.4)",
-        //     //     "background-repeat": "no-repeat",
-        //     //     color: "#999999",
-        //     //     "border-radius": "20px",
-        //     //     border: "solid 1px rgba(100,100,100,0.3)",
-        //     //     "background-color": "rgba(50,50,50,0.3)",
-        //     //   },
-        //     //   type: "custom:card-modder",
-        //     //   card: {
-        //     //     title: null,
-        //     //     type: "custom:tracker-card",
-        //     //     trackers: [
-        //     //       "sensor.custom_card_tracker",
-        //     //       "sensor.custom_component_tracker",
-        //     //     ],
-        //     //   },
-        //     // },
-        //   ],
-        //   type: "vertical-stack",
-        // },
       ],
+      path: "home",
       icon: "mdi:castle",
       name: "Home",
       background:
@@ -881,26 +718,13 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
               card: {
                 image: "/assets/jimpower/security/air_8.jpg",
                 elements: [
-                  {
-                    image:
-                      "https://www.airvisual.com/assets/aqi/ic-face-1-green.svg",
-                    type: "image",
-                    style: {
-                      width: "80px",
-                      top: "30%",
-                      left: "12%",
-                      transform: "none",
-                      height: "80px",
-                    },
-                    entity: "sensor.us_air_pollution_level_2",
-                  },
                   {
                     style: {
                       color: "hsl(120, 41%, 39%)",
                       top: "50%",
                       "font-weight": 600,
-                      "font-size": "20px",
-                      left: "44%",
+                      "font-size": "50px",
+                      left: "30%",
                     },
                     type: "state-label",
                     entity: "sensor.us_air_pollution_level_2",
@@ -920,7 +744,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     style: {
                       color: "white",
                       top: "80%",
-                      left: "52%",
+                      left: "48%",
                     },
                     type: "state-icon",
                     entity: "sensor.us_main_pollutant_2",
@@ -1411,6 +1235,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
           type: "vertical-stack",
         },
       ],
+      path: "security",
       icon: "hass:shield-home",
       name: "Security",
       background:

demo/src/configs/kernehed/entities.ts

@@ -101,7 +101,12 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
     "sensor.zwave_battery_front_door": {
       entity_id: "sensor.zwave_battery_front_door",
       state: "63",
-      attributes: { friendly_name: "Battery", icon: "mdi:battery-60" },
+      attributes: {
+        friendly_name: "Battery",
+        icon: "mdi:battery-60",
+        unit_of_measurement: "%",
+        device_class: "battery",
+      },
     },
     "sensor.oskar_devices": {
       entity_id: "sensor.oskar_devices",
@@ -164,7 +169,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
     },
     "input_select.christmas_pattern": {
       entity_id: "input_select.christmas_pattern",
-      state: "None",
+      state: "Rainbow",
       attributes: {
         options: [
           "None",
@@ -186,7 +191,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
     },
     "input_select.christmas_palette": {
       entity_id: "input_select.christmas_palette",
-      state: "None",
+      state: "Party",
       attributes: {
         options: [
           "None",
@@ -457,7 +462,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "0.0",
       attributes: {
         unit_of_measurement: "kB/s",
-        friendly_name: "Nedladdning",
+        friendly_name: "Downloading",
         icon: "mdi:file-download",
       },
     },
@@ -471,7 +476,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "0.0",
       attributes: {
         unit_of_measurement: "kB/s",
-        friendly_name: "Uppladdning",
+        friendly_name: "Uploading",
         icon: "mdi:file-upload",
       },
     },

demo/src/configs/kernehed/lovelace.ts

@@ -2,44 +2,7 @@ import { DemoConfig } from "../types";
 
 export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
   name: "Hem",
-  resources: [
-    // {
-    //   url: "/local/custom-lovelace/monster-card.js",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/mini-media-player-bundle.js?v=0.9.8",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/slideshow-card.js?=1.1.0",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/fold-entity-row.js?v=3ae2c4",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/swipe-card/swipe-card.js?v=2.0.0",
-    //   type: "module",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/upcoming-media-card/upcoming-media-card.js",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/tracker-card.js?v=0.1.5",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/card-tools.js?v=6ce5d0",
-    //   type: "js",
-    // },
-    // {
-    //   url: "/local/custom-lovelace/krisinfo.js?=0.0.1",
-    //   type: "js",
-    // },
-  ],
+  resources: [],
   views: [
     {
       cards: [
@@ -64,7 +27,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
                       style: {
                         color: "white",
                         top: "93%",
-                        left: "90%",
+                        left: "85%",
                       },
                       type: "state-label",
                       entity: "sensor.battery_oskar",
@@ -87,7 +50,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
                     {
                       style: {
                         color: "white",
-                        top: "92%",
+                        top: "93%",
                         left: "20%",
                       },
                       type: "state-label",
@@ -96,8 +59,8 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
                     {
                       style: {
                         color: "white",
-                        top: "92%",
-                        left: "90%",
+                        top: "93%",
+                        left: "85%",
                       },
                       type: "state-label",
                       entity: "sensor.battery_bella",
@@ -105,7 +68,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
                     {
                       style: {
                         color: "white",
-                        top: "92%",
+                        top: "93%",
                         left: "55%",
                       },
                       type: "state-label",
@@ -131,78 +94,6 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           type: "entities",
           title: "Lock",
         },
-        // {
-        //   filter: {
-        //     exclude: [
-        //       {
-        //         state: "not_home",
-        //       },
-        //     ],
-        //     include: [
-        //       {
-        //         entity_id: "device_tracker.annasiphone",
-        //       },
-        //       {
-        //         entity_id: "device_tracker.iphone_2",
-        //       },
-        //     ],
-        //   },
-        //   type: "custom:monster-card",
-        //   card: {
-        //     show_header_toggle: false,
-        //     type: "entities",
-        //     title: "G\u00e4ster",
-        //   },
-        //   show_empty: false,
-        // },
-        // {
-        //   filter: {
-        //     exclude: [
-        //       {
-        //         state: "Inget",
-        //       },
-        //       {
-        //         state: "i.u.",
-        //       },
-        //     ],
-        //     include: [
-        //       {
-        //         entity_id: "sensor.pollen_al",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_alm",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_salg_vide",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_bjork",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_bok",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_ek",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_grabo",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_gras",
-        //       },
-        //       {
-        //         entity_id: "sensor.pollen_hassel",
-        //       },
-        //     ],
-        //   },
-        //   type: "custom:monster-card",
-        //   card: {
-        //     show_header_toggle: false,
-        //     type: "entities",
-        //     title: "Pollenniv\u00e5er",
-        //   },
-        //   show_empty: false,
-        // },
         {
           cards: [
             {
@@ -226,10 +117,6 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           ],
           type: "vertical-stack",
         },
-        // {
-        //   url: "https://embed.windy.com/embed2.html",
-        //   type: "iframe",
-        // },
         {
           entities: [
             {
@@ -263,6 +150,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           ],
           type: "glance",
           show_state: false,
+          columns: 4,
         },
         {
           entities: ["sensor.oskar_bluetooth"],
@@ -270,32 +158,6 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           type: "entities",
           title: "Occupancy",
         },
-        // {
-        //   filter: {
-        //     exclude: [
-        //       {
-        //         state: false,
-        //       },
-        //     ],
-        //     include: [
-        //       {
-        //         entity_id:
-        //           "binary_sensor.fibaro_system_unknown_type0c02_id1003_sensor_2",
-        //       },
-        //       {
-        //         entity_id:
-        //           "binary_sensor.fibaro_system_unknown_type0c02_id1003_sensor_3",
-        //       },
-        //     ],
-        //   },
-        //   type: "custom:monster-card",
-        //   card: {
-        //     show_header_toggle: false,
-        //     type: "entities",
-        //     title: "Brandvarnare",
-        //   },
-        //   show_empty: false,
-        // },
         {
           type: "weather-forecast",
           entity: "weather.smhi_vader",
@@ -378,41 +240,9 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
             "binary_sensor.windows_server",
             "binary_sensor.teamspeak",
             "binary_sensor.harmony_hub",
-            // {
-            //   style: {
-            //     height: "1px",
-            //     width: "85%",
-            //     "margin-left": "auto",
-            //     background: "#62717b",
-            //     "margin-right": "auto",
-            //   },
-            //   type: "divider",
-            // },
-            // {
-            //   items: ["sensor.uptime_router", "sensor.installerad_routeros"],
-            //   head: {
-            //     entity: "binary_sensor.router",
-            //   },
-            //   type: "custom:fold-entity-row",
-            //   group_config: {
-            //     icon: "mdi:router",
-            //   },
-            // },
-            // {
-            //   items: [
-            //     "sensor.uptime_router_server",
-            //     "sensor.installerad_routeros_server",
-            //   ],
-            //   head: {
-            //     entity: "binary_sensor.router_server",
-            //   },
-            //   type: "custom:fold-entity-row",
-            //   group_config: {
-            //     icon: "mdi:router",
-            //   },
-            // },
           ],
           show_header_toggle: false,
+          state_color: true,
           type: "entities",
           title: "Network",
         },
@@ -422,29 +252,10 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
             "binary_sensor.ubiquiti_switch",
             "binary_sensor.ubiquiti_nvr",
             "binary_sensor.entre_kamera",
-            // {
-            //   items: ["sensor.uptime_ap_1"],
-            //   head: {
-            //     entity: "binary_sensor.accesspunkt_1",
-            //   },
-            //   type: "custom:fold-entity-row",
-            //   group_config: {
-            //     icon: "router-wireless",
-            //   },
-            // },
-            // {
-            //   items: ["sensor.uptime_ap_2"],
-            //   head: {
-            //     entity: "binary_sensor.accesspunkt_2",
-            //   },
-            //   type: "custom:fold-entity-row",
-            //   group_config: {
-            //     icon: "router-wireless",
-            //   },
-            // },
             "sensor.total_clients_wireless",
           ],
           show_header_toggle: false,
+          state_color: true,
           type: "entities",
           title: "Ubiquiti",
         },

demo/src/configs/teachingbirds/lovelace.ts

@@ -215,6 +215,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           card: {
             type: "glance",
             show_state: false,
+            columns: 4,
           },
           state_filter: ["on"],
         },
@@ -808,67 +809,6 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           ],
           type: "vertical-stack",
         },
-        // {
-        //   cards: [
-        //     {
-        //       entities: [
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Bedside",
-        //           entity: "light.bedside_lamp",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Bedroom",
-        //           entity: "light.bedroom_ceiling_light",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Isa",
-        //           entity: "light.isa_ceiling_light",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Upstairs hallway",
-        //           entity: "light.upstairs_hallway_ceiling_light_level",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Nightlight",
-        //           entity: "light.gateway_light_34ce008bfc4b",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: true,
-        //           type: "custom:slider-entity-row",
-        //           name: "Walk in closet",
-        //           entity: "light.walk_in_closet_lights",
-        //         },
-        //         {
-        //           hide_when_off: true,
-        //           toggle: false,
-        //           type: "custom:slider-entity-row",
-        //           name: "Stefan",
-        //           entity: "light.stefan_lightstrip",
-        //         },
-        //       ],
-        //       show_header_toggle: false,
-        //       type: "entities",
-        //       title: "Upstairs",
-        //     },
-        //   ],
-        //   type: "vertical-stack",
-        // },
       ],
       path: "lights",
       title: "Lights",
@@ -918,10 +858,6 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   name: "Dafang",
                   icon: "mdi:webcam",
                 },
-                {
-                  name: "IR Hallway",
-                  entity: "sensor.system_ir_blaster",
-                },
                 {
                   name: "IR Bedroom",
                   entity: "sensor.system_ir_blaster_bedroom",
@@ -940,7 +876,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                 "sensor.system_ring_chime",
               ],
               type: "glance",
-              columns: 5,
+              columns: 4,
               show_state: false,
             },
             {

demo/src/configs/types.ts

@@ -9,5 +9,5 @@ export interface DemoConfig {
   authorUrl: string;
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
   entities: (localize: LocalizeFunc) => Entity[];
-  theme: () => { [key: string]: string } | null;
+  theme: () => Record<string, string> | null;
 }

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

@@ -3,8 +3,8 @@ import {
   CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../src/cast/cast_manager";

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

@@ -3,9 +3,9 @@ import {
   css,
   CSSResult,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { until } from "lit-html/directives/until";

demo/src/entrypoint.ts

@@ -1,13 +1,11 @@
-import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
+import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
 
 /* polyfill for paper-dropdown */
 setTimeout(() => {
-  import(
-    /* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"
-  );
+  import("web-animations-js/web-animations-next-lite.min");
 }, 1000);

demo/src/ha-demo.ts

@@ -1,3 +1,4 @@
+// Compat needs to be first import
 import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";

gallery/src/components/demo-card.js

@@ -21,15 +21,16 @@ class DemoCard extends PolymerElement {
         }
         pre {
           width: 400px;
-          margin: 16px;
+          margin: 0 16px;
           overflow: auto;
+          color: var(--primary-text-color);
         }
         @media only screen and (max-width: 800px) {
           .root {
             flex-direction: column;
           }
           pre {
-            margin-left: 0;
+            margin: 16px 0;
           }
         }
       </style>

gallery/src/components/demo-cards.js

@@ -2,10 +2,10 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../src/components/ha-switch";
-import "../../../src/components/ha-formfield";
-import "./demo-card";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+import "./demo-card";
 
 class DemoCards extends PolymerElement {
   static get template() {

gallery/src/components/demo-more-info.js

@@ -2,58 +2,62 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
-import "../../../src/state-summary/state-card-content";
 import "../../../src/dialogs/more-info/more-info-content";
+import "../../../src/state-summary/state-card-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
     return html`
       <style>
-        :host {
+        .root {
           display: flex;
-          align-items: start;
         }
-
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
         ha-card {
-          width: 333px;
+          width: 352px;
           padding: 20px 24px;
         }
-
         state-card-content {
           display: block;
           margin-bottom: 16px;
         }
-
         pre {
           width: 400px;
-          margin: 16px;
+          margin: 0 16px;
           overflow: auto;
+          color: var(--primary-text-color);
         }
-
         @media only screen and (max-width: 800px) {
-          :host {
+          .root {
             flex-direction: column;
           }
           pre {
-            margin-left: 0;
+            margin: 16px 0;
           }
         }
       </style>
-      <ha-card>
-        <state-card-content
-          state-obj="[[_stateObj]]"
-          hass="[[hass]]"
-          in-dialog
-        ></state-card-content>
+      <div class="root">
+        <div id="card">
+          <ha-card>
+            <state-card-content
+              state-obj="[[_stateObj]]"
+              hass="[[hass]]"
+              in-dialog
+            ></state-card-content>
 
-        <more-info-content
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></more-info-content>
-      </ha-card>
-      <template is="dom-if" if="[[showConfig]]">
-        <pre>[[_jsonEntity(_stateObj)]]</pre>
-      </template>
+            <more-info-content
+              hass="[[hass]]"
+              state-obj="[[_stateObj]]"
+            ></more-info-content>
+          </ha-card>
+        </div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      </div>
     `;
   }
 

gallery/src/components/demo-more-infos.js

@@ -2,6 +2,8 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 import "./demo-more-info";
 
@@ -9,6 +11,10 @@ class DemoMoreInfos extends PolymerElement {
   static get template() {
     return html`
       <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -23,20 +29,31 @@ class DemoMoreInfos extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
+        ha-formfield {
+          margin-right: 16px;
+        }
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
+          <ha-formfield label="Show entities">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
-      <div class="cards">
-        <template is="dom-repeat" items="[[entities]]">
-          <demo-more-info
-            entity-id="[[item]]"
-            show-config="[[_showConfig]]"
-            hass="[[hass]]"
-          ></demo-more-info>
-        </template>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[entities]]">
+            <demo-more-info
+              entity-id="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-more-info>
+          </template>
+        </div>
       </div>
     `;
   }
@@ -51,6 +68,16 @@ class DemoMoreInfos extends PolymerElement {
       },
     };
   }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
 }
 
 customElements.define("demo-more-infos", DemoMoreInfos);

gallery/src/data/media_players.ts

@@ -7,8 +7,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
-    supported_features: 195135,
+    // Select Source + Stop + Clear + Play + Shuffle Set
+    supported_features: 64063,
     entity_picture: "/images/album_cover_2.jpg",
     media_duration: 300,
     media_position: 50,
@@ -24,8 +24,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 64063,
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,

gallery/src/data/plants.ts

@@ -0,0 +1,72 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
+export const createPlantEntities = () => [
+  getEntity("plant", "lemon_tree", "ok", {
+    problem: "none",
+    sensors: {
+      moisture: "sensor.lemon_tree_moisture",
+      battery: "sensor.lemon_tree_battery",
+      temperature: "sensor.lemon_tree_temperature",
+      conductivity: "sensor.lemon_tree_conductivity",
+      brightness: "sensor.lemon_tree_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    battery: 95,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 12,
+    max_brightness: 20,
+    friendly_name: "Lemon Tree",
+  }),
+  getEntity("plant", "apple_tree", "ok", {
+    problem: "brightness",
+    sensors: {
+      moisture: "sensor.apple_tree_moisture",
+      battery: "sensor.apple_tree_battery",
+      temperature: "sensor.apple_tree_temperature",
+      conductivity: "sensor.apple_tree_conductivity",
+      brightness: "sensor.apple_tree_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    battery: 2,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    max_brightness: 20,
+    friendly_name: "Apple Tree",
+  }),
+  getEntity("plant", "sunflowers", "ok", {
+    problem: "moisture, temperature, conductivity",
+    sensors: {
+      moisture: "sensor.sunflowers_moisture",
+      temperature: "sensor.sunflowers_temperature",
+      conductivity: "sensor.sunflowers_conductivity",
+      brightness: "sensor.sunflowers_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    entity_picture: "/images/sunflowers.jpg",
+  }),
+];

gallery/src/data/traces/basic_trace.ts

@@ -0,0 +1,271 @@
+import { DemoTrace } from "./types";
+
+export const basicTrace: DemoTrace = {
+  trace: {
+    last_action: "action/0/choose/0/sequence/0",
+    last_condition: "condition/0",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-22T19:17:09.519178+00:00",
+      finish: "2021-03-22T19:17:09.556129+00:00",
+    },
+    trigger: "state of input_boolean.toggle_1",
+    domain: "automation",
+    item_id: "1615419646544",
+    action_trace: {
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-22T19:17:09.526794+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-22T19:11:24.418709+00:00",
+                last_updated: "2021-03-22T19:11:24.418709+00:00",
+                context: {
+                  id: "55daa6c47a7613b0800fe0ec81090a84",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-22T19:17:09.516874+00:00",
+                last_updated: "2021-03-22T19:17:09.516874+00:00",
+                context: {
+                  id: "116d7a6562d594b114f7efe728619a3f",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+            context: {
+              id: "54a7371cff31be0f4010c9fde2317322",
+              parent_id: "116d7a6562d594b114f7efe728619a3f",
+              user_id: null,
+            },
+          },
+          result: {
+            choice: 0,
+          },
+        },
+      ],
+      "action/0/choose/0": [
+        {
+          path: "action/0/choose/0",
+          timestamp: "2021-03-22T19:17:09.530176+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/0/choose/0/conditions/0": [
+        {
+          path: "action/0/choose/0/conditions/0",
+          timestamp: "2021-03-22T19:17:09.539155+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/0/choose/0/sequence/0": [
+        {
+          path: "action/0/choose/0/sequence/0",
+          timestamp: "2021-03-22T19:17:09.542769+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_2"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+    },
+    condition_trace: {
+      "condition/0": [
+        {
+          path: "condition/0",
+          timestamp: "2021-03-22T19:17:09.520267+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-22T19:11:24.418709+00:00",
+                last_updated: "2021-03-22T19:11:24.418709+00:00",
+                context: {
+                  id: "55daa6c47a7613b0800fe0ec81090a84",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-22T19:17:09.516874+00:00",
+                last_updated: "2021-03-22T19:17:09.516874+00:00",
+                context: {
+                  id: "116d7a6562d594b114f7efe728619a3f",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+          },
+          result: {
+            result: true,
+          },
+        },
+      ],
+    },
+    config: {
+      id: "1615419646544",
+      alias: "Ensure Party mode",
+      description: "",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "input_boolean.toggle_1",
+        },
+      ],
+      condition: [
+        {
+          condition: "template",
+          alias: "Test if Paulus is home",
+          value_template: "{{ true }}",
+        },
+      ],
+      action: [
+        {
+          choose: [
+            {
+              alias: "If toggle 3 is on",
+              conditions: "{{ is_state('input_boolean.toggle_3', 'on') }}",
+              sequence: [
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 2 while 3 is on",
+                  target: {
+                    entity_id: "input_boolean.toggle_2",
+                  },
+                },
+              ],
+            },
+          ],
+          default: [
+            {
+              service: "input_boolean.toggle",
+              alias: "Toggle 2",
+              target: {
+                entity_id: "input_boolean.toggle_2",
+              },
+            },
+          ],
+        },
+      ],
+      mode: "single",
+    },
+    context: {
+      id: "54a7371cff31be0f4010c9fde2317322",
+      parent_id: "116d7a6562d594b114f7efe728619a3f",
+      user_id: null,
+    },
+    variables: {
+      trigger: {
+        platform: "state",
+        entity_id: "input_boolean.toggle_1",
+        from_state: {
+          entity_id: "input_boolean.toggle_1",
+          state: "on",
+          attributes: {
+            editable: true,
+            friendly_name: "Toggle 1",
+          },
+          last_changed: "2021-03-22T19:11:24.418709+00:00",
+          last_updated: "2021-03-22T19:11:24.418709+00:00",
+          context: {
+            id: "55daa6c47a7613b0800fe0ec81090a84",
+            parent_id: null,
+            user_id: null,
+          },
+        },
+        to_state: {
+          entity_id: "input_boolean.toggle_1",
+          state: "off",
+          attributes: {
+            editable: true,
+            friendly_name: "Toggle 1",
+          },
+          last_changed: "2021-03-22T19:17:09.516874+00:00",
+          last_updated: "2021-03-22T19:17:09.516874+00:00",
+          context: {
+            id: "116d7a6562d594b114f7efe728619a3f",
+            parent_id: null,
+            user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+          },
+        },
+        for: null,
+        attribute: null,
+        description: "state of input_boolean.toggle_1",
+      },
+    },
+  },
+  logbookEntries: [
+    {
+      name: "Ensure Party mode",
+      message: "has been triggered by state of input_boolean.toggle_1",
+      source: "state of input_boolean.toggle_1",
+      entity_id: "automation.toggle_toggles",
+      context_id: "54a7371cff31be0f4010c9fde2317322",
+      when: "2021-03-22T19:17:09.523041+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-22T19:17:09.549346+00:00",
+      name: "Toggle 2",
+      state: "on",
+      entity_id: "input_boolean.toggle_2",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+  ],
+};

gallery/src/data/traces/motion-light-trace.ts

@@ -0,0 +1,248 @@
+import { DemoTrace } from "./types";
+
+export const motionLightTrace: DemoTrace = {
+  trace: {
+    last_action: "action/3",
+    last_condition: null,
+    run_id: "1",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-14T06:07:01.768006+00:00",
+      finish: "2021-03-14T06:07:53.287525+00:00",
+    },
+    trigger: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+    domain: "automation",
+    item_id: "1614732497392",
+    action_trace: {
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-14T06:07:01.771038+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "off",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera-off",
+                },
+                last_changed: "2021-03-14T06:06:29.235325+00:00",
+                last_updated: "2021-03-14T06:06:29.235325+00:00",
+                context: {
+                  id: "ad4864c5ce957c38a07b50378eeb245d",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "on",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera",
+                },
+                last_changed: "2021-03-14T06:07:01.762009+00:00",
+                last_updated: "2021-03-14T06:07:01.762009+00:00",
+                context: {
+                  id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              for: null,
+              attribute: null,
+              description:
+                "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+            },
+            context: {
+              id: "43b6ee9293a551c5cc14e8eb60af54ba",
+              parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+              user_id: null,
+            },
+          },
+        },
+      ],
+      "action/1": [
+        { path: "action/1", timestamp: "2021-03-14T06:07:01.875316+00:00" },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-14T06:07:53.195013+00:00",
+          changed_variables: {
+            wait: {
+              remaining: null,
+              trigger: {
+                platform: "state",
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                from_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "on",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera",
+                  },
+                  last_changed: "2021-03-14T06:07:01.762009+00:00",
+                  last_updated: "2021-03-14T06:07:01.762009+00:00",
+                  context: {
+                    id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                to_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "off",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera-off",
+                  },
+                  last_changed: "2021-03-14T06:07:53.186755+00:00",
+                  last_updated: "2021-03-14T06:07:53.186755+00:00",
+                  context: {
+                    id: "b2308cc91d509ea8e0c623331ab178d6",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                for: null,
+                attribute: null,
+                description:
+                  "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+              },
+            },
+          },
+        },
+      ],
+      "action/3": [
+        {
+          path: "action/3",
+          timestamp: "2021-03-14T06:07:53.196014+00:00",
+        },
+      ],
+    },
+    condition_trace: {},
+    config: {
+      mode: "restart",
+      max_exceeded: "silent",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+          from: "off",
+          to: "on",
+        },
+      ],
+      action: [
+        {
+          service: "light.turn_on",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+        {
+          wait_for_trigger: [
+            {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from: "on",
+              to: "off",
+            },
+          ],
+        },
+        {
+          delay: 0,
+        },
+        {
+          service: "light.turn_off",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+      ],
+      id: "1614732497392",
+      alias: "Auto Elgato",
+      description: "",
+    },
+    context: {
+      id: "43b6ee9293a551c5cc14e8eb60af54ba",
+      parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+      user_id: null,
+    },
+    variables: {
+      trigger: {
+        platform: "state",
+        entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+        from_state: {
+          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+          state: "off",
+          attributes: {
+            friendly_name: "Paulus’s MacBook Pro Camera In Use",
+            icon: "mdi:camera-off",
+          },
+          last_changed: "2021-03-14T06:06:29.235325+00:00",
+          last_updated: "2021-03-14T06:06:29.235325+00:00",
+          context: {
+            id: "ad4864c5ce957c38a07b50378eeb245d",
+            parent_id: null,
+            user_id: null,
+          },
+        },
+        to_state: {
+          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+          state: "on",
+          attributes: {
+            friendly_name: "Paulus’s MacBook Pro Camera In Use",
+            icon: "mdi:camera",
+          },
+          last_changed: "2021-03-14T06:07:01.762009+00:00",
+          last_updated: "2021-03-14T06:07:01.762009+00:00",
+          context: {
+            id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+            parent_id: null,
+            user_id: null,
+          },
+        },
+        for: null,
+        attribute: null,
+        description: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      },
+    },
+  },
+  logbookEntries: [
+    {
+      name: "Auto Elgato",
+      message:
+        "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      entity_id: "automation.auto_elgato",
+      when: "2021-03-14T06:07:01.768492+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-14T06:07:01.872187+00:00",
+      name: "Elgato Key Light Air",
+      state: "on",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+    {
+      when: "2021-03-14T06:07:53.284505+00:00",
+      name: "Elgato Key Light Air",
+      state: "off",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+  ],
+};

gallery/src/data/traces/types.ts

@@ -0,0 +1,7 @@
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { LogbookEntry } from "../../../../src/data/logbook";
+
+export interface DemoTrace {
+  trace: AutomationTraceExtended;
+  logbookEntries: LogbookEntry[];
+}

gallery/src/demos/demo-automation-trace.ts

@@ -0,0 +1,64 @@
+import {
+  customElement,
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+} from "lit-element";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-trace";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { DemoTrace } from "../data/traces/types";
+import { basicTrace } from "../data/traces/basic_trace";
+import { motionLightTrace } from "../data/traces/motion-light-trace";
+
+const traces: DemoTrace[] = [basicTrace, motionLightTrace];
+
+@customElement("demo-automation-trace")
+export class DemoAutomationTrace extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace) => html`
+          <ha-card .heading=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-trace
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+              ></hat-trace>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace": DemoAutomationTrace;
+  }
+}

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -71,35 +76,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoAlarmPanelEntity extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-alarm-panel-card")
+class DemoAlarmPanelEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this.$.demos);
-    await hass.updateTranslations(null, "en");
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-conditional-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -53,31 +58,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoConditional extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-conditional-card")
+class DemoConditional extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entities-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -217,24 +222,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoEntities extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-entities-card")
+class DemoEntities extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -20,10 +25,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "With Name",
+    heading: "With Name (defined in card)",
     config: `
 - type: button
-  name: Bedroom
+  name: Custom Name
   entity: light.bed_light
     `,
   },
@@ -32,7 +37,7 @@ const CONFIGS = [
     config: `
 - type: button
   entity: light.bed_light
-  icon: mdi:hotel
+  icon: mdi:tools
     `,
   },
   {
@@ -48,7 +53,7 @@ const CONFIGS = [
     config: `
 - type: button
   entity: light.bed_light
-  tap_action: 
+  tap_action:
     action: toggle
     `,
   },
@@ -69,31 +74,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoButtonEntity extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-entity-button-card")
+class DemoButtonEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -43,7 +48,7 @@ const ENTITIES = [
 
 const CONFIGS = [
   {
-    heading: "Controller",
+    heading: "Unfiltered controller",
     config: `
 - type: entities
   entities:
@@ -53,7 +58,7 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Basic",
+    heading: "Filtered entities card",
     config: `
 - type: entity-filter
   entities:
@@ -69,7 +74,27 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "With card config",
+    heading: 'With "entities" card config',
+    config: `
+- type: entity-filter
+  entities:
+    - device_tracker.demo_anne_therese
+    - device_tracker.demo_home_boy
+    - device_tracker.demo_paulus
+    - light.bed_light
+    - light.ceiling_lights
+    - light.kitchen_lights
+  state_filter:
+    - "on"
+    - not_home
+  card:
+    type: entities
+    title: Custom Title
+    show_header_toggle: false
+    `,
+  },
+  {
+    heading: 'With "glance" card config',
     config: `
 - type: entity-filter
   entities:
@@ -84,31 +109,27 @@ const CONFIGS = [
     - not_home
   card:
     type: glance
-    show_state: false
+    show_state: true
+    title: Custom Title
     `,
   },
 ];
 
-class DemoFilter extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-entity-filter-card")
+class DemoEntityFilter extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-entity-filter-card", DemoFilter);
+customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);

gallery/src/demos/demo-hui-gauge-card.ts

@@ -1,12 +1,19 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
+  getEntity("sensor", "brightness_medium", "53", {}),
+  getEntity("sensor", "brightness_high", "87", {}),
   getEntity("plant", "bonsai", "ok", {}),
   getEntity("sensor", "not_working", "unavailable", {}),
   getEntity("sensor", "outside_humidity", "54", {
@@ -21,16 +28,10 @@ const CONFIGS = [
   {
     heading: "Basic example",
     config: `
-- type: gauge
-  entity: sensor.brightness
-    `,
-  },
-  {
-    heading: "With title",
-    config: `
 - type: gauge
   title: Humidity
   entity: sensor.outside_humidity
+  name: Outside Humidity
     `,
   },
   {
@@ -39,6 +40,7 @@ const CONFIGS = [
 - type: gauge
   entity: sensor.outside_temperature
   unit_of_measurement: C
+  name: Outside Temperature
     `,
   },
   {
@@ -46,19 +48,45 @@ const CONFIGS = [
     config: `
 - type: gauge
   entity: sensor.brightness
+  name: Brightness Low
   severity:
-    red: 32
+    red: 75
     green: 0
-    yellow: 23
+    yellow: 50
     `,
   },
   {
-    heading: "Setting Min and Max Values",
+    heading: "Setting Severity Levels",
+    config: `
+- type: gauge
+  entity: sensor.brightness_medium
+  name: Brightness Medium
+  severity:
+    red: 75
+    green: 0
+    yellow: 50
+    `,
+  },
+  {
+    heading: "Setting Severity Levels",
+    config: `
+- type: gauge
+  entity: sensor.brightness_high
+  name: Brightness High
+  severity:
+    red: 75
+    green: 0
+    yellow: 50
+    `,
+  },
+  {
+    heading: "Setting Min (0) and Max (15) Values",
     config: `
 - type: gauge
   entity: sensor.brightness
+  name: Brightness
   min: 0
-  max: 38
+  max: 15
     `,
   },
   {
@@ -84,24 +112,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoGaugeEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-gauge-card")
+class DemoGaugeEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -77,7 +82,8 @@ const CONFIGS = [
     heading: "With title",
     config: `
 - type: glance
-  title: This is glance
+  title: Custom title
+  columns: 4
   entities:
     - device_tracker.demo_paulus
     - media_player.living_room
@@ -104,9 +110,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "No name",
+    heading: "No entity names",
     config: `
 - type: glance
+  columns: 4
   show_name: false
   entities:
     - device_tracker.demo_paulus
@@ -119,9 +126,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "No state",
+    heading: "No state labels",
     config: `
 - type: glance
+  columns: 4
   show_state: false
   entities:
     - device_tracker.demo_paulus
@@ -134,9 +142,10 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "No name and no state",
+    heading: "No names and no state labels",
     config: `
 - type: glance
+  columns: 4
   show_name: false
   show_state: false
   entities:
@@ -150,47 +159,24 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Custom name, custom icon",
+    heading: "Custom name + custom icon",
     config: `
 - type: glance
+  columns: 4
   entities:
     - entity: device_tracker.demo_paulus
       name: ¯\\_(ツ)_/¯
       icon: mdi:home-assistant
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - entity: light.kitchen_lights
-      icon: mdi:alarm-light
-    - lock.kitchen_door
-    - light.ceiling_lights
-    `,
-  },
-  {
-    heading: "Custom tap action",
-    config: `
-- type: glance
-  entities:
-    - entity: lock.kitchen_door
-      tap_action:
-        type: toggle
-    - entity: light.ceiling_lights
-      tap_action:
-        action: call-service
-        service: light.turn_on
-        service_data:
-          entity_id: light.ceiling_lights
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
+    - entity: media_player.living_room
+      name: ¯\\_(ツ)_/¯
+      icon: mdi:home-assistant
     `,
   },
   {
     heading: "Selectively hidden name",
     config: `
 - type: glance
+  columns: 4
   entities:
     - device_tracker.demo_paulus
     - entity: media_player.living_room
@@ -199,45 +185,51 @@ const CONFIGS = [
     - entity: cover.kitchen_window
       name:
     - light.kitchen_lights
+    - entity: lock.kitchen_door
+      name: 
+    - light.ceiling_lights
     `,
   },
   {
-    heading: "Primary theme",
+    heading: "Custom tap action",
     config: `
 - type: glance
-  theming: primary
+  columns: 4  
   entities:
-    - device_tracker.demo_paulus
-    - media_player.living_room
-    - sun.sun
-    - cover.kitchen_window
-    - light.kitchen_lights
-    - lock.kitchen_door
-    - light.ceiling_lights
+    - entity: lock.kitchen_door
+      name: Custom
+      tap_action:
+        type: toggle
+    - entity: light.ceiling_lights
+      name: Custom
+      tap_action:
+        action: call-service
+        service: light.turn_on
+        service_data:
+          entity_id: light.ceiling_lights
+    - entity: sun.sun
+      name: Regular
+    - entity: light.kitchen_lights
+      name: Regular
     `,
   },
 ];
 
-class DemoPicEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-glance-card")
+class DemoGlanceEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-glance-card", DemoPicEntity);
+customElements.define("demo-hui-glance-card", DemoGlanceEntity);

gallery/src/demos/demo-hui-iframe-card.ts

@@ -1,6 +1,4 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -37,18 +35,10 @@ const CONFIGS = [
   },
 ];
 
-class DemoIframe extends PolymerElement {
-  static get template() {
-    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
-  }
-
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
+@customElement("demo-hui-iframe-card")
+class DemoIframe extends LitElement {
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 }
 

gallery/src/demos/demo-hui-light-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -8,29 +13,43 @@ import "../components/demo-cards";
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
     friendly_name: "Bed Light",
-    brightness: 130,
+    brightness: 255,
   }),
-  getEntity("light", "dim", "off", {
+  getEntity("light", "dim_on", "on", {
+    friendly_name: "Dining Room",
+    supported_features: 1,
+    brightness: 100,
+  }),
+  getEntity("light", "dim_off", "off", {
+    friendly_name: "Dining Room",
     supported_features: 1,
   }),
   getEntity("light", "unavailable", "unavailable", {
+    friendly_name: "Lost Light",
     supported_features: 1,
   }),
 ];
 
 const CONFIGS = [
   {
-    heading: "Basic example",
+    heading: "Switchable Light",
     config: `
 - type: light
   entity: light.bed_light
     `,
   },
   {
-    heading: "Dim",
+    heading: "Dimmable Light On",
     config: `
 - type: light
-  entity: light.dim
+  entity: light.dim_on
+    `,
+  },
+  {
+    heading: "Dimmable Light Off",
+    config: `
+- type: light
+  entity: light.dim_off
     `,
   },
   {
@@ -49,24 +68,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoLightEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-light-card")
+class DemoLightEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-map-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -161,31 +166,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoMap extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-map-card")
+class DemoMap extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -254,23 +259,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoMarkdown extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-markdown-card")
+class DemoMarkdown extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     mockTemplate(hass);
   }
 }

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -146,35 +151,33 @@ const CONFIGS = [
     entity: media_player.receiver_off
     `,
   },
+  {
+    heading: "Grid Full Size",
+    config: `
+  - type: grid
+    columns: 1
+    cards:
+    - type: media-control
+      entity: media_player.music_paused
+    `,
+  },
 ];
 
-class DemoHuiMediControlCard extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-media-control-card")
+class DemoHuiMediaControlCard extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(createMediaPlayerEntities());
   }
 }
 
-customElements.define("demo-hui-media-control-card", DemoHuiMediControlCard);
+customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -26,9 +31,9 @@ const CONFIGS = [
     - entity: media_player.android_cast
       name: Screen casting
     - entity: media_player.image_display
-      name: Digital Picture Frame  
+      name: Digital Picture Frame
     - entity: media_player.sonos_idle
-      name: Sonos Idle  
+      name: Sonos Idle
     - entity: media_player.idle_browse_media
       name: Idle waiting for Browse Media
     - entity: media_player.theater_off
@@ -38,7 +43,7 @@ const CONFIGS = [
     - entity: media_player.theater_off_static
       name: Player Off (cannot be switched on)
     - entity: media_player.theater_on_static
-      name: Player On (cannot be switched off)  
+      name: Player On (cannot be switched off)
     - entity: media_player.idle
       name: Player Idle
     - entity: media_player.playing
@@ -55,33 +60,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoHuiMediaPlayerRows extends PolymerElement {
-  static get template() {
-    return html`
-      <demo-cards
-        id="demos"
-        hass="[[hass]]"
-        configs="[[_configs]]"
-      ></demo-cards>
-    `;
+@customElement("demo-hui-media-player-row")
+class DemoHuiMediaPlayerRow extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-      hass: Object,
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(createMediaPlayerEntities());
   }
 }
 
-customElements.define("demo-hui-media-player-rows", DemoHuiMediaPlayerRows);
+customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -125,26 +130,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicElements extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-elements-card")
+class DemoPictureElements extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-elements-card", DemoPicElements);
+customElements.define("demo-hui-picture-elements-card", DemoPictureElements);

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -80,26 +85,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-entity-card")
+class DemoPictureEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-entity-card", DemoPicEntity);
+customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -121,26 +126,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicGlance extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-glance-card")
+class DemoPictureGlance extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-glance-card", DemoPicGlance);
+customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);

gallery/src/demos/demo-hui-plant-card.ts

@@ -0,0 +1,55 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createPlantEntities } from "../data/plants";
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: plant-status
+  entity: plant.lemon_tree
+    `,
+  },
+  {
+    heading: "Problem (too bright) + low battery",
+    config: `
+- type: plant-status
+  entity: plant.apple_tree
+    `,
+  },
+  {
+    heading: "With picture + multiple problems",
+    config: `
+- type: plant-status
+  entity: plant.sunflowers
+  name: Sunflowers Name Overwrite
+    `,
+  },
+];
+
+@customElement("demo-hui-plant-card")
+export class DemoPlantEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(createPlantEntities());
+  }
+}
+
+customElements.define("demo-hui-plant-card", DemoPlantEntity);

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
@@ -20,24 +25,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoShoppingListEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-shopping-list-card")
+class DemoShoppingListEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
 
     hass.mockAPI("shopping_list", () => [
       { name: "list", id: 1, complete: false },

gallery/src/demos/demo-hui-stack-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -132,24 +137,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoStack extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-stack-card")
+class DemoStack extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
     mockHistory(hass);
   }

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -74,24 +79,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoThermostatEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-thermostat-card")
+class DemoThermostatEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-more-info-light.ts

@@ -1,12 +1,29 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import "../../../src/components/ha-card";
-import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
-import { getEntity } from "../../../src/fake_data/entity";
-import { provideHass } from "../../../src/fake_data/provide_hass";
-import "../components/demo-more-infos";
+import {
+  SUPPORT_BRIGHTNESS,
+  SUPPORT_COLOR,
+  SUPPORT_COLOR_TEMP,
+  SUPPORT_EFFECT,
+  SUPPORT_FLASH,
+  SUPPORT_TRANSITION,
+  SUPPORT_WHITE_VALUE,
+} from "../../../src/data/light";
 import "../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../src/fake_data/provide_hass";
+import "../components/demo-more-infos";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -14,40 +31,58 @@ const ENTITIES = [
   }),
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
-    brightness: 80,
+    brightness: 200,
     supported_features: SUPPORT_BRIGHTNESS,
   }),
+  getEntity("light", "color_temperature_light", "on", {
+    friendly_name: "White Color Temperature Light",
+    brightness: 128,
+    color_temp: 75,
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_BRIGHTNESS + SUPPORT_COLOR_TEMP,
+  }),
+  getEntity("light", "color_effectslight", "on", {
+    friendly_name: "Color Effets Light",
+    brightness: 255,
+    hs_color: [30, 100],
+    white_value: 36,
+    supported_features:
+      SUPPORT_BRIGHTNESS +
+      SUPPORT_EFFECT +
+      SUPPORT_FLASH +
+      SUPPORT_COLOR +
+      SUPPORT_TRANSITION +
+      SUPPORT_WHITE_VALUE,
+    effect_list: ["random", "colorloop"],
+  }),
 ];
 
-class DemoMoreInfoLight extends PolymerElement {
-  static get template() {
+@customElement("demo-more-info-light")
+class DemoMoreInfoLight extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
     return html`
       <demo-more-infos
-        hass="[[hass]]"
-        entities="[[_entities]]"
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
       ></demo-more-infos>
     `;
   }
 
-  static get properties() {
-    return {
-      _entities: {
-        type: Array,
-        value: ENTITIES.map((ent) => ent.entityId),
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this);
-    await hass.updateTranslations(null, "en");
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-more-info-light", DemoMoreInfoLight);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-light": DemoMoreInfoLight;
+  }
+}

gallery/src/demos/demo-util-long-press.ts

@@ -1,9 +1,10 @@
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit-element";
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
 
+@customElement("demo-util-long-press")
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
@@ -20,7 +21,7 @@ export class DemoUtilLongPress extends LitElement {
 
             <textarea></textarea>
 
-            <div>(try pressing and scrolling too!)</div>
+            <div>Try pressing and scrolling too!</div>
           </ha-card>
         `
       )}
@@ -62,5 +63,3 @@ export class DemoUtilLongPress extends LitElement {
     `;
   }
 }
-
-customElements.define("demo-util-long-press", DemoUtilLongPress);

gallery/src/ha-gallery.js

@@ -14,54 +14,51 @@ import "../../src/styles/polymer-ha-style";
 // eslint-disable-next-line import/extensions
 import { DEMOS } from "../build/import-demos";
 
-const fixPath = (path) => path.substr(2, path.length - 5);
-
 class HaGallery extends PolymerElement {
   static get template() {
     return html`
       <style include="iron-positioning ha-style">
-      :host {
-        -ms-user-select: initial;
-        -webkit-user-select: initial;
-        -moz-user-select: initial;
-      }
-      app-header-layout {
-        min-height: 100vh;
-      }
-      ha-icon-button.invisible {
-        visibility: hidden;
-      }
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        app-header-layout {
+          min-height: 100vh;
+        }
+        ha-icon-button.invisible {
+          visibility: hidden;
+        }
 
-      .pickers {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: start;
-      }
+        .pickers {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          align-items: start;
+        }
 
-      .pickers ha-card {
-        width: 400px;
-        display: block;
-        margin: 16px 8px;
-      }
+        .pickers ha-card {
+          width: 400px;
+          display: block;
+          margin: 16px 8px;
+        }
 
-      .pickers ha-card:last-child {
-        margin-bottom: 16px;
-      }
+        .pickers ha-card:last-child {
+          margin-bottom: 16px;
+        }
 
-      .intro {
-        margin: -1em 0;
-      }
+        .intro {
+          margin: -1em 0;
+        }
 
-      p a {
-        color: var(--primary-color);
-      }
-
-      a {
-        color: var(--primary-text-color);
-        text-decoration: none;
-      }
+        p a {
+          color: var(--primary-color);
+        }
 
+        a {
+          color: var(--primary-text-color);
+          text-decoration: none;
+        }
       </style>
 
       <app-header-layout>
@@ -70,32 +67,42 @@ class HaGallery extends PolymerElement {
             <ha-icon-button
               icon="hass:arrow-left"
               on-click="_backTapped"
-              class$='[[_computeHeaderButtonClass(_demo)]]'
+              class$="[[_computeHeaderButtonClass(_demo)]]"
             ></ha-icon-button>
-            <div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div>
+            <div main-title>
+              [[_withDefault(_demo, "Home Assistant Gallery")]]
+            </div>
           </app-toolbar>
         </app-header>
 
-        <div class='content'>
-          <div id='demo'></div>
-          <template is='dom-if' if='[[!_demo]]'>
-            <div class='pickers'>
-              <ha-card header="Lovelace card demos">
-                <div class='card-content intro'>
+        <div class="content">
+          <div id="demo"></div>
+          <template is="dom-if" if="[[!_demo]]">
+            <div class="pickers">
+              <ha-card header="Lovelace Card Demos">
+                <div class="card-content intro">
                   <p>
-                    Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
+                    Lovelace has many different cards. Each card allows the user
+                    to tell a different story about what is going on in their
+                    house. These cards are very customizable, as no household is
+                    the same.
                   </p>
 
                   <p>
-                    This gallery helps our developers and designers to see all the different states that each card can be in.
+                    This gallery helps our developers and designers to see all
+                    the different states that each card can be in.
                   </p>
 
                   <p>
-                    Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
+                    Check
+                    <a href="https://www.home-assistant.io/lovelace"
+                      >the official website</a
+                    >
+                    for instructions on how to get started with Lovelace.
                   </p>
                 </div>
-                <template is='dom-repeat' items='[[_lovelaceDemos]]'>
-                  <a href='#[[item]]'>
+                <template is="dom-repeat" items="[[_lovelaceDemos]]">
+                  <a href="#[[item]]">
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
                       <ha-icon icon="hass:chevron-right"></ha-icon>
@@ -104,30 +111,10 @@ class HaGallery extends PolymerElement {
                 </template>
               </ha-card>
 
-              <ha-card header="More Info demos">
-                <div class='card-content intro'>
-                  <p>
-                    More info screens show up when an entity is clicked.
-                  </p>
-                </div>
-                <template is='dom-repeat' items='[[_moreInfoDemos]]'>
-                  <a href='#[[item]]'>
-                    <paper-item>
-                      <paper-item-body>{{ item }}</paper-item-body>
-                      <ha-icon icon="hass:chevron-right"></ha-icon>
-                    </paper-item>
-                  </a>
-                </template>
-              </ha-card>
-
-              <ha-card header="Util demos">
-                <div class='card-content intro'>
-                  <p>
-                    Test pages for our utility functions.
-                  </p>
-                </div>
-                <template is='dom-repeat' items='[[_utilDemos]]'>
-                  <a href='#[[item]]'>
+              <ha-card header="Other Demos">
+                <div class="card-content intro"></div>
+                <template is="dom-repeat" items="[[_restDemos]]">
+                  <a href="#[[item]]">
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
                       <ha-icon icon="hass:chevron-right"></ha-icon>
@@ -139,7 +126,10 @@ class HaGallery extends PolymerElement {
           </template>
         </div>
       </app-header-layout>
-      <notification-manager hass=[[_fakeHass]] id='notifications'></notification-manager>
+      <notification-manager
+        hass="[[_fakeHass]]"
+        id="notifications"
+      ></notification-manager>
     `;
   }
 
@@ -168,13 +158,9 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeLovelace(_demos)",
       },
-      _moreInfoDemos: {
+      _restDemos: {
         type: Array,
-        computed: "_computeMoreInfos(_demos)",
-      },
-      _utilDemos: {
-        type: Array,
-        computed: "_computeUtil(_demos)",
+        computed: "_computeRest(_demos)",
       },
     };
   }
@@ -227,12 +213,8 @@ class HaGallery extends PolymerElement {
     return demos.filter((demo) => demo.includes("hui"));
   }
 
-  _computeMoreInfos(demos) {
-    return demos.filter((demo) => demo.includes("more-info"));
-  }
-
-  _computeUtil(demos) {
-    return demos.filter((demo) => demo.includes("util"));
+  _computeRest(demos) {
+    return demos.filter((demo) => !demo.includes("hui"));
   }
 }
 

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

@@ -15,6 +15,7 @@ import {
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
 import { filterAndSort } from "../components/hassio-filter-addons";
@@ -23,6 +24,8 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
   @property({ attribute: false }) public addons!: HassioAddonInfo[];
@@ -54,7 +57,11 @@ class HassioAddonRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            No results found in "${repo.name}."
+            ${this.supervisor.localize(
+              "store.no_results_found",
+              "repository",
+              repo.name
+            )}
           </p>
         </div>
       `;
@@ -83,11 +90,13 @@ class HassioAddonRepositoryEl extends LitElement {
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
                       ? addon.update_available
-                        ? "New version available"
-                        : "Add-on is installed"
+                        ? this.supervisor.localize(
+                            "common.new_version_available"
+                          )
+                        : this.supervisor.localize("addon.installed")
                       : addon.available
-                      ? "Add-on is not installed"
-                      : "Add-on is not available on your system"}
+                      ? this.supervisor.localize("addon.not_installed")
+                      : this.supervisor.localize("addon.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"

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

@@ -11,17 +11,20 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
+import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
 import {
-  fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -49,58 +52,43 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 class HassioAddonStore extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
-
-  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
-
   @internalProperty() private _filter?: string;
 
   public async refreshData() {
-    this._repos = undefined;
-    this._addons = undefined;
-    this._filter = undefined;
     await reloadHassioAddons(this.hass);
     await this._loadData();
   }
 
   protected render(): TemplateResult {
-    const repos: TemplateResult[] = [];
+    let repos: TemplateResult[] = [];
 
-    if (this._repos) {
-      for (const repo of this._repos) {
-        const addons = this._addons!.filter(
-          (addon) => addon.repository === repo.slug
-        );
-
-        if (addons.length === 0) {
-          continue;
-        }
-
-        repos.push(html`
-          <hassio-addon-repository
-            .hass=${this.hass}
-            .repo=${repo}
-            .addons=${addons}
-            .filter=${this._filter!}
-          ></hassio-addon-repository>
-        `);
-      }
+    if (this.supervisor.addon.repositories) {
+      repos = this.addonRepositories(
+        this.supervisor.addon.repositories,
+        this.supervisor.addon.addons,
+        this._filter
+      );
     }
 
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        hassio
-        main-page
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Add-on Store</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.store")}
+        </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -110,15 +98,15 @@ class HassioAddonStore extends LitElement {
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
-            Repositories
+            ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
           <mwc-list-item>
-            Reload
+            ${this.supervisor.localize("common.reload")}
           </mwc-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)
             ? html`<mwc-list-item>
-                Registries
+                ${this.supervisor.localize("store.registries")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
@@ -139,11 +127,9 @@ class HassioAddonStore extends LitElement {
         ${!this.hass.userData?.showAdvanced
           ? html`
               <div class="advanced">
-                Missing add-ons? Enable advanced mode on
                 <a href="/profile" target="_top">
-                  your profile page
+                  ${this.supervisor.localize("store.missing_addons")}
                 </a>
-                .
               </div>
             `
           : ""}
@@ -153,14 +139,46 @@ class HassioAddonStore extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+    const repositoryUrl = extractSearchParam("repository_url");
+    navigate(this, "/hassio/store", true);
+    if (repositoryUrl) {
+      this._manageRepositories(repositoryUrl);
+    }
+
     this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
     this._loadData();
   }
 
+  private addonRepositories = memoizeOne(
+    (
+      repositories: HassioAddonRepository[],
+      addons: HassioAddonInfo[],
+      filter?: string
+    ) => {
+      return repositories.sort(sortRepos).map((repo) => {
+        const filteredAddons = addons.filter(
+          (addon) => addon.repository === repo.slug
+        );
+
+        return filteredAddons.length !== 0
+          ? html`
+              <hassio-addon-repository
+                .hass=${this.hass}
+                .repo=${repo}
+                .addons=${filteredAddons}
+                .filter=${filter!}
+                .supervisor=${this.supervisor}
+              ></hassio-addon-repository>
+            `
+          : html``;
+      });
+    }
+  );
+
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._manageRepositories();
+        this._manageRepositoriesClicked();
         break;
       case 1:
         this.refreshData();
@@ -177,26 +195,26 @@ class HassioAddonStore extends LitElement {
     }
   }
 
-  private async _manageRepositories() {
+  private _manageRepositoriesClicked() {
+    this._manageRepositories();
+  }
+
+  private async _manageRepositories(url?: string) {
     showRepositoriesDialog(this, {
-      repos: this._repos!,
-      loadData: () => this._loadData(),
+      supervisor: this.supervisor,
+      url,
     });
   }
 
   private async _manageRegistries() {
-    showRegistriesDialog(this);
+    showRegistriesDialog(this, { supervisor: this.supervisor });
   }
 
   private async _loadData() {
-    try {
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      this._repos = addonsInfo.repositories;
-      this._repos.sort(sortRepos);
-      this._addons = addonsInfo.addons;
-    } catch (err) {
-      alert(extractApiErrorMessage(err));
-    }
+    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "supervisor",
+    });
   }
 
   private async _filterChanged(e) {

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -7,13 +7,14 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import "web-animations-js/web-animations-next-lite.min";
+import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
@@ -24,16 +25,18 @@ import {
   fetchHassioHardwareAudio,
   HassioHardwareAudioDevice,
 } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/buttons/ha-progress-button";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -48,12 +51,16 @@ class HassioAddonAudio extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card header="Audio">
+      <ha-card
+        .header=${this.supervisor.localize("addon.configuration.audio.header")}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <paper-dropdown-menu
-            label="Input"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.input"
+            )}
             @iron-select=${this._setInputDevice}
           >
             <paper-listbox
@@ -64,15 +71,17 @@ class HassioAddonAudio extends LitElement {
               ${this._inputDevices &&
               this._inputDevices.map((item) => {
                 return html`
-                  <paper-item device=${item.device || ""}
-                    >${item.name}</paper-item
-                  >
+                  <paper-item device=${item.device || ""}>
+                    ${item.name}
+                  </paper-item>
                 `;
               })}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
-            label="Output"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.output"
+            )}
             @iron-select=${this._setOutputDevice}
           >
             <paper-listbox
@@ -93,7 +102,7 @@ class HassioAddonAudio extends LitElement {
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -152,7 +161,7 @@ class HassioAddonAudio extends LitElement {
 
     const noDevice: HassioHardwareAudioDevice = {
       device: "default",
-      name: "Default",
+      name: this.supervisor.localize("addon.configuration.audio.default"),
     };
 
     try {
@@ -189,7 +198,7 @@ class HassioAddonAudio extends LitElement {
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch {
       this._error = "Failed to set addon audio device";

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -7,11 +7,12 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/ha-circular-progress";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -20,34 +21,51 @@ import "./hassio-addon-network";
 class HassioAddonConfigDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
+    const hasConfiguration =
+      (this.addon.options && Object.keys(this.addon.options).length) ||
+      (this.addon.schema && Object.keys(this.addon.schema).length);
+
     return html`
       <div class="content">
-        <hassio-addon-config
-          .hass=${this.hass}
-          .addon=${this.addon}
-        ></hassio-addon-config>
-        ${this.addon.network
+        ${hasConfiguration || this.addon.network || this.addon.audio
           ? html`
-              <hassio-addon-network
-                .hass=${this.hass}
-                .addon=${this.addon}
-              ></hassio-addon-network>
+              ${hasConfiguration
+                ? html`
+                    <hassio-addon-config
+                      .hass=${this.hass}
+                      .addon=${this.addon}
+                      .supervisor=${this.supervisor}
+                    ></hassio-addon-config>
+                  `
+                : ""}
+              ${this.addon.network
+                ? html`
+                    <hassio-addon-network
+                      .hass=${this.hass}
+                      .addon=${this.addon}
+                      .supervisor=${this.supervisor}
+                    ></hassio-addon-network>
+                  `
+                : ""}
+              ${this.addon.audio
+                ? html`
+                    <hassio-addon-audio
+                      .hass=${this.hass}
+                      .addon=${this.addon}
+                      .supervisor=${this.supervisor}
+                    ></hassio-addon-audio>
+                  `
+                : ""}
             `
-          : ""}
-        ${this.addon.audio
-          ? html`
-              <hassio-addon-audio
-                .hass=${this.hass}
-                .addon=${this.addon}
-              ></hassio-addon-audio>
-            `
-          : ""}
+          : this.supervisor.localize("addon.configuration.no_configuration")}
       </div>
     `;
   }

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

@@ -1,4 +1,7 @@
 import "@material/mwc-button";
+import { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import {
   css,
@@ -12,9 +15,15 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import {
@@ -23,62 +32,197 @@ import {
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
+const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
   @property({ type: Boolean }) private _valid = true;
 
-  @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
+  @internalProperty() private _canShowSchema = false;
+
+  @internalProperty() private _showOptional = false;
+
+  @internalProperty() private _error?: string;
+
+  @internalProperty() private _options?: Record<string, unknown>;
+
+  @internalProperty() private _yamlMode = false;
+
+  @query("ha-yaml-editor") private _editor?: HaYamlEditor;
+
+  public computeLabel = (entry: HaFormSchema): string => {
+    return (
+      this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+        ?.name ||
+      this.addon.translations.en?.configuration?.[entry.name].name ||
+      entry.name
+    );
+  };
+
+  private _filteredShchema = memoizeOne(
+    (options: Record<string, unknown>, schema: HaFormSchema[]) => {
+      return schema.filter((entry) => entry.name in options || entry.required);
+    }
+  );
 
   protected render(): TemplateResult {
+    const showForm =
+      !this._yamlMode && this._canShowSchema && this.addon.schema;
+    const hasHiddenOptions =
+      showForm &&
+      JSON.stringify(this.addon.schema) !==
+        JSON.stringify(
+          this._filteredShchema(this.addon.options, this.addon.schema!)
+        );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card header="Configuration">
-        <div class="card-content">
-          <ha-yaml-editor
-            @value-changed=${this._configChanged}
-          ></ha-yaml-editor>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+      <ha-card>
+        <div class="header">
+          <h2>
+            ${this.supervisor.localize("addon.configuration.options.header")}
+          </h2>
+          <div class="card-menu">
+            <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+              <mwc-icon-button slot="trigger">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item .disabled=${!this._canShowSchema}>
+                ${this._yamlMode
+                  ? this.supervisor.localize(
+                      "addon.configuration.options.edit_in_ui"
+                    )
+                  : this.supervisor.localize(
+                      "addon.configuration.options.edit_in_yaml"
+                    )}
+              </mwc-list-item>
+              <mwc-list-item class="warning">
+                ${this.supervisor.localize("common.reset_defaults")}
+              </mwc-list-item>
+            </ha-button-menu>
+          </div>
         </div>
-        <div class="card-actions">
-          <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </ha-progress-button>
+
+        <div class="card-content">
+          ${showForm
+            ? html`<ha-form
+                .data=${this._options!}
+                @value-changed=${this._configChanged}
+                .computeLabel=${this.computeLabel}
+                .schema=${this._showOptional
+                  ? this.addon.schema!
+                  : this._filteredShchema(
+                      this.addon.options,
+                      this.addon.schema!
+                    )}
+              ></ha-form>`
+            : html` <ha-yaml-editor
+                @value-changed=${this._configChanged}
+              ></ha-yaml-editor>`}
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${!this._yamlMode ||
+          (this._canShowSchema && this.addon.schema) ||
+          this._valid
+            ? ""
+            : html`
+                <div class="errors">
+                  ${this.supervisor.localize(
+                    "addon.configuration.options.invalid_yaml"
+                  )}
+                </div>
+              `}
+        </div>
+        ${hasHiddenOptions
+          ? html`<ha-formfield
+              class="show-additional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.options.show_unused_optional"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
+        <div class="card-actions right">
           <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !this._valid}
           >
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._canShowSchema = !this.addon.schema!.find(
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+    );
+    this._yamlMode = !this._canShowSchema;
+  }
+
   protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
     if (changedProperties.has("addon")) {
-      this._editor.setValue(this.addon.options);
+      this._options = { ...this.addon.options };
+    }
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("_yamlMode") ||
+      changedProperties.has("_options")
+    ) {
+      if (this._yamlMode) {
+        const editor = this._editor;
+        if (editor) {
+          editor.setValue(this._options!);
+        }
+      }
     }
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._yamlMode = !this._yamlMode;
+        break;
+      case 1:
+        this._resetTapped(ev);
+        break;
+    }
+  }
+
+  private _toggleOptional() {
+    this._showOptional = !this._showOptional;
+  }
+
   private _configChanged(ev): void {
-    this._configHasChanged = true;
-    this._valid = ev.detail.isValid;
+    if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
+      this._valid = true;
+      this._configHasChanged = true;
+      this._options! = ev.detail.value;
+    } else {
+      this._configHasChanged = true;
+      this._valid = ev.detail.isValid;
+    }
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -86,10 +230,10 @@ class HassioAddonConfig extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to reset all your options?",
-      confirmText: "reset options",
-      dismissText: "no",
+      title: this.supervisor.localize("confirm.reset_options.title"),
+      text: this.supervisor.localize("confirm.reset_options.text"),
+      confirmText: this.supervisor.localize("common.reset_options"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -111,9 +255,11 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.common.update_available",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
@@ -122,18 +268,13 @@ class HassioAddonConfig extends LitElement {
     const button = ev.currentTarget as any;
     button.progress = true;
 
-    let data: HassioAddonSetOptionParams;
     this._error = undefined;
+
     try {
-      data = {
-        options: this._editor.value,
-      };
-    } catch (err) {
-      this._error = err;
-      return;
-    }
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      await setHassioAddonOption(this.hass, this.addon.slug, {
+        options: this._yamlMode ? this._editor?.value : this._options,
+      });
+
       this._configHasChanged = false;
       const eventdata = {
         success: true,
@@ -142,12 +283,14 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.configuration.options.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
@@ -178,6 +321,36 @@ class HassioAddonConfig extends LitElement {
         .syntaxerror {
           color: var(--error-color);
         }
+        .card-menu {
+          float: right;
+          z-index: 3;
+          --mdc-theme-text-primary-on-background: var(--primary-text-color);
+        }
+        mwc-list-item[disabled] {
+          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
+        }
+        .header {
+          display: flex;
+          justify-content: space-between;
+        }
+        .header h2 {
+          color: var(--ha-card-header-color, --primary-text-color);
+          font-family: var(--ha-card-header-font-family, inherit);
+          font-size: var(--ha-card-header-font-size, 24px);
+          letter-spacing: -0.012em;
+          line-height: 48px;
+          padding: 12px 16px 16px;
+          display: block;
+          margin-block: 0px;
+          font-weight: normal;
+        }
+        .card-actions.right {
+          justify-content: flex-end;
+        }
+
+        .show-additional {
+          padding: 16px;
+        }
       `,
     ];
   }

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -19,6 +19,7 @@ import {
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -38,6 +39,8 @@ interface NetworkItemInput extends PaperInputElement {
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -55,16 +58,30 @@ class HassioAddonNetwork extends LitElement {
     }
 
     return html`
-      <ha-card header="Network">
+      <ha-card
+        .header=${this.supervisor.localize(
+          "addon.configuration.network.header"
+        )}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <table>
             <tbody>
               <tr>
-                <th>Container</th>
-                <th>Host</th>
-                <th>Description</th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize("common.description")}
+                </th>
               </tr>
               ${this._config!.map((item) => {
                 return html`
@@ -73,13 +90,15 @@ class HassioAddonNetwork extends LitElement {
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder="disabled"
+                        placeholder="${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}"
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>
                     </td>
-                    <td>${item.description}</td>
+                    <td>${this._computeDescription(item)}</td>
                   </tr>
                 `;
               })}
@@ -88,10 +107,10 @@ class HassioAddonNetwork extends LitElement {
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
+            ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
           <ha-progress-button @click=${this._saveTapped}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -105,6 +124,15 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
+  private _computeDescription = (item: NetworkItem): string => {
+    return (
+      this.addon.translations[this.hass.language]?.network?.[item.container]
+        ?.description ||
+      this.addon.translations.en?.network?.[item.container]?.description ||
+      item.description
+    );
+  };
+
   private _setNetworkConfig(): void {
     const network = this.addon.network || {};
     const description = this.addon.network_description || {};
@@ -147,12 +175,14 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_reset",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
 
     button.progress = false;
@@ -181,12 +211,14 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -1,3 +1,4 @@
+import "../../../../src/components/ha-card";
 import {
   css,
   CSSResult,
@@ -19,11 +20,14 @@ import "../../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -81,9 +85,11 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.documentation.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 }

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

@@ -9,17 +9,26 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import { navigate } from "../../../src/common/navigate";
+import { extractSearchParam } from "../../../src/common/url/search-params";
+import "../../../src/components/ha-circular-progress";
 import {
   fetchHassioAddonInfo,
+  fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import "../../../src/layouts/hass-error-screen";
+import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
-import "../../../src/components/ha-circular-progress";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -35,12 +44,16 @@ import "./log/hassio-addon-logs";
 class HassioAddonDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public route!: Route;
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
+  @internalProperty() _error?: string;
+
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
     return dividerPos === -1
@@ -55,13 +68,19 @@ class HassioAddonDashboard extends LitElement {
   });
 
   protected render(): TemplateResult {
+    if (this._error) {
+      return html`<hass-error-screen
+        .error=${this._error}
+      ></hass-error-screen>`;
+    }
+
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<hass-loading-screen></hass-loading-screen>`;
     }
 
     const addonTabs: PageNavigation[] = [
       {
-        name: "Info",
+        translationKey: "addon.panel.info",
         path: `/hassio/addon/${this.addon.slug}/info`,
         iconPath: mdiInformationVariant,
       },
@@ -69,7 +88,7 @@ class HassioAddonDashboard extends LitElement {
 
     if (this.addon.documentation) {
       addonTabs.push({
-        name: "Documentation",
+        translationKey: "addon.panel.documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
         iconPath: mdiFileDocument,
       });
@@ -78,12 +97,12 @@ class HassioAddonDashboard extends LitElement {
     if (this.addon.version) {
       addonTabs.push(
         {
-          name: "Configuration",
+          translationKey: "addon.panel.configuration",
           path: `/hassio/addon/${this.addon.slug}/config`,
           iconPath: mdiCogs,
         },
         {
-          name: "Log",
+          translationKey: "addon.panel.log",
           path: `/hassio/addon/${this.addon.slug}/logs`,
           iconPath: mdiMathLog,
         }
@@ -95,17 +114,19 @@ class HassioAddonDashboard extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
-        hassio
         .tabs=${addonTabs}
+        supervisor
       >
         <span slot="header">${this.addon.name}</span>
         <hassio-addon-router
           .route=${route}
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
       </hass-tabs-subpage>
@@ -152,30 +173,60 @@ class HassioAddonDashboard extends LitElement {
   }
 
   protected async firstUpdated(): Promise<void> {
-    await this._routeDataChanged(this.route);
+    if (this.route.path === "") {
+      const requestedAddon = extractSearchParam("addon");
+      if (requestedAddon) {
+        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+        const validAddon = addonsInfo.addons
+          .some((addon) => addon.slug === requestedAddon);
+        if (!validAddon) {
+          this._error = this.supervisor.localize("my.error_addon_not_found");
+        } else {
+          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+        }
+      }
+    }
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
   }
 
   private async _apiCalled(ev): Promise<void> {
-    const path: string = ev.detail.path;
+    const pathSplit: string[] = ev.detail.path?.split("/");
 
-    if (!path) {
+    if (!pathSplit || pathSplit.length === 0) {
       return;
     }
 
+    const path: string = pathSplit[pathSplit.length - 1];
+
+    if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "supervisor",
+      });
+    }
+
     if (path === "uninstall") {
-      history.back();
+      window.history.back();
     } else {
-      await this._routeDataChanged(this.route);
+      await this._routeDataChanged();
     }
   }
 
-  private async _routeDataChanged(routeData: Route): Promise<void> {
-    const addon = routeData.path.split("/")[1];
+  protected updated(changedProperties) {
+    if (changedProperties.has("route") && !this.addon) {
+      this._routeDataChanged();
+    }
+  }
+
+  private async _routeDataChanged(): Promise<void> {
+    const addon = this.route.path.split("/")[1];
+    if (!addon) {
+      return;
+    }
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch {
+    } catch (err) {
+      this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;
     }
   }

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

@@ -1,5 +1,6 @@
 import { customElement, property } from "lit-element";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
@@ -17,6 +18,8 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
@@ -41,6 +44,7 @@ class HassioAddonRouter extends HassRouterPage {
   protected updatePageEl(el) {
     el.route = this.routeTail;
     el.hass = this.hass;
+    el.supervisor = this.supervisor;
     el.addon = this.addon;
     el.narrow = this.narrow;
   }

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

@@ -7,8 +7,9 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import "../../../../src/components/ha-circular-progress";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -20,6 +21,8 @@ class HassioAddonInfoDashboard extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -32,6 +35,7 @@ class HassioAddonInfoDashboard extends LitElement {
         <hassio-addon-info
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-info>
       </div>

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -7,8 +7,9 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import "../../../../src/components/ha-circular-progress";
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -18,6 +19,8 @@ import "./hassio-addon-logs";
 class HassioAddonLogDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -28,6 +31,7 @@ class HassioAddonLogDashboard extends LitElement {
       <div class="content">
         <hassio-addon-logs
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-logs>
       </div>

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -15,6 +15,7 @@ import {
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -24,6 +25,8 @@ import { hassioStyle } from "../../resources/hassio-style";
 class HassioAddonLogs extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   @internalProperty() private _error?: string;
@@ -48,7 +51,9 @@ class HassioAddonLogs extends LitElement {
             : ""}
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
+          <mwc-button @click=${this._refresh}>
+            ${this.supervisor.localize("common.refresh")}
+          </mwc-button>
         </div>
       </ha-card>
     `;
@@ -76,7 +81,11 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
+      this._error = this.supervisor.localize(
+        "addon.logs.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 

hassio/src/components/hassio-card-content.ts

@@ -44,7 +44,7 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src="${this.iconImage}" title="${this.iconTitle}" />
+              <img src="${this.iconImage}" .title=${this.iconTitle} />
               <div></div>
             </div>
           `

hassio/src/components/hassio-upload-snapshot.ts

@@ -27,6 +27,8 @@ declare global {
   }
 }
 
+const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
+
 @customElement("hassio-upload-snapshot")
 export class HassioUploadSnapshot extends LitElement {
   public hass!: HomeAssistant;
@@ -51,6 +53,20 @@ export class HassioUploadSnapshot extends LitElement {
   private async _uploadFile(ev) {
     const file = ev.detail.files[0];
 
+    if (file.size > MAX_FILE_SIZE) {
+      showAlertDialog(this, {
+        title: "Snapshot file is too big",
+        text: html`The maximum allowed filesize is 1GB.<br />
+          <a
+            href="https://www.home-assistant.io/hassio/haos_common_tasks/#restoring-a-snapshot-on-a-new-install"
+            target="_blank"
+            >Have a look here on how to restore it.</a
+          >`,
+        confirmText: "ok",
+      });
+      return;
+    }
+
     if (!["application/x-tar"].includes(file.type)) {
       showAlertDialog(this, {
         title: "Unsupported file format",

hassio/src/components/supervisor-metric.ts

@@ -0,0 +1,87 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import "../../../src/components/ha-bar";
+import "../../../src/components/ha-settings-row";
+import { roundWithOneDecimal } from "../../../src/util/calculate";
+
+@customElement("supervisor-metric")
+class SupervisorMetric extends LitElement {
+  @property({ type: Number }) public value!: number;
+
+  @property({ type: String }) public description!: string;
+
+  @property({ type: String }) public tooltip?: string;
+
+  protected render(): TemplateResult {
+    const roundedValue = roundWithOneDecimal(this.value);
+    return html`<ha-settings-row>
+      <span slot="heading">
+        ${this.description}
+      </span>
+      <div slot="description" .title=${this.tooltip ?? ""}>
+        <span class="value">
+          ${roundedValue} %
+        </span>
+        <ha-bar
+          class="${classMap({
+            "target-warning": roundedValue > 50,
+            "target-critical": roundedValue > 85,
+          })}"
+          .value=${this.value}
+        ></ha-bar>
+      </div>
+    </ha-settings-row>`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-settings-row {
+        padding: 0;
+        height: 54px;
+        width: 100%;
+      }
+      ha-settings-row > div[slot="description"] {
+        white-space: normal;
+        color: var(--secondary-text-color);
+        display: flex;
+        justify-content: space-between;
+      }
+      ha-bar {
+        --ha-bar-primary-color: var(
+          --hassio-bar-ok-color,
+          var(--success-color)
+        );
+      }
+      .target-warning {
+        --ha-bar-primary-color: var(
+          --hassio-bar-warning-color,
+          var(--warning-color)
+        );
+      }
+      .target-critical {
+        --ha-bar-primary-color: var(
+          --hassio-bar-critical-color,
+          var(--error-color)
+        );
+      }
+      .value {
+        width: 42px;
+        padding-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-metric": SupervisorMetric;
+  }
+}

hassio/src/dashboard/hassio-addons.ts

@@ -12,7 +12,7 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { compare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
-import { HassioAddonInfo } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
@@ -22,26 +22,24 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddons extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addons?: HassioAddonInfo[];
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <h1>Add-ons</h1>
+        <h1>${this.supervisor.localize("dashboard.addons")}</h1>
         <div class="card-group">
-          ${!this.addons?.length
+          ${!this.supervisor.supervisor.addons?.length
             ? html`
                 <ha-card>
                   <div class="card-content">
-                    You don't have any add-ons installed yet. Head over to
                     <button class="link" @click=${this._openStore}>
-                      the add-on store
+                      ${this.supervisor.localize("dashboard.no_addons")}
                     </button>
-                    to get started!
                   </div>
                 </ha-card>
               `
-            : this.addons
+            : this.supervisor.supervisor.addons
                 .sort((a, b) => compare(a.name, b.name))
                 .map(
                   (addon) => html`
@@ -58,10 +56,16 @@ class HassioAddons extends LitElement {
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
-                            ? "Add-on is stopped"
+                            ? this.supervisor.localize(
+                                "dashboard.addon_stopped"
+                              )
                             : addon.update_available!
-                            ? "New version available"
-                            : "Add-on is running"}
+                            ? this.supervisor.localize(
+                                "dashboard.addon_new_version"
+                              )
+                            : this.supervisor.localize(
+                                "dashboard.addon_running"
+                              )}
                           .iconClass=${addon.update_available
                             ? addon.state === "started"
                               ? "update"

hassio/src/dashboard/hassio-dashboard.ts

@@ -7,11 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HassioHassOSInfo } from "../../../src/data/hassio/host";
-import {
-  HassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-} from "../../../src/data/hassio/supervisor";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -23,37 +19,34 @@ import "./hassio-update";
 class HassioDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
-
-  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
-
-  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
-
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        hassio
-        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Dashboard</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.dashboard")}
+        </span>
         <div class="content">
           <hassio-update
             .hass=${this.hass}
-            .hassInfo=${this.hassInfo}
-            .supervisorInfo=${this.supervisorInfo}
-            .hassOsInfo=${this.hassOsInfo}
+            .supervisor=${this.supervisor}
           ></hassio-update>
           <hassio-addons
             .hass=${this.hass}
-            .addons=${this.supervisorInfo.addons}
+            .supervisor=${this.supervisor}
           ></hassio-addons>
         </div>
       </hass-tabs-subpage>

hassio/src/dashboard/hassio-update.ts

@@ -10,56 +10,58 @@ import {
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import { atLeastVersion } from "../../../src/common/config/version";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import {
   extractApiErrorMessage,
   HassioResponse,
-  ignoredStatusCodes,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
+import {
+  Supervisor,
+  supervisorApiWsRequest,
+} from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
+const computeVersion = (key: string, version: string): string => {
+  return key === "os" ? version : `${key}-${version}`;
+};
+
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public hassInfo?: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
-
-  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
-
-  private _pendingUpdates = memoizeOne(
-    (
-      core?: HassioHomeAssistantInfo,
-      supervisor?: HassioSupervisorInfo,
-      os?: HassioHassOSInfo
-    ): number => {
-      return [core, supervisor, os].filter(
-        (value) => !!value && value?.update_available
-      ).length;
-    }
-  );
+  private _pendingUpdates = memoizeOne((supervisor: Supervisor): number => {
+    return Object.keys(supervisor).filter(
+      (value) => supervisor[value].update_available
+    ).length;
+  });
 
   protected render(): TemplateResult {
-    const updatesAvailable = this._pendingUpdates(
-      this.hassInfo,
-      this.supervisorInfo,
-      this.hassOsInfo
-    );
+    if (!this.supervisor) {
+      return html``;
+    }
 
+    const updatesAvailable = this._pendingUpdates(this.supervisor);
     if (!updatesAvailable) {
       return html``;
     }
@@ -67,33 +69,37 @@ export class HassioUpdate extends LitElement {
     return html`
       <div class="content">
         <h1>
-          ${updatesAvailable > 1
-            ? "Updates Available 🎉"
-            : "Update Available 🎉"}
+          ${this.supervisor.localize(
+            "common.update_available",
+            "count",
+            updatesAvailable
+          )}
+          🎉
         </h1>
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo!,
+            "core",
+            this.supervisor.core,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
+              this.supervisor.core.version_latest.includes("b") ? "rc" : "www"
             }.home-assistant.io/latest-release-notes/`
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo!,
+            "supervisor",
+            this.supervisor.supervisor,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${
-              this.supervisorInfo!.version_latest
-            }`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
           )}
-          ${this.hassOsInfo
+          ${this.supervisor.host.features.includes("hassos")
             ? this._renderUpdateCard(
                 "Operating System",
-                this.hassOsInfo,
+                "os",
+                this.supervisor.os,
                 "hassio/os/update",
-                `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
+                `https://github.com//home-assistant/hassos/releases/tag/${this.supervisor.os.version_latest}`
               )
             : ""}
         </div>
@@ -103,6 +109,7 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
+    key: string,
     object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
     releaseNotesUrl: string
@@ -116,22 +123,39 @@ export class HassioUpdate extends LitElement {
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
           </div>
-          <div class="update-heading">${name} ${object.version_latest}</div>
-          <div class="warning">
-            You are currently running version ${object.version}
-          </div>
+          <div class="update-heading">${name}</div>
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version!)}
+            </span>
+          </ha-settings-row>
+
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.newest_version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version_latest!)}
+            </span>
+          </ha-settings-row>
         </div>
         <div class="card-actions">
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
-            <mwc-button>Release notes</mwc-button>
+            <mwc-button>
+              ${this.supervisor.localize("common.release_notes")}
+            </mwc-button>
           </a>
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
+            .key=${key}
             .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
-            Update
+            ${this.supervisor.localize("common.update")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -140,12 +164,36 @@ export class HassioUpdate extends LitElement {
 
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
+    if (item.key === "core") {
+      showDialogSupervisorUpdate(this, {
+        supervisor: this.supervisor,
+        name: "Home Assistant Core",
+        version: this.supervisor.core.version_latest,
+        snapshotParams: {
+          name: `core_${this.supervisor.core.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        },
+        updateHandler: async () => this._updateCore(),
+      });
+      return;
+    }
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
-      title: `Update ${item.name}`,
-      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
-      confirmText: "update",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.update.title",
+        "name",
+        item.name
+      ),
+      text: this.supervisor.localize(
+        "confirm.update.text",
+        "name",
+        item.name,
+        "version",
+        computeVersion(item.key, item.version)
+      ),
+      confirmText: this.supervisor.localize("common.update"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -153,13 +201,24 @@ export class HassioUpdate extends LitElement {
       return;
     }
     try {
-      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+      if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
+        await supervisorApiWsRequest(this.hass.connection, {
+          method: "post",
+          endpoint: item.apiPath.replace("hassio", ""),
+          timeout: null,
+        });
+      } else {
+        await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+      }
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: item.key,
+      });
     } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
-      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
-          title: "Update failed",
+          title: this.supervisor.localize("common.error.update_failed"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -167,6 +226,13 @@ export class HassioUpdate extends LitElement {
     item.progress = false;
   }
 
+  private async _updateCore(): Promise<void> {
+    await updateCore(this.hass);
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "core",
+    });
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,
@@ -184,9 +250,6 @@ export class HassioUpdate extends LitElement {
           margin-bottom: 0.5em;
           color: var(--primary-text-color);
         }
-        .warning {
-          color: var(--secondary-text-color);
-        }
         .card-content {
           height: calc(100% - 47px);
           box-sizing: border-box;
@@ -194,13 +257,13 @@ export class HassioUpdate extends LitElement {
         .card-actions {
           text-align: right;
         }
-        .errors {
-          color: var(--error-color);
-          padding: 16px;
-        }
         a {
           text-decoration: none;
         }
+        ha-settings-row {
+          padding: 0;
+          --paper-item-body-two-line-min-height: 32px;
+        }
       `,
     ];
   }

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

@@ -3,9 +3,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";

hassio/src/dialogs/markdown/show-dialog-hassio-markdown.ts

@@ -11,10 +11,7 @@ export const showHassioMarkdownDialog = (
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-hassio-markdown",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "dialog-hassio-markdown" */ "./dialog-hassio-markdown"
-      ),
+    dialogImport: () => import("./dialog-hassio-markdown"),
     dialogParams,
   });
 };