20221102.0 (#14259)

Mention gl instead of ft3

.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: Configuration -> Info.
+  Home Assistant frontend: Settings -> About.
 
   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, Frontend or Lovelace
+name: Report a bug with the UI / Dashboards
 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 Lovelace cards.**
+        **Please not not report issues for custom 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 the Configuration panel -> Info.
+        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/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, Frontend or Lovelace
+  - name: Request a feature for the UI / Dashboards
     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, Frontend or Lovelace
+  - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
+    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") 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

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: weekly
+      time: "06:00"
+    open-pull-requests-limit: 10

.github/workflows/ci.yaml

@@ -11,7 +11,7 @@ on:
       - master
 
 env:
-  NODE_VERSION: 14
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -19,9 +19,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -43,9 +43,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -62,9 +62,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -81,9 +81,9 @@ jobs:
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       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@v1
+      uses: github/codeql-action/init@v2
       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@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ 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@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/demo.yaml

@@ -6,7 +6,7 @@ on:
       - dev
 
 env:
-  NODE_VERSION: 14
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -14,9 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -27,9 +27,7 @@ jobs:
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
       - name: Deploy to Netlify
-        uses: netlify/actions/cli@master
+        run: npx netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
-        with:
-          args: deploy --dir=demo/dist --prod

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

@@ -0,0 +1,73 @@
+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
+
+      - 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
+        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
+
+          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,28 +6,36 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: 3.8
-  NODE_VERSION: 14
+  PYTHON_VERSION: "3.10"
+  NODE_VERSION: 16
   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@v2
+        uses: actions/checkout@v3
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v4
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Set up Node ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -47,6 +55,13 @@ jobs:
 
           script/release
 
+      - name: Upload release assets
+        uses: softprops/action-gh-release@v0.1.14
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
+
   wheels-init:
     name: Init wheels build
     needs: release
@@ -59,33 +74,11 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      - name: Upload requirements.txt
-        uses: actions/upload-artifact@v2
-        with:
-          name: requirements
-          path: ./requirements.txt
-
-  build-wheels:
-    name: Build wheels for ${{ matrix.arch }}
-    needs: wheels-init
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
-        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
+        uses: home-assistant/wheels@2022.10.1
         with:
-          tag: ${{ matrix.tag }}
-          arch: ${{ matrix.arch }}
-          wheels-host: ${{ secrets.WHEELS_HOST }}
+          abi: cp310
+          tag: musllinux_1_2
+          arch: amd64
           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@v3.0.13
+        uses: actions/stale@v6.0.1
         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: 14
+  NODE_VERSION: 16
 
 jobs:
   upload:
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Upload Translations
         run: |

.husky/pre-commit

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

.nvmrc

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

.vscode/tasks.json

@@ -181,7 +181,7 @@
     {
       "label": "Run HA Core for Supervisor in devcontainer",
       "type": "shell",
-      "command": "HASSIO=${input:supervisorHost} HASSIO_TOKEN=${input:supervisorToken} script/core",
+      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
       "isBackground": true,
       "group": {
         "kind": "build",

.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.0.2.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

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/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/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/env.js

@@ -26,8 +26,8 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
+      .match(/version\W+=\W"(\d{8}\.\d(?:\.dev)?)"/);
     if (!version) {
       throw Error("Version not found");
     }

build-scripts/gulp/download_translations.js

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

build-scripts/gulp/gallery.js

@@ -3,7 +3,7 @@
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
-const marked = require("marked");
+const { marked } = require("marked");
 const glob = require("glob");
 const yaml = require("js-yaml");
 

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

@@ -156,3 +156,12 @@ gulp.task("gen-icons-json", (done) => {
 
   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,6 +9,7 @@ require("./compress.js");
 require("./rollup.js");
 require("./gather-static.js");
 require("./translations.js");
+require("./gen-icons-json.js");
 
 gulp.task(
   "develop-hassio",
@@ -17,6 +18,7 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
+    "gen-dummy-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
@@ -33,6 +35,7 @@ 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/translations.js

@@ -7,7 +7,7 @@ const source = require("vinyl-source-stream");
 const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
-const foreach = require("gulp-foreach");
+const flatmap = require("gulp-flatmap");
 const merge = require("gulp-merge-json");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
@@ -183,7 +183,7 @@ gulp.task("build-merged-translations", () =>
     })
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      foreach((stream, file) => {
+      flatmap((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

build-scripts/removedIcons.json

@@ -1 +1,30 @@
-[]
+[
+  {
+    "path": "M20,20H7A2,2 0 0,1 5,18V8.94L2.23,5.64C2.09,5.47 2,5.24 2,5A1,1 0 0,1 3,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20M8.5,7A0.5,0.5 0 0,0 8,7.5V8.5A0.5,0.5 0 0,0 8.5,9H18.5A0.5,0.5 0 0,0 19,8.5V7.5A0.5,0.5 0 0,0 18.5,7H8.5M8.5,11A0.5,0.5 0 0,0 8,11.5V12.5A0.5,0.5 0 0,0 8.5,13H18.5A0.5,0.5 0 0,0 19,12.5V11.5A0.5,0.5 0 0,0 18.5,11H8.5M8.5,15A0.5,0.5 0 0,0 8,15.5V16.5A0.5,0.5 0 0,0 8.5,17H13.5A0.5,0.5 0 0,0 14,16.5V15.5A0.5,0.5 0 0,0 13.5,15H8.5Z",
+    "name": "android-messages"
+  },
+  {
+    "path": "M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,12L17.5,10.5L15,12V4H20V12Z",
+    "name": "book-variant-multiple"
+  },
+  {
+    "path": "M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z",
+    "name": "desktop-mac"
+  },
+  {
+    "path": "M21,14V4H3V14H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14L16,21V22H8V21L10,18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M4,5H15V10H4V5M16,5H20V7H16V5M20,8V13H16V8H20M4,11H9V13H4V11M10,11H15V13H10V11Z",
+    "name": "desktop-mac-dashboard"
+  },
+  {
+    "path": "M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z",
+    "name": "discord"
+  },
+  {
+    "path": "M8.06,7.78C7.5,7.78 7.17,7.73 7.08,7.64L6.66,13.73C7.19,14.05 7.88,14.3 8.72,14.5C9.56,14.71 10.78,14.77 12.38,14.67C13.97,14.58 15.63,14.23 17.34,13.64L16.55,4.22C15.67,5.09 14.38,5.91 12.66,6.66C11.13,7.31 9.81,7.69 8.72,7.78H8.06M7.97,5.34C7.28,5.94 7,6.34 7.13,6.56C7.22,6.78 7.7,6.84 8.58,6.75C9.67,6.66 10.91,6.31 12.28,5.72C13.22,5.31 14.03,4.88 14.72,4.41C15.41,3.94 15.88,3.55 16.13,3.23C16.38,2.92 16.47,2.7 16.41,2.58C16.34,2.42 16.03,2.34 15.47,2.34C14.34,2.34 12.94,2.7 11.25,3.42C9.81,4.05 8.72,4.69 7.97,5.34M17.34,2.2C17.41,2.33 17.44,2.47 17.44,2.63L18.61,17C18.61,18.73 18,20.09 16.83,21.07C15.64,22.05 14.03,22.55 12,22.55C10,22.55 8.4,22.04 7.2,21C6,20 5.39,18.64 5.39,16.92L6.09,6.47C6.09,6.22 6.2,5.94 6.42,5.63C6.64,5.31 6.84,5.06 7.03,4.88L7.36,4.59C8.33,3.78 9.5,3.08 10.88,2.5C11.81,2.08 12.73,1.77 13.62,1.57C14.5,1.37 15.3,1.3 16,1.38C16.71,1.46 17.16,1.73 17.34,2.2Z",
+    "name": "google-home"
+  },
+  {
+    "path": "M19.25,19H4.75V3H19.25M14,22H10V21H14M18,0H6A3,3 0 0,0 3,3V21A3,3 0 0,0 6,24H18A3,3 0 0,0 21,21V3A3,3 0 0,0 18,0Z",
+    "name": "tablet-android"
+  }
+]

build-scripts/webpack.js

@@ -3,10 +3,10 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const paths = require("./paths.js");
-const bundle = require("./bundle.js");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
+const paths = require("./paths.js");
+const bundle = require("./bundle.js");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -76,7 +76,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new WebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -138,6 +138,8 @@ 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

@@ -0,0 +1,9 @@
+# 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/receiver/layout/hc-lovelace.ts

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
@@ -20,6 +20,8 @@ class HcLovelace extends LitElement {
 
   @property() public urlPath: string | null = null;
 
+  @query("hui-view") private _huiView?: HTMLElement;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -78,12 +80,12 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          (this.shadowRoot!.querySelector(
-            "hui-view"
-          ) as HTMLElement)!.style.setProperty(
+          this._huiView!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
+        } else {
+          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -116,6 +118,9 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
+      hui-view {
+        background: var(--lovelace-background, var(--primary-background-color));
+      }
     `;
   }
 }

cast/src/receiver/second-load.ts

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

demo/src/configs/arsaboo/entities.ts

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

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      service_data: {
+                      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_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     prefix: "Kitchen: ",
@@ -1206,7 +1206,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "32%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
+                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
                   },
                   {
                     style: {
@@ -1215,7 +1215,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       left: "60%",
                     },
                     type: "state-icon",
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                   {
                     prefix: "Bathroom: ",
@@ -1225,7 +1225,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                       top: "89%",
                       left: "77%",
                     },
-                    entity: "binary_sensor.water_leak_sensor_158d00026e26dc",
+                    entity: "binary_sensor.water_leak_sensor_158d0002338651",
                   },
                 ],
                 type: "picture-elements",

demo/src/configs/kernehed/entities.ts

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

demo/src/ha-demo.ts

@@ -1,5 +1,4 @@
 // Compat needs to be first import
-import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {
@@ -7,22 +6,25 @@ import {
   provideHass,
 } from "../../src/fake_data/provide_hass";
 import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import "../../src/resources/compatibility";
 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";
 
 class HaDemo extends HomeAssistantAppEl {
   protected async _initializeHass() {
@@ -44,6 +46,7 @@ class HaDemo extends HomeAssistantAppEl {
     mockAuth(hass);
     mockTranslations(hass);
     mockHistory(hass);
+    mockRecorder(hass);
     mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
@@ -51,8 +54,40 @@ 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",
+      },
+      {
+        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",
+      },
+    ]);
 
     hass.addEntities(energyEntities());
 
@@ -87,3 +122,9 @@ class HaDemo extends HomeAssistantAppEl {
 }
 
 customElements.define("ha-demo", HaDemo);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-demo": HaDemo;
+  }
+}

demo/src/stubs/config.ts

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

@@ -0,0 +1,20 @@
+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,90 +1,101 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns";
-import { EnergySolarForecasts } from "../../../src/data/energy";
+import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import {
+  EnergyInfo,
+  EnergyPreferences,
+  EnergySolarForecasts,
+  FossilEnergyConsumption,
+} from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEnergy = (hass: MockHomeAssistant) => {
-  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: [] }));
-  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
-    start: period === "month" ? 250 : period === "day" ? 10 : 2,
-  }));
+  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,
+    })
+  );
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(

demo/src/stubs/entity_registry.ts

@@ -4,4 +4,6 @@ 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: true,
+            icon: false,
             logo: true,
           },
           {

demo/src/stubs/history.ts

@@ -1,12 +1,4 @@
-import {
-  addDays,
-  addHours,
-  addMonths,
-  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 {
@@ -72,331 +64,6 @@ const generateHistory = (state, deltas) => {
 
 const incrementalUnits = ["clients", "queries", "ads"];
 
-const generateMeanStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  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(),
-      end: 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 =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateSumStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  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(),
-      end: currentDate.toISOString(),
-      mean: null,
-      min: null,
-      max: null,
-      last_reset: "1970-01-01T00:00:00+00:00",
-      state: initValue + sum,
-      sum,
-    });
-    currentDate =
-      period === "day"
-        ? addDays(currentDate, 1)
-        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
-  }
-  return statistics;
-};
-
-const generateCurvedStatistics = (
-  id: string,
-  start: Date,
-  end: Date,
-  _period: "5minute" | "hour" | "day" | "month" = "hour",
-  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(),
-      end: 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,
-    period: "5minute" | "hour" | "day" | "month"
-  ) => StatisticValue[]
-> = {
-  "sensor.energy_consumption_tarif_1": (
-    id: string,
-    start: Date,
-    end: Date,
-    period = "hour"
-  ) => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        start,
-        end,
-        period,
-        0,
-        period === "day" ? 17 : 504
-      );
-    }
-    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(
-      id,
-      start,
-      morningEnd,
-      period,
-      0,
-      0.7
-    );
-    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
-    const morningFinalVal = morningLow.length
-      ? morningLow[morningLow.length - 1].sum!
-      : 0;
-    const empty = generateSumStatistics(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      morningFinalVal,
-      0
-    );
-    const eveningLow = generateSumStatistics(
-      id,
-      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(
-        id,
-        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(
-      id,
-      morningEnd,
-      eveningStart,
-      period,
-      0,
-      0.3
-    );
-    const highTarifFinalVal = highTarif.length
-      ? highTarif[highTarif.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
-    const evening = generateSumStatistics(
-      id,
-      eveningStart,
-      end,
-      period,
-      highTarifFinalVal,
-      0
-    );
-    return [...morning, ...highTarif, ...evening];
-  },
-  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
-    generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (
-    id,
-    start,
-    end,
-    period = "hour"
-  ) => generateSumStatistics(id, start, end, period, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        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(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.15,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      1
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-  "sensor.solar_production": (id, start, end, period = "hour") => {
-    if (period !== "hour") {
-      return generateSumStatistics(
-        id,
-        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(
-      id,
-      productionStart,
-      productionEnd,
-      period,
-      0,
-      0.3,
-      true
-    );
-    const productionFinalVal = production.length
-      ? production[production.length - 1].sum!
-      : 0;
-    const morning = generateSumStatistics(
-      id,
-      start,
-      productionStart,
-      period,
-      0,
-      0
-    );
-    const evening = generateSumStatistics(
-      id,
-      productionEnd,
-      dayEnd,
-      period,
-      productionFinalVal,
-      0
-    );
-    const rest = generateSumStatistics(
-      id,
-      dayEnd,
-      end,
-      period,
-      productionFinalVal,
-      2
-    );
-    return [...morning, ...production, ...evening, ...rest];
-  },
-};
-
 export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockAPI(
     new RegExp("history/period/.+"),
@@ -466,42 +133,4 @@ 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, period }, 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, period);
-        } 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,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.01 : 0.05)
-                )
-              : generateMeanStatistics(
-                  id,
-                  start,
-                  end,
-                  period,
-                  state,
-                  state * (state > 80 ? 0.05 : 0.1)
-                );
-        }
-      });
-      return statistics;
-    }
-  );
 };

demo/src/stubs/recorder.ts

@@ -0,0 +1,385 @@
+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 = (
+  id: string,
+  start: Date,
+  end: Date,
+  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({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: 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 =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateSumStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  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({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
+      mean: null,
+      min: null,
+      max: null,
+      last_reset: "1970-01-01T00:00:00+00:00",
+      state: initValue + sum,
+      sum,
+    });
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
+  }
+  return statistics;
+};
+
+const generateCurvedStatistics = (
+  id: string,
+  start: Date,
+  end: Date,
+  _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({
+      statistic_id: id,
+      start: currentDate.toISOString(),
+      end: 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,
+    period: "5minute" | "hour" | "day" | "month"
+  ) => StatisticValue[]
+> = {
+  "sensor.energy_consumption_tarif_1": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
+    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
+    const morningLow = generateSumStatistics(
+      id,
+      start,
+      morningEnd,
+      period,
+      0,
+      0.7
+    );
+    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
+    const morningFinalVal = morningLow.length
+      ? morningLow[morningLow.length - 1].sum!
+      : 0;
+    const empty = generateSumStatistics(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      morningFinalVal,
+      0
+    );
+    const eveningLow = generateSumStatistics(
+      id,
+      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(
+        id,
+        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(
+      id,
+      morningEnd,
+      eveningStart,
+      period,
+      0,
+      0.3
+    );
+    const highTarifFinalVal = highTarif.length
+      ? highTarif[highTarif.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
+    const evening = generateSumStatistics(
+      id,
+      eveningStart,
+      end,
+      period,
+      highTarifFinalVal,
+      0
+    );
+    return [...morning, ...highTarif, ...evening];
+  },
+  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+    generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (
+    id,
+    start,
+    end,
+    period = "hour"
+  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        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(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.15,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      1
+    );
+    return [...morning, ...production, ...evening, ...rest];
+  },
+  "sensor.solar_production": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        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(
+      id,
+      productionStart,
+      productionEnd,
+      period,
+      0,
+      0.3,
+      true
+    );
+    const productionFinalVal = production.length
+      ? production[production.length - 1].sum!
+      : 0;
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
+    const evening = generateSumStatistics(
+      id,
+      productionEnd,
+      dayEnd,
+      period,
+      productionFinalVal,
+      0
+    );
+    const rest = generateSumStatistics(
+      id,
+      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(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.01 : 0.05)
+                )
+              : generateMeanStatistics(
+                  id,
+                  start,
+                  end,
+                  period,
+                  state,
+                  state * (state > 80 ? 0.05 : 0.1)
+                );
+        }
+      });
+      return statistics;
+    }
+  );
+};

gallery/script/netlify_build_gallery

@@ -23,7 +23,7 @@ if [[ "${PULL_REQUEST}" == "true" ]]; then
     createStatus "pending" "Building design preview" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
     gulp build-gallery
     if [ $? -eq 0 ]; then
-      createStatus "success" "Build complete" "$DEPLOY_URL"
+      createStatus "success" "Build complete" "$DEPLOY_PRIME_URL"
     else
       createStatus "error" "Build failed" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
     fi

gallery/sidebar.js

@@ -8,7 +8,7 @@ module.exports = [
   {
     category: "lovelace",
     // Label for in the sidebar
-    header: "Lovelace",
+    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"],
@@ -34,14 +34,19 @@ module.exports = [
   },
   {
     category: "misc",
-    header: "Miscelaneous",
+    header: "Miscellaneous",
+  },
+  {
+    category: "brand",
+    header: "Brand",
   },
   {
     category: "user-test",
-    header: "User Tests",
+    header: "Users",
+    pages: ["user-types", "configuration-menu"],
   },
   {
     category: "design.home-assistant.io",
-    header: "Design Documentation",
+    header: "About",
   },
 ];

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

@@ -53,13 +53,19 @@ class DemoBlackWhiteRow extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
-      default_theme: "default",
-      default_dark_theme: "default",
-      themes: {},
-      darkMode: true,
-      theme: "default",
-    });
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
   }
 
   handleSubmit(ev) {

gallery/src/components/demo-cards.ts

@@ -78,6 +78,9 @@ class DemoCards extends LitElement {
     ha-formfield {
       margin-right: 16px;
     }
+    #container {
+      background-color: var(--primary-background-color);
+    }
   `;
 }
 

gallery/src/components/page-description.ts

@@ -12,7 +12,14 @@ class PageDescription extends HaMarkdown {
     if (!PAGES[this.page].description) {
       return html``;
     }
+
     return html`
+      <div class="heading">
+        <div class="title">
+          ${PAGES[this.page].metadata.title || this.page.split("/")[1]}
+        </div>
+        <div class="subtitle">${PAGES[this.page].metadata.subtitle}</div>
+      </div>
       ${until(
         PAGES[this.page]
           .description()
@@ -25,9 +32,22 @@ class PageDescription extends HaMarkdown {
   static styles = [
     HaMarkdown.styles,
     css`
+      .heading {
+        padding: 16px;
+        border-bottom: 1px solid var(--secondary-background-color);
+      }
+      .title {
+        font-size: 42px;
+        line-height: 56px;
+        padding-bottom: 8px;
+      }
+      .subtitle {
+        font-size: 18px;
+        line-height: 24px;
+      }
       .root {
         max-width: 800px;
-        margin: 0 auto;
+        margin: 16px auto;
       }
       .root > *:first-child {
         margin-top: 0;

gallery/src/data/text.ts

@@ -0,0 +1,11 @@
+export const LONG_TEXT = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
+
+Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
+
+Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
+
+In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
+
+Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
+`;

gallery/src/data/traces/basic_trace.ts

@@ -119,7 +119,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -164,7 +164,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_2"],
               },
@@ -182,7 +182,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_3"],
               },
@@ -200,7 +200,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              service_data: {},
+              data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -298,11 +298,11 @@ export const basicTrace: DemoTrace = {
       source: "state of input_boolean.toggle_1",
       entity_id: "automation.toggle_toggles",
       context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: "2021-03-25T04:36:51.240832+00:00",
+      when: 1616647011.240832,
       domain: "automation",
     },
     {
-      when: "2021-03-25T04:36:51.249828+00:00",
+      when: 1616647011.249828,
       name: "Toggle 4",
       state: "on",
       entity_id: "input_boolean.toggle_4",
@@ -313,7 +313,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.258947+00:00",
+      when: 1616647011.258947,
       name: "Toggle 2",
       state: "on",
       entity_id: "input_boolean.toggle_2",
@@ -324,7 +324,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.261806+00:00",
+      when: 1616647011.261806,
       name: "Toggle 3",
       state: "off",
       entity_id: "input_boolean.toggle_3",
@@ -335,7 +335,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.265246+00:00",
+      when: 1616647011.265246,
       name: "Toggle 4",
       state: "off",
       entity_id: "input_boolean.toggle_4",

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

@@ -185,11 +185,11 @@ export const motionLightTrace: DemoTrace = {
         "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       entity_id: "automation.auto_elgato",
-      when: "2021-03-14T06:07:01.768492+00:00",
+      when: 1615702021.768492,
       domain: "automation",
     },
     {
-      when: "2021-03-14T06:07:01.872187+00:00",
+      when: 1615702021.872187,
       name: "Elgato Key Light Air",
       state: "on",
       entity_id: "light.elgato_key_light_air",
@@ -200,7 +200,7 @@ export const motionLightTrace: DemoTrace = {
       context_name: "Auto Elgato",
     },
     {
-      when: "2021-03-14T06:07:53.284505+00:00",
+      when: 1615702073.284505,
       name: "Elgato Key Light Air",
       state: "off",
       entity_id: "light.elgato_key_light_air",

gallery/src/ha-gallery.ts

@@ -5,6 +5,7 @@ import { html, css, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
+import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
@@ -44,6 +45,10 @@ class HaGallery extends LitElement {
       for (const page of group.pages!) {
         const key = `${group.category}/${page}`;
         const active = this._page === key;
+        if (!(key in PAGES)) {
+          console.error("Undefined page referenced in sidebar.js:", key);
+          continue;
+        }
         const title = PAGES[key].metadata.title || page;
         links.push(html`
           <a ?active=${active} href=${`#${group.category}/${page}`}>${title}</a>
@@ -53,10 +58,9 @@ class HaGallery extends LitElement {
       sidebar.push(
         group.header
           ? html`
-              <details>
-                <summary class="section">${group.header}</summary>
+              <ha-expansion-panel .header=${group.header}>
                 ${links}
-              </details>
+              </ha-expansion-panel>
             `
           : links
       );
@@ -92,27 +96,34 @@ class HaGallery extends LitElement {
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
           </div>
           <div class="page-footer">
-            ${PAGES[this._page].description ||
-            Object.keys(PAGES[this._page].metadata).length > 0
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                    target="_blank"
-                  >
-                    Edit text
-                  </a>
-                `
-              : ""}
-            ${PAGES[this._page].demo
-              ? html`
-                  <a
-                    href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                    target="_blank"
-                  >
-                    Edit demo
-                  </a>
-                `
-              : ""}
+            <div class="header">Help us to improve our documentation</div>
+            <div class="secondary">
+              Suggest an edit to this page, or provide/view feedback for this
+              page.
+            </div>
+            <div>
+              ${PAGES[this._page].description ||
+              Object.keys(PAGES[this._page].metadata).length > 0
+                ? html`
+                    <a
+                      href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                      target="_blank"
+                    >
+                      Edit text
+                    </a>
+                  `
+                : ""}
+              ${PAGES[this._page].demo
+                ? html`
+                    <a
+                      href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
+                      target="_blank"
+                    >
+                      Edit demo
+                    </a>
+                  `
+                : ""}
+            </div>
           </div>
         </div>
       </mwc-drawer>
@@ -163,9 +174,10 @@ class HaGallery extends LitElement {
     const menuItem = this.shadowRoot!.querySelector(
       `a[href="#${this._page}"]`
     )!;
+
     // Make sure section is expanded
-    if (menuItem.parentElement instanceof HTMLDetailsElement) {
-      menuItem.parentElement.open = true;
+    if (menuItem.parentElement instanceof HaExpansionPanel) {
+      menuItem.parentElement.expanded = true;
     }
   }
 
@@ -186,27 +198,16 @@ class HaGallery extends LitElement {
         padding: 4px;
       }
 
-      .sidebar details {
-        margin-top: 1em;
-        margin-left: 1em;
-      }
-
-      .sidebar summary {
-        cursor: pointer;
-        font-weight: bold;
-        margin-bottom: 8px;
-      }
-
       .sidebar a {
         color: var(--primary-text-color);
         display: block;
-        padding: 4px 12px;
+        padding: 12px;
         text-decoration: none;
         position: relative;
       }
 
       .sidebar a[active]::before {
-        border-radius: 4px;
+        border-radius: 12px;
         position: absolute;
         top: 0;
         right: 2px;
@@ -237,14 +238,32 @@ class HaGallery extends LitElement {
 
       .page-footer {
         text-align: center;
-        margin: 16px 0;
-        padding-top: 16px;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
+        margin: 16px;
+        padding: 16px;
+        border-radius: 12px;
+        background-color: var(--primary-background-color);
+      }
+
+      .page-footer div {
+        margin-top: 4px;
+      }
+
+      .page-footer .header {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 28px;
+        text-align: center;
+      }
+
+      .page-footer .secondary {
+        line-height: 23px;
+        text-align: center;
       }
 
       .page-footer a {
         display: inline-block;
         margin: 0 8px;
+        text-decoration: none;
       }
     `,
   ];

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -0,0 +1,56 @@
+---
+title: When to use remove, delete, add and create
+subtitle: The difference between remove/delete and add/create.
+---
+
+# Remove vs Delete
+Remove and Delete are quite similar, but can be frustrating if used inconsistently.
+
+## Remove
+Take away and set aside, but kept in existence.
+
+For example:
+* Removing a user's permission
+* Removing a user from a group
+* Removing links between items
+* Removing a widget
+* Removing a link
+* Removing an item from a cart
+
+## Delete
+Erase, rendered nonexistent or nonrecoverable.
+
+For example:
+* Deleting a field
+* Deleting a value in a field
+* Deleting a task
+* Deleting a group
+* Deleting a permission
+* Deleting a calendar event
+
+# Add vs Create
+In most cases, Create can be paired with Delete, and Add can be paired with Remove.
+
+## Add
+An already-exisiting item.
+
+For example:
+* Adding a permission to a user
+* Adding a user to a group
+* Adding links between items
+* Adding a widget
+* Adding a link
+* Adding an item to a cart
+
+## Create
+Something made from scratch.
+
+For example:
+* Creating a new field
+* Creating a new value in a field
+* Creating a new task
+* Creating a new group
+* Creating a new permission
+* Creating a new calendar event
+
+Based on this is [UX magazine article](https://uxmag.com/articles/ui-copy-remove-vs-delete2-banner).

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

@@ -1,7 +1,9 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -62,18 +64,88 @@ const ACTIONS = [
       entity_id: "input_boolean.toggle_4",
     },
   },
+  {
+    parallel: [
+      { scene: "scene.kitchen_morning" },
+      {
+        service: "media_player.play_media",
+        target: { entity_id: "media_player.living_room" },
+        data: { media_content_id: "", media_content_type: "" },
+        metadata: { title: "Happy Song" },
+      },
+    ],
+  },
+  {
+    stop: "No one is home!",
+  },
+  { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
+  {
+    repeat: {
+      for_each: ["bread", "butter", "cheese"],
+      sequence: [{ delay: "00:00:01" }],
+    },
+  },
+  {
+    if: [{ condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+    else: [{ delay: "00:00:05" }],
+  },
+  {
+    if: [{ condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+  },
+  {
+    if: [{ condition: "state" }, { condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+    else: [{ delay: "00:00:05" }],
+  },
+  {
+    choose: [
+      {
+        conditions: [{ condition: "state" }],
+        sequence: [{ delay: "00:00:01" }],
+      },
+      {
+        conditions: [{ condition: "sun" }],
+        sequence: [{ delay: "00:00:05" }],
+      },
+    ],
+    default: [{ delay: "00:00:03" }],
+  },
 ];
 
+const initialAction: Action = {
+  service: "light.turn_on",
+  target: {
+    entity_id: "light.kitchen",
+  },
+};
+
 @customElement("demo-automation-describe-action")
 export class DemoAutomationDescribeAction extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
+  @state() _action = initialAction;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
     return html`
       <ha-card header="Actions">
+        <div class="action">
+          <span>
+            ${this._action
+              ? describeAction(this.hass, this._action)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Action Config"
+            .defaultValue=${initialAction}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
@@ -93,6 +165,11 @@ export class DemoAutomationDescribeAction extends LitElement {
     hass.addEntities(ENTITIES);
   }
 
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._action = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -108,6 +185,9 @@ export class DemoAutomationDescribeAction extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

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

@@ -1,31 +1,82 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const ENTITIES = [
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("device_tracker", "person", "home", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
+];
 
 const conditions = [
   { condition: "and" },
   { condition: "not" },
   { condition: "or" },
-  { condition: "state" },
-  { condition: "numeric_state" },
+  { condition: "state", entity_id: "light.kitchen", state: "on" },
+  {
+    condition: "numeric_state",
+    entity_id: "light.kitchen",
+    attribute: "brightness",
+    below: 80,
+    above: 20,
+  },
   { condition: "sun", after: "sunset" },
-  { condition: "sun", after: "sunrise" },
-  { condition: "zone" },
+  { condition: "sun", after: "sunrise", offset: "-01:00" },
+  { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
+  { condition: "trigger", id: "motion" },
   { condition: "time" },
   { condition: "template" },
 ];
 
+const initialCondition: Condition = {
+  condition: "state",
+  entity_id: "light.kitchen",
+  state: "on",
+};
+
 @customElement("demo-automation-describe-condition")
 export class DemoAutomationDescribeCondition extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  @state() _condition = initialCondition;
+
   protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
     return html`
       <ha-card header="Conditions">
+        <div class="condition">
+          <span>
+            ${this._condition
+              ? describeCondition(this._condition, this.hass)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Condition Config"
+            .defaultValue=${initialCondition}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any)}</span>
+              <span>${describeCondition(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -34,6 +85,18 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._condition = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -49,6 +112,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

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

@@ -1,34 +1,92 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const ENTITIES = [
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("person", "person", "", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
+];
 
 const triggers = [
-  { platform: "state" },
+  { platform: "state", entity_id: "light.kitchen", from: "off", to: "on" },
   { platform: "mqtt" },
-  { platform: "geo_location" },
-  { platform: "homeassistant" },
-  { platform: "numeric_state" },
-  { platform: "sun" },
+  {
+    platform: "geo_location",
+    source: "test_source",
+    zone: "zone.home",
+    event: "enter",
+  },
+  { platform: "homeassistant", event: "start" },
+  {
+    platform: "numeric_state",
+    entity_id: "light.kitchen",
+    attribute: "brightness",
+    below: 80,
+    above: 20,
+  },
+  { platform: "sun", event: "sunset" },
   { platform: "time_pattern" },
   { platform: "webhook" },
-  { platform: "zone" },
+  {
+    platform: "zone",
+    entity_id: "person.person",
+    zone: "zone.home",
+    event: "enter",
+  },
   { platform: "tag" },
-  { platform: "time" },
+  { platform: "time", at: "15:32" },
   { platform: "template" },
-  { platform: "event" },
+  { platform: "event", event_type: "homeassistant_started" },
 ];
 
+const initialTrigger: Trigger = {
+  platform: "state",
+  entity_id: "light.kitchen",
+};
+
 @customElement("demo-automation-describe-trigger")
 export class DemoAutomationDescribeTrigger extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  @state() _trigger = initialTrigger;
+
   protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
     return html`
       <ha-card header="Triggers">
+        <div class="trigger">
+          <span>
+            ${this._trigger
+              ? describeTrigger(this._trigger, this.hass)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Trigger Config"
+            .defaultValue=${initialTrigger}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any)}</span>
+              <span>${describeTrigger(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -37,6 +95,18 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -52,6 +122,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -20,6 +20,10 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
+import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },
@@ -28,17 +32,23 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
   { name: "Scene", actions: [HaSceneAction.defaultConfig] },
+  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
+  { name: "If-Then", actions: [HaIfAction.defaultConfig] },
   { name: "Choose", actions: [HaChooseAction.defaultConfig] },
   { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+  { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
+  { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];
 
 @customElement("demo-automation-editor-action")
 class DemoHaAutomationEditorAction extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.actions);
 
   constructor() {
@@ -59,6 +69,15 @@ class DemoHaAutomationEditorAction extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -73,6 +92,7 @@ class DemoHaAutomationEditorAction extends LitElement {
                     .hass=${this.hass}
                     .actions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-action>
                 `
@@ -82,10 +102,24 @@ class DemoHaAutomationEditorAction extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-automation-editor-action": DemoHaAutomationEditorAction;
   }
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -8,7 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { Condition } from "../../../../src/data/automation";
+import type { ConditionWithShorthand } from "../../../../src/data/automation";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
 import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
@@ -20,7 +20,7 @@ import { HaTimeCondition } from "../../../../src/panels/config/automation/condit
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
 
-const SCHEMAS: { name: string; conditions: Condition[] }[] = [
+const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
   {
     name: "State",
     conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,12 +69,22 @@ const SCHEMAS: { name: string; conditions: Condition[] }[] = [
     name: "Trigger",
     conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
   },
+  {
+    name: "Shorthand",
+    conditions: [
+      { and: HaLogicalCondition.defaultConfig.conditions },
+      { or: HaLogicalCondition.defaultConfig.conditions },
+      { not: HaLogicalCondition.defaultConfig.conditions },
+    ],
+  },
 ];
 
 @customElement("demo-automation-editor-condition")
 class DemoHaAutomationEditorCondition extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.conditions);
 
   constructor() {
@@ -95,6 +105,15 @@ class DemoHaAutomationEditorCondition extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -109,6 +128,7 @@ class DemoHaAutomationEditorCondition extends LitElement {
                     .hass=${this.hass}
                     .conditions=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-condition>
                 `
@@ -118,6 +138,20 @@ class DemoHaAutomationEditorCondition extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, state } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
@@ -107,6 +107,8 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 class DemoHaAutomationEditorTrigger extends LitElement {
   @state() private hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
   private data: any = SCHEMAS.map((info) => info.triggers);
 
   constructor() {
@@ -127,6 +129,15 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       this.requestUpdate();
     };
     return html`
+      <div class="options">
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map(
         (info, sampleIdx) => html`
           <demo-black-white-row
@@ -141,6 +152,7 @@ class DemoHaAutomationEditorTrigger extends LitElement {
                     .hass=${this.hass}
                     .triggers=${this.data[sampleIdx]}
                     .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
                     @value-changed=${valueChanged}
                   ></ha-automation-trigger>
                 `
@@ -150,6 +162,20 @@ class DemoHaAutomationEditorTrigger extends LitElement {
       )}
     `;
   }
+
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
+  static styles = css`
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
+  `;
 }
 
 declare global {

gallery/src/pages/brand/logo.markdown

@@ -0,0 +1,32 @@
+---
+title: "Logo"
+---
+
+# Using our logo
+
+As a community, we are proud of our logo. Follow these guidelines to ensure it always looks its best. Our logo follows Google's material design spec and uses the blue interface color.
+
+[Download Logo](https://github.com/home-assistant/assets/tree/master/logo)
+
+![Logo](/images/logo.png)
+
+
+## Using the icon
+
+Our icon is a shorter and most used version of our logo. The icon can exist without the wordmark, the wordmark should never exist without the icon.
+
+![Logo variants](/images/logo-variants.png)
+
+## Using the right variant
+
+The pretty blue logo with a background shadow, pictured top left, is our primary logo. It should only be used with black, white, and non-duotone photography.
+
+When needed you can use our logo without a shadow, as seen as the second variant. 
+
+The outlined logo should only be used on packaging.
+
+## Exclusion zone
+
+The logo needs some personal space. It's exclusion zone is equal to a quarter the height of the icon.
+
+![Clearspace](/images/clearspace.png)

gallery/src/pages/brand/our-story.markdown

@@ -0,0 +1,41 @@
+---
+title: "Our story"
+---
+
+## Open source home automation that puts local control and privacy first
+
+Home Assistant is a free and open-source software for home automation that is designed to be the central control system for smart home devices with a focus on local control and privacy. It can be accessed via a web-based user interface, via apps for Android and iOS, or using voice commands via a supported virtual assistant like Google Assistant and Amazon Alexa.
+
+IoT devices and services are supported by modular support for controlling proprietary ecosystems if they provide public access via an Open API for third-party integrations and protocols like Bluetooth, MQTT, Zigbee, and Z-Wave, After the Home Assistant software application is installed as a computer appliance it will act as a central control system for home automation. Information from all entities it sees can be used and controlled from within scripts trigger automations using scheduling and "blueprint" subroutines, e.g. for controlling lighting, climate, entertainment systems, and appliances.
+
+# Open Home
+
+The Open Home is our vision for the smart home. It defines the values that we put at the heart of every decision we make at Home Assistant. It’s woven into our architecture, licensing, community, and everything else.
+
+The Open Home is about privacy, choice, and durability.
+
+## Privacy
+
+Your home should be your safe space. A place where you can be your true self without having to bother about what the world thinks of you. A place where you don’t need to act differently to avoid an algorithm categorizing your behavior. Privacy for the Open Home means that devices need to work locally. No one else needs to know if you turn on a light bulb or change the thermostat.
+
+It is okay for a product to offer a cloud connection, but it should be extra and opt-in.
+
+## Choice
+
+Devices in your home gather data about themselves and their surroundings. Your data. Vendors shouldn’t be able to limit your access to your data or limit the interoperability of your devices with the rest of your smart home.
+
+Choice for the Open Home means that devices need to make the gathered data available through local APIs. This avoids vendor lock-in and allows users to create their own smart home with devices from different manufacturers.
+
+## Durability
+
+If there is one thing that technology firms are very good at, it is launching new products. However, maintaining the products and making sure they keep working is an afterthought for most. The result is that vendors can decide to no longer support your device, crippling its features or even preventing it from working at all. As we install more and more devices in our home, durability is becoming more and more important. We shouldn’t have to buy everything new every couple of years because the manufacturer decided to move on.
+
+Durability for the Open Home means that devices are designed and built to keep working. Not just this year, but for the next decade.
+
+# Our history
+
+The project was started as a Python application by Paulus Schoutsen in September 2013 and first published publicly on GitHub in November 2013. In July 2017, a managed operating system called Hass.io was initially introduced to make it easier use to use Home Assistant on single-board computers like the Raspberry Pi series. Its bundled "supervisor" management system allowed users to manage, backup, and update the local installation and introduced the option to extend the functionality of the software with add-ons.
+
+An optional subscription service was introduced in December 2017 for $5/month to solve the complexities associated with secured remote access, as well as linking to Amazon Alexa and Google Assistant. Nabu Casa, Inc. was formed in September 2018 to take over the subscription service. The company's funding is based solely on revenue from the subscription service. It is used to finance the project's infrastructure and to pay for full-time employees contributing to the project.
+
+In January 2020, branding was adjusted to make it easier to refer to different parts of the project. The main piece of software was renamed to Home Assistant Core, while the full suite of software with the embedded operating system and bundled "supervisor" management system was renamed to Home Assistant.

gallery/src/pages/components/dialogs.markdown

@@ -0,0 +1,32 @@
+---
+title: Dialogs
+subtitle: Dialogs provide important prompts in a user flow.
+---
+
+# Material Design 3
+
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
+
+# Highlighted guidelines
+
+## Content
+* A best practice is to always use a title, even if it is optional by Material guidelines.
+* People mainly read the title and a button. Put the most important information in those two.
+* Try to avoid user generated content in the title, this could make the title unreadable long.
+* If users become unsure, they read the description. Make sure this explains what will happen.
+* Strive for minimalism.
+
+## Buttons and X-icon
+* Keep the labels short, for example `Save`, `Delete`, `Enable`.
+* Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
+* Destructive actions should be a red warning button.
+* Alert or confirmation dialogs only have buttons and no X-icon.
+* Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
+
+## Example
+### Confirmation dialog
+> **Delete dashboard?**
+> 
+> Dashboard [dashboard name] will be permanently deleted from Home Assistant.
+> 
+> Cancel / Delete

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

@@ -1,7 +1,15 @@
 ---
 title: Alerts
+subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 
+<style>
+  ha-alert {
+    display: block;
+    margin: 4px 0;
+  }
+</style>
+
 # Alert `<ha-alert>`
 The alert offers four severity levels that set a distinctive icon and color.
 

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

@@ -159,13 +159,19 @@ export class DemoHaAlert extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
-      default_theme: "default",
-      default_dark_theme: "default",
-      themes: {},
-      darkMode: true,
-      theme: "default",
-    });
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
   }
 
   static get styles() {

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

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

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

@@ -0,0 +1,169 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { repeat } from "lit/directives/repeat";
+import "../../../../src/components/ha-bar-slider";
+import "../../../../src/components/ha-card";
+
+const sliders: {
+  id: string;
+  label: string;
+  mode?: "start" | "end" | "indicator";
+  class?: string;
+}[] = [
+  {
+    id: "slider-start",
+    label: "Slider (start mode)",
+    mode: "start",
+  },
+  {
+    id: "slider-end",
+    label: "Slider (end mode)",
+    mode: "end",
+  },
+  {
+    id: "slider-indicator",
+    label: "Slider (indicator mode)",
+    mode: "indicator",
+  },
+  {
+    id: "slider-start-custom",
+    label: "Slider (start mode) and custom style",
+    mode: "start",
+    class: "custom",
+  },
+  {
+    id: "slider-end-custom",
+    label: "Slider (end mode) and custom style",
+    mode: "end",
+    class: "custom",
+  },
+  {
+    id: "slider-indicator-custom",
+    label: "Slider (indicator mode) and custom style",
+    mode: "indicator",
+    class: "custom",
+  },
+];
+
+@customElement("demo-components-ha-bar-slider")
+export class DemoHaBarSlider extends LitElement {
+  @state() private value = 50;
+
+  @state() private sliderPosition?: number;
+
+  handleValueChanged(e: CustomEvent) {
+    this.value = e.detail.value as number;
+  }
+
+  handleSliderMoved(e: CustomEvent) {
+    this.sliderPosition = e.detail.value as number;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <p><b>Slider values</b></p>
+          <table>
+            <tbody>
+              <tr>
+                <td>position</td>
+                <td>${this.sliderPosition ?? "-"}</td>
+              </tr>
+              <tr>
+                <td>value</td>
+                <td>${this.value ?? "-"}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </ha-card>
+      ${repeat(sliders, (slider) => {
+        const { id, label, ...config } = slider;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-bar-slider
+                .value=${this.value}
+                .mode=${config.mode}
+                class=${ifDefined(config.class)}
+                @value-changed=${this.handleValueChanged}
+                @slider-moved=${this.handleSliderMoved}
+                aria-labelledby=${id}
+              >
+              </ha-bar-slider>
+            </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-sliders">
+            ${repeat(sliders, (slider) => {
+              const { id, label, ...config } = slider;
+              return html`
+                <ha-bar-slider
+                  .value=${this.value}
+                  .mode=${config.mode}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @value-changed=${this.handleValueChanged}
+                  @slider-moved=${this.handleSliderMoved}
+                  aria-label=${label}
+                >
+                </ha-bar-slider>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin: 0;
+      }
+      label {
+        font-weight: 600;
+      }
+      .custom {
+        --slider-bar-color: #ffcf4c;
+        --slider-bar-background: #ffcf4c64;
+        --slider-bar-thickness: 100px;
+        --slider-bar-border-radius: 24px;
+      }
+      .vertical-sliders {
+        height: 300px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      p.title {
+        margin-bottom: 12px;
+      }
+      .vertical-sliders > *:not(:last-child) {
+        margin-right: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-bar-slider": DemoHaBarSlider;
+  }
+}

gallery/src/pages/components/ha-expansion-panel.markdown

@@ -0,0 +1,5 @@
+---
+title: Expansion Panel
+---
+
+Expansion panel following all the ARIA guidelines.

gallery/src/pages/components/ha-expansion-panel.ts

@@ -0,0 +1,157 @@
+import { mdiPacMan } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-markdown";
+import "../../components/demo-black-white-row";
+import { LONG_TEXT } from "../../data/text";
+
+const SHORT_TEXT = LONG_TEXT.substring(0, 113);
+
+const SAMPLES: {
+  template: (slot: string, leftChevron: boolean) => TemplateResult;
+}[] = [
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr header"
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr header"
+          secondary="Attr secondary"
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+          .secondary=${"Prop secondary"}
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+        >
+          <span slot="secondary">Slot Secondary</span>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
+          <span slot="header">Slot header</span>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
+          <span slot="header">Slot header with actions</span>
+          <ha-icon-button
+            slot="icons"
+            label="Some Action"
+            .path=${mdiPacMan}
+          ></ha-icon-button>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr Header with actions"
+        >
+          <ha-icon-button
+            slot="icons"
+            label="Some Action"
+            .path=${mdiPacMan}
+          ></ha-icon-button>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+];
+
+@customElement("demo-components-ha-expansion-panel")
+export class DemoHaExpansionPanel extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${SAMPLES.map(
+        (sample) => html`
+          <demo-black-white-row>
+            ${["light", "dark"].map((slot) =>
+              sample.template(slot, slot === "dark")
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-expansion-panel {
+        margin: -16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-expansion-panel": DemoHaExpansionPanel;
+  }
+}

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

@@ -3,18 +3,7 @@ import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-faded";
 import "../../../../src/components/ha-markdown";
-
-const LONG_TEXT = `
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
-
-Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
-
-Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
-
-In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
-
-Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
-`;
+import { LONG_TEXT } from "../../data/text";
 
 const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 

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

@@ -1,17 +1,116 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
-import { LitElement, TemplateResult, html } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
-import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import "../../../../src/components/ha-form/ha-form";
-import "../../components/demo-black-white-row";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
+
+const ENTITIES = [
+  getEntity("alarm_control_panel", "alarm", "disarmed", {
+    friendly_name: "Alarm",
+  }),
+  getEntity("media_player", "livingroom", "playing", {
+    friendly_name: "Livingroom",
+    media_content_type: "music",
+    device_class: "tv",
+  }),
+  getEntity("media_player", "lounge", "idle", {
+    friendly_name: "Lounge",
+    supported_features: 444983,
+    device_class: "speaker",
+  }),
+  getEntity("light", "bedroom", "on", {
+    friendly_name: "Bedroom",
+    effect: "colorloop",
+    effect_list: ["colorloop", "random"],
+  }),
+  getEntity("switch", "coffee", "off", {
+    friendly_name: "Coffee",
+    device_class: "switch",
+  }),
+];
+
+const DEVICES = [
+  {
+    area_id: "bedroom",
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_1",
+    identifiers: [["demo", "volume1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: null,
+    name: "Dishwasher",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+  {
+    area_id: "backyard",
+    configuration_url: null,
+    config_entries: ["config_entry_2"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_2",
+    identifiers: [["demo", "pwm1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: null,
+    name: "Lamp",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_3"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_3",
+    identifiers: [["demo", "pwm1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: "User name",
+    name: "Technical name",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+];
+
+const AREAS = [
+  {
+    area_id: "backyard",
+    name: "Backyard",
+    picture: null,
+  },
+  {
+    area_id: "bedroom",
+    name: "Bedroom",
+    picture: null,
+  },
+  {
+    area_id: "livingroom",
+    name: "Livingroom",
+    picture: null,
+  },
+];
 
 const SCHEMAS: {
   title: string;
@@ -38,6 +137,8 @@ const SCHEMAS: {
       select: "Select",
       icon: "Icon",
       media: "Media",
+      location: "Location",
+      entities: "Entities",
     },
     schema: [
       { name: "addon", selector: { addon: {} } },
@@ -45,14 +146,23 @@ const SCHEMAS: {
       {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
+        context: { filter_entity: "entity" },
+      },
+      {
+        name: "State",
+        selector: { state: { entity_id: "" } },
+        context: { filter_entity: "entity", filter_attribute: "Attribute" },
       },
       { name: "Device", selector: { device: {} } },
+      { name: "Config entry", selector: { config_entry: {} } },
       { name: "Duration", selector: { duration: {} } },
       { name: "area", selector: { area: {} } },
       { name: "target", selector: { target: {} } },
       { name: "number", selector: { number: { min: 0, max: 10 } } },
       { name: "boolean", selector: { boolean: {} } },
-      { name: "time", selector: { time: {} } },
+      { name: "time", required: true, selector: { time: {} } },
+      { name: "datetime", required: true, selector: { datetime: {} } },
+      { name: "date", required: true, selector: { date: {} } },
       { name: "action", selector: { action: {} } },
       { name: "text", selector: { text: { multiline: false } } },
       { name: "text_multiline", selector: { text: { multiline: true } } },
@@ -75,6 +185,14 @@ const SCHEMAS: {
           media: {},
         },
       },
+      {
+        name: "location",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
+      {
+        name: "entities",
+        selector: { entity: { multiple: true } },
+      },
     ],
   },
   {
@@ -315,9 +433,11 @@ class DemoHaForm extends LitElement {
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
     hass.updateTranslations("config", "en");
+    hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
+    mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
+    mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
   }
 

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

@@ -1,20 +1,21 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
-import { LitElement, TemplateResult, css, html } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
+import { BlueprintInput } from "../../../../src/data/blueprint";
+import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
+import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import { BlueprintInput } from "../../../../src/data/blueprint";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
-import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -109,17 +110,25 @@ const AREAS = [
 
 const SCHEMAS: {
   name: string;
-  input: Record<string, BlueprintInput | null>;
+  input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
 }[] = [
   {
     name: "One of each",
     input: {
       entity: { name: "Entity", selector: { entity: {} } },
+      state: {
+        name: "State",
+        selector: { state: { entity_id: "alarm_control_panel.alarm" } },
+      },
       attribute: {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
       },
       device: { name: "Device", selector: { device: {} } },
+      config_entry: {
+        name: "Integration",
+        selector: { config_entry: {} },
+      },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
@@ -146,6 +155,8 @@ const SCHEMAS: {
       },
       boolean: { name: "Boolean", selector: { boolean: {} } },
       time: { name: "Time", selector: { time: {} } },
+      date: { name: "Date", selector: { date: {} } },
+      datetime: { name: "Date Time", selector: { datetime: {} } },
       action: { name: "Action", selector: { action: {} } },
       text: {
         name: "Text",
@@ -162,12 +173,134 @@ const SCHEMAS: {
         },
       },
       object: { name: "Object", selector: { object: {} } },
+      select_radio: {
+        name: "Select (Radio)",
+        selector: {
+          select: { options: ["Option 1", "Option 2"], mode: "list" },
+        },
+      },
+      template: { name: "Template", selector: { template: {} } },
       select: {
         name: "Select",
-        selector: { select: { options: ["Option 1", "Option 2"] } },
+        selector: {
+          select: {
+            options: [
+              "Option 1",
+              "Option 2",
+              "Option 3",
+              "Option 4",
+              "Option 5",
+              "Option 6",
+            ],
+          },
+        },
+      },
+      select_disabled_list: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled_multiple: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            multiple: true,
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+            ],
+            mode: "list",
+          },
+        },
+      },
+      select_disabled: {
+        name: "Select disabled option",
+        selector: {
+          select: {
+            options: [
+              { label: "Option 1", value: "Option 1" },
+              { label: "Option 2", value: "Option 2" },
+              { label: "Option 3", value: "Option 3", disabled: true },
+              { label: "Option 4", value: "Option 4", disabled: true },
+              { label: "Option 5", value: "Option 5", disabled: true },
+              { label: "Option 6", value: "Option 6" },
+            ],
+          },
+        },
+      },
+      select_custom: {
+        name: "Select (Custom)",
+        selector: {
+          select: {
+            custom_value: true,
+            options: [
+              "Option 1",
+              "Option 2",
+              "Option 3",
+              "Option 4",
+              "Option 5",
+              "Option 6",
+            ],
+          },
+        },
       },
       icon: { name: "Icon", selector: { icon: {} } },
       media: { name: "Media", selector: { media: {} } },
+      location: { name: "Location", selector: { location: {} } },
+      location_radius: {
+        name: "Location with radius",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
+      color_temp: {
+        name: "Color Temperature",
+        selector: { color_temp: {} },
+      },
+      color_rgb: { name: "Color", selector: { color_rgb: {} } },
+    },
+  },
+  {
+    name: "Multiples",
+    input: {
+      entity: { name: "Entity", selector: { entity: { multiple: true } } },
+      device: { name: "Device", selector: { device: { multiple: true } } },
+      area: { name: "Area", selector: { area: { multiple: true } } },
+      select: {
+        name: "Select Multiple",
+        selector: {
+          select: {
+            multiple: true,
+            custom_value: true,
+            options: [
+              "Option 1",
+              "Option 2",
+              "Option 3",
+              "Option 4",
+              "Option 5",
+              "Option 6",
+            ],
+          },
+        },
+      },
+      select_checkbox: {
+        name: "Select Multiple (Checkbox)",
+        required: false,
+        selector: {
+          select: {
+            mode: "list",
+            multiple: true,
+            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
+          },
+        },
+      },
     },
   },
 ];
@@ -176,6 +309,14 @@ const SCHEMAS: {
 class DemoHaSelector extends LitElement implements ProvideHassElement {
   @state() public hass!: HomeAssistant;
 
+  @state() private _disabled = false;
+
+  @state() private _required = false;
+
+  @state() private _helper = false;
+
+  @state() private _label = true;
+
   private data = SCHEMAS.map(() => ({}));
 
   constructor() {
@@ -186,6 +327,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);
@@ -279,7 +421,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           can_play: true,
           can_expand: false,
           children_media_class: null,
-          thumbnail: null,
+          thumbnail: "https://brands.home-assistant.io/_/image/logo.png",
         },
         {
           title: "movie.mp4",
@@ -309,6 +451,36 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
 
   protected render(): TemplateResult {
     return html`
+      <div class="options">
+        <ha-formfield label="Labels">
+          <ha-switch
+            .name=${"label"}
+            .checked=${this._label}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+        <ha-formfield label="Required">
+          <ha-switch
+            .name=${"required"}
+            .checked=${this._required}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+        <ha-formfield label="Disabled">
+          <ha-switch
+            .name=${"disabled"}
+            .checked=${this._disabled}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+        <ha-formfield label="Helper text">
+          <ha-switch
+            .name=${"helper"}
+            .checked=${this._helper}
+            @change=${this._handleOptionChange}
+          ></ha-switch>
+        </ha-formfield>
+      </div>
       ${SCHEMAS.map((info, idx) => {
         const data = this.data[idx];
         const valueChanged = (ev) => {
@@ -331,8 +503,12 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                         .hass=${this.hass}
                         .selector=${value!.selector}
                         .key=${key}
+                        .label=${this._label ? value!.name : undefined}
                         .value=${data[key] ?? value!.default}
+                        .disabled=${this._disabled}
+                        .required=${this._required}
                         @value-changed=${valueChanged}
+                        .helper=${this._helper ? "Helper text" : undefined}
                       ></ha-selector>
                     </ha-settings-row>
                   `
@@ -344,10 +520,21 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     `;
   }
 
+  private _handleOptionChange(ev) {
+    this[`_${ev.target.name}`] = ev.target.checked;
+  }
+
   static styles = css`
     ha-selector {
       width: 60;
     }
+    .options {
+      max-width: 800px;
+      margin: 16px auto;
+    }
+    .options ha-formfield {
+      margin-right: 16px;
+    }
   `;
 }
 

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

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

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

@@ -0,0 +1,73 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-tip";
+import "../../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+
+const tips: (string | TemplateResult)[] = [
+  "Test tip",
+  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
+  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
+];
+
+@customElement("demo-components-ha-tip")
+export class DemoHaTip extends LitElement {
+  protected render(): TemplateResult {
+    return html` ${["light", "dark"].map(
+      (mode) => html`
+        <div class=${mode}>
+          <ha-card header="ha-tip ${mode} demo">
+            <div class="card-content">
+              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
+            </div>
+          </ha-card>
+        </div>
+      `
+    )}`;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
+      ha-tip {
+        margin-bottom: 14px;
+      }
+      ha-card {
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-tip": DemoHaTip;
+  }
+}

gallery/src/pages/design.home-assistant.io/editing.markdown

@@ -2,6 +2,8 @@
 title: Editing design.home-assistant.io
 ---
 
+![Home Assistant Logo](/images/logo-with-text.png)
+
 # How to edit design.home-assistant.io
 
 All pages are stored in [the pages folder][pages-folder] on GitHub. Pages are grouped in a folder per sidebar section. Each page can contain a `<page name>.markdown` description file, a `<page name>.ts` demo file or both. If both are defined the description is rendered first. The description can contain metadata to specify the title of the page.
@@ -41,15 +43,12 @@ import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
-
 @customElement("demo-user-experience-usability")
 export class DemoUserExperienceUsability extends LitElement {
   protected render() {
     return html`
       <ha-card>
-        <div class="card-content">
-          Hello world!
-        </div>
+        <div class="card-content">Hello world!</div>
       </ha-card>
     `;
   }

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

@@ -31,7 +31,7 @@ const ENTITIES = [
     friendly_name: "Office Light",
   }),
   getEntity("fan", "kitchen", "on", {
-    friendly_name: "Second Office Fan",
+    friendly_name: "Kitchen Fan",
   }),
   getEntity("binary_sensor", "kitchen_door", "on", {
     friendly_name: "Office Door",
@@ -102,7 +102,7 @@ class DemoArea extends LitElement {
         picture: "/images/office.jpg",
       },
       {
-        name: "Second Office",
+        name: "Kitchen",
         area_id: "kitchen",
         picture: "/images/kitchen.png",
       },

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

@@ -75,6 +75,10 @@ const ENTITIES = [
     timestamp: 1641801600,
     friendly_name: "Date and Time",
   }),
+  getEntity("sensor", "humidity", "23.2", {
+    friendly_name: "Humidity",
+    unit_of_measurement: "%",
+  }),
   getEntity("input_select", "dropdown", "Soda", {
     friendly_name: "Dropdown",
     options: ["Soda", "Beer", "Wine"],
@@ -142,6 +146,7 @@ const CONFIGS = [
     - light.non_existing
     - climate.ecobee
     - input_number.number
+    - sensor.humidity
     `,
   },
   {
@@ -249,7 +254,7 @@ const CONFIGS = [
       name: Bed light
       action_name: Toggle light
       service: light.toggle
-      service_data:
+      data:
         entity_id: light.bed_light
     - type: section
       label: Links

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

@@ -199,7 +199,7 @@ const CONFIGS = [
       tap_action:
         action: call-service
         service: light.turn_on
-        service_data:
+        data:
           entity_id: light.ceiling_lights
     - entity: sun.sun
       name: Regular

gallery/src/pages/lovelace/introduction.markdown

@@ -1,11 +1,11 @@
 ---
 title: Introduction
 ---
-Lovelace has many different cards. Each card allows the user to tell
+Dashboards have many different cards. Each card allows the user to tell
 a different story about what is going on in their house. These cards
 are very customizable, as no household is the same.
 
 This gallery helps our developers and designers to see all the
 different states that each card can be in.
 
-Check [the Lovelace documentation](https://www.home-assistant.io/lovelace) for instructions on how to get started with Lovelace.
+Check [the Dashboards documentation](https://www.home-assistant.io/dashboards/) for instructions on how to get started with Dashboards.

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

@@ -9,7 +9,7 @@ const CONFIGS = [
     heading: "markdown-it demo",
     config: `
 - type: markdown
-  content: >
+  content: >-
     # h1 Heading 8-)
 
     ## h2 Heading
@@ -249,6 +249,17 @@ const CONFIGS = [
     ::: warning
     *here be dragons*
     :::
+
+    ### ha-alert
+
+    You can use our [\`ha-alert\`](https://design.home-assistant.io/#components/ha-alert) component in markdown content rendered in the Home Assistant Frontend.
+
+    <ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
+    <ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
+    <ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
+    <ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
+    <ha-alert title="Test alert">This is an alert with a title</ha-alert>
+
     `,
   },
 ];

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -40,7 +40,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      service_data:
+      data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
@@ -88,7 +88,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      service_data:
+      data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv

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

@@ -29,6 +29,7 @@ const createConfigEntry = (
   source: "zeroconf",
   state: "loaded",
   supports_options: false,
+  supports_remove_device: false,
   supports_unload: true,
   disabled_by: null,
   pref_disable_new_entities: false,
@@ -187,11 +188,15 @@ const createEntityRegistryEntries = (
     device_id: "mock-device-id",
     area_id: null,
     disabled_by: null,
+    hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
+    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",
+    has_entity_name: false,
+    unique_id: "updater",
   },
 ];
 

gallery/src/pages/more-info/cover.ts

@@ -1,16 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
-  SUPPORT_OPEN,
-  SUPPORT_STOP,
-  SUPPORT_CLOSE,
-  SUPPORT_SET_POSITION,
-  SUPPORT_OPEN_TILT,
-  SUPPORT_STOP_TILT,
-  SUPPORT_CLOSE_TILT,
-  SUPPORT_SET_TILT_POSITION,
-} from "../../../../src/data/cover";
+import { CoverEntityFeature } from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,113 +13,127 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
   getEntity("cover", "position_buttons", "on", {
     friendly_name: "Position Buttons",
-    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
+    supported_features:
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE,
   }),
   getEntity("cover", "position_slider_half", "on", {
     friendly_name: "Position Half-Open",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 50,
   }),
   getEntity("cover", "position_slider_open", "on", {
     friendly_name: "Position Open",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 100,
   }),
   getEntity("cover", "position_slider_closed", "on", {
     friendly_name: "Position Closed",
     supported_features:
-      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION,
     current_position: 0,
   }),
   getEntity("cover", "tilt_buttons", "on", {
     friendly_name: "Tilt Buttons",
     supported_features:
-      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT,
   }),
   getEntity("cover", "tilt_slider_half", "on", {
     friendly_name: "Tilt Half-Open",
     supported_features:
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 50,
   }),
   getEntity("cover", "tilt_slider_open", "on", {
     friendly_name: "Tilt Open",
     supported_features:
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 100,
   }),
   getEntity("cover", "tilt_slider_closed", "on", {
     friendly_name: "Tilt Closed",
     supported_features:
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 0,
   }),
   getEntity("cover", "position_slider_tilt_slider", "on", {
     friendly_name: "Both Sliders",
     supported_features:
-      SUPPORT_OPEN +
-      SUPPORT_STOP +
-      SUPPORT_CLOSE +
-      SUPPORT_SET_POSITION +
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_tilt_slider", "on", {
     friendly_name: "Position & Tilt Slider",
     supported_features:
-      SUPPORT_OPEN +
-      SUPPORT_STOP +
-      SUPPORT_CLOSE +
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_slider_tilt", "on", {
     friendly_name: "Position Slider & Tilt",
     supported_features:
-      SUPPORT_OPEN +
-      SUPPORT_STOP +
-      SUPPORT_CLOSE +
-      SUPPORT_SET_POSITION +
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.OPEN +
+      CoverEntityFeature.STOP +
+      CoverEntityFeature.CLOSE +
+      CoverEntityFeature.SET_POSITION +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt_slider", "on", {
     friendly_name: "Position Slider Only & Tilt Buttons",
     supported_features:
-      SUPPORT_SET_POSITION +
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT,
+      CoverEntityFeature.SET_POSITION +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt", "on", {
     friendly_name: "Position Slider Only & Tilt",
     supported_features:
-      SUPPORT_SET_POSITION +
-      SUPPORT_OPEN_TILT +
-      SUPPORT_STOP_TILT +
-      SUPPORT_CLOSE_TILT +
-      SUPPORT_SET_TILT_POSITION,
+      CoverEntityFeature.SET_POSITION +
+      CoverEntityFeature.OPEN_TILT +
+      CoverEntityFeature.STOP_TILT +
+      CoverEntityFeature.CLOSE_TILT +
+      CoverEntityFeature.SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),

gallery/src/pages/more-info/input-number.markdown

@@ -0,0 +1,3 @@
+---
+title: Input Number
+---

gallery/src/pages/more-info/input-number.ts

@@ -0,0 +1,60 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("input_number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-input-number")
+class DemoMoreInfoInputNumber extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-number": DemoMoreInfoInputNumber;
+  }
+}

gallery/src/pages/more-info/light.ts

@@ -1,12 +1,7 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
-  LightColorModes,
-  SUPPORT_EFFECT,
-  SUPPORT_FLASH,
-  SUPPORT_TRANSITION,
-} from "../../../../src/data/light";
+import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -22,8 +17,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorModes.BRIGHTNESS],
-    color_mode: LightColorModes.BRIGHTNESS,
+    supported_color_modes: [LightColorMode.BRIGHTNESS],
+    color_mode: LightColorMode.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -32,10 +27,10 @@ const ENTITIES = [
     min_mireds: 30,
     max_mireds: 150,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
     ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
   }),
   getEntity("light", "color_hs_light", "on", {
     friendly_name: "Color HS Light",
@@ -44,13 +39,16 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.HS,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
+      LightColorMode.HS,
     ],
-    color_mode: LightColorModes.HS,
+    color_mode: LightColorMode.HS,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgb_ct_light", "on", {
@@ -59,22 +57,28 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGB,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
+      LightColorMode.RGB,
     ],
-    color_mode: LightColorModes.COLOR_TEMP,
+    color_mode: LightColorMode.COLOR_TEMP,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_RGB_light", "on", {
-    friendly_name: "Color Effets Light",
+    friendly_name: "Color Effects Light",
     brightness: 255,
     rgb_color: [30, 100, 255],
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
-    color_mode: LightColorModes.RGB,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
+    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
+    color_mode: LightColorMode.RGB,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbw_light", "on", {
@@ -83,13 +87,16 @@ const ENTITIES = [
     rgbw_color: [30, 100, 255, 125],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGBW,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
+      LightColorMode.RGBW,
     ],
-    color_mode: LightColorModes.RGBW,
+    color_mode: LightColorMode.RGBW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbww_light", "on", {
@@ -98,13 +105,16 @@ const ENTITIES = [
     rgbww_color: [30, 100, 255, 125, 10],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.RGBWW,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
+      LightColorMode.RGBWW,
     ],
-    color_mode: LightColorModes.RGBWW,
+    color_mode: LightColorMode.RGBWW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_xy_light", "on", {
@@ -114,13 +124,16 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_features:
+      LightEntityFeature.EFFECT +
+      LightEntityFeature.FLASH +
+      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorModes.BRIGHTNESS,
-      LightColorModes.COLOR_TEMP,
-      LightColorModes.XY,
+      LightColorMode.BRIGHTNESS,
+      LightColorMode.COLOR_TEMP,
+      LightColorMode.XY,
     ],
-    color_mode: LightColorModes.XY,
+    color_mode: LightColorMode.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

gallery/src/pages/more-info/update.markdown

@@ -0,0 +1,3 @@
+---
+title: Update
+---

gallery/src/pages/more-info/update.ts

@@ -0,0 +1,196 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import {
+  UPDATE_SUPPORT_BACKUP,
+  UPDATE_SUPPORT_PROGRESS,
+  UPDATE_SUPPORT_INSTALL,
+  UPDATE_SUPPORT_RELEASE_NOTES,
+} from "../../../../src/data/update";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { LONG_TEXT } from "../../data/text";
+
+const base_attributes = {
+  title: "Awesome",
+  installed_version: "1.2.2",
+  latest_version: "1.2.3",
+  release_url: "https://home-assistant.io",
+  supported_features: UPDATE_SUPPORT_INSTALL,
+  skipped_version: null,
+  in_progress: false,
+  release_summary:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec metus aliquet, porta mi ut, ultrices odio. Etiam egestas orci tellus, non semper metus blandit tincidunt. Praesent elementum turpis vel tempor pharetra. Sed quis cursus diam. Proin sem justo.",
+};
+
+const ENTITIES = [
+  getEntity("update", "update1", "on", {
+    ...base_attributes,
+    friendly_name: "Update",
+  }),
+  getEntity("update", "update2", "on", {
+    ...base_attributes,
+    title: null,
+    friendly_name: "Update without title",
+  }),
+  getEntity("update", "update3", "on", {
+    ...base_attributes,
+    release_url: null,
+    friendly_name: "Update without release_url",
+  }),
+  getEntity("update", "update4", "on", {
+    ...base_attributes,
+    release_summary: null,
+    friendly_name: "Update without release_summary",
+  }),
+  getEntity("update", "update5", "off", {
+    ...base_attributes,
+    installed_version: "1.2.3",
+    friendly_name: "No update",
+  }),
+  getEntity("update", "update6", "off", {
+    ...base_attributes,
+    skipped_version: "1.2.3",
+    friendly_name: "Skipped version",
+  }),
+  getEntity("update", "update7", "on", {
+    ...base_attributes,
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_BACKUP,
+    friendly_name: "With backup support",
+  }),
+  getEntity("update", "update8", "on", {
+    ...base_attributes,
+    in_progress: true,
+    friendly_name: "With true in_progress",
+  }),
+  getEntity("update", "update9", "on", {
+    ...base_attributes,
+    in_progress: 25,
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+    friendly_name: "With 25 in_progress",
+  }),
+  getEntity("update", "update10", "on", {
+    ...base_attributes,
+    in_progress: 50,
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+    friendly_name: "With 50 in_progress",
+  }),
+  getEntity("update", "update11", "on", {
+    ...base_attributes,
+    in_progress: 75,
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+    friendly_name: "With 75 in_progress",
+  }),
+  getEntity("update", "update12", "unavailable", {
+    ...base_attributes,
+    in_progress: 50,
+    friendly_name: "Unavailable",
+  }),
+  getEntity("update", "update13", "on", {
+    ...base_attributes,
+    supported_features: 0,
+    friendly_name: "No install support",
+  }),
+  getEntity("update", "update14", "off", {
+    ...base_attributes,
+    installed_version: null,
+    friendly_name: "Update without installed_version",
+  }),
+  getEntity("update", "update15", "off", {
+    ...base_attributes,
+    latest_version: null,
+    friendly_name: "Update without latest_version",
+  }),
+  getEntity("update", "update16", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
+  getEntity("update", "update17", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes error",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
+  getEntity("update", "update18", "off", {
+    ...base_attributes,
+    friendly_name: "Update with release notes loading",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+  }),
+  getEntity("update", "update19", "on", {
+    ...base_attributes,
+    friendly_name: "Update with auto update",
+    auto_update: true,
+  }),
+  getEntity("update", "update20", "on", {
+    ...base_attributes,
+    in_progress: true,
+    title: undefined,
+    friendly_name: "Installing without title",
+  }),
+  getEntity("update", "update21", "on", {
+    ...base_attributes,
+    in_progress: true,
+    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
+    supported_features:
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+  }),
+];
+
+@customElement("demo-more-info-update")
+class DemoMoreInfoUpdate extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+    hass.mockWS(
+      "update/release_notes",
+      (msg: { type: string; entity_id: string }) => {
+        if (msg.entity_id === "update.update16") {
+          return LONG_TEXT;
+        }
+        if (msg.entity_id === "update.update17") {
+          return Promise.reject({
+            code: "error",
+            message: "Could not fetch release notes",
+          });
+        }
+        if (msg.entity_id === "update.update18") {
+          return undefined;
+        }
+        return null;
+      }
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-update": DemoMoreInfoUpdate;
+  }
+}

gallery/src/pages/user-test/user-types.markdown

@@ -0,0 +1,17 @@
+---
+title: "User types"
+---
+
+We have defined three user types for Home Assistant. They are a lean segmentation of users that helps us make decisions throughout the product. User types differ from traditional personas in that the segmentation criteria aren’t demographic and don’t personify a group into a single character with a fictitious background story. 
+
+# Outgrowers
+
+Users that outgrow big tech smart home solutions. It just needs to work with easy setup via an app.
+
+# Tinkerers
+
+Technoid users in home networking and development that know how to code.
+
+# Questioner
+
+Users who want more advanced home automation, but need support to make it work.

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

@@ -6,10 +6,8 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
 import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
-import {
-  HassioAddonInfo,
-  HassioAddonRepository,
-} from "../../../src/data/hassio/addon";
+import { HassioAddonRepository } from "../../../src/data/hassio/addon";
+import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
@@ -23,20 +21,16 @@ class HassioAddonRepositoryEl extends LitElement {
 
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property({ attribute: false }) public addons!: HassioAddonInfo[];
+  @property({ attribute: false }) public addons!: StoreAddon[];
 
   @property() public filter!: string;
 
-  private _getAddons = memoizeOne(
-    (addons: HassioAddonInfo[], filter?: string) => {
-      if (filter) {
-        return filterAndSort(addons, filter);
-      }
-      return addons.sort((a, b) =>
-        caseInsensitiveStringCompare(a.name, b.name)
-      );
+  private _getAddons = memoizeOne((addons: StoreAddon[], filter?: string) => {
+    if (filter) {
+      return filterAndSort(addons, filter);
     }
-  );
+    return addons.sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
+  });
 
   protected render(): TemplateResult {
     const repo = this.repo;
@@ -68,6 +62,7 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
+                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}
@@ -86,10 +81,10 @@ class HassioAddonRepositoryEl extends LitElement {
                         ? this.supervisor.localize(
                             "common.new_version_available"
                           )
-                        : this.supervisor.localize("addon.installed")
+                        : this.supervisor.localize("addon.state.installed")
                       : addon.available
-                      ? this.supervisor.localize("addon.not_installed")
-                      : this.supervisor.localize("addon.not_available")}
+                      ? this.supervisor.localize("addon.state.not_installed")
+                      : this.supervisor.localize("addon.state.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"
@@ -123,7 +118,7 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}?store=true`);
   }
 
   static get styles(): CSSResultGroup {

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

@@ -14,16 +14,18 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
-import "../../../src/common/search/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/search-input";
 import {
-  HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -59,17 +61,24 @@ class HassioAddonStore extends LitElement {
   @state() private _filter?: string;
 
   public async refreshData() {
-    await reloadHassioAddons(this.hass);
-    await this._loadData();
+    try {
+      await reloadHassioAddons(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
+    } finally {
+      await this._loadData();
+    }
   }
 
   protected render(): TemplateResult {
     let repos: TemplateResult[] = [];
 
-    if (this.supervisor.addon.repositories) {
+    if (this.supervisor.store.repositories) {
       repos = this.addonRepositories(
-        this.supervisor.addon.repositories,
-        this.supervisor.addon.addons,
+        this.supervisor.store.repositories,
+        this.supervisor.store.addons,
         this._filter
       );
     }
@@ -110,8 +119,6 @@ class HassioAddonStore extends LitElement {
               <div class="search">
                 <search-input
                   .hass=${this.hass}
-                  no-label-float
-                  no-underline
                   .filter=${this._filter}
                   @value-changed=${this._filterChanged}
                 ></search-input>
@@ -147,7 +154,7 @@ class HassioAddonStore extends LitElement {
   private addonRepositories = memoizeOne(
     (
       repositories: HassioAddonRepository[],
-      addons: HassioAddonInfo[],
+      addons: StoreAddon[],
       filter?: string
     ) =>
       repositories.sort(sortRepos).map((repo) => {

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import {
   css,
@@ -14,6 +13,7 @@ import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-select";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -50,6 +50,7 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">
@@ -57,7 +58,7 @@ class HassioAddonAudio extends LitElement {
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
           ${this._inputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
@@ -74,9 +75,9 @@ class HassioAddonAudio extends LitElement {
                 </mwc-list-item>
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
           ${this._outputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
@@ -93,7 +94,7 @@ class HassioAddonAudio extends LitElement {
                 >
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -119,10 +120,10 @@ class HassioAddonAudio extends LitElement {
         .card-actions {
           text-align: right;
         }
-        mwc-select {
+        ha-select {
           width: 100%;
         }
-        mwc-select:last-child {
+        ha-select:last-child {
           margin-top: 8px;
         }
       `,

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

@@ -39,7 +39,14 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
+const SUPPORTED_UI_TYPES = [
+  "string",
+  "select",
+  "boolean",
+  "integer",
+  "float",
+  "schema",
+];
 
 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   new Type("!secret", {
@@ -48,6 +55,8 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   }),
 ]);
 
+const MASKED_FIELDS = ["password", "secret", "token"];
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -75,19 +84,66 @@ class HassioAddonConfig extends LitElement {
   public computeLabel = (entry: HaFormSchema): string =>
     this.addon.translations[this.hass.language]?.configuration?.[entry.name]
       ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name].name ||
+    this.addon.translations.en?.configuration?.[entry.name]?.name ||
     entry.name;
 
-  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
-    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
-    schema.map((entry) =>
-      entry.type === "select"
-        ? {
-            ...entry,
-            options: entry.options.map((option) => [option, option]),
-          }
-        : entry
-    )
+  public computeHelper = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.description ||
+    this.addon.translations.en?.configuration?.[entry.name]?.description ||
+    "";
+
+  private _convertSchema = memoizeOne(
+    // Convert supervisor schema to selectors
+    (schema: Record<string, any>): HaFormSchema[] =>
+      schema.map((entry) =>
+        entry.type === "select"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { select: { options: entry.options } },
+            }
+          : entry.type === "string"
+          ? entry.multiple
+            ? {
+                name: entry.name,
+                required: entry.required,
+                selector: {
+                  select: { options: [], multiple: true, custom_value: true },
+                },
+              }
+            : {
+                name: entry.name,
+                required: entry.required,
+                selector: {
+                  text: {
+                    type:
+                      entry.format || MASKED_FIELDS.includes(entry.name)
+                        ? "password"
+                        : "text",
+                  },
+                },
+              }
+          : entry.type === "boolean"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { boolean: {} },
+            }
+          : entry.type === "schema"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { object: {} },
+            }
+          : entry.type === "float" || entry.type === "integer"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { number: { mode: "box" } },
+            }
+          : entry
+      )
   );
 
   private _filteredShchema = memoizeOne(
@@ -106,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}
@@ -140,7 +196,8 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .schema=${this._schema(
+                .computeHelper=${this.computeHelper}
+                .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
                     : this._filteredShchema(
@@ -197,8 +254,9 @@ class HassioAddonConfig extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._canShowSchema = !this.addon.schema!.find(
-      // @ts-ignore
-      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+      (entry) =>
+        // @ts-ignore
+        !SUPPORTED_UI_TYPES.includes(entry.type)
     );
     this._yamlMode = !this._canShowSchema;
   }
@@ -278,7 +336,7 @@ class HassioAddonConfig extends LitElement {
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
       this._error = this.supervisor.localize(
-        "addon.common.update_available",
+        "addon.failed_to_reset",
         "error",
         extractApiErrorMessage(err)
       );

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

@@ -1,4 +1,3 @@
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -8,10 +7,13 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -24,16 +26,6 @@ import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-interface NetworkItem {
-  description: string;
-  container: string;
-  host: number | null;
-}
-
-interface NetworkItemInput extends PaperInputElement {
-  container: string;
-}
-
 @customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -42,9 +34,13 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @state() private _showOptional = false;
+
+  @state() private _configHasChanged = false;
+
   @state() private _error?: string;
 
-  @state() private _config?: NetworkItem[];
+  @state() private _config?: Record<string, any>;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -56,59 +52,61 @@ class HassioAddonNetwork extends LitElement {
       return html``;
     }
 
+    const hasHiddenOptions = Object.keys(this._config).find(
+      (entry) => this._config![entry] === null
+    );
+
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}
       >
         <div class="card-content">
+          <p>
+            ${this.supervisor.localize(
+              "addon.configuration.network.introduction"
+            )}
+          </p>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
 
-          <table>
-            <tbody>
-              <tr>
-                <th>
-                  ${this.supervisor.localize(
-                    "addon.configuration.network.container"
-                  )}
-                </th>
-                <th>
-                  ${this.supervisor.localize(
-                    "addon.configuration.network.host"
-                  )}
-                </th>
-                <th>${this.supervisor.localize("common.description")}</th>
-              </tr>
-              ${this._config!.map(
-                (item) => html`
-                  <tr>
-                    <td>${item.container}</td>
-                    <td>
-                      <paper-input
-                        @value-changed=${this._configChanged}
-                        placeholder=${this.supervisor.localize(
-                          "addon.configuration.network.disabled"
-                        )}
-                        .value=${item.host ? String(item.host) : ""}
-                        .container=${item.container}
-                        no-label-float
-                      ></paper-input>
-                    </td>
-                    <td>${this._computeDescription(item)}</td>
-                  </tr>
-                `
-              )}
-            </tbody>
-          </table>
+          <ha-form
+            .data=${this._config}
+            @value-changed=${this._configChanged}
+            .computeLabel=${this._computeLabel}
+            .computeHelper=${this._computeHelper}
+            .schema=${this._createSchema(
+              this._config,
+              this._showOptional,
+              this.hass.userData?.showAdvanced || false
+            )}
+          ></ha-form>
         </div>
+        ${hasHiddenOptions
+          ? html`<ha-formfield
+              class="show-optional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.network.show_disabled"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
             ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
-          <ha-progress-button @click=${this._saveTapped}>
+          <ha-progress-button
+            @click=${this._saveTapped}
+            .disabled=${!this._configHasChanged}
+          >
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
@@ -123,50 +121,60 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
-  private _computeDescription = (item: NetworkItem): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.container]
-      ?.description ||
-    this.addon.translations.en?.network?.[item.container]?.description ||
-    item.description;
+  private _createSchema = memoizeOne(
+    (
+      config: Record<string, number>,
+      showOptional: boolean,
+      advanced: boolean
+    ): HaFormSchema[] =>
+      (showOptional
+        ? Object.keys(config)
+        : Object.keys(config).filter((entry) => config[entry] !== null)
+      ).map((entry) => ({
+        name: entry,
+        selector: {
+          number: {
+            mode: "box",
+            min: 0,
+            max: 65535,
+            unit_of_measurement: advanced ? entry : undefined,
+          },
+        },
+      }))
+  );
+
+  private _computeLabel = (_: HaFormSchema): string => "";
+
+  private _computeHelper = (item: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.name] ||
+    this.addon.translations.en?.network?.[item.name] ||
+    this.addon.network_description?.[item.name] ||
+    item.name;
 
   private _setNetworkConfig(): void {
-    const network = this.addon.network || {};
-    const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => ({
-      container: key,
-      host: network[key],
-      description: description[key],
-    }));
-    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
+    this._config = this.addon.network || {};
   }
 
-  private async _configChanged(ev: Event): Promise<void> {
-    const target = ev.target as NetworkItemInput;
-    this._config!.forEach((item) => {
-      if (
-        item.container === target.container &&
-        item.host !== parseInt(String(target.value), 10)
-      ) {
-        item.host = target.value ? parseInt(String(target.value), 10) : null;
-      }
-    });
+  private async _configChanged(ev: CustomEvent): Promise<void> {
+    this._configHasChanged = true;
+    this._config! = ev.detail.value;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
-    button.progress = true;
-
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
+      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -177,19 +185,21 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
+      button.actionError();
     }
+  }
 
-    button.progress = false;
+  private _toggleOptional() {
+    this._showOptional = !this._showOptional;
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
-    button.progress = true;
 
     this._error = undefined;
     const networkconfiguration = {};
-    this._config!.forEach((item) => {
-      networkconfiguration[item.container] = parseInt(String(item.host), 10);
+    Object.entries(this._config!).forEach(([key, value]) => {
+      networkconfiguration[key] = value ?? null;
     });
 
     const data: HassioAddonSetOptionParams = {
@@ -198,11 +208,13 @@ class HassioAddonNetwork extends LitElement {
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
+      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -213,8 +225,8 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
+      button.actionError();
     }
-    button.progress = false;
   }
 
   static get styles(): CSSResultGroup {
@@ -232,6 +244,9 @@ class HassioAddonNetwork extends LitElement {
           display: flex;
           justify-content: space-between;
         }
+        .show-optional {
+          padding: 16px;
+        }
       `,
     ];
   }

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

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card>
+        <ha-card outlined>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
@@ -81,7 +81,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
       );
     } catch (err: any) {
       this._error = this.supervisor.localize(
-        "addon.documentation.get_logs",
+        "addon.documentation.get_documentation",
         "error",
         extractApiErrorMessage(err)
       );