Add active property

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

@@ -5,39 +5,30 @@
     "context": ".."
   },
   "appPort": "8124:8123",
+  "context": "..",
   "postCreateCommand": "script/bootstrap",
-  "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
-  },
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "runem.lit-plugin",
-        "github.vscode-pull-request-github",
-        "eamodio.gitlens"
-      ],
-      "settings": {
-        "files.eol": "\n",
-        "editor.tabSize": 2,
-        "editor.formatOnPaste": false,
-        "editor.formatOnSave": true,
-        "editor.formatOnType": true,
-        "editor.renderWhitespace": "boundary",
-        "editor.rulers": [80],
-        "[typescript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode"
-        },
-        "[javascript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode"
-        },
-        "files.trimTrailingWhitespace": true,
-        "terminal.integrated.shell.linux": "/usr/bin/zsh",
-        "gitlens.showWelcomeOnInstall": false,
-        "gitlens.showWhatsNewAfterUpgrades": false,
-        "workbench.startupEditor": "none"
-      }
-    }
+  "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
   }
 }

.eslintrc.json

@@ -5,7 +5,6 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/all",
-    "plugin:lit-a11y/recommended",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -66,10 +65,7 @@
     "import/extensions": [
       "error",
       "ignorePackages",
-      {
-        "ts": "never",
-        "js": "never"
-      }
+      { "ts": "never", "js": "never" }
     ],
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "object-curly-newline": "off",
@@ -116,15 +112,7 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off",
-    "lit/no-native-attributes": "warn",
-    "lit/no-this-assign-in-render": "warn",
-    "lit/prefer-nothing": "warn",
-    "lit-a11y/click-events-have-key-events": ["off"],
-    "lit-a11y/no-autofocus": "off",
-    "lit-a11y/alt-text": "warn",
-    "lit-a11y/anchor-is-valid": "warn",
-    "lit-a11y/role-has-required-aria-attrs": "warn"
+    "lit/no-template-map": "off"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Settings -> About.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         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 cards.**
+        **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
@@ -64,7 +64,7 @@ body:
       label: What version of Home Assistant Core has the issue?
       placeholder: core-
       description: >
-        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
+        Can be found in the Configuration panel -> Info.
   - type: input
     attributes:
       label: What was the last working version of Home Assistant Core?

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI / Dashboards
+  - name: Request a feature for the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI / Dashboards
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

.github/dependabot.yml

@@ -1,21 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: weekly
-      time: "06:00"
-    open-pull-requests-limit: 10
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"
-      time: "03:00"
-    open-pull-requests-limit: 10
-    labels:
-      - "dependencies"
-    ignore:
-      # Ignore rollup and plugins until everything else is updated
-      - dependency-name: "*rollup*"
-      - dependency-name: "@rollup/*"
-      - dependency-name: "serve"

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

@@ -11,87 +11,86 @@ on:
       - master
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 14
   NODE_OPTIONS: --max_old_space_size=6144
-  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
 
 jobs:
   lint:
-    name: Lint and check format
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
-      - name: Check for duplicate dependencies
-        run: yarn dedupe --check
+        run: yarn install
+        env:
+          CI: true
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-demos
       - name: Run eslint
-        run: yarn run lint:eslint --quiet
+        run: yarn run lint:eslint
       - name: Run tsc
         run: yarn run lint:types
       - name: Run prettier
         run: yarn run lint:prettier
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
   test:
-    name: Run tests
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build resources
         run: ./node_modules/.bin/gulp build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
-    name: Build frontend
-    needs: [lint, test]
     runs-on: ubuntu-latest
+    needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build Application
         run: ./node_modules/.bin/gulp build-app
         env:
           IS_TEST: "true"
   supervisor:
-    name: Build supervisor
-    needs: [lint, test]
     runs-on: ubuntu-latest
+    needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v2
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn install
+        env:
+          CI: true
       - name: Build Application
         run: ./node_modules/.bin/gulp build-hassio
         env:

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3.3.0
+      uses: actions/checkout@v2
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v1
       with:
         languages: ${{ matrix.language }}
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      uses: github/codeql-action/autobuild@v1
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v1

.github/workflows/demo.yaml

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

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

@@ -1,52 +0,0 @@
-name: Design preview
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - labeled
-    branches:
-      - dev
-
-env:
-  NODE_VERSION: 16
-  NODE_OPTIONS: --max_old_space_size=6144
-
-jobs:
-  preview:
-    runs-on: ubuntu-latest
-    # Skip running on forks since it won't have access to secrets
-    # Skip running PRs without 'needs design preview' label
-    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
-    steps:
-      - name: Check out files from GitHub
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install --immutable
-
-      - name: Build Gallery
-        run: ./node_modules/.bin/gulp build-gallery
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Deploy preview to Netlify
-        id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}"
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
-
-      - name: Generate summary
-        run: |
-          echo "${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/lock.yml

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

.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/nightly.yaml

@@ -1,72 +0,0 @@
-name: Nightly
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "0 1 * * *"
-
-env:
-  PYTHON_VERSION: "3.10"
-  NODE_VERSION: 16
-  NODE_OPTIONS: --max_old_space_size=6144
-
-permissions:
-  actions: none
-
-jobs:
-  nightly:
-    name: Nightly
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
-        with:
-          python-version: ${{ env.PYTHON_VERSION }}
-
-      - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Download translations
-        run: ./script/translations_download
-        env:
-          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
-      - name: Bump version
-        run: script/version_bump.js nightly
-
-      - name: Build nightly Python wheels
-        run: |
-          pip install build
-          yarn install
-          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
-          script/build_frontend
-          rm -rf dist home_assistant_frontend.egg-info
-          python3 -m build
-
-      - name: Archive translations
-        run: tar -czvf translations.tar.gz translations
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          name: wheels
-          path: dist/home_assistant_frontend*.whl
-          if-no-files-found: error
-
-      - name: Upload translations
-        uses: actions/upload-artifact@v3
-        with:
-          name: translations
-          path: translations.tar.gz
-          if-no-files-found: error

.github/workflows/release.yaml

@@ -6,36 +6,28 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.10"
-  NODE_VERSION: 16
+  PYTHON_VERSION: 3.8
+  NODE_VERSION: 14
   NODE_OPTIONS: --max_old_space_size=6144
 
-# Set default workflow permissions
-# All scopes not mentioned here are set to no access
-# https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token
-permissions:
-  actions: none
-
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
-    permissions:
-      contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.3.0
+        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@v4
+        uses: actions/setup-python@v2
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -49,18 +41,11 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
+          python3 -m pip install twine
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
-          export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
-          script/release
 
-      - name: Upload release assets
-        uses: softprops/action-gh-release@v0.1.15
-        with:
-          files: |
-            dist/*.whl
-            dist/*.tar.gz
+          script/release
 
   wheels-init:
     name: Init wheels build
@@ -74,11 +59,33 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      - name: Build wheels
-        uses: home-assistant/wheels@2022.10.1
+      - name: Upload requirements.txt
+        uses: actions/upload-artifact@v2
         with:
-          abi: cp310
-          tag: musllinux_1_2
-          arch: amd64
+          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"]
+        tag:
+          - "3.9-alpine3.14"
+    steps:
+      - name: Download requirements.txt
+        uses: actions/download-artifact@v2
+        with:
+          name: requirements
+
+      - name: Build wheels
+        uses: home-assistant/wheels@master
+        with:
+          tag: ${{ matrix.tag }}
+          arch: ${{ matrix.arch }}
+          wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}
+          wheels-user: wheels
           requirements: "requirements.txt"

.github/workflows/stale.yml

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

.github/workflows/translations.yaml

@@ -8,7 +8,7 @@ on:
       - src/translations/en.json
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 14
 
 jobs:
   upload:
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v2
 
       - name: Upload Translations
         run: |

.gitignore

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

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-yarn run lint-staged --relative --shell "/bin/bash"

.nvmrc

@@ -1 +1 @@
-16
+14

.vscode/extensions.json

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

.vscode/tasks.json

@@ -181,7 +181,7 @@
     {
       "label": "Run HA Core for Supervisor in devcontainer",
       "type": "shell",
-      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
+      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
       "isBackground": true,
       "group": {
         "kind": "build",
@@ -191,13 +191,7 @@
       "runOptions": {
         "instanceLimit": 1
       }
-    },
-    {
-      "label": "Setup and fetch nightly translations",
-      "type": "gulp",
-      "task": "setup-and-fetch-nightly-translations",
-      "problemMatcher": []
-          }
+    }
   ],
   "inputs": [
     {

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

@@ -0,0 +1,29 @@
+diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
+--- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
++++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+@@ -1,14 +1,15 @@
+-let _ET, ET;
++let _ET;
++let ET;
+ export default async function EventTarget() {
+-    return ET || init();
++  return ET || init();
+ }
+ async function init() {
+-    _ET = window.EventTarget;
+-    try {
+-        new _ET();
+-    }
+-    catch (_a) {
+-        _ET = (await import('event-target-shim')).EventTarget;
+-    }
+-    return (ET = _ET);
++  _ET = window.EventTarget;
++  try {
++    new _ET();
++  } catch (_a) {
++    _ET = (await import("event-target-shim")).default.EventTarget;
++  }
++  return (ET = _ET);
+ }

.yarnrc.yml

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

MANIFEST.in

@@ -1,4 +1,5 @@
 include README.md
+include LICENSE.md
 graft hass_frontend
 graft hass_frontend_es5
 recursive-exclude * *.py[co]

README.md

@@ -2,7 +2,7 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)

build-scripts/.eslintrc

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

build-scripts/.eslintrc.json

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

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

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

build-scripts/bundle.js

@@ -1,16 +1,16 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
-// eslint-disable-next-line unused-imports/no-unused-vars
 module.exports.ignorePackages = ({ latestBuild }) => [
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
+module.exports.emptyPackages = ({ latestBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,15 +28,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       ),
     // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
-    // Icons in supervisor conflict with icons in HA so we don't load.
-    isHassioBuild &&
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
-      ),
-    isHassioBuild &&
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
-      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -67,7 +58,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: "entry",
-        corejs: { version: "3.28", proposals: true },
+        corejs: "3.15",
         bugfixes: true,
       },
     ],
@@ -174,7 +165,6 @@ module.exports.config = {
   cast({ isProdBuild, latestBuild }) {
     const entry = {
       launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
-      media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
     };
 
     if (latestBuild) {
@@ -205,7 +195,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
-      isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
       },

build-scripts/env.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.js");
@@ -25,11 +26,11 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
-      .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+      .match(/\d{8}\.\d+/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[1];
+    return version[0];
   },
 };

build-scripts/gulp/clean.js

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

build-scripts/gulp/download_translations.js

@@ -1,12 +1,17 @@
+const del = require("del");
 const gulp = require("gulp");
-const fs = require("fs/promises");
+const fs = require("fs");
 const mapStream = require("map-stream");
 
 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";
+const downloadDir = "translations/downloads";
 const srcMeta = "src/translations/translationMetadata.json";
+
 const encoding = "utf8";
 
+const tasks = [];
+
 function hasHtml(data) {
   return /<[a-z][\s\S]*>/i.test(data);
 }
@@ -41,29 +46,50 @@ function checkHtml() {
   });
 }
 
-// Backend translations do not currently pass HTML check so are excluded here for now
-gulp.task("check-translations-html", function () {
-  return gulp.src([`${inDirFrontend}/*.json`]).pipe(checkHtml());
+let taskName = "clean-downloaded-translations";
+gulp.task(taskName, function () {
+  return del([`${downloadDir}/**`]);
 });
+tasks.push(taskName);
 
-gulp.task("check-all-files-exist", async function () {
-  const file = await fs.readFile(srcMeta, { encoding });
+taskName = "check-translations-html";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
+});
+tasks.push(taskName);
+
+taskName = "check-all-files-exist";
+gulp.task(taskName, function () {
+  const file = fs.readFileSync(srcMeta, { encoding });
   const meta = JSON.parse(file);
-  const writings = [];
   Object.keys(meta).forEach((lang) => {
-    writings.push(
-      fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
-        flag: "wx",
-      }),
-      fs.writeFile(`${inDirBackend}/${lang}.json`, JSON.stringify({}), {
-        flag: "wx",
-      })
-    );
+    if (!fs.existsSync(`${inDirFrontend}/${lang}.json`)) {
+      fs.writeFileSync(`${inDirFrontend}/${lang}.json`, JSON.stringify({}));
+    }
+    if (!fs.existsSync(`${inDirBackend}/${lang}.json`)) {
+      fs.writeFileSync(`${inDirBackend}/${lang}.json`, JSON.stringify({}));
+    }
   });
-  await Promise.allSettled(writings);
+  return Promise.resolve();
 });
+tasks.push(taskName);
 
+taskName = "move-downloaded-translations";
+gulp.task(taskName, function () {
+  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDirFrontend));
+});
+tasks.push(taskName);
+
+taskName = "check-downloaded-translations";
 gulp.task(
-  "check-downloaded-translations",
-  gulp.series("check-translations-html", "check-all-files-exist")
+  taskName,
+  gulp.series(
+    "check-translations-html",
+    "move-downloaded-translations",
+    "check-all-files-exist",
+    "clean-downloaded-translations"
+  )
 );
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/entry-html.js

@@ -1,4 +1,6 @@
 // Tasks to generate entry HTML
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
 const gulp = require("gulp");
 const fs = require("fs-extra");
 const path = require("path");
@@ -89,9 +91,7 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
-  let latestAppJS;
-  let latestCoreJS;
-  let latestCustomPanelJS;
+  let latestAppJS, latestCoreJS, latestCustomPanelJS;
 
   if (env.useWDS()) {
     latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
@@ -154,15 +154,6 @@ gulp.task("gen-index-cast-dev", (done) => {
     contentReceiver
   );
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: "/frontend_latest/media.js",
-    es5MediaJS: "/frontend_es5/media.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
@@ -201,15 +192,6 @@ gulp.task("gen-index-cast-prod", (done) => {
     contentReceiver
   );
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: latestManifest["media.js"],
-    es5MediaJS: es5Manifest["media.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
   const contentFAQ = renderCastTemplate("launcher-faq", {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],

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

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

build-scripts/gulp/gallery.js

@@ -2,9 +2,6 @@
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
-const { marked } = require("marked");
-const glob = require("glob");
-const yaml = require("js-yaml");
 
 const env = require("../env");
 const paths = require("../paths");
@@ -18,129 +15,26 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
 
-gulp.task("gather-gallery-pages", async function gatherPages() {
-  const pageDir = path.resolve(paths.gallery_dir, "src/pages");
-  const files = glob.sync(path.resolve(pageDir, "**/*"));
+gulp.task("gather-gallery-demos", async function gatherDemos() {
+  const files = await fs.promises.readdir(
+    path.resolve(paths.gallery_dir, "src/demos")
+  );
 
-  const galleryBuild = path.resolve(paths.gallery_dir, "build");
-  fs.mkdirSync(galleryBuild, { recursive: true });
-
-  let content = "export const PAGES = {\n";
-
-  const processed = new Set();
+  let content = "export const DEMOS = {\n";
 
   for (const file of files) {
-    if (fs.lstatSync(file).isDirectory()) {
-      continue;
-    }
-    const pageId = file.substring(pageDir.length + 1, file.lastIndexOf("."));
-
-    if (processed.has(pageId)) {
-      continue;
-    }
-    processed.add(pageId);
-
-    const [category] = pageId.split("/", 2);
-
-    const demoFile = path.resolve(pageDir, `${pageId}.ts`);
-    const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);
-    const hasDemo = fs.existsSync(demoFile);
-    let hasDescription = fs.existsSync(descriptionFile);
-    let metadata = {};
-    if (hasDescription) {
-      let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
-
-      if (descriptionContent.startsWith("---")) {
-        const metadataEnd = descriptionContent.indexOf("---", 3);
-        metadata = yaml.load(descriptionContent.substring(3, metadataEnd));
-        descriptionContent = descriptionContent
-          .substring(metadataEnd + 3)
-          .trim();
-      }
-
-      // If description is just metadata
-      if (descriptionContent === "") {
-        hasDescription = false;
-      } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
-        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
-        fs.writeFileSync(
-          path.resolve(galleryBuild, `${pageId}-description.ts`),
-          `
-          import {html} from "lit";
-          export default html\`${descriptionContent}\`
-          `
-        );
-      }
-    }
-    content += `  "${pageId}": {
-      metadata: ${JSON.stringify(metadata)},
-      ${
-        hasDescription
-          ? `description: () => import("./${pageId}-description").then(m => m.default),`
-          : ""
-      }
-      ${hasDemo ? `demo: () => import("../src/pages/${pageId}")` : ""}
-
-    },\n`;
+    const demoId = path.basename(file, ".ts");
+    const demoPath = "../src/demos/" + demoId;
+    content += `  "${demoId}": () => import("${demoPath}"),\n`;
   }
 
-  content += "};\n";
+  content += "};";
 
-  // Generate sidebar
-  const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js");
-  // To make watch work during development
-  delete require.cache[sidebarPath];
-  const sidebar = require(sidebarPath);
-
-  const pagesToProcess = {};
-  for (const key of processed) {
-    const [category, page] = key.split("/", 2);
-    if (!(category in pagesToProcess)) {
-      pagesToProcess[category] = new Set();
-    }
-    pagesToProcess[category].add(page);
-  }
-
-  for (const group of Object.values(sidebar)) {
-    const toProcess = pagesToProcess[group.category];
-    delete pagesToProcess[group.category];
-
-    if (!toProcess) {
-      console.error("Unknown category", group.category);
-      if (!group.pages) {
-        group.pages = [];
-      }
-      continue;
-    }
-
-    // Any pre-defined groups will not be sorted.
-    if (group.pages) {
-      for (const page of group.pages) {
-        if (!toProcess.delete(page)) {
-          console.error("Found unreferenced demo", page);
-        }
-      }
-    } else {
-      group.pages = [];
-    }
-    for (const page of Array.from(toProcess).sort()) {
-      group.pages.push(page);
-    }
-  }
-
-  for (const [category, pages] of Object.entries(pagesToProcess)) {
-    sidebar.push({
-      category,
-      header: category,
-      pages: Array.from(pages).sort(),
-    });
-  }
-
-  content += `export const SIDEBAR = ${JSON.stringify(sidebar, null, 2)};\n`;
+  const galleryBuild = path.resolve(paths.gallery_dir, "build");
 
+  fs.mkdirSync(galleryBuild, { recursive: true });
   fs.writeFileSync(
-    path.resolve(galleryBuild, "import-pages.ts"),
+    path.resolve(galleryBuild, "import-demos.ts"),
     content,
     "utf-8"
   );
@@ -158,24 +52,11 @@ gulp.task(
       "gen-icons-json",
       "build-translations",
       "build-locale-data",
-      "gather-gallery-pages"
+      "gather-gallery-demos"
     ),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    gulp.parallel(
-      env.useRollup()
-        ? "rollup-dev-server-gallery"
-        : "webpack-dev-server-gallery",
-      async function watchMarkdownFiles() {
-        gulp.watch(
-          [
-            path.resolve(paths.gallery_dir, "src/pages/**/*.markdown"),
-            path.resolve(paths.gallery_dir, "sidebar.js"),
-          ],
-          gulp.series("gather-gallery-pages")
-        );
-      }
-    )
+    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
   )
 );
 
@@ -191,7 +72,7 @@ gulp.task(
       "gen-icons-json",
       "build-translations",
       "build-locale-data",
-      "gather-gallery-pages"
+      "gather-gallery-demos"
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",

build-scripts/gulp/gather-static.js

@@ -79,11 +79,6 @@ function copyFonts(staticDir) {
   );
 }
 
-function copyQrScannerWorker(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
-}
-
 function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
@@ -130,9 +125,6 @@ gulp.task("copy-static-app", async () => {
 
   // Panel assets
   copyMapPanel(staticDir);
-
-  // Qr Scanner assets
-  copyQrScannerWorker(staticDir);
 });
 
 gulp.task("copy-static-demo", async () => {

build-scripts/gulp/gen-icons-json.js

@@ -26,7 +26,6 @@ const getMeta = () => {
       path: svg.match(/ d="([^"]+)"/)[1],
       name: icon.name,
       tags: icon.tags,
-      aliases: icon.aliases,
     };
   });
 };
@@ -38,7 +37,6 @@ const addRemovedMeta = (meta) => {
     path: removeIcon.path,
     name: removeIcon.name,
     tags: [],
-    aliases: [],
   }));
   const combinedMeta = [...meta, ...removedMeta];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
@@ -143,25 +141,8 @@ gulp.task("gen-icons-json", (done) => {
 
   fs.writeFileSync(
     path.resolve(OUTPUT_DIR, "iconList.json"),
-    JSON.stringify(
-      orderMeta(meta).map((icon) => ({
-        name: icon.name,
-        keywords: [
-          ...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
-          ...icon.aliases,
-        ],
-      }))
-    )
+    JSON.stringify(orderMeta(meta).map((icon) => icon.name))
   );
 
   done();
 });
-
-gulp.task("gen-dummy-icons-json", (done) => {
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
-  }
-
-  fs.writeFileSync(path.resolve(OUTPUT_DIR, "iconList.json"), "[]");
-  done();
-});

build-scripts/gulp/hassio.js

@@ -9,7 +9,6 @@ require("./compress.js");
 require("./rollup.js");
 require("./gather-static.js");
 require("./translations.js");
-require("./gen-icons-json.js");
 
 gulp.task(
   "develop-hassio",
@@ -18,7 +17,6 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
@@ -35,7 +33,6 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-dummy-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",

build-scripts/gulp/locale-data.js

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

build-scripts/gulp/rollup.js

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

build-scripts/gulp/service-worker.js

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

build-scripts/gulp/translations.js

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

build-scripts/gulp/webpack.js

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

build-scripts/paths.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {
@@ -25,7 +26,6 @@ module.exports = {
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_build: path.resolve(__dirname, "../gallery/build"),
   gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
   gallery_output_latest: path.resolve(
     __dirname,

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

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

build-scripts/rollup.js

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

build-scripts/util.js

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

build-scripts/webpack.js

@@ -1,12 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const CompressionWebpackPlugin = require("compression-webpack-plugin");
-const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -30,7 +30,6 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
-  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -76,8 +75,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new CompressionWebpackPlugin(),
-      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
+      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -104,6 +102,7 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,
@@ -118,9 +117,7 @@ const createWebpackConfig = ({
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -138,8 +135,6 @@ const createWebpackConfig = ({
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
-        "@lit-labs/virtualizer/layouts/grid":
-          "@lit-labs/virtualizer/layouts/grid.js",
       },
     },
     output: {

cast/public/_redirects

@@ -1,9 +0,0 @@
-# These redirects are handled by Netlify
-#
-
-# Some custom cards are not prefixing the instance URL when fetching data
-# and can end up fetching the data from the Cast domain instead of HA.
-# This will make sure that some common ones are replaced with a placeholder.
-/api/camera_proxy/* /images/google-nest-hub.png
-/api/camera_proxy_stream/* /images/google-nest-hub.png
-/api/media_player_proxy/* /images/google-nest-hub.png

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

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

cast/src/html/media.html.template

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-    <style>
-      body {
-        --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-        --logo-repeat: no-repeat;
-        --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-        --theme-hue: 200;
-        --progress-color: #03a9f4;
-        --splash-image: url('https://home-assistant.io/images/cast/splash.png');
-        --splash-size: cover;
-        --background-color: #41bdf5;
-      }
-    </style>
-    <script>
-      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-      s.parentNode.insertBefore(g,s)}(document,'script'));
-    </script>
-  </head>
-  <body>
-    <%= renderTemplate('_js_base') %>
-
-    <cast-media-player></cast-media-player>
-
-    <script>
-      import("<%= latestMediaJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5MediaJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5MediaJS %>");
-        <% } %>
-      }
-    </script>
-  </body>
-</html>

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

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

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

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

cast/src/media/entrypoint.ts

@@ -1,22 +0,0 @@
-const castContext = cast.framework.CastReceiverContext.getInstance();
-
-const playerManager = castContext.getPlayerManager();
-
-playerManager.setMessageInterceptor(
-  cast.framework.messages.MessageType.LOAD,
-  (loadRequestData) => {
-    const media = loadRequestData.media;
-    // Special handling if it came from Google Assistant
-    if (media.entity) {
-      media.contentId = media.entity;
-      media.streamType = cast.framework.messages.StreamType.LIVE;
-      media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
-      media.hlsVideoSegmentFormat =
-        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
-    }
-    return loadRequestData;
-  }
-);
-
-castContext.start();

cast/src/receiver/entrypoint.ts

@@ -8,9 +8,6 @@ import { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
-lovelaceController.addEventListener("cast-view-changed", (ev) => {
-  playDummyMedia(ev.detail.title);
-});
 
 const mediaPlayer = document.createElement("cast-media-player");
 mediaPlayer.style.display = "none";
@@ -31,31 +28,6 @@ const setTouchControlsVisibility = (visible: boolean) => {
   }
 };
 
-let timeOut: number | undefined;
-
-const playDummyMedia = (viewTitle?: string) => {
-  const loadRequestData = new cast.framework.messages.LoadRequestData();
-  loadRequestData.autoplay = true;
-  loadRequestData.media = new cast.framework.messages.MediaInformation();
-  loadRequestData.media.contentId =
-    "https://cast.home-assistant.io/images/google-nest-hub.png";
-  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
-  const metadata = new cast.framework.messages.GenericMediaMetadata();
-  metadata.title = viewTitle;
-  loadRequestData.media.metadata = metadata;
-
-  loadRequestData.requestId = 0;
-  playerManager.load(loadRequestData);
-  if (timeOut) {
-    clearTimeout(timeOut);
-    timeOut = undefined;
-  }
-  if (castContext.getDeviceCapabilities().touch_input_supported) {
-    timeOut = window.setTimeout(() => playDummyMedia(viewTitle), 540000); // repeat every 9 minutes to keep it active (gets deactivated after 10 minutes)
-  }
-};
-
 const showLovelaceController = () => {
   mediaPlayer.style.display = "none";
   lovelaceController.style.display = "initial";
@@ -79,7 +51,6 @@ const showMediaPlayer = () => {
       --progress-color: #03a9f4;
       --splash-image: url('https://home-assistant.io/images/cast/splash.png');
       --splash-size: cover;
-      --background-color: #41bdf5;
     }
     `;
     document.head.appendChild(style);
@@ -92,6 +63,22 @@ options.customNamespaces = {
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
+// The docs say we need to set options.touchScreenOptimizeApp = true
+// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
+// This doesn't work.
+// @ts-ignore
+options.touchScreenOptimizedApp = true;
+
+// The class reference say we can set a uiConfig in options to set it
+// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
+// This doesn't work either.
+// @ts-ignore
+options.uiConfig = new cast.framework.ui.UiConfig();
+// @ts-ignore
+options.uiConfig.touchScreenOptimizedApp = true;
+
+castContext.setInactivityTimeout(86400); // 1 day
+
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
@@ -116,12 +103,6 @@ const playerManager = castContext.getPlayerManager();
 playerManager.setMessageInterceptor(
   cast.framework.messages.MessageType.LOAD,
   (loadRequestData) => {
-    if (
-      loadRequestData.media.contentId ===
-      "https://cast.home-assistant.io/images/google-nest-hub.png"
-    ) {
-      return loadRequestData;
-    }
     // We received a play media command, hide Lovelace and show media player
     showMediaPlayer();
     const media = loadRequestData.media;

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

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

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

@@ -1,15 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { customElement, property } from "lit/decorators";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
-(window as any).loadCardHelpers = () =>
-  import("../../../../src/panels/lovelace/custom-card-helpers");
-
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -18,9 +14,7 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  @property() public urlPath: string | null = null;
-
-  @query("hui-view") private _huiView?: HTMLElement;
+  public urlPath?: string | null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -36,7 +30,7 @@ class HcLovelace extends LitElement {
       config: this.lovelaceConfig,
       rawConfig: this.lovelaceConfig,
       editMode: false,
-      urlPath: this.urlPath,
+      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       locale: this.hass.locale,
@@ -60,32 +54,17 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
-
-        const viewTitle =
-          this.lovelaceConfig.views[index].title ||
-          this.lovelaceConfig.views[index].path;
-
-        fireEvent(this, "cast-view-changed", {
-          title:
-            dashboardTitle || viewTitle
-              ? `${dashboardTitle || ""}${
-                  dashboardTitle && viewTitle ? ": " : ""
-                }${viewTitle || ""}`
-              : undefined,
-        });
-
         const configBackground =
           this.lovelaceConfig.views[index].background ||
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this._huiView!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
-        } else {
-          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -118,22 +97,12 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
-      hui-view {
-        background: var(--lovelace-background, var(--primary-background-color));
-      }
     `;
   }
 }
 
-export interface CastViewChanged {
-  title: string | undefined;
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     "hc-lovelace": HcLovelace;
   }
-  interface HASSDomEvents {
-    "cast-view-changed": CastViewChanged;
-  }
 }

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

@@ -13,11 +13,7 @@ import {
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import {
-  ReceiverErrorCode,
-  ReceiverErrorMessage,
-  ReceiverStatusMessage,
-} from "../../../../src/cast/sender_messages";
+import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
@@ -33,6 +29,7 @@ import { castContext } from "../cast_context";
 import "./hc-launch-screen";
 
 let resourcesLoaded = false;
+
 @customElement("hc-main")
 export class HcMain extends HassElement {
   @state() private _showDemo = false;
@@ -43,12 +40,10 @@ export class HcMain extends HassElement {
 
   @state() private _error?: string;
 
-  @state() private _urlPath?: string | null;
-
-  private _hassUUID?: string;
-
   private _unsubLovelace?: UnsubscribeFunc;
 
+  private _urlPath?: string | null;
+
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
       this._handleConnectMessage(msg);
@@ -73,10 +68,8 @@ export class HcMain extends HassElement {
       !this._lovelaceConfig ||
       this._lovelacePath === null ||
       // Guard against part of HA not being loaded yet.
-      !this.hass ||
-      !this.hass.states ||
-      !this.hass.config ||
-      !this.hass.services
+      (this.hass &&
+        (!this.hass.states || !this.hass.config || !this.hass.services))
     ) {
       return html`
         <hc-launch-screen
@@ -114,7 +107,6 @@ export class HcMain extends HassElement {
         this._sendStatus();
       }
     });
-    this.addEventListener("dialog-closed", this._dialogClosed);
   }
 
   private _sendStatus(senderId?: string) {
@@ -126,8 +118,7 @@ export class HcMain extends HassElement {
 
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
-      status.hassUUID = this._hassUUID;
-      status.lovelacePath = this._lovelacePath;
+      status.lovelacePath = this._lovelacePath!;
       status.urlPath = this._urlPath;
     }
 
@@ -140,43 +131,7 @@ export class HcMain extends HassElement {
     }
   }
 
-  private _sendError(
-    error_code: number,
-    error_message: string,
-    senderId?: string
-  ) {
-    const error: ReceiverErrorMessage = {
-      type: "receiver_error",
-      error_code,
-      error_message,
-    };
-
-    if (senderId) {
-      this.sendMessage(senderId, error);
-    } else {
-      for (const sender of castContext.getSenders()) {
-        this.sendMessage(sender.id, error);
-      }
-    }
-  }
-
-  private _dialogClosed = () => {
-    document.body.setAttribute("style", "overflow-y: auto !important");
-  };
-
   private async _handleGetStatusMessage(msg: GetStatusMessage) {
-    if (
-      (this.hass && msg.hassUUID && msg.hassUUID !== this._hassUUID) ||
-      (this.hass && msg.hassUrl && msg.hassUrl !== this.hass.auth.data.hassUrl)
-    ) {
-      this._error = "Not connected to the same Home Assistant instance.";
-      this._sendError(
-        ReceiverErrorCode.WRONG_INSTANCE,
-        this._error,
-        msg.senderId!
-      );
-    }
-
     this._sendStatus(msg.senderId!);
   }
 
@@ -193,20 +148,15 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-      this._hassUUID = msg.hassUUID;
     } catch (err: any) {
-      const errorMessage = this._getErrorMessage(err);
-      this._error = errorMessage;
-      this._sendError(err, errorMessage);
+      this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
     } catch (err: any) {
-      const errorMessage = this._getErrorMessage(err);
-      this._error = errorMessage;
-      this._sendError(err, errorMessage);
+      this._error = this._getErrorMessage(err);
       return;
     }
     if (this.hass) {
@@ -218,65 +168,24 @@ export class HcMain extends HassElement {
   }
 
   private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
-    this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
     if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
-      this._sendError(
-        ReceiverErrorCode.NOT_CONNECTED,
-        this._error,
-        msg.senderId!
-      );
       return;
     }
-
-    if (
-      (msg.hassUUID && msg.hassUUID !== this._hassUUID) ||
-      (msg.hassUrl && msg.hassUrl !== this.hass.auth.data.hassUrl)
-    ) {
-      this._sendStatus(msg.senderId!);
-      this._error =
-        "Cannot show Lovelace because we're not connected to the same Home Assistant instance.";
-      this._sendError(
-        ReceiverErrorCode.WRONG_INSTANCE,
-        this._error,
-        msg.senderId!
-      );
-      return;
-    }
-
-    this._error = undefined;
     if (msg.urlPath === "lovelace") {
       msg.urlPath = null;
     }
-    this._lovelacePath = msg.viewPath;
-    if (msg.urlPath === "energy") {
-      this._lovelaceConfig = {
-        views: [
-          {
-            strategy: {
-              type: "energy",
-              options: { show_date_selection: true },
-            },
-          },
-        ],
-      };
-      this._urlPath = "energy";
-      this._lovelacePath = 0;
-      this._sendStatus();
-      return;
-    }
     if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
       this._urlPath = msg.urlPath;
-      this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass.connection);
+        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
+        : getLegacyLovelaceCollection(this.hass!.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -285,16 +194,8 @@ export class HcMain extends HassElement {
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
       } catch (err: any) {
-        if (
-          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
-          err.code !== "config_not_found"
-        ) {
-          // eslint-disable-next-line
-          console.log("Error fetching Lovelace configuration", err, msg);
-          this._error = `Error fetching Lovelace configuration: ${err.message}`;
-          this._sendError(ReceiverErrorCode.FETCH_CONFIG_FAILED, this._error);
-          return;
-        }
+        // eslint-disable-next-line
+        console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
         await this._generateLovelaceConfig();
@@ -309,6 +210,8 @@ export class HcMain extends HassElement {
         loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
       }
     }
+    this._showDemo = false;
+    this._lovelacePath = msg.viewPath;
 
     this._sendStatus();
   }
@@ -329,7 +232,7 @@ export class HcMain extends HassElement {
   }
 
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title || "");
+    castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;
   }
 

cast/src/receiver/second-load.ts

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

demo/script/size_stats

@@ -6,9 +6,6 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-export STATS=1
-statsfile="compilation-stats-demo.json"
-
-./node_modules/.bin/webpack-cli --profile --node-env=production --json=$statsfile
-npx webpack-bundle-analyzer $statsfile dist/frontend_latest
-rm -f $statsfile
+STATS=1 NODE_ENV=production ../node_modules/.bin/webpack --profile --json > compilation-stats.json
+npx webpack-bundle-analyzer compilation-stats.json dist/frontend_latest
+rm compilation-stats.json

demo/src/configs/arsaboo/entities.ts

@@ -508,7 +508,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "41 mins",
         duration: "44 mins",
         distance: "34.3 mi",
@@ -527,7 +527,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         origin_addresses: ["XYZ"],
         status: "OK",
         mode: "driving",
-        units: "us_customary",
+        units: "imperial",
         duration_in_traffic: "37 mins",
         duration: "37 mins",
         distance: "30.2 mi",

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      data: {
+                      service_data: {
                         entity_id: "group.downstairs_lights",
                       },
                       service: "homeassistant.toggle",
@@ -1196,7 +1196,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "15%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                 ],
                 type: "picture-elements",

demo/src/configs/kernehed/entities.ts

@@ -59,7 +59,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         hidden: true,
         radius: 50,
-        friendly_name: "School",
+        friendly_name: "Skolan",
         icon: "mdi:school",
       },
     },
@@ -137,7 +137,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "73",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Oskar battery",
+        friendly_name: "oskar batteri",
         device_class: "battery",
       },
     },
@@ -146,7 +146,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       state: "88",
       attributes: {
         unit_of_measurement: "%",
-        friendly_name: "Bella battery",
+        friendly_name: "bella batteri",
         device_class: "battery",
       },
     },
@@ -154,7 +154,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       entity_id: "binary_sensor.unifi_camera",
       state: "off",
       attributes: {
-        friendly_name: "Motion sensor camera",
+        friendly_name: "R\u00f6relsesensor kamera",
         icon: "mdi:walk",
       },
     },
@@ -707,7 +707,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
           },
         ],
         cloudiness: 25,
-        friendly_name: "Weather",
+        friendly_name: "V\u00e4der",
       },
     },
     "binary_sensor.ubiquiti_switch": {
@@ -731,7 +731,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         round_trip_time_max: "0.626",
         round_trip_time_mdev: "",
         round_trip_time_min: "0.358",
-        friendly_name: "Entrance camera",
+        friendly_name: "Entr\u00e9 kamera",
         device_class: "connectivity",
         icon: "mdi:cctv",
       },
@@ -797,7 +797,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 34,
         on: true,
-        friendly_name: "Porch motion sensor",
+        friendly_name: "altan_motion_sensor",
         device_class: "motion",
       },
     },
@@ -807,7 +807,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 88,
         on: true,
-        friendly_name: "Back door sensor",
+        friendly_name: "Altand\u00f6rren sensor",
         device_class: "opening",
         icon: "mdi:door",
       },
@@ -818,7 +818,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 74,
         on: true,
-        friendly_name: "Bathroom motion sensor",
+        friendly_name: "badrumssensor",
         device_class: "motion",
       },
     },
@@ -829,7 +829,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 47,
         on: true,
         dark: true,
-        friendly_name: "Basement motion sensor",
+        friendly_name: "R\u00f6relsesensor k\u00e4llaren 1",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -841,7 +841,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 60,
         on: true,
         dark: true,
-        friendly_name: "Laundy room motion sensor",
+        friendly_name: "R\u00f6relsesensor tv\u00e4ttstugan",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -863,7 +863,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
       attributes: {
         battery_level: 60,
         on: true,
-        friendly_name: "Pantry motion sensor",
+        friendly_name: "R\u00f6relsesensor skafferiet",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -875,7 +875,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 60,
         on: true,
         dark: true,
-        friendly_name: "Stair motion sensor",
+        friendly_name: "R\u00f6relsesensor k\u00e4llaren 2",
         device_class: "motion",
         icon: "mdi:walk",
       },
@@ -887,7 +887,7 @@ export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
         battery_level: 47,
         on: true,
         dark: true,
-        friendly_name: "Bench sensor",
+        friendly_name: "B\u00e4nksensor",
         device_class: "motion",
       },
     },

demo/src/configs/kernehed/lovelace.ts

@@ -277,7 +277,7 @@ export const demoLovelaceKernehed: DemoConfig["lovelace"] = () => ({
           ],
           show_header_toggle: false,
           type: "entities",
-          title: "Bandwidth",
+          title: "Bandbredd",
         },
         // {
         //   title: "Updater",

demo/src/configs/teachingbirds/lovelace.ts

@@ -377,7 +377,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_quiet",
                 },
                 service: "script.turn_on",
@@ -390,7 +390,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_auto",
                 },
                 service: "script.turn_on",
@@ -403,7 +403,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_turbo",
                 },
                 service: "script.turn_on",
@@ -416,7 +416,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_off",
                 },
                 service: "script.turn_on",
@@ -429,7 +429,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_on",
                 },
                 service: "script.turn_on",
@@ -629,7 +629,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.morning_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.morning_lights",
                     },
                     service: "scene.turn_on",
@@ -641,7 +641,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.movie_time",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.movie_time",
                     },
                     service: "scene.turn_on",
@@ -702,7 +702,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.downstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.downstairs_lights",
                     },
                     service: "light.toggle",
@@ -714,7 +714,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.upstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.upstairs_lights",
                     },
                     service: "light.toggle",

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

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

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
@@ -14,7 +14,6 @@ import {
   setDemoConfig,
 } from "../configs/demo-configs";
 
-@customElement("ha-demo-card")
 export class HADemoCard extends LitElement implements LovelaceCard {
   @property({ attribute: false }) public lovelace?: Lovelace;
 
@@ -155,3 +154,5 @@ declare global {
     "ha-demo-card": HADemoCard;
   }
 }
+
+customElements.define("ha-demo-card", HADemoCard);

demo/src/entrypoint.ts

@@ -2,3 +2,8 @@ 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("web-animations-js/web-animations-next-lite.min");
+}, 1000);

demo/src/ha-demo.ts

@@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../../src/resources/compatibility";
-import { customElement } from "lit/decorators";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {
@@ -11,24 +10,21 @@ import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
 import { HomeAssistant } from "../../src/types";
 import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAuth } from "./stubs/auth";
-import { mockConfigEntries } from "./stubs/config_entries";
-import { mockEnergy } from "./stubs/energy";
-import { energyEntities } from "./stubs/entities";
-import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
-import { mockRecorder } from "./stubs/recorder";
 import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
+import { mockEnergy } from "./stubs/energy";
+import { mockConfig } from "./stubs/config";
+import { energyEntities } from "./stubs/entities";
 
-@customElement("ha-demo")
-export class HaDemo extends HomeAssistantAppEl {
+class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
       panelUrl: (this as any)._panelUrl,
@@ -48,7 +44,6 @@ export class HaDemo extends HomeAssistantAppEl {
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
-    mockRecorder(hass);
     mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
@@ -56,42 +51,8 @@ export class HaDemo extends HomeAssistantAppEl {
     mockMediaPlayer(hass);
     mockFrontend(hass);
     mockEnergy(hass);
+    mockConfig(hass);
     mockPersistentNotification(hass);
-    mockConfigEntries(hass);
-    mockEntityRegistry(hass, [
-      {
-        config_entry_id: "co2signal",
-        device_id: "co2signal",
-        area_id: null,
-        disabled_by: null,
-        entity_id: "sensor.co2_intensity",
-        id: "sensor.co2_intensity",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-        unique_id: "co2_intensity",
-        options: null,
-      },
-      {
-        config_entry_id: "co2signal",
-        device_id: "co2signal",
-        area_id: null,
-        disabled_by: null,
-        entity_id: "sensor.grid_fossil_fuel_percentage",
-        id: "sensor.co2_intensity",
-        name: null,
-        icon: null,
-        platform: "co2signal",
-        hidden_by: null,
-        entity_category: null,
-        has_entity_name: false,
-        unique_id: "grid_fossil_fuel_percentage",
-        options: null,
-      },
-    ]);
 
     hass.addEntities(energyEntities());
 
@@ -125,8 +86,4 @@ export class HaDemo extends HomeAssistantAppEl {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-demo": HaDemo;
-  }
-}
+customElements.define("ha-demo", HaDemo);

demo/src/stubs/config.ts

@@ -0,0 +1,41 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockConfig = (hass: MockHomeAssistant) => {
+  hass.mockAPI("config/config_entries/entry", () => [
+    {
+      entry_id: "co2signal",
+      domain: "co2signal",
+      title: "CO2 Signal",
+      source: "user",
+      state: "loaded",
+      supports_options: false,
+      supports_unload: true,
+      pref_disable_new_entities: false,
+      pref_disable_polling: false,
+      disabled_by: null,
+      reason: null,
+    },
+  ]);
+  hass.mockWS("config/entity_registry/list", () => [
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.co2_intensity",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+    {
+      config_entry_id: "co2signal",
+      device_id: "co2signal",
+      area_id: null,
+      disabled_by: null,
+      entity_id: "sensor.grid_fossil_fuel_percentage",
+      name: null,
+      icon: null,
+      platform: "co2signal",
+    },
+  ]);
+};

demo/src/stubs/config_entries.ts

@@ -1,20 +0,0 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-export const mockConfigEntries = (hass: MockHomeAssistant) => {
-  hass.mockWS("config_entries/get", () => [
-    {
-      entry_id: "co2signal",
-      domain: "co2signal",
-      title: "CO2 Signal",
-      source: "user",
-      state: "loaded",
-      supports_options: false,
-      supports_remove_device: false,
-      supports_unload: true,
-      pref_disable_new_entities: false,
-      pref_disable_polling: false,
-      disabled_by: null,
-      reason: null,
-    },
-  ]);
-};

demo/src/stubs/energy.ts

@@ -1,101 +1,87 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
-import {
-  EnergyInfo,
-  EnergyPreferences,
-  EnergySolarForecasts,
-  FossilEnergyConsumption,
-} from "../../../src/data/energy";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
+import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  hass.mockWS(
-    "energy/get_prefs",
-    (): EnergyPreferences => ({
-      energy_sources: [
-        {
-          type: "grid",
-          flow_from: [
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_1",
-              stat_cost: "sensor.energy_consumption_tarif_1_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_2",
-              stat_cost: "sensor.energy_consumption_tarif_2_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          flow_to: [
-            {
-              stat_energy_to: "sensor.energy_production_tarif_1",
-              stat_compensation:
-                "sensor.energy_production_tarif_1_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_to: "sensor.energy_production_tarif_2",
-              stat_compensation:
-                "sensor.energy_production_tarif_2_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          cost_adjustment_day: 0,
-        },
-        {
-          type: "solar",
-          stat_energy_from: "sensor.solar_production",
-          config_entry_solar_forecast: ["solar_forecast"],
-        },
-        /*         {
-          type: "battery",
-          stat_energy_from: "sensor.battery_output",
-          stat_energy_to: "sensor.battery_input",
-        }, */
-        {
-          type: "gas",
-          stat_energy_from: "sensor.energy_gas",
-          stat_cost: "sensor.energy_gas_cost",
-          entity_energy_price: null,
-          number_energy_price: null,
-        },
-      ],
-      device_consumption: [
-        {
-          stat_consumption: "sensor.energy_car",
-        },
-        {
-          stat_consumption: "sensor.energy_ac",
-        },
-        {
-          stat_consumption: "sensor.energy_washing_machine",
-        },
-        {
-          stat_consumption: "sensor.energy_dryer",
-        },
-        {
-          stat_consumption: "sensor.energy_heat_pump",
-        },
-        {
-          stat_consumption: "sensor.energy_boiler",
-        },
-      ],
-    })
-  );
-  hass.mockWS(
-    "energy/info",
-    (): EnergyInfo => ({ cost_sensors: {}, solar_forecast_domains: [] })
-  );
-  hass.mockWS(
-    "energy/fossil_energy_consumption",
-    ({ period }): FossilEnergyConsumption => ({
-      start: period === "month" ? 250 : period === "day" ? 10 : 2,
-    })
-  );
+  hass.mockWS("energy/get_prefs", () => ({
+    energy_sources: [
+      {
+        type: "grid",
+        flow_from: [
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_1",
+            stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_2",
+            stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        flow_to: [
+          {
+            stat_energy_to: "sensor.energy_production_tarif_1",
+            stat_compensation: "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_to: "sensor.energy_production_tarif_2",
+            stat_compensation: "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        cost_adjustment_day: 0,
+      },
+      {
+        type: "solar",
+        stat_energy_from: "sensor.solar_production",
+        config_entry_solar_forecast: ["solar_forecast"],
+      },
+      /* {
+        type: "battery",
+        stat_energy_from: "sensor.battery_output",
+        stat_energy_to: "sensor.battery_input",
+      }, */
+      {
+        type: "gas",
+        stat_energy_from: "sensor.energy_gas",
+        stat_cost: "sensor.energy_gas_cost",
+        entity_energy_from: "sensor.energy_gas",
+        entity_energy_price: null,
+        number_energy_price: null,
+      },
+    ],
+    device_consumption: [
+      {
+        stat_consumption: "sensor.energy_car",
+      },
+      {
+        stat_consumption: "sensor.energy_ac",
+      },
+      {
+        stat_consumption: "sensor.energy_washing_machine",
+      },
+      {
+        stat_consumption: "sensor.energy_dryer",
+      },
+      {
+        stat_consumption: "sensor.energy_heat_pump",
+      },
+      {
+        stat_consumption: "sensor.energy_boiler",
+      },
+    ],
+  }));
+  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(

demo/src/stubs/entity_registry.ts

@@ -4,6 +4,4 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockEntityRegistry = (
   hass: MockHomeAssistant,
   data: EntityRegistryEntry[] = []
-) => {
-  hass.mockWS("config/entity_registry/list", () => data);
-};
+) => hass.mockWS("config/entity_registry/list", () => data);

demo/src/stubs/hassio_supervisor.ts

@@ -31,7 +31,7 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
             version_latest: "3.6.2",
             update_available: false,
             repository: "a0d7b954",
-            icon: false,
+            icon: true,
             logo: true,
           },
           {

demo/src/stubs/history.ts

@@ -1,4 +1,6 @@
+import { addHours, differenceInHours, endOfDay } from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
+import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {
@@ -64,9 +66,218 @@ const generateHistory = (state, deltas) => {
 
 const incrementalUnits = ["clients", "queries", "ads"];
 
+const generateMeanStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const delta = Math.random() * maxDiff;
+    const mean = lastVal + delta;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean,
+      min: mean - Math.random() * maxDiff,
+      max: mean + Math.random() * maxDiff,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: mean,
+      sum: null,
+    });
+    lastVal = mean;
+    currentDate = addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateSumStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum,
+    });
+    currentDate = addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateCurvedStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  initValue: number,
+  maxDiff: number,
+  metered: boolean
+) => {
+  const statistics: StatisticValue[] = [];
+  let currentDate = new Date(start);
+  currentDate.setMinutes(0, 0, 0);
+  let sum = initValue;
+  const hours = differenceInHours(end, start) - 1;
+  let i = 0;
+  let half = false;
+  const now = new Date();
+  while (end > currentDate && currentDate < now) {
+    const add = Math.random() * maxDiff;
+    sum += i * add;
+    statistics.push({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum: metered ? sum : null,
+    });
+    currentDate = addHours(currentDate, 1);
+    if (!half && i > hours / 2) {
+      half = true;
+    }
+    i += half ? -1 : 1;
+  }
+  return statistics;
+};
+
+const statisticsFunctions: Record<
+  string,
+  (id: string, start: Date, end: Date) => StatisticValue[]
+> = {
+  "sensor.energy_consumption_tarif_1": (id: string, start: Date, end: Date) => {
+    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
+    const morningLow = generateSumStatistics(id, start, morningEnd, 0, 0.7);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const morningFinalVal = morningLow.length
+      ? morningLow[morningLow.length - 1].sum!
+      : 0;
+    const empty = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      morningFinalVal,
+      0
+    );
+    const eveningLow = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      morningFinalVal,
+      0.7
+    );
+    return [...morningLow, ...empty, ...eveningLow];
+  },
+  "sensor.energy_consumption_tarif_2": (id: string, start: Date, end: Date) => {
+    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const highTarif = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      0,
+      0.3
+    );
+    const highTarifFinalVal = highTarif.length
+      ? highTarif[highTarif.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, morningEnd, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      highTarifFinalVal,
+      0
+    );
+    return [...morning, ...highTarif, ...evening];
+  },
+  "sensor.energy_production_tarif_1": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (id, start, end) =>
+    generateSumStatistics(id, start, end, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end) => {
+    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      0,
+      0.15,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 1);
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.solar_production": (id, start, end) => {
+    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
+    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
+    const dayEnd = new Date(endOfDay(productionEnd));
+    const production = generateCurvedStatistics(
+      id,
+      productionStart,
+      productionEnd,
+      0,
+      0.3,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 2);
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.grid_fossil_fuel_percentage": (id, start, end) =>
+    generateMeanStatistics(id, start, end, 35, 1.3),
+};
+
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
-    /history\/period\/.+/,
+    new RegExp("history/period/.+"),
     (hass, _method, path, _parameters) => {
       const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
       const entities = params.filter_entity_id.split(",");
@@ -133,4 +344,40 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
       return results;
     }
   );
+  mockHass.mockWS("history/list_statistic_ids", () => []);
+  mockHass.mockWS(
+    "history/statistics_during_period",
+    ({ statistic_ids, start_time, end_time }, hass) => {
+      const start = new Date(start_time);
+      const end = end_time ? new Date(end_time) : new Date();
+
+      const statistics: Record<string, StatisticValue[]> = {};
+
+      statistic_ids.forEach((id: string) => {
+        if (id in statisticsFunctions) {
+          statistics[id] = statisticsFunctions[id](id, start, end);
+        } else {
+          const entityState = hass.states[id];
+          const state = entityState ? Number(entityState.state) : 1;
+          statistics[id] =
+            entityState && "last_reset" in entityState.attributes
+              ? generateSumStatistics(
+                  id,
+                  start,
+                  end,
+                  state,
+                  state * (state > 80 ? 0.01 : 0.05)
+                )
+              : generateMeanStatistics(
+                  id,
+                  start,
+                  end,
+                  state,
+                  state * (state > 80 ? 0.05 : 0.1)
+                );
+        }
+      });
+      return statistics;
+    }
+  );
 };

demo/src/stubs/recorder.ts

@@ -1,345 +0,0 @@
-import {
-  addDays,
-  addHours,
-  addMonths,
-  differenceInHours,
-  endOfDay,
-} from "date-fns";
-import {
-  Statistics,
-  StatisticsMetaData,
-  StatisticValue,
-} from "../../../src/data/recorder";
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-const generateMeanStatistics = (
-  start: Date,
-  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let lastVal = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const delta = Math.random() * maxDiff;
-    const mean = lastVal + delta;
-    statistics.push({
-      start: currentDate.getTime(),
-      end: currentDate.getTime(),
-      mean,
-      min: mean - Math.random() * maxDiff,
-      max: mean + Math.random() * maxDiff,
-      last_reset: 0,
-      state: mean,
-      sum: null,
-    });
-    lastVal = mean;
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateSumStatistics = (
-  start: Date,
-  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += add;
-    statistics.push({
-      start: currentDate.getTime(),
-      end: currentDate.getTime(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: 0,
-      state: initValue + sum,
-      sum,
-    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateCurvedStatistics = (
-  start: Date,
-  end: Date,
-  // eslint-disable-next-line @typescript-eslint/default-param-last
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
-  initValue: number,
-  maxDiff: number,
-  metered: boolean
-): StatisticValue[] => {
-  const statistics: StatisticValue[] = [];
-  let currentDate = new Date(start);
-  currentDate.setMinutes(0, 0, 0);
-  let sum = initValue;
-  const hours = differenceInHours(end, start) - 1;
-  let i = 0;
-  let half = false;
-  const now = new Date();
-  while (end > currentDate && currentDate < now) {
-    const add = Math.random() * maxDiff;
-    sum += i * add;
-    statistics.push({
-      start: currentDate.getTime(),
-      end: currentDate.getTime(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: 0,
-      state: initValue + sum,
-      sum: metered ? sum : null,
-    });
-    currentDate = addHours(currentDate, 1);
-    if (!half && i > hours / 2) {
-      half = true;
-    }
-    i += half ? -1 : 1;
-  }
-  return statistics;
-};
-
-const statisticsFunctions: Record<
-  string,
-  (
-    id: string,
-    start: Date,
-    end: Date,
-    period: "5minute" | "hour" | "day" | "month"
-  ) => StatisticValue[]
-> = {
-  "sensor.energy_consumption_tarif_1": (
-    _id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(start, morningEnd, period, 0, 0.7);
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const morningFinalVal = morningLow.length
-      ? morningLow[morningLow.length - 1].sum!
-      : 0;
-    const empty = generateSumStatistics(
-      morningEnd,
-      eveningStart,
-      period,
-      morningFinalVal,
-      0
-    );
-    const eveningLow = generateSumStatistics(
-      eveningStart,
-      end,
-      period,
-      morningFinalVal,
-      0.7
-    );
-    return [...morningLow, ...empty, ...eveningLow];
-  },
-  "sensor.energy_consumption_tarif_2": (
-    _id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const highTarif = generateSumStatistics(
-      morningEnd,
-      eveningStart,
-      period,
-      0,
-      0.3
-    );
-    const highTarifFinalVal = highTarif.length
-      ? highTarif[highTarif.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(start, morningEnd, period, 0, 0);
-    const evening = generateSumStatistics(
-      eveningStart,
-      end,
-      period,
-      highTarifFinalVal,
-      0
-    );
-    return [...morning, ...highTarif, ...evening];
-  },
-  "sensor.energy_production_tarif_1": (_id, start, end, period = "hour") =>
-    generateSumStatistics(start, end, period, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (
-    _id,
-    start,
-    end,
-    period = "hour"
-  ) => generateSumStatistics(start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (_id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.15,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
-    const evening = generateSumStatistics(
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      1
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-  "sensor.solar_production": (_id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
-    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
-    const dayEnd = new Date(endOfDay(productionEnd));
-    const production = generateCurvedStatistics(
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.3,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(start, productionStart, period, 0, 0);
-    const evening = generateSumStatistics(
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      2
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-};
-export const mockRecorder = (mockHass: MockHomeAssistant) => {
-  mockHass.mockWS(
-    "recorder/get_statistics_metadata",
-    (): StatisticsMetaData[] => []
-  );
-  mockHass.mockWS(
-    "recorder/list_statistic_ids",
-    (): StatisticsMetaData[] => []
-  );
-  mockHass.mockWS(
-    "recorder/statistics_during_period",
-    ({ statistic_ids, start_time, end_time, period }, hass): Statistics => {
-      const start = new Date(start_time);
-      const end = end_time ? new Date(end_time) : new Date();
-
-      const statistics: Record<string, StatisticValue[]> = {};
-
-      statistic_ids.forEach((id: string) => {
-        if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end, period);
-        } else {
-          const entityState = hass.states[id];
-          const state = entityState ? Number(entityState.state) : 1;
-          statistics[id] =
-            entityState && "last_reset" in entityState.attributes
-              ? generateSumStatistics(
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.01 : 0.05)
-                )
-              : generateMeanStatistics(
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.05 : 0.1)
-                );
-        }
-      });
-      return statistics;
-    }
-  );
-};

gallery/script/netlify_build_gallery

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

gallery/sidebar.js

@@ -1,52 +0,0 @@
-module.exports = [
-  {
-    // This section has no header and so all page links are shown directly in the sidebar
-    category: "concepts",
-    pages: ["home"],
-  },
-
-  {
-    category: "lovelace",
-    // Label for in the sidebar
-    header: "Dashboards",
-    // Specify order of pages. Any pages in the category folder but not listed here will
-    // automatically be added after the pages listed here.
-    pages: ["introduction"],
-  },
-  {
-    category: "automation",
-    header: "Automation",
-    pages: [
-      "editor-trigger",
-      "editor-condition",
-      "editor-action",
-      "trace",
-      "trace-timeline",
-    ],
-  },
-  {
-    category: "components",
-    header: "Components",
-  },
-  {
-    category: "more-info",
-    header: "More Info dialogs",
-  },
-  {
-    category: "misc",
-    header: "Miscellaneous",
-  },
-  {
-    category: "brand",
-    header: "Brand",
-  },
-  {
-    category: "user-test",
-    header: "Users",
-    pages: ["user-types", "configuration-menu"],
-  },
-  {
-    category: "design.home-assistant.io",
-    header: "About",
-  },
-];

gallery/src/components/demo-black-white-row.ts

@@ -3,7 +3,6 @@ import { html, LitElement, css, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
@@ -59,12 +58,10 @@ class DemoBlackWhiteRow extends LitElement {
         default_theme: "default",
         default_dark_theme: "default",
         themes: {},
-        darkMode: true,
-        theme: "default",
+        darkMode: false,
       },
-      undefined,
-      undefined,
-      true
+      "default",
+      { dark: true }
     );
   }
 

gallery/src/components/demo-card.js

@@ -0,0 +1,129 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { load } from "js-yaml";
+import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
+
+class DemoCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .root {
+          display: flex;
+        }
+        h2 {
+          margin: 0 0 20px;
+          color: var(--primary-color);
+        }
+        h2 small {
+          font-size: 0.5em;
+          color: var(--primary-text-color);
+        }
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
+        pre {
+          width: 400px;
+          margin: 0 16px;
+          overflow: auto;
+          color: var(--primary-text-color);
+        }
+        @media only screen and (max-width: 800px) {
+          .root {
+            flex-direction: column;
+          }
+          pre {
+            margin: 16px 0;
+          }
+        }
+      </style>
+      <h2>
+        [[config.heading]]
+        <template is="dom-if" if="[[_size]]">
+          <small>(size [[_size]])</small>
+        </template>
+      </h2>
+      <div class="root">
+        <div id="card"></div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_trim(config.config)]]</pre>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: "_hassChanged",
+      },
+      config: {
+        type: Object,
+        observer: "_configChanged",
+      },
+      showConfig: Boolean,
+      _size: {
+        type: Number,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+  }
+
+  _configChanged(config) {
+    const card = this.$.card;
+    while (card.lastChild) {
+      card.removeChild(card.lastChild);
+    }
+
+    const el = this._createCardElement(load(config.config)[0]);
+    card.appendChild(el);
+    this._getSize(el);
+  }
+
+  async _getSize(el) {
+    await customElements.whenDefined(el.localName);
+
+    if (!("getCardSize" in el)) {
+      this._size = undefined;
+      return;
+    }
+    this._size = await el.getCardSize();
+  }
+
+  _createCardElement(cardConfig) {
+    const element = createCardElement(cardConfig);
+    if (this.hass) {
+      element.hass = this.hass;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildCard(element, cardConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  _rebuildCard(cardElToReplace, config) {
+    const newCardEl = this._createCardElement(config);
+    cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
+  }
+
+  _hassChanged(hass) {
+    const card = this.$.card.lastChild;
+    if (card) card.hass = hass;
+  }
+
+  _trim(config) {
+    return config.trim();
+  }
+}
+
+customElements.define("demo-card", DemoCard);

gallery/src/components/demo-card.ts

@@ -1,129 +0,0 @@
-import { load } from "js-yaml";
-import { html, css, LitElement, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
-import { HomeAssistant } from "../../../src/types";
-
-export interface DemoCardConfig {
-  heading: string;
-  config: string;
-}
-
-@customElement("demo-card")
-class DemoCard extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public config!: DemoCardConfig;
-
-  @property() public showConfig = false;
-
-  @state() private _size?: number;
-
-  @query("#card") private _card!: HTMLElement;
-
-  render() {
-    return html`
-      <h2>
-        ${this.config.heading}
-        ${this._size !== undefined
-          ? html`<small>(size ${this._size})</small>`
-          : ""}
-      </h2>
-      <div class="root">
-        <div id="card"></div>
-        ${this.showConfig ? html`<pre>${this.config.config.trim()}</pre>` : ""}
-      </div>
-    `;
-  }
-
-  updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-
-    if (changedProps.has("config")) {
-      const card = this._card;
-      while (card.lastChild) {
-        card.removeChild(card.lastChild);
-      }
-
-      const el = this._createCardElement((load(this.config.config) as any)[0]);
-      card.appendChild(el);
-      this._getSize(el);
-    }
-
-    if (changedProps.has("hass")) {
-      const card = this._card.lastChild;
-      if (card) {
-        (card as any).hass = this.hass;
-      }
-    }
-  }
-
-  async _getSize(el) {
-    await customElements.whenDefined(el.localName);
-
-    if (!("getCardSize" in el)) {
-      this._size = undefined;
-      return;
-    }
-    this._size = await el.getCardSize();
-  }
-
-  _createCardElement(cardConfig) {
-    const element = createCardElement(cardConfig);
-    if (this.hass) {
-      element.hass = this.hass;
-    }
-    element.addEventListener(
-      "ll-rebuild",
-      (ev) => {
-        ev.stopPropagation();
-        this._rebuildCard(element, cardConfig);
-      },
-      { once: true }
-    );
-    return element;
-  }
-
-  _rebuildCard(cardElToReplace, config) {
-    const newCardEl = this._createCardElement(config);
-    cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
-  }
-
-  static styles = css`
-    .root {
-      display: flex;
-    }
-    h2 {
-      margin: 0 0 20px;
-      color: var(--primary-color);
-    }
-    h2 small {
-      font-size: 0.5em;
-      color: var(--primary-text-color);
-    }
-    #card {
-      max-width: 400px;
-      width: 100vw;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .root {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-card": DemoCard;
-  }
-}

gallery/src/components/demo-cards.js

@@ -0,0 +1,83 @@
+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-card";
+
+class DemoCards 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;
+          justify-content: center;
+        }
+        demo-card {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+        ha-formfield {
+          margin-right: 16px;
+        }
+      </style>
+      <app-toolbar>
+        <div class="filters">
+          <ha-formfield label="Show config">
+            <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 id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[configs]]">
+            <demo-card
+              config="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-card>
+          </template>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      configs: Object,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
+}
+
+customElements.define("demo-cards", DemoCards);