Allow partial open of sidebar

.browserslistrc

@@ -1,39 +0,0 @@
-[modern]
-# Support for dynamic import is the main litmus test for serving modern builds.
-# Although officially a ES2020 feature, browsers implemented it early, so this
-# enables all of ES2017 and some features in ES2018.
-supports es6-module-dynamic-import
-
-# Exclude Safari 11-12 because of a bug in tagged template literals
-# https://bugs.webkit.org/show_bug.cgi?id=190756
-# Note: Dropping version 11 also enables several more ES2018 features
-not Safari < 13
-not iOS < 13
-
-# Exclude KaiOS, QQ, and UC browsers due to lack of sufficient feature support data
-# Babel ignores these automatically, but we need here for Webpack to output ESM with dynamic imports
-not KaiOS > 0
-not QQAndroid > 0
-not UCAndroid > 0
-
-# Exclude unsupported browsers
-not dead
-
-[legacy]
-# Legacy builds are served when modern requirements are not met and support browsers:
-# - released in the last 7 years + current alpha/beta versionss
-# - with global utilization above 0.05%
-# The lattermost query ensures that support for popular old browsers is not dropped too early
-# (e.g. IE 11, Android 4.4, or Samsung 4).
-#
-# In addition, legacy browsers must support some minimum features that cannot be polyfilled:
-# - ES5 (strict mode)
-# - web sockets to communicate with backend
-# - inline SVG used widely in buttons, widgets, etc.
-# - custom events used for most user interactions
-# - CSS flexbox used in the majority of the layout
-# Nearly all of these are redundant with the above rules.
-# As of May 2023, only web sockets must be added to the query.
-unreleased versions
-last 7 years
-> 0.05% and supports websockets

.devcontainer/Dockerfile

@@ -1,7 +1,13 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.1/containers/python-3/.devcontainer/base.Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.11
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-3.10
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \
   DEVCONTAINER=true \
   PATH=$PATH:./node_modules/.bin
+
+# Install nvm
+COPY .nvmrc /tmp/.nvmrc
+RUN \
+  su vscode -c \
+    "source /usr/local/share/nvm/nvm.sh && nvm install $(cat /tmp/.nvmrc) 2>&1"

.devcontainer/devcontainer.json

@@ -5,7 +5,7 @@
     "context": ".."
   },
   "appPort": "8124:8123",
-  "postStartCommand": "script/bootstrap",
+  "postCreateCommand": "script/bootstrap",
   "containerEnv": {
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },

.github/dependabot.yml

@@ -6,6 +6,3 @@ updates:
       interval: weekly
       time: "06:00"
     open-pull-requests-limit: 10
-    labels:
-      - Dependencies
-      - GitHub Actions

.github/labeler.yml

@@ -1,31 +0,0 @@
-Build:
-  - build-scripts/**
-  - .browserslistrc
-  - gulpfile.js
-
-Cast:
-  - cast/src/**
-  - src/cast/**
-
-Demo:
-  - demo/src/**
-  - src/fake_data/**
-
-Design:
-  - gallery/src/**
-  - src/fake_data/**
-
-Dependencies:
-  - package.json
-  - renovate.json
-  - yarn.lock
-  - .yarn/**
-  - .yarnrc.yml
-  - .nvmrc
-
-GitHub Actions:
-  - .github/workflows/**
-  - .github/*.yml
-
-Supervisor:
-  - hassio/src/**

.github/release-drafter.yml

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

.github/workflows/cast_deployment.yaml

@@ -9,6 +9,7 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -21,14 +22,14 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
         with:
           ref: dev
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -57,14 +58,14 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
         with:
           ref: master
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/ci.yaml

@@ -11,6 +11,7 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -24,11 +25,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.5.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -36,14 +37,6 @@ jobs:
         run: yarn dedupe --check
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
-      - name: Setup lint cache
-        uses: actions/cache@v3.3.1
-        with:
-          path: |
-            node_modules/.cache/prettier
-            node_modules/.cache/eslint
-          key: lint-${{ github.sha }}
-          restore-keys: lint-
       - name: Run eslint
         run: yarn run lint:eslint --quiet
       - name: Run tsc
@@ -55,11 +48,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.5.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -73,11 +66,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.5.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
@@ -91,11 +84,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/checkout@v3.5.0
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/codeql-analysis.yml

@@ -17,44 +17,44 @@ jobs:
       matrix:
         # Override automatic language detection by changing the below list
         # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ["javascript"]
+        language: ['javascript']
         # Learn more...
         # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3.6.0
-        with:
-          # We must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head.
-          fetch-depth: 2
+    - name: Checkout repository
+      uses: actions/checkout@v3.5.0
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
 
-      # If this run was triggered by a pull request event, then checkout
-      # the head of the pull request instead of the merge commit.
-      - run: git checkout HEAD^2
-        if: ${{ github.event_name == 'pull_request' }}
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
 
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      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@v2
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
 
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
 
-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
 
-      #- run: |
-      #   make bootstrap
-      #   make release
+    #- run: |
+    #   make bootstrap
+    #   make release
 
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/demo_deployment.yaml

@@ -10,26 +10,27 @@ on:
       - master
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   deploy_dev:
     runs-on: ubuntu-latest
     name: Demo Development
-    if: github.event_name != 'push' || github.ref_name != 'master'
+    if: github.event_name != 'push' || github.ref != 'master'
     environment:
       name: Demo Development
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
         with:
           ref: dev
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -52,20 +53,20 @@ jobs:
   deploy_master:
     runs-on: ubuntu-latest
     name: Demo Production
-    if: github.event_name == 'push' && github.ref_name == 'master'
+    if: github.event_name == 'push' && github.ref == 'master'
     environment:
       name: Demo Production
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
         with:
           ref: master
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/design_deployment.yaml

@@ -6,6 +6,7 @@ on:
     - cron: "0 0 * * *"
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -16,12 +17,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/design_preview.yaml

@@ -11,6 +11,7 @@ on:
       - dev
 
 env:
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
@@ -21,12 +22,12 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/labeler.yaml

@@ -1,15 +0,0 @@
-name: "Pull Request Labeler"
-
-on: pull_request_target
-
-jobs:
-  triage:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Apply labels
-        uses: actions/labeler@v4.3.0
-        with:
-          sync-labels: true

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

@@ -6,7 +6,8 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,17 +21,17 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

@@ -6,7 +6,8 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.11"
+  PYTHON_VERSION: "3.10"
+  NODE_VERSION: 16
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -23,7 +24,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -33,10 +34,10 @@ jobs:
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
-      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3.6.0
         with:
-          node-version-file: ".nvmrc"
+          node-version: ${{ env.NODE_VERSION }}
           cache: yarn
 
       - name: Install dependencies
@@ -74,9 +75,9 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2023.04.0
+        uses: home-assistant/wheels@2022.10.1
         with:
-          abi: cp311
+          abi: cp310
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/translations.yaml

@@ -7,15 +7,19 @@ on:
     paths:
       - src/translations/en.json
 
+env:
+  NODE_VERSION: 16
+
 jobs:
   upload:
     name: Upload
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.6.0
+        uses: actions/checkout@v3.5.0
 
       - name: Upload Translations
         run: |
           export LOKALISE_TOKEN="${{ secrets.LOKALISE_TOKEN }}"
+
           ./script/translations_upload_base

.nvmrc

@@ -1 +1 @@
-18
+16

.prettierignore

@@ -1,3 +1,9 @@
-CLA.md
-CODE_OF_CONDUCT.md
-LICENSE.md
+build
+translations/*
+node_modules/*
+hass_frontend/*
+pip-selfcheck.json
+
+# vscode
+.vscode/*
+!.vscode/extensions.json

.vscode/launch.json

@@ -9,7 +9,9 @@
       "webRoot": "${workspaceFolder}/hass_frontend",
       "disableNetworkCache": true,
       "preLaunchTask": "Develop Frontend",
-      "outFiles": ["${workspaceFolder}/hass_frontend/frontend_latest/*.js"]
+      "outFiles": [
+        "${workspaceFolder}/hass_frontend/frontend_latest/*.js"
+      ]
     },
     {
       "name": "Debug Gallery",
@@ -37,6 +39,6 @@
       "webRoot": "${workspaceFolder}/cast/dist",
       "disableNetworkCache": true,
       "preLaunchTask": "Develop Cast"
-    }
+    },
   ]
 }

.vscode/tasks.json

@@ -197,7 +197,7 @@
       "type": "gulp",
       "task": "setup-and-fetch-nightly-translations",
       "problemMatcher": []
-    }
+          }
   ],
   "inputs": [
     {

.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch

@@ -1,39 +0,0 @@
-diff --git a/modular/sortable.complete.esm.js b/modular/sortable.complete.esm.js
-index 02e9f2d6bebeb430fe6e7c1cc3f9c3c9df051f14..bb8268b0844a1faa4108cc92c0be2a3dbaf23f83 100644
---- a/modular/sortable.complete.esm.js
-+++ b/modular/sortable.complete.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index b04c8b4634f7c6b4ef1aadbb48afe6564306dea9..39a107163c8c336ebd669b5ea8a936af87e1c1e7 100644
---- a/modular/sortable.core.esm.js
-+++ b/modular/sortable.core.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js
-index 6ec7ed1bb557e21c2578200161e989c65d23150b..0a05475a22904472fac6c13f524c674da76584b0 100644
---- a/modular/sortable.esm.js
-+++ b/modular/sortable.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
--        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();

.yarnrc.yml

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

build-scripts/bundle.cjs

@@ -8,7 +8,7 @@ module.exports.sourceMapURL = () => {
   const ref = env.version().endsWith("dev")
     ? process.env.GITHUB_SHA || "dev"
     : env.version();
-  return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}/`;
+  return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}`;
 };
 
 // Files from NPM Packages that should not be imported
@@ -76,8 +76,7 @@ module.exports.htmlMinifierOptions = {
 
 module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   safari10: !latestBuild,
-  ecma: latestBuild ? 2015 : 5,
-  module: latestBuild,
+  ecma: latestBuild ? undefined : 5,
   format: { comments: false },
   sourceMap: !isTestBuild,
 });
@@ -85,25 +84,17 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
 module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   babelrc: false,
   compact: false,
-  assumptions: {
-    privateFieldsAsProperties: true,
-    setPublicClassFields: true,
-    setSpreadProperties: true,
-  },
-  browserslistEnv: latestBuild ? "modern" : "legacy",
-  // Must be unambiguous because some dependencies are CommonJS only
-  sourceType: "unambiguous",
   presets: [
-    [
+    !latestBuild && [
       "@babel/preset-env",
       {
-        useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.32", proposals: true },
+        useBuiltIns: "entry",
+        corejs: { version: "3.29", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ],
+  ].filter(Boolean),
   plugins: [
     [
       path.resolve(
@@ -115,6 +106,22 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
+    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
+    !latestBuild && [
+      "@babel/plugin-proposal-object-rest-spread",
+      { loose: true, useBuiltIns: true },
+    ],
+    // Only support the syntax, Webpack will handle it.
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
+    // Support  various proposals
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
@@ -132,13 +139,6 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         failOnError: true, // we can turn this off in case of false positives
       },
     ],
-    // Import helpers and regenerator from runtime package
-    [
-      "@babel/plugin-transform-runtime",
-      { version: require("../package.json").dependencies["@babel/runtime"] },
-    ],
-    // Support  some proposals still in TC39 process
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
@@ -157,27 +157,27 @@ const publicPath = (latestBuild, root = "") =>
   latestBuild ? `${root}/frontend_latest/` : `${root}/frontend_es5/`;
 
 /*
-  BundleConfig {
-    // Object with entrypoints that need to be bundled
-    entry: { [name: string]: pathToFile },
-    // Folder where bundled files need to be written
-    outputPath: string,
-    // absolute url-path where bundled files can be found
-    publicPath: string,
-    // extra definitions that we need to replace in source
-    defineOverlay: {[name: string]: value },
-    // if this is a production build
-    isProdBuild: boolean,
-    // If we're targeting latest browsers
-    latestBuild: boolean,
-    // If we're doing a stats build (create nice chunk names)
-    isStatsBuild: boolean,
-    // If it's just a test build in CI, skip time on source map generation
-    isTestBuild: boolean,
-    // Names of entrypoints that should not be hashed
-    dontHash: Set<string>
-  }
-  */
+BundleConfig {
+  // Object with entrypoints that need to be bundled
+  entry: { [name: string]: pathToFile },
+  // Folder where bundled files need to be written
+  outputPath: string,
+  // absolute url-path where bundled files can be found
+  publicPath: string,
+  // extra definitions that we need to replace in source
+  defineOverlay: {[name: string]: value },
+  // if this is a production build
+  isProdBuild: boolean,
+  // If we're targeting latest browsers
+  latestBuild: boolean,
+  // If we're doing a stats build (create nice chunk names)
+  isStatsBuild: boolean,
+  // If it's just a test build in CI, skip time on source map generation
+  isTestBuild: boolean,
+  // Names of entrypoints that should not be hashed
+  dontHash: Set<string>
+}
+*/
 
 module.exports.config = {
   app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
@@ -260,7 +260,6 @@ module.exports.config = {
       isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
-        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
       },
     };
   },

build-scripts/gulp/app.cjs

@@ -1,16 +1,18 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./locale-data.js";
-import "./rollup.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./wds.js";
-import "./webpack.js";
+// Run HA develop mode
+
+const gulp = require("gulp");
+const env = require("../env.cjs");
+require("./clean.cjs");
+require("./translations.cjs");
+require("./locale-data.cjs");
+require("./gen-icons-json.cjs");
+require("./gather-static.cjs");
+require("./compress.cjs");
+require("./webpack.cjs");
+require("./service-worker.cjs");
+require("./entry-html.cjs");
+require("./rollup.cjs");
+require("./wds.cjs");
 
 gulp.task(
   "develop-app",
@@ -22,7 +24,8 @@ gulp.task(
     gulp.parallel(
       "gen-service-worker-app-dev",
       "gen-icons-json",
-      "gen-pages-app-dev",
+      "gen-pages-dev",
+      "gen-index-app-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -47,6 +50,10 @@ gulp.task(
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests
     ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
+    gulp.parallel(
+      "gen-pages-prod",
+      "gen-index-app-prod",
+      "gen-service-worker-app-prod"
+    )
   )
 );

build-scripts/gulp/cast.cjs

@@ -1,12 +1,13 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./rollup.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./webpack.js";
+const gulp = require("gulp");
+const env = require("../env.cjs");
+
+require("./clean.cjs");
+require("./translations.cjs");
+require("./gather-static.cjs");
+require("./webpack.cjs");
+require("./service-worker.cjs");
+require("./entry-html.cjs");
+require("./rollup.cjs");
 
 gulp.task(
   "develop-cast",
@@ -18,7 +19,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "gen-pages-cast-dev",
+    "gen-index-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
@@ -34,6 +35,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
-    "gen-pages-cast-prod"
+    "gen-index-cast-prod"
   )
 );

build-scripts/gulp/clean.cjs

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

build-scripts/gulp/compress.cjs

@@ -0,0 +1,45 @@
+// Tasks to compress
+
+const gulp = require("gulp");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const path = require("path");
+const paths = require("../paths.cjs");
+
+const zopfliOptions = { threshold: 150 };
+
+gulp.task("compress-app", function compressApp() {
+  const jsLatest = gulp
+    .src(path.resolve(paths.app_output_latest, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_latest));
+
+  const jsEs5 = gulp
+    .src(path.resolve(paths.app_output_es5, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_es5));
+
+  const polyfills = gulp
+    .src(path.resolve(paths.app_output_static, "polyfills/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "polyfills")));
+
+  const translations = gulp
+    .src(path.resolve(paths.app_output_static, "translations/**/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "translations")));
+
+  const icons = gulp
+    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations, icons);
+});
+
+gulp.task("compress-hassio", function compressApp() {
+  return gulp
+    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.hassio_output_root));
+});

build-scripts/gulp/compress.js

@@ -1,16 +0,0 @@
-// Tasks to compress
-
-import gulp from "gulp";
-import zopfli from "gulp-zopfli-green";
-import paths from "../paths.cjs";
-
-const zopfliOptions = { threshold: 150 };
-
-const compressDist = (rootDir) =>
-  gulp
-    .src([`${rootDir}/**/*.{js,json,css,svg}`])
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir));
-
-gulp.task("compress-app", () => compressDist(paths.app_output_root));
-gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));

build-scripts/gulp/demo.cjs

@@ -1,13 +1,15 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./rollup.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./webpack.js";
+// Run demo develop mode
+const gulp = require("gulp");
+const env = require("../env.cjs");
+
+require("./clean.cjs");
+require("./translations.cjs");
+require("./gen-icons-json.cjs");
+require("./gather-static.cjs");
+require("./webpack.cjs");
+require("./service-worker.cjs");
+require("./entry-html.cjs");
+require("./rollup.cjs");
 
 gulp.task(
   "develop-demo",
@@ -19,7 +21,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel(
       "gen-icons-json",
-      "gen-pages-demo-dev",
+      "gen-index-demo-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -40,6 +42,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
-    "gen-pages-demo-prod"
+    "gen-index-demo-prod"
   )
 );

build-scripts/gulp/download-translations.js

@@ -1,176 +0,0 @@
-import fs from "fs/promises";
-import gulp from "gulp";
-import path from "path";
-import mapStream from "map-stream";
-import transform from "gulp-json-transform";
-import { LokaliseApi } from "@lokalise/node-api";
-import JSZip from "jszip";
-
-const inDir = "translations";
-const inDirFrontend = `${inDir}/frontend`;
-const inDirBackend = `${inDir}/backend`;
-const srcMeta = "src/translations/translationMetadata.json";
-const encoding = "utf8";
-
-function hasHtml(data) {
-  return /<[a-z][\s\S]*>/i.test(data);
-}
-
-function recursiveCheckHasHtml(file, data, errors, recKey) {
-  Object.keys(data).forEach(function (key) {
-    if (typeof data[key] === "object") {
-      const nextRecKey = recKey ? `${recKey}.${key}` : key;
-      recursiveCheckHasHtml(file, data[key], errors, nextRecKey);
-    } else if (hasHtml(data[key])) {
-      errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
-    }
-  });
-}
-
-function checkHtml() {
-  const errors = [];
-
-  return mapStream(function (file, cb) {
-    const content = file.contents;
-    let error;
-    if (content) {
-      if (hasHtml(String(content))) {
-        const data = JSON.parse(String(content));
-        recursiveCheckHasHtml(file, data, errors);
-        if (errors.length > 0) {
-          error = errors.join("\r\n");
-        }
-      }
-    }
-    cb(error, file);
-  });
-}
-
-function convertBackendTranslations(data, _file) {
-  const output = { component: {} };
-  if (!data.component) {
-    return output;
-  }
-  Object.keys(data.component).forEach((domain) => {
-    if (!("entity_component" in data.component[domain])) {
-      return;
-    }
-    output.component[domain] = { entity_component: {} };
-    Object.keys(data.component[domain].entity_component).forEach((key) => {
-      output.component[domain].entity_component[key] =
-        data.component[domain].entity_component[key];
-    });
-  });
-  return output;
-}
-
-gulp.task("convert-backend-translations", function () {
-  return gulp
-    .src([`${inDirBackend}/*.json`])
-    .pipe(transform((data, file) => convertBackendTranslations(data, file)))
-    .pipe(gulp.dest(inDirBackend));
-});
-
-gulp.task("check-translations-html", function () {
-  return gulp
-    .src([`${inDirFrontend}/*.json`, `${inDirBackend}/*.json`])
-    .pipe(checkHtml());
-});
-
-gulp.task("check-all-files-exist", async function () {
-  const file = await fs.readFile(srcMeta, { encoding });
-  const meta = JSON.parse(file);
-  const writings = [];
-  Object.keys(meta).forEach((lang) => {
-    writings.push(
-      fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
-        flag: "wx",
-      }),
-      fs.writeFile(`${inDirBackend}/${lang}.json`, JSON.stringify({}), {
-        flag: "wx",
-      })
-    );
-  });
-  await Promise.allSettled(writings);
-});
-
-const lokaliseProjects = {
-  backend: "130246255a974bd3b5e8a1.51616605",
-  frontend: "3420425759f6d6d241f598.13594006",
-};
-
-gulp.task("fetch-lokalise", async function () {
-  let apiKey;
-  try {
-    apiKey =
-      process.env.LOKALISE_TOKEN ||
-      (await fs.readFile(".lokalise_token", { encoding }));
-  } catch {
-    throw new Error(
-      "An Administrator Lokalise API token is required to download the latest set of translations. Place your token in a new file `.lokalise_token` in the repo root directory."
-    );
-  }
-  const lokaliseApi = new LokaliseApi({ apiKey });
-
-  const mkdirPromise = Promise.all([
-    fs.mkdir(inDirFrontend, { recursive: true }),
-    fs.mkdir(inDirBackend, { recursive: true }),
-  ]);
-
-  await Promise.all(
-    Object.entries(lokaliseProjects).map(([project, projectId]) =>
-      lokaliseApi
-        .files()
-        .download(projectId, {
-          format: "json",
-          original_filenames: false,
-          replace_breaks: false,
-          json_unescaped_slashes: true,
-          export_empty_as: "skip",
-        })
-        .then((download) => fetch(download.bundle_url))
-        .then((response) => {
-          if (response.status === 200 || response.status === 0) {
-            return response.arrayBuffer();
-          }
-          throw new Error(response.statusText);
-        })
-        .then(JSZip.loadAsync)
-        .then(async (contents) => {
-          await mkdirPromise;
-          return Promise.all(
-            Object.keys(contents.files).map(async (filename) => {
-              const file = contents.file(filename);
-              if (!file) {
-                // no file, probably a directory
-                return Promise.resolve();
-              }
-              return file
-                .async("nodebuffer")
-                .then((content) =>
-                  fs.writeFile(
-                    path.join(
-                      inDir,
-                      project,
-                      filename.split("/").splice(-1)[0]
-                    ),
-                    content,
-                    { flag: "w", encoding }
-                  )
-                );
-            })
-          );
-        })
-    )
-  );
-});
-
-gulp.task(
-  "download-translations",
-  gulp.series(
-    "fetch-lokalise",
-    "convert-backend-translations",
-    "check-translations-html",
-    "check-all-files-exist"
-  )
-);

build-scripts/gulp/download_translations.cjs

@@ -0,0 +1,69 @@
+const gulp = require("gulp");
+const fs = require("fs/promises");
+const mapStream = require("map-stream");
+
+const inDirFrontend = "translations/frontend";
+const inDirBackend = "translations/backend";
+const srcMeta = "src/translations/translationMetadata.json";
+const encoding = "utf8";
+
+function hasHtml(data) {
+  return /<[a-z][\s\S]*>/i.test(data);
+}
+
+function recursiveCheckHasHtml(file, data, errors, recKey) {
+  Object.keys(data).forEach(function (key) {
+    if (typeof data[key] === "object") {
+      const nextRecKey = recKey ? `${recKey}.${key}` : key;
+      recursiveCheckHasHtml(file, data[key], errors, nextRecKey);
+    } else if (hasHtml(data[key])) {
+      errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
+    }
+  });
+}
+
+function checkHtml() {
+  const errors = [];
+
+  return mapStream(function (file, cb) {
+    const content = file.contents;
+    let error;
+    if (content) {
+      if (hasHtml(String(content))) {
+        const data = JSON.parse(String(content));
+        recursiveCheckHasHtml(file, data, errors);
+        if (errors.length > 0) {
+          error = errors.join("\r\n");
+        }
+      }
+    }
+    cb(error, file);
+  });
+}
+
+// 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());
+});
+
+gulp.task("check-all-files-exist", async function () {
+  const file = await fs.readFile(srcMeta, { encoding });
+  const meta = JSON.parse(file);
+  const writings = [];
+  Object.keys(meta).forEach((lang) => {
+    writings.push(
+      fs.writeFile(`${inDirFrontend}/${lang}.json`, JSON.stringify({}), {
+        flag: "wx",
+      }),
+      fs.writeFile(`${inDirBackend}/${lang}.json`, JSON.stringify({}), {
+        flag: "wx",
+      })
+    );
+  });
+  await Promise.allSettled(writings);
+});
+
+gulp.task(
+  "check-downloaded-translations",
+  gulp.series("check-translations-html", "check-all-files-exist")
+);

build-scripts/gulp/entry-html.cjs

@@ -0,0 +1,351 @@
+// Tasks to generate entry HTML
+const gulp = require("gulp");
+const fs = require("fs-extra");
+const path = require("path");
+const template = require("lodash.template");
+const { minify } = require("html-minifier-terser");
+const paths = require("../paths.cjs");
+const env = require("../env.cjs");
+const { htmlMinifierOptions, terserOptions } = require("../bundle.cjs");
+
+const templatePath = (tpl) =>
+  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
+
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
+  return compiled({
+    ...data,
+    useRollup: env.useRollup(),
+    useWDS: env.useWDS(),
+    renderTemplate,
+  });
+};
+
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderCastTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderGalleryTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const minifyHtml = (content) =>
+  minify(content, {
+    ...htmlMinifierOptions,
+    conservativeCollapse: false,
+    minifyJS: terserOptions({
+      latestBuild: false, // Shared scripts should be ES5
+      isTestBuild: true, // Don't need source maps
+    }),
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+
+      es5PageJS: `/frontend_es5/${page}.js`,
+    });
+
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      content
+    );
+  }
+  done();
+});
+
+gulp.task("gen-pages-prod", async () => {
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
+
+  const minifiedHTML = [];
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+      es5PageJS: es5Manifest[`${page}.js`],
+    });
+
+    minifiedHTML.push(
+      minifyHtml(content).then((minified) =>
+        fs.outputFileSync(
+          path.resolve(paths.app_output_root, `${page}.html`),
+          minified
+        )
+      )
+    );
+  }
+  await Promise.all(minifiedHTML);
+});
+
+gulp.task("gen-index-app-dev", (done) => {
+  let latestAppJS;
+  let latestCoreJS;
+  let latestCustomPanelJS;
+
+  if (env.useWDS()) {
+    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+    latestCustomPanelJS =
+      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+  } else {
+    latestAppJS = "/frontend_latest/app.js";
+    latestCoreJS = "/frontend_latest/core.js";
+    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+  }
+
+  const content = renderTemplate("index", {
+    latestAppJS,
+    latestCoreJS,
+    latestCustomPanelJS,
+
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+  }).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-app-prod", async () => {
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+  });
+  const minified = (await minifyHtml(content)).replace(
+    /#THEMEC/g,
+    "{{ theme_color }}"
+  );
+
+  fs.outputFileSync(
+    path.resolve(paths.app_output_root, "index.html"),
+    minified
+  );
+});
+
+gulp.task("gen-index-cast-dev", (done) => {
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: "/frontend_latest/receiver.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "receiver.html"),
+    contentReceiver
+  );
+
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: "/frontend_latest/media.js",
+    es5MediaJS: "/frontend_es5/media.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-cast-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    paths.cast_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.cast_output_es5,
+    "manifest.json"
+  ));
+
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: latestManifest["receiver.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "receiver.html"),
+    contentReceiver
+  );
+
+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: latestManifest["media.js"],
+    es5MediaJS: es5Manifest["media.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    content
+  );
+  done();
+});
+
+gulp.task("gen-index-demo-prod", async () => {
+  const latestManifest = require(path.resolve(
+    paths.demo_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = await minifyHtml(content);
+
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    minified
+  );
+});
+
+gulp.task("gen-index-gallery-dev", (done) => {
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: "./frontend_latest/entrypoint.js",
+  });
+
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    content
+  );
+  done();
+});
+
+gulp.task("gen-index-gallery-prod", async () => {
+  const latestManifest = require(path.resolve(
+    paths.gallery_output_latest,
+    "manifest.json"
+  ));
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: latestManifest["entrypoint.js"],
+  });
+  const minified = await minifyHtml(content);
+
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    minified
+  );
+});
+
+gulp.task("gen-index-hassio-dev", async () => {
+  writeHassioEntrypoint(
+    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
+    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
+  );
+});
+
+gulp.task("gen-index-hassio-prod", async () => {
+  const latestManifest = require(path.resolve(
+    paths.hassio_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.hassio_output_es5,
+    "manifest.json"
+  ));
+  writeHassioEntrypoint(
+    latestManifest["entrypoint.js"],
+    es5Manifest["entrypoint.js"]
+  );
+});
+
+function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
+  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+  fs.writeFileSync(
+    path.resolve(paths.hassio_output_root, "entrypoint.js"),
+    `
+function loadES5() {
+  var el = document.createElement('script');
+  el.src = '${es5Entrypoint}';
+  document.body.appendChild(el);
+}
+if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
+    loadES5();
+} else {
+  try {
+    new Function("import('${latestEntrypoint}')")();
+  } catch (err) {
+    loadES5();
+  }
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}

build-scripts/gulp/entry-html.js

@@ -1,233 +0,0 @@
-// Tasks to generate entry HTML
-
-import fs from "fs-extra";
-import gulp from "gulp";
-import { minify } from "html-minifier-terser";
-import template from "lodash.template";
-import path from "path";
-import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-
-const renderTemplate = (templateFile, data = {}) => {
-  const compiled = template(
-    fs.readFileSync(templateFile, { encoding: "utf-8" })
-  );
-  return compiled({
-    ...data,
-    useRollup: env.useRollup(),
-    useWDS: env.useWDS(),
-    // Resolve any child/nested templates relative to the parent and pass the same data
-    renderTemplate: (childTemplate) =>
-      renderTemplate(
-        path.resolve(path.dirname(templateFile), childTemplate),
-        data
-      ),
-  });
-};
-
-const WRAP_TAGS = { ".js": "script", ".css": "style" };
-
-const minifyHtml = (content, ext) => {
-  const wrapTag = WRAP_TAGS[ext] || "";
-  const begTag = wrapTag && `<${wrapTag}>`;
-  const endTag = wrapTag && `</${wrapTag}>`;
-  return minify(begTag + content + endTag, {
-    ...htmlMinifierOptions,
-    conservativeCollapse: false,
-    minifyJS: terserOptions({
-      latestBuild: false, // Shared scripts should be ES5
-      isTestBuild: true, // Don't need source maps
-    }),
-  }).then((wrapped) =>
-    wrapTag ? wrapped.slice(begTag.length, -endTag.length) : wrapped
-  );
-};
-
-// Function to generate a dev task for each project's configuration
-// Note Currently WDS paths are hard-coded to only work for app
-const genPagesDevTask =
-  (
-    pageEntries,
-    inputRoot,
-    outputRoot,
-    useWDS = false,
-    inputSub = "src/html",
-    publicRoot = ""
-  ) =>
-  async () => {
-    for (const [page, entries] of Object.entries(pageEntries)) {
-      const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
-        {
-          latestEntryJS: entries.map((entry) =>
-            useWDS
-              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
-              : `${publicRoot}/frontend_latest/${entry}.js`
-          ),
-          es5EntryJS: entries.map(
-            (entry) => `${publicRoot}/frontend_es5/${entry}.js`
-          ),
-          latestCustomPanelJS: useWDS
-            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
-            : `${publicRoot}/frontend_latest/custom-panel.js`,
-          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
-        }
-      );
-      fs.outputFileSync(path.resolve(outputRoot, page), content);
-    }
-  };
-
-// Same as previous but for production builds
-// (includes minification and hashed file names from manifest)
-const genPagesProdTask =
-  (
-    pageEntries,
-    inputRoot,
-    outputRoot,
-    outputLatest,
-    outputES5,
-    inputSub = "src/html"
-  ) =>
-  async () => {
-    const latestManifest = fs.readJsonSync(
-      path.resolve(outputLatest, "manifest.json")
-    );
-    const es5Manifest = outputES5
-      ? fs.readJsonSync(path.resolve(outputES5, "manifest.json"))
-      : {};
-    const minifiedHTML = [];
-    for (const [page, entries] of Object.entries(pageEntries)) {
-      const content = renderTemplate(
-        path.resolve(inputRoot, inputSub, `${page}.template`),
-        {
-          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
-          latestCustomPanelJS: latestManifest["custom-panel.js"],
-          es5CustomPanelJS: es5Manifest["custom-panel.js"],
-        }
-      );
-      minifiedHTML.push(
-        minifyHtml(content, path.extname(page)).then((minified) =>
-          fs.outputFileSync(path.resolve(outputRoot, page), minified)
-        )
-      );
-    }
-    await Promise.all(minifiedHTML);
-  };
-
-// Map HTML pages to their required entrypoints
-const APP_PAGE_ENTRIES = {
-  "authorize.html": ["authorize"],
-  "onboarding.html": ["onboarding"],
-  "index.html": ["core", "app"],
-};
-
-gulp.task(
-  "gen-pages-app-dev",
-  genPagesDevTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    env.useWDS()
-  )
-);
-
-gulp.task(
-  "gen-pages-app-prod",
-  genPagesProdTask(
-    APP_PAGE_ENTRIES,
-    paths.polymer_dir,
-    paths.app_output_root,
-    paths.app_output_latest,
-    paths.app_output_es5
-  )
-);
-
-const CAST_PAGE_ENTRIES = {
-  "faq.html": ["launcher"],
-  "index.html": ["launcher"],
-  "media.html": ["media"],
-  "receiver.html": ["receiver"],
-};
-
-gulp.task(
-  "gen-pages-cast-dev",
-  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
-);
-
-gulp.task(
-  "gen-pages-cast-prod",
-  genPagesProdTask(
-    CAST_PAGE_ENTRIES,
-    paths.cast_dir,
-    paths.cast_output_root,
-    paths.cast_output_latest,
-    paths.cast_output_es5
-  )
-);
-
-const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
-
-gulp.task(
-  "gen-pages-demo-dev",
-  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
-);
-
-gulp.task(
-  "gen-pages-demo-prod",
-  genPagesProdTask(
-    DEMO_PAGE_ENTRIES,
-    paths.demo_dir,
-    paths.demo_output_root,
-    paths.demo_output_latest,
-    paths.demo_output_es5
-  )
-);
-
-const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
-
-gulp.task(
-  "gen-pages-gallery-dev",
-  genPagesDevTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root
-  )
-);
-
-gulp.task(
-  "gen-pages-gallery-prod",
-  genPagesProdTask(
-    GALLERY_PAGE_ENTRIES,
-    paths.gallery_dir,
-    paths.gallery_output_root,
-    paths.gallery_output_latest
-  )
-);
-
-const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
-
-gulp.task(
-  "gen-pages-hassio-dev",
-  genPagesDevTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    undefined,
-    "src",
-    paths.hassio_publicPath
-  )
-);
-
-gulp.task(
-  "gen-pages-hassio-prod",
-  genPagesProdTask(
-    HASSIO_PAGE_ENTRIES,
-    paths.hassio_dir,
-    paths.hassio_output_root,
-    paths.hassio_output_latest,
-    paths.hassio_output_es5,
-    "src"
-  )
-);

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

@@ -1,15 +1,14 @@
 // Task to download the latest Lokalise translations from the nightly workflow artifacts
 
-import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
-import { retry } from "@octokit/plugin-retry";
-import { Octokit } from "@octokit/rest";
-import { deleteAsync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
-import jszip from "jszip";
-import path from "path";
-import process from "process";
-import tar from "tar";
+const del = import("del");
+const fs = require("fs/promises");
+const path = require("path");
+const process = require("process");
+const gulp = require("gulp");
+const jszip = require("jszip");
+const tar = require("tar");
+const { Octokit } = require("@octokit/rest");
+const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
@@ -38,7 +37,7 @@ gulp.task("fetch-nightly-translations", async function () {
   // and stop if they are not old enough
   let currentArtifact;
   try {
-    currentArtifact = JSON.parse(await readFile(ARTIFACT_FILE, "utf-8"));
+    currentArtifact = JSON.parse(await fs.readFile(ARTIFACT_FILE, "utf-8"));
     const currentAge =
       (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
     if (currentAge < MAX_AGE) {
@@ -53,7 +52,7 @@ gulp.task("fetch-nightly-translations", async function () {
   }
 
   // To store file writing promises
-  const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
+  const createExtractDir = fs.mkdir(EXTRACT_DIR, { recursive: true });
   const writings = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
@@ -63,7 +62,7 @@ gulp.task("fetch-nightly-translations", async function () {
     tokenAuth = { token: process.env.GITHUB_TOKEN };
   } else {
     try {
-      tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
+      tokenAuth = JSON.parse(await fs.readFile(TOKEN_FILE, "utf-8"));
     } catch {
       if (!allowTokenSetup) {
         console.log("No token found so  build wil continue with English only");
@@ -88,7 +87,7 @@ gulp.task("fetch-nightly-translations", async function () {
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
         createExtractDir.then(
-          writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
+          fs.writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
     }
@@ -96,7 +95,7 @@ gulp.task("fetch-nightly-translations", async function () {
 
   // Authenticate with token and request workflow runs from GitHub
   console.log("Fetching new translations...");
-  const octokit = new (Octokit.plugin(retry))({
+  const octokit = new Octokit({
     userAgent: "Fetch Nightly Translations",
     auth: tokenAuth.token,
   });
@@ -132,13 +131,17 @@ gulp.task("fetch-nightly-translations", async function () {
   }
   writings.push(
     createExtractDir.then(
-      writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+      fs.writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
     )
   );
 
   // Remove the current translations
   const deleteCurrent = Promise.all(writings).then(
-    deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
+    (await del).deleteAsync([
+      `${EXTRACT_DIR}/*`,
+      `!${ARTIFACT_FILE}`,
+      `!${TOKEN_FILE}`,
+    ])
   );
 
   // Get the download URL and follow the redirect to download (stored as ArrayBuffer)

build-scripts/gulp/gallery.cjs

@@ -1,19 +1,22 @@
-import fs from "fs";
-import { glob } from "glob";
-import gulp from "gulp";
-import yaml from "js-yaml";
-import { marked } from "marked";
-import path from "path";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-import "./clean.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./rollup.js";
-import "./service-worker.js";
-import "./translations.js";
-import "./webpack.js";
+// Run demo develop mode
+const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
+const { marked } = require("marked");
+const glob = require("glob");
+const yaml = require("js-yaml");
+
+const env = require("../env.cjs");
+const paths = require("../paths.cjs");
+
+require("./clean.cjs");
+require("./translations.cjs");
+require("./gen-icons-json.cjs");
+require("./gather-static.cjs");
+require("./webpack.cjs");
+require("./service-worker.cjs");
+require("./entry-html.cjs");
+require("./rollup.cjs");
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
@@ -156,7 +159,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "gen-pages-gallery-dev",
+    "gen-index-gallery-dev",
     gulp.parallel(
       env.useRollup()
         ? "rollup-dev-server-gallery"
@@ -190,6 +193,6 @@ gulp.task(
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
-    "gen-pages-gallery-prod"
+    "gen-index-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.cjs

@@ -1,9 +1,9 @@
 // Gulp task to gather all static files.
 
-import fs from "fs-extra";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const paths = require("../paths.cjs");
 
 const npmPath = (...parts) =>
   path.resolve(paths.polymer_dir, "node_modules", ...parts);
@@ -111,10 +111,9 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
-gulp.task("copy-static-supervisor", async () => {
+gulp.task("copy-locale-data-supervisor", async () => {
   const staticDir = paths.hassio_output_static;
   copyLocaleData(staticDir);
-  copyFonts(staticDir);
 });
 
 gulp.task("copy-static-app", async () => {

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

@@ -1,15 +1,17 @@
-import fs from "fs";
-import gulp from "gulp";
-import hash from "object-hash";
-import path from "path";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const hash = require("object-hash");
 
-const ICON_PACKAGE_PATH = path.resolve("node_modules/@mdi/svg/");
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
 const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
-const OUTPUT_DIR = path.resolve(paths.build_dir, "mdi");
-const REMOVED_ICONS_PATH = new URL("../removedIcons.json", import.meta.url);
+const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+const REMOVED_ICONS_PATH = path.resolve(__dirname, "../removedIcons.json");
 
 const encoding = "utf8";
 

build-scripts/gulp/hassio.cjs

@@ -1,13 +1,13 @@
-import gulp from "gulp";
-import env from "../env.cjs";
-import "./clean.js";
-import "./compress.js";
-import "./entry-html.js";
-import "./gather-static.js";
-import "./gen-icons-json.js";
-import "./rollup.js";
-import "./translations.js";
-import "./webpack.js";
+const gulp = require("gulp");
+const env = require("../env.cjs");
+require("./clean.cjs");
+require("./compress.cjs");
+require("./entry-html.cjs");
+require("./gather-static.cjs");
+require("./gen-icons-json.cjs");
+require("./rollup.cjs");
+require("./translations.cjs");
+require("./webpack.cjs");
 
 gulp.task(
   "develop-hassio",
@@ -17,11 +17,11 @@ gulp.task(
     },
     "clean-hassio",
     "gen-dummy-icons-json",
-    "gen-pages-hassio-dev",
+    "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-static-supervisor",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -37,9 +37,9 @@ gulp.task(
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
-    "copy-static-supervisor",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-pages-hassio-prod",
+    "gen-index-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])
   )

build-scripts/gulp/locale-data.cjs

@@ -0,0 +1,72 @@
+const del = import("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const paths = require("../paths.cjs");
+
+const outDir = "build/locale-data";
+
+gulp.task("clean-locale-data", async () => (await del).deleteSync([outDir]));
+
+gulp.task("ensure-locale-data-build-dir", (done) => {
+  if (!fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+  done();
+});
+
+const modules = {
+  "intl-relativetimeformat": "RelativeTimeFormat",
+  "intl-datetimeformat": "DateTimeFormat",
+  "intl-numberformat": "NumberFormat",
+};
+
+gulp.task("create-locale-data", (done) => {
+  const translationMeta = JSON.parse(
+    fs.readFileSync(
+      path.join(paths.translations_src, "translationMetadata.json")
+    )
+  );
+  Object.entries(modules).forEach(([module, className]) => {
+    Object.keys(translationMeta).forEach((lang) => {
+      try {
+        const localeData = String(
+          fs.readFileSync(
+            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+          )
+        )
+          .replace(
+            new RegExp(
+              `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
+              "im"
+            ),
+            ""
+          )
+          .replace(/\)\s*}/im, "");
+        // make sure we have valid JSON
+        JSON.parse(localeData);
+        if (!fs.existsSync(path.join(outDir, module))) {
+          fs.mkdirSync(path.join(outDir, module), { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outDir, `${module}/${lang}.json`),
+          localeData
+        );
+      } catch (e) {
+        if (e.code !== "MODULE_NOT_FOUND") {
+          throw e;
+        }
+      }
+    });
+    done();
+  });
+});
+
+gulp.task(
+  "build-locale-data",
+  gulp.series(
+    "clean-locale-data",
+    "ensure-locale-data-build-dir",
+    "create-locale-data"
+  )
+);

build-scripts/gulp/locale-data.js

@@ -1,73 +0,0 @@
-import { deleteSync } from "del";
-import { mkdir, readFile, writeFile } from "fs/promises";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
-
-const outDir = path.join(paths.build_dir, "locale-data");
-
-const INTL_PACKAGES = {
-  "intl-relativetimeformat": "RelativeTimeFormat",
-  "intl-datetimeformat": "DateTimeFormat",
-  "intl-numberformat": "NumberFormat",
-  "intl-displaynames": "DisplayNames",
-  "intl-listformat": "ListFormat",
-};
-
-const convertToJSON = async (pkg, lang) => {
-  let localeData;
-  try {
-    localeData = await readFile(
-      path.resolve(
-        paths.polymer_dir,
-        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
-      ),
-      "utf-8"
-    );
-  } catch (e) {
-    // Ignore if language is missing (i.e. not supported by @formatjs)
-    if (e.code === "ENOENT") {
-      return;
-    } else {
-      throw e;
-    }
-  }
-  // Convert to JSON
-  const className = INTL_PACKAGES[pkg];
-  localeData = localeData
-    .replace(
-      new RegExp(
-        `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
-        "im"
-      ),
-      ""
-    )
-    .replace(/\)\s*}/im, "");
-  // Parse to validate JSON, then stringify to minify
-  localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
-};
-
-gulp.task("clean-locale-data", async () => deleteSync([outDir]));
-
-gulp.task("create-locale-data", async () => {
-  const translationMeta = JSON.parse(
-    await readFile(
-      path.resolve(paths.translations_src, "translationMetadata.json"),
-      "utf-8"
-    )
-  );
-  const conversions = [];
-  for (const pkg of Object.keys(INTL_PACKAGES)) {
-    await mkdir(path.join(outDir, pkg), { recursive: true });
-    for (const lang of Object.keys(translationMeta)) {
-      conversions.push(convertToJSON(pkg, lang));
-    }
-  }
-  await Promise.all(conversions);
-});
-
-gulp.task(
-  "build-locale-data",
-  gulp.series("clean-locale-data", "create-locale-data")
-);

build-scripts/gulp/rollup.cjs

@@ -1,14 +1,13 @@
 // Tasks to run Rollup
-
-import log from "fancy-log";
-import gulp from "gulp";
-import http from "http";
-import open from "open";
-import path from "path";
-import { rollup } from "rollup";
-import handler from "serve-handler";
-import paths from "../paths.cjs";
-import rollupConfig from "../rollup.cjs";
+const path = require("path");
+const gulp = require("gulp");
+const rollup = require("rollup");
+const handler = require("serve-handler");
+const http = require("http");
+const log = require("fancy-log");
+const open = require("open");
+const rollupConfig = require("../rollup.cjs");
+const paths = require("../paths.cjs");
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(

build-scripts/gulp/service-worker.cjs

@@ -1,12 +1,11 @@
 // Generate service worker.
 // Based on manifest, create a file with the content as service_worker.js
-
-import fs from "fs-extra";
-import gulp from "gulp";
-import path from "path";
-import sourceMapUrl from "source-map-url";
-import workboxBuild from "workbox-build";
-import paths from "../paths.cjs";
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const workboxBuild = require("workbox-build");
+const sourceMapUrl = require("source-map-url");
+const paths = require("../paths.cjs");
 
 const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
@@ -29,9 +28,10 @@ self.addEventListener('install', (event) => {
 
 gulp.task("gen-service-worker-app-prod", async () => {
   // Read bundled source file
-  const bundleManifestLatest = fs.readJsonSync(
-    path.resolve(paths.app_output_latest, "manifest.json")
-  );
+  const bundleManifestLatest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
   let serviceWorkerContent = fs.readFileSync(
     paths.app_output_root + bundleManifestLatest["service_worker.js"],
     "utf-8"
@@ -46,9 +46,10 @@ gulp.task("gen-service-worker-app-prod", async () => {
   );
 
   // Remove ES5
-  const bundleManifestES5 = fs.readJsonSync(
-    path.resolve(paths.app_output_es5, "manifest.json")
-  );
+  const bundleManifestES5 = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
   fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
   fs.removeSync(
     paths.app_output_root + bundleManifestES5["service_worker.js.map"]

build-scripts/gulp/translations.cjs

@@ -1,24 +1,19 @@
-import { createHash } from "crypto";
-import { deleteSync } from "del";
-import {
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  renameSync,
-  writeFile,
-} from "fs";
-import gulp from "gulp";
-import flatmap from "gulp-flatmap";
-import transform from "gulp-json-transform";
-import merge from "gulp-merge-json";
-import rename from "gulp-rename";
-import path from "path";
-import vinylBuffer from "vinyl-buffer";
-import source from "vinyl-source-stream";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-import { mapFiles } from "../util.cjs";
-import "./fetch-nightly-translations.js";
+const del = import("del");
+const crypto = require("crypto");
+const path = require("path");
+const source = require("vinyl-source-stream");
+const vinylBuffer = require("vinyl-buffer");
+const gulp = require("gulp");
+const fs = require("fs");
+const flatmap = require("gulp-flatmap");
+const merge = require("gulp-merge-json");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
+const { mapFiles } = require("../util.cjs");
+const env = require("../env.cjs");
+const paths = require("../paths.cjs");
+
+require("./fetch-nightly-translations.cjs");
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
@@ -38,12 +33,7 @@ gulp.task(
 
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
-  JSON.parse(
-    readFileSync(
-      path.resolve(paths.polymer_dir, "src/translations/en.json"),
-      "utf-8"
-    )
-  ).ui.panel
+  require("../../src/translations/en.json").ui.panel
 );
 
 function recursiveFlatten(prefix, data) {
@@ -130,14 +120,17 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", async () => deleteSync([workDir]));
+gulp.task("clean-translations", async () => (await del).deleteSync([workDir]));
 
-gulp.task("ensure-translations-build-dir", async () => {
-  mkdirSync(workDir, { recursive: true });
+gulp.task("ensure-translations-build-dir", (done) => {
+  if (!fs.existsSync(workDir)) {
+    fs.mkdirSync(workDir, { recursive: true });
+  }
+  done();
 });
 
 gulp.task("create-test-metadata", (cb) => {
-  writeFile(
+  fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
       test: {
@@ -310,14 +303,15 @@ const fingerprints = {};
 
 gulp.task("build-translation-fingerprints", () => {
   // Fingerprint full file of each language
-  const files = readdirSync(fullDir);
+  const files = fs.readdirSync(fullDir);
 
   for (let i = 0; i < files.length; i++) {
     fingerprints[files[i].split(".")[0]] = {
       // In dev we create fake hashes
       hash: env.isProdBuild()
-        ? createHash("md5")
-            .update(readFileSync(path.join(fullDir, files[i]), "utf-8"))
+        ? crypto
+            .createHash("md5")
+            .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
             .digest("hex")
         : "dev",
     };
@@ -333,7 +327,7 @@ gulp.task("build-translation-fingerprints", () => {
         throw new Error(`Unable to find hash for ${filename}`);
       }
 
-      renameSync(
+      fs.renameSync(
         filename,
         `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
           parsed.ext
@@ -415,7 +409,7 @@ gulp.task("build-translation-write-metadata", () =>
 gulp.task(
   "create-translations",
   gulp.series(
-    ...(env.isProdBuild() ? [] : ["create-test-translation"]),
+    env.isProdBuild() ? (done) => done() : "create-test-translation",
     "build-master-translation",
     "build-merged-translations",
     gulp.parallel(...splitTasks),

build-scripts/gulp/wds.cjs

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

build-scripts/gulp/wds.js

@@ -1,10 +0,0 @@
-import gulp from "gulp";
-import { startDevServer } from "@web/dev-server";
-
-gulp.task("wds-watch-app", async () => {
-  startDevServer({
-    config: {
-      watch: true,
-    },
-  });
-});

build-scripts/gulp/webpack.cjs

@@ -1,20 +1,19 @@
 // Tasks to run webpack.
-
-import fs from "fs";
-import path from "path";
-import log from "fancy-log";
-import gulp from "gulp";
-import webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
-import env from "../env.cjs";
-import paths from "../paths.cjs";
-import {
+const fs = require("fs");
+const gulp = require("gulp");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const path = require("path");
+const env = require("../env.cjs");
+const paths = require("../paths.cjs");
+const {
   createAppConfig,
-  createCastConfig,
   createDemoConfig,
-  createGalleryConfig,
+  createCastConfig,
   createHassioConfig,
-} from "../webpack.cjs";
+  createGalleryConfig,
+} = require("../webpack.cjs");
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -44,7 +43,6 @@ const runDevServer = async ({
 }) => {
   const server = new WebpackDevServer(
     {
-      hot: false,
       open: true,
       host: listenHost,
       port,

build-scripts/list-plugins-and-polyfills.js

@@ -1,59 +0,0 @@
-#!/usr/bin/env node
-// Script to print Babel plugins and Core JS polyfills that will be used by browserslist environments
-
-import { version as babelVersion } from "@babel/core";
-import presetEnv from "@babel/preset-env";
-import compilationTargets from "@babel/helper-compilation-targets";
-import coreJSCompat from "core-js-compat";
-import { logPlugin } from "@babel/preset-env/lib/debug.js";
-import { babelOptions } from "./bundle.cjs";
-
-const detailsOpen = (heading) =>
-  `<details>\n<summary><h4>${heading}</h4></summary>\n`;
-const detailsClose = "</details>\n";
-
-const dummyAPI = {
-  version: babelVersion,
-  assertVersion: () => {},
-  caller: (callback) =>
-    callback({
-      name: "Dummy Bundler",
-      supportsStaticESM: true,
-      supportsDynamicImport: true,
-      supportsTopLevelAwait: true,
-      supportsExportNamespaceFrom: true,
-    }),
-  targets: () => ({}),
-};
-
-for (const buildType of ["Modern", "Legacy"]) {
-  const browserslistEnv = buildType.toLowerCase();
-  const babelOpts = babelOptions({ latestBuild: browserslistEnv === "modern" });
-  const presetEnvOpts = babelOpts.presets[0][1];
-
-  // Invoking preset-env in debug mode will log the included plugins
-  console.log(detailsOpen(`${buildType} Build Babel Plugins`));
-  presetEnv.default(dummyAPI, {
-    ...presetEnvOpts,
-    browserslistEnv,
-    debug: true,
-  });
-  console.log(detailsClose);
-
-  // Manually log the Core-JS polyfills using the same technique
-  if (presetEnvOpts.useBuiltIns) {
-    console.log(detailsOpen(`${buildType} Build Core-JS Polyfills`));
-    const targets = compilationTargets.default(babelOpts?.targets, {
-      browserslistEnv,
-    });
-    const polyfillList = coreJSCompat({ targets }).list;
-    console.log(
-      "The following %i polyfills may be injected by Babel:\n",
-      polyfillList.length
-    );
-    for (const polyfill of polyfillList) {
-      logPlugin(polyfill, targets, coreJSCompat.data);
-    }
-    console.log(detailsClose);
-  }
-}

build-scripts/rollup.cjs

@@ -142,5 +142,4 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createRollupConfig,
 };

build-scripts/webpack.cjs

@@ -1,6 +1,5 @@
-const { existsSync } = require("fs");
-const path = require("path");
 const webpack = require("webpack");
+const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
@@ -42,7 +41,7 @@ const createWebpackConfig = ({
   return {
     name,
     mode: isProdBuild ? "production" : "development",
-    target: `browserslist:${latestBuild ? "modern" : "legacy"}`,
+    target: ["web", latestBuild ? "es2017" : "es5"],
     // For tests/CI, source maps are skipped to gain build speed
     // For production, generate source maps for accurate stack traces without source code
     // For development, generate "cheap" versions that can map to original line numbers
@@ -85,13 +84,6 @@ const createWebpackConfig = ({
       ],
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
-      splitChunks: {
-        // Disable splitting for web workers with ESM output
-        // Imports of external chunks are broken
-        chunks: latestBuild
-          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
-          : undefined,
-      },
     },
     plugins: [
       !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
@@ -140,17 +132,6 @@ const createWebpackConfig = ({
         ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // See `src/resources/intl-polyfill-legacy.ts` for explanation
-      !latestBuild &&
-        new webpack.NormalModuleReplacementPlugin(
-          new RegExp(
-            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
-          ),
-          path.resolve(
-            paths.polymer_dir,
-            "src/resources/intl-polyfill-legacy.ts"
-          )
-        ),
       !isProdBuild && new LogStartCompilePlugin(),
     ].filter(Boolean),
     resolve: {
@@ -168,12 +149,9 @@ const createWebpackConfig = ({
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
-        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
-          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
       },
     },
     output: {
-      module: latestBuild,
       filename: ({ chunk }) =>
         !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
           ? "[name].js"
@@ -192,29 +170,22 @@ const createWebpackConfig = ({
       // Since production source maps don't include sources, we need to point to them elsewhere
       // For dependencies, just provide the path (no source in browser)
       // Otherwise, point to the raw code on GitHub for browser to load
-      ...Object.fromEntries(
-        ["", "Fallback"].map((v) => [
-          `devtool${v}ModuleFilenameTemplate`,
-          !isTestBuild && isProdBuild
-            ? (info) => {
-                if (
-                  !path.isAbsolute(info.absoluteResourcePath) ||
-                  !existsSync(info.resourcePath) ||
-                  info.resourcePath.startsWith("./node_modules")
-                ) {
-                  // Source URLs are unknown for dependencies, so we use a relative URL with a
-                  // non - existent top directory.  This results in a clean source tree in browser
-                  // dev tools, and they stay happy getting 404s with valid requests.
-                  return `/unknown${path.resolve("/", info.resourcePath)}`;
-                }
-                return new URL(info.resourcePath, bundle.sourceMapURL()).href;
+      devtoolModuleFilenameTemplate:
+        !isTestBuild && isProdBuild
+          ? (info) => {
+              const sourcePath = info.resourcePath.replace(/^\.\//, "");
+              if (
+                sourcePath.startsWith("node_modules") ||
+                sourcePath.startsWith("webpack")
+              ) {
+                return `no-source/${sourcePath}`;
               }
-            : undefined,
-        ])
-      ),
+              return `${bundle.sourceMapURL()}/${sourcePath}`;
+            }
+          : undefined,
     },
     experiments: {
-      outputModule: true,
+      topLevelAwait: true,
     },
   };
 };
@@ -261,5 +232,4 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
-  createWebpackConfig,
 };

cast/public/service_worker.js

@@ -1,3 +1,3 @@
-self.addEventListener("fetch", (event) => {
+self.addEventListener("fetch", function(event) {
   event.respondWith(fetch(event.request));
 });

cast/src/html/_social_meta.html.template

@@ -1,24 +0,0 @@
-<meta property="fb:app_id" content="338291289691179" />
-<meta property="og:title" content="Home Assistant Cast" />
-<meta property="og:site_name" content="Home Assistant Cast" />
-<meta property="og:url" content="https://cast.home-assistant.io/" />
-<meta property="og:type" content="website" />
-<meta
-  property="og:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
-/>
-<meta
-  property="og:image"
-  content="https://cast.home-assistant.io/images/google-nest-hub.png"
-/>
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content="@home_assistant" />
-<meta name="twitter:title" content="Home Assistant Cast" />
-<meta
-  name="twitter:description"
-  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
-/>
-<meta
-  name="twitter:image"
-  content="https://cast.home-assistant.io/images/google-nest-hub.png"
-/>

cast/src/html/index.html.template

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home Assistant Cast</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
-    <style>
-      body {
-        background-color: #e5e5e5;
-      }
-    </style>
-    <%= renderTemplate("_social_meta.html.template") %>
-  </head>
-  <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <hc-connect></hc-connect>
-    <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
-      window.latestJS = true;
-    </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
-    <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-57927901-9', 'auto');
-    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
-    </script>
-  </body>
-</html>

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

@@ -3,7 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+    <%= renderTemplate('_style_base') %>
     <style>
       body {
         background-color: #e5e5e5;
@@ -35,14 +35,25 @@
     />
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate('_js_base') %>
+
     <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
+      import("<%= latestLauncherJS %>");
       window.latestJS = true;
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5LauncherJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5LauncherJS %>");
+        <% } %>
+      }
+    </script>
+
     <hc-layout subtitle="FAQ">
       <style>
         a {

cast/src/html/launcher.html.template

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate('_style_base') %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <meta property="fb:app_id" content="338291289691179">
+    <meta property="og:title" content="Home Assistant Cast">
+    <meta property="og:site_name" content="Home Assistant Cast">
+    <meta property="og:url" content="https://cast.home-assistant.io/">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@home_assistant">
+    <meta name="twitter:title" content="Home Assistant Cast">
+    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <hc-connect></hc-connect>
+
+    <script>
+      import("<%= latestLauncherJS %>");
+      window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5LauncherJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5LauncherJS %>");
+        <% } %>
+      }
+    </script>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>

cast/src/html/media.html.template

@@ -22,14 +22,25 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate('_js_base') %>
+
     <cast-media-player></cast-media-player>
+
     <script>
-      <% for (const entry of latestEntryJS) { %>
-        import("<%= entry %>");
-      <% } %>
+      import("<%= latestMediaJS %>");
       window.latestJS = true;
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5MediaJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5MediaJS %>");
+        <% } %>
+      }
+    </script>
   </body>
 </html>

cast/src/html/receiver.html.template

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html>
   <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-  <% for (const entry of latestEntryJS) { %>
-    <script type="module" src="<%= entry %>"></script>
-  <% } %>
-  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+  <script type="module" src="<%= latestReceiverJS %>"></script>
+  <%= renderTemplate('_style_base') %>
   <style>
     body {
       background-color: white;

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

@@ -190,7 +190,7 @@ export class HcConnect extends LitElement {
 
   private _handleInputKeyDown(ev: KeyboardEvent) {
     // Handle pressing enter.
-    if (ev.key === "Enter") {
+    if (ev.keyCode === 13) {
       this._handleConnect();
     }
   }

cast/src/media/entrypoint.ts

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

cast/src/receiver/cast_context.ts

@@ -1,3 +1,2 @@
-import { framework } from "./cast_framework";
-
-export const castContext = framework.CastReceiverContext.getInstance();
+/* eslint-disable no-undef */
+export const castContext = cast.framework.CastReceiverContext.getInstance();

cast/src/receiver/cast_framework.ts

@@ -1,3 +0,0 @@
-import type { cast as ReceiverCast } from "chromecast-caf-receiver";
-
-export const framework = (cast as unknown as typeof ReceiverCast).framework;

cast/src/receiver/entrypoint.ts

@@ -1,4 +1,4 @@
-import { framework } from "./cast_framework";
+/* eslint-disable no-undef */
 import { CAST_NS } from "../../../src/cast/const";
 import { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
@@ -34,14 +34,14 @@ const setTouchControlsVisibility = (visible: boolean) => {
 let timeOut: number | undefined;
 
 const playDummyMedia = (viewTitle?: string) => {
-  const loadRequestData = new framework.messages.LoadRequestData();
+  const loadRequestData = new cast.framework.messages.LoadRequestData();
   loadRequestData.autoplay = true;
-  loadRequestData.media = new framework.messages.MediaInformation();
+  loadRequestData.media = new cast.framework.messages.MediaInformation();
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
-  const metadata = new framework.messages.GenericMediaMetadata();
+  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
+  const metadata = new cast.framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
 
@@ -86,10 +86,10 @@ const showMediaPlayer = () => {
   }
 };
 
-const options = new framework.CastReceiverOptions();
+const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -98,7 +98,8 @@ castContext.addCustomMessageListener(
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
     if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+      playerManager.getPlayerState() !==
+      cast.framework.messages.PlayerState.IDLE
     ) {
       playerManager.stop();
     } else {
@@ -113,7 +114,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  cast.framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +128,25 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  cast.framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState ===
+        cast.framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
       event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+        cast.framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/public/service_worker.js

@@ -1,3 +1,3 @@
-self.addEventListener("fetch", (event) => {
+self.addEventListener("fetch", function(event) {
   event.respondWith(fetch(event.request));
 });

demo/src/html/_social_meta.html.template

@@ -1,26 +0,0 @@
-<meta property="fb:app_id" content="338291289691179" />
-<meta property="og:title" content="Home Assistant Demo" />
-<meta property="og:site_name" content="Home Assistant" />
-<meta property="og:url" content="https://demo.home-assistant.io/" />
-<meta property="og:type" content="website" />
-<meta
-  property="og:description"
-  content="Open source home automation that puts local control and privacy first."
-/>
-<meta
-  property="og:image"
-  content="https://www.home-assistant.io/images/default-social.png"
-/>
-
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content="@home_assistant" />
-
-<meta name="twitter:title" content="Home Assistant" />
-<meta
-  name="twitter:description"
-  content="Open source home automation that puts local control and privacy first."
-/>
-<meta
-  name="twitter:image"
-  content="https://www.home-assistant.io/images/default-social.png"
-/>

demo/src/html/index.html.template

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Home Assistant Demo</title>
-    <%= renderTemplate("../../../src/html/_header.html.template") %>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" href="/static/icons/favicon.ico" />
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -34,7 +35,33 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <%= renderTemplate("_social_meta.html.template") %>
+    <meta property="fb:app_id" content="338291289691179" />
+    <meta property="og:title" content="Home Assistant Demo" />
+    <meta property="og:site_name" content="Home Assistant" />
+    <meta property="og:url" content="https://demo.home-assistant.io/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      property="og:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@home_assistant" />
+
+    <meta name="twitter:title" content="Home Assistant" />
+    <meta
+      name="twitter:description"
+      content="Open source home automation that puts local control and privacy first."
+    />
+    <meta
+      name="twitter:image"
+      content="https://www.home-assistant.io/images/default-social.png"
+    />
+    <title>Home Assistant Demo</title>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -80,19 +107,29 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
+
     <ha-demo></ha-demo>
-    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
+
+    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
+
     <script>
-      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-      if (!isS11_12) {
-        <% for (const entry of latestEntryJS) { %>
-          import("<%= entry %>");
+      import("<%= latestDemoJS %>");
+      window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5DemoJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5DemoJS %>");
         <% } %>
-        window.latestJS = true;
       }
     </script>
-    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {

demo/src/stubs/config_entries.ts

@@ -1,18 +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: "Electricity Maps",
-    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,
-  }));
+  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/persistent_notification.ts

@@ -1,20 +1,16 @@
-import { PersistentNotificationMessage } from "../../../src/data/persistent_notification";
+import { PersistentNotification } from "../../../src/data/persistent_notification";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockPersistentNotification = (hass: MockHomeAssistant) => {
-  hass.mockWS("persistent_notification/subscribe", (_msg, _hass, onChange) => {
-    onChange!({
-      type: "added",
-      notifications: {
-        "demo-1": {
-          created_at: new Date().toISOString(),
-          message: "There was motion detected in the backyard.",
-          notification_id: "demo-1",
-          title: "Motion Detected!",
-          status: "unread",
-        },
+  hass.mockWS("persistent_notification/get", () =>
+    Promise.resolve([
+      {
+        created_at: new Date().toISOString(),
+        message: "There was motion detected in the backyard.",
+        notification_id: "demo-1",
+        title: "Motion Detected!",
+        status: "unread",
       },
-    } as PersistentNotificationMessage);
-    return () => {};
-  });
+    ] as PersistentNotification[])
+  );
 };

demo/src/stubs/recorder.ts

@@ -72,7 +72,6 @@ const generateSumStatistics = (
       min: null,
       max: null,
       last_reset: 0,
-      change: add,
       state: initValue + sum,
       sum,
     });
@@ -104,8 +103,8 @@ const generateCurvedStatistics = (
   let half = false;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const add = i * (Math.random() * maxDiff);
-    sum += add;
+    const add = Math.random() * maxDiff;
+    sum += i * add;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -113,7 +112,6 @@ const generateCurvedStatistics = (
       min: null,
       max: null,
       last_reset: 0,
-      change: add,
       state: initValue + sum,
       sum: metered ? sum : null,
     });

gallery/sidebar.js

@@ -45,10 +45,6 @@ export default [
     header: "Users",
     pages: ["user-types", "configuration-menu"],
   },
-  {
-    category: "date-time",
-    header: "Date and Time",
-  },
   {
     category: "design.home-assistant.io",
     header: "About",

gallery/src/components/demo-cards.ts

@@ -1,3 +1,4 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html, css, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@@ -6,7 +7,6 @@ import "../../../src/components/ha-switch";
 import { HomeAssistant } from "../../../src/types";
 import "./demo-card";
 import type { DemoCardConfig } from "./demo-card";
-import "../ha-demo-options";
 
 @customElement("demo-cards")
 class DemoCards extends LitElement {
@@ -20,14 +20,20 @@ class DemoCards extends LitElement {
 
   render() {
     return html`
-      <ha-demo-options>
-        <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Dark theme">
-          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-        </ha-formfield>
-      </ha-demo-options>
+      <app-toolbar>
+        <div class="filters">
+          <ha-formfield label="Show config">
+            <ha-switch
+              .checked=${this._showConfig}
+              @change=${this._showConfigToggled}
+            >
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
+          </ha-formfield>
+        </div>
+      </app-toolbar>
       <div id="container">
         <div class="cards">
           ${this.configs.map(
@@ -63,6 +69,12 @@ class DemoCards extends LitElement {
     demo-card {
       margin: 16px 16px 32px;
     }
+    app-toolbar {
+      background-color: var(--light-primary-color);
+    }
+    .filters {
+      margin-left: 60px;
+    }
     ha-formfield {
       margin-right: 16px;
     }

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

@@ -0,0 +1,93 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../src/components/ha-card";
+import "../../../src/dialogs/more-info/more-info-content";
+import "../../../src/state-summary/state-card-content";
+
+class DemoMoreInfo extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .root {
+          display: flex;
+        }
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
+        ha-card {
+          width: 352px;
+          padding: 20px 24px;
+        }
+        state-card-content {
+          display: block;
+          margin-bottom: 16px;
+        }
+        pre {
+          width: 400px;
+          margin: 0 16px;
+          overflow: auto;
+          color: var(--primary-text-color);
+        }
+        @media only screen and (max-width: 800px) {
+          .root {
+            flex-direction: column;
+          }
+          pre {
+            margin: 16px 0;
+          }
+        }
+      </style>
+      <div class="root">
+        <div id="card">
+          <ha-card>
+            <state-card-content
+              state-obj="[[_stateObj]]"
+              hass="[[hass]]"
+              in-dialog
+            ></state-card-content>
+
+            <more-info-content
+              hass="[[hass]]"
+              state-obj="[[_stateObj]]"
+            ></more-info-content>
+          </ha-card>
+        </div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entityId: String,
+      showConfig: Boolean,
+      _stateObj: {
+        type: Object,
+        computed: "_getState(entityId, hass.states)",
+      },
+    };
+  }
+
+  _getState(entityId, states) {
+    return states[entityId];
+  }
+
+  _jsonEntity(stateObj) {
+    // We are caching some things on stateObj
+    // (it sucks, we will remove in the future)
+    const tmp = {};
+    Object.keys(stateObj).forEach((key) => {
+      if (key[0] !== "_") {
+        tmp[key] = stateObj[key];
+      }
+    });
+    return JSON.stringify(tmp, null, 2);
+  }
+}
+
+customElements.define("demo-more-info", DemoMoreInfo);

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

@@ -1,93 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../src/components/ha-card";
-import "../../../src/dialogs/more-info/more-info-content";
-import "../../../src/state-summary/state-card-content";
-import "../ha-demo-options";
-import { HomeAssistant } from "../../../src/types";
-
-@customElement("demo-more-info")
-class DemoMoreInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public entityId!: string;
-
-  @property() public showConfig!: boolean;
-
-  render() {
-    const state = this._getState(this.entityId, this.hass.states);
-    return html`
-      <div class="root">
-        <div id="card">
-          <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
-
-            <more-info-content
-              .hass=${this.hass}
-              .stateObj=${state}
-            ></more-info-content>
-          </ha-card>
-        </div>
-        ${this.showConfig ? html`<pre>${this._jsonEntity(state)}</pre>` : ""}
-      </div>
-    `;
-  }
-
-  private _getState(entityId, states) {
-    return states[entityId];
-  }
-
-  private _jsonEntity(stateObj) {
-    // We are caching some things on stateObj
-    // (it sucks, we will remove in the future)
-    const tmp = {};
-    Object.keys(stateObj).forEach((key) => {
-      if (key[0] !== "_") {
-        tmp[key] = stateObj[key];
-      }
-    });
-    return JSON.stringify(tmp, null, 2);
-  }
-
-  static styles = css`
-    .root {
-      display: flex;
-    }
-    #card {
-      max-width: 400px;
-      width: 100vw;
-    }
-    ha-card {
-      width: 352px;
-      padding: 20px 24px;
-    }
-    state-card-content {
-      display: block;
-      margin-bottom: 16px;
-    }
-    pre {
-      width: 400px;
-      margin: 0 16px;
-      overflow: auto;
-      color: var(--primary-text-color);
-    }
-    @media only screen and (max-width: 800px) {
-      .root {
-        flex-direction: column;
-      }
-      pre {
-        margin: 16px 0;
-      }
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info": DemoMoreInfo;
-  }
-}

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

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

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

@@ -1,87 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
-import "../../../src/components/ha-formfield";
-import "../../../src/components/ha-switch";
-import "./demo-more-info";
-import "../ha-demo-options";
-import { HomeAssistant } from "../../../src/types";
-
-@customElement("demo-more-infos")
-class DemoMoreInfos extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public entities!: [];
-
-  @property({ attribute: false }) _showConfig: boolean = false;
-
-  render() {
-    return html`
-      <ha-demo-options>
-        <ha-formfield label="Show config">
-          <ha-switch @change=${this._showConfigToggled}> </ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Dark theme">
-          <ha-switch @change=${this._darkThemeToggled}> </ha-switch>
-        </ha-formfield>
-      </ha-demo-options>
-      <div id="container">
-        <div class="cards">
-          ${this.entities.map(
-            (item) =>
-              html`<demo-more-info
-                .entityId=${item}
-                .showConfig=${this._showConfig}
-                .hass=${this.hass}
-              ></demo-more-info>`
-          )}
-        </div>
-      </div>
-    `;
-  }
-
-  static styles = css`
-    #container {
-      min-height: calc(100vh - 128px);
-      background: var(--primary-background-color);
-    }
-    .cards {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-    demo-more-info {
-      margin: 16px 16px 32px;
-    }
-    ha-formfield {
-      margin-right: 16px;
-    }
-  `;
-
-  _showConfigToggled(ev) {
-    this._showConfig = ev.target.checked;
-  }
-
-  _darkThemeToggled(ev) {
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector("#container"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: false,
-        theme: "default",
-      },
-      "default",
-      {
-        dark: ev.target.checked,
-      }
-    );
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-infos": DemoMoreInfos;
-  }
-}

gallery/src/data/date-options.ts

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

gallery/src/entrypoint.js

@@ -1,3 +1,5 @@
+import "@polymer/polymer/lib/elements/dom-if";
+import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "./ha-gallery";

gallery/src/ha-demo-options.ts

@@ -1,47 +0,0 @@
-import "@material/mwc-drawer";
-import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../src/components/ha-icon-button";
-import "../../src/managers/notification-manager";
-import { haStyle } from "../../src/resources/styles";
-import "./components/page-description";
-
-@customElement("ha-demo-options")
-class HaDemoOptions extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-
-  static styles = [
-    haStyle,
-    css`
-      :host {
-        display: block;
-        background-color: var(--light-primary-color);
-        margin-left: 60px
-        margin-right: 60px;
-        display: var(--layout-horizontal_-_display);
-        -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
-        -webkit-flex-direction: var(
-          --layout-horizontal_-_-webkit-flex-direction
-        );
-        flex-direction: var(--layout-horizontal_-_flex-direction);
-        -ms-flex-align: var(--layout-center_-_-ms-flex-align);
-        -webkit-align-items: var(--layout-center_-_-webkit-align-items);
-        align-items: var(--layout-center_-_align-items);
-        position: relative;
-        height: 64px;
-        padding: 0 16px;
-        pointer-events: none;
-        font-size: 20px;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-demo-options": HaDemoOptions;
-  }
-}

gallery/src/html/index.html.template

@@ -8,9 +8,8 @@
     />
     <meta name="theme-color" content="#2157BC" />
     <title>Home Assistant Design</title>
-    <% for (const entry of latestEntryJS) { %>
-      <script type="module" src="<%= entry %>"></script>
-    <% } %>
+
+    <script type="module" src="<%= latestGalleryJS %>"></script>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;

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

@@ -4,63 +4,53 @@ 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
+* 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
+* 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
+* 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
+* 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

@@ -162,7 +162,6 @@ export class DemoAutomationDescribeAction extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -63,7 +63,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
         <div class="condition">
           <span>
             ${this._condition
-              ? describeCondition(this._condition, this.hass, [])
+              ? describeCondition(this._condition, this.hass)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -76,7 +76,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any, this.hass, [])}</span>
+              <span>${describeCondition(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -89,7 +89,6 @@ export class DemoAutomationDescribeCondition extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -40,9 +40,7 @@ const triggers = [
   },
   { platform: "sun", event: "sunset" },
   { platform: "time_pattern" },
-  { platform: "time_pattern", hours: "*", minutes: "/5", seconds: "10" },
   { platform: "webhook" },
-  { platform: "persistent_notification" },
   {
     platform: "zone",
     entity_id: "person.person",
@@ -52,11 +50,6 @@ const triggers = [
   { platform: "tag" },
   { platform: "time", at: "15:32" },
   { platform: "template" },
-  { platform: "conversation", command: "Turn on the lights" },
-  {
-    platform: "conversation",
-    command: ["Turn on the lights", "Turn the lights on"],
-  },
   { platform: "event", event_type: "homeassistant_started" },
 ];
 
@@ -81,7 +74,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         <div class="trigger">
           <span>
             ${this._trigger
-              ? describeTrigger(this._trigger, this.hass, [])
+              ? describeTrigger(this._trigger, this.hass)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -93,7 +86,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any, this.hass, [])}</span>
+              <span>${describeTrigger(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -106,7 +99,6 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
     hass.addEntities(ENTITIES);
   }
 

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

@@ -85,16 +85,17 @@ class DemoHaAutomationEditorAction extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
-                <ha-automation-action
-                  slot=${slot}
-                  .hass=${this.hass}
-                  .actions=${this.data[sampleIdx]}
-                  .sampleIdx=${sampleIdx}
-                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
-                ></ha-automation-action>
-              `
+              (slot) =>
+                html`
+                  <ha-automation-action
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .actions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-action>
+                `
             )}
           </demo-black-white-row>
         `

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

@@ -121,16 +121,17 @@ class DemoHaAutomationEditorCondition extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
-                <ha-automation-condition
-                  slot=${slot}
-                  .hass=${this.hass}
-                  .conditions=${this.data[sampleIdx]}
-                  .sampleIdx=${sampleIdx}
-                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
-                ></ha-automation-condition>
-              `
+              (slot) =>
+                html`
+                  <ha-automation-condition
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .conditions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-condition>
+                `
             )}
           </demo-black-white-row>
         `

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

@@ -19,13 +19,11 @@ import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trig
 import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
 import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
 import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
-import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
 import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
 import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
 import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
 
 const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
   {
@@ -74,16 +72,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
   },
 
-  {
-    name: "Persistent Notification",
-    triggers: [
-      {
-        platform: "persistent_notification",
-        ...HaPersistentNotificationTrigger.defaultConfig,
-      },
-    ],
-  },
-
   {
     name: "Zone",
     triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
@@ -113,16 +101,6 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     name: "Device Trigger",
     triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
   },
-  {
-    name: "Sentence",
-    triggers: [
-      { platform: "conversation", ...HaConversationTrigger.defaultConfig },
-      {
-        platform: "conversation",
-        command: ["Turn on the lights", "Turn the lights on"],
-      },
-    ],
-  },
 ];
 
 @customElement("demo-automation-editor-trigger")
@@ -167,16 +145,17 @@ class DemoHaAutomationEditorTrigger extends LitElement {
             .value=${this.data[sampleIdx]}
           >
             ${["light", "dark"].map(
-              (slot) => html`
-                <ha-automation-trigger
-                  slot=${slot}
-                  .hass=${this.hass}
-                  .triggers=${this.data[sampleIdx]}
-                  .sampleIdx=${sampleIdx}
-                  .disabled=${this._disabled}
-                  @value-changed=${valueChanged}
-                ></ha-automation-trigger>
-              `
+              (slot) =>
+                html`
+                  <ha-automation-trigger
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .triggers=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    .disabled=${this._disabled}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-trigger>
+                `
             )}
           </demo-black-white-row>
         `

gallery/src/pages/brand/logo.markdown

@@ -10,6 +10,7 @@ As a community, we are proud of our logo. Follow these guidelines to ensure it a
 
 ![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.
@@ -20,7 +21,7 @@ Our icon is a shorter and most used version of our logo. The icon can exist with
 
 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.
+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.
 

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

@@ -11,7 +11,6 @@ subtitle: An alert displays a short, important message in a way that attracts th
 </style>
 
 # Alert `<ha-alert>`
-
 The alert offers four severity levels that set a distinctive icon and color.
 
 <ha-alert alert-type="error">
@@ -36,46 +35,38 @@ The alert offers four severity levels that set a distinctive icon and color.
 2. [Implementation](#implementation)
 
 ### Resources
-
-| Type           | Link                                                                                                                                                                      | Status    |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| Type           | Link                             | Status    |
+|----------------|----------------------------------|-----------|
 | Design         | <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Home Assistant DesignKit</a> (Figma) | Available |
-| Implementation | <a href="https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts" rel="noopener noreferrer" target="_blank">Web Component</a> (GitHub)             | Available |
+| Implementation | <a href="https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts" rel="noopener noreferrer" target="_blank">Web Component</a> (GitHub)            | Available |
 
 ## Guidelines
-
 ### Usage
-
 An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 
 ### Anatomy
-
-_Documentation coming soon_
+*Documentation coming soon*
 
 ### Error alert
-
 Error alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Warning alert
-
 Warning alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Info alert
-
 Info alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Success alert
-
 Success alerts
-_Real world example coming soon_
+*Real world example coming soon*
 
 ### Placement
 
-### Accessibility
 
+### Accessibility
 (WAI-ARIA: [https://www.w3.org/TR/wai-aria-practices/#alert](https://www.w3.org/TR/wai-aria-practices/#alert))
 
 When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.
@@ -87,7 +78,6 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 ## Implementation
 
 ### Example Usage
-
 **Alert type**
 
 <ha-alert alert-type="error">
@@ -106,12 +96,17 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
   This is an success alert — check it out!
 </ha-alert>
 
+
 ```html
-<ha-alert alert-type="error"> This is an error alert — check it out! </ha-alert>
+<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="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>
@@ -159,14 +154,13 @@ The `title ` option should not be used without a description.
 
 **Slotted icon**
 
-_Documentation coming soon_
+*Documentation coming soon*
 
 ### API
-
 **Properties/Attributes**
 
 | Name        | Type    | Default | Description                                           |
-| ----------- | ------- | ------- | ----------------------------------------------------- |
+|-------------|---------|---------|-------------------------------------------------------|
 | title       | string  | ``      | Title to display.                                     |
 | alertType   | string  | `info`  | Severity level that set a distinctive icon and color. |
 | dismissable | boolean | `false` | Gives the option to close the alert.                  |
@@ -176,8 +170,8 @@ _Documentation coming soon_
 
 **Events**
 
-_Documentation coming soon_
+*Documentation coming soon*
 
 **CSS Custom Properties**
 
-_Documentation coming soon_
+*Documentation coming soon*

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

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

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

@@ -1,174 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-circular-slider";
-import "../../../../src/components/ha-slider";
-
-@customElement("demo-components-ha-control-circular-slider")
-export class DemoHaCircularSlider extends LitElement {
-  @state()
-  private current = 22;
-
-  @state()
-  private low = 19;
-
-  @state()
-  private high = 25;
-
-  @state()
-  private changingLow?: number;
-
-  @state()
-  private changingHigh?: number;
-
-  private _lowChanged(ev) {
-    this.low = ev.detail.value;
-  }
-
-  private _lowChanging(ev) {
-    this.changingLow = ev.detail.value;
-  }
-
-  private _highChanged(ev) {
-    this.high = ev.detail.value;
-  }
-
-  private _highChanging(ev) {
-    this.changingHigh = ev.detail.value;
-  }
-
-  private _currentChanged(ev) {
-    this.current = ev.currentTarget.value;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Config</b></p>
-          <div class="field">
-            <p>Current</p>
-            <ha-slider
-              min="10"
-              max="30"
-              .value=${this.current}
-              @change=${this._currentChanged}
-              pin
-            ></ha-slider>
-            <p>${this.current} °C</p>
-          </div>
-        </div>
-      </ha-card>
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Single</b></p>
-          <ha-control-circular-slider
-            @value-changed=${this._lowChanged}
-            @value-changing=${this._lowChanging}
-            .value=${this.low}
-            .current=${this.current}
-            step="1"
-            min="10"
-            max="30"
-          ></ha-control-circular-slider>
-          <div>
-            Low: ${this.low} °C
-            <br />
-            Changing:
-            ${this.changingLow != null ? `${this.changingLow} °C` : "-"}
-          </div>
-        </div>
-      </ha-card>
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Inverted</b></p>
-          <ha-control-circular-slider
-            inverted
-            @value-changed=${this._highChanged}
-            @value-changing=${this._highChanging}
-            .value=${this.high}
-            .current=${this.current}
-            step="1"
-            min="10"
-            max="30"
-          ></ha-control-circular-slider>
-          <div>
-            High: ${this.high} °C
-            <br />
-            Changing:
-            ${this.changingHigh != null ? `${this.changingHigh} °C` : "-"}
-          </div>
-        </div>
-      </ha-card>
-      <ha-card>
-        <div class="card-content">
-          <p class="title"><b>Dual</b></p>
-          <ha-control-circular-slider
-            dual
-            @low-changed=${this._lowChanged}
-            @low-changing=${this._lowChanging}
-            @high-changed=${this._highChanged}
-            @high-changing=${this._highChanging}
-            .low=${this.low}
-            .high=${this.high}
-            .current=${this.current}
-            step="1"
-            min="10"
-            max="30"
-          ></ha-control-circular-slider>
-          <div>
-            Low value: ${this.low} °C
-            <br />
-            Low changing:
-            ${this.changingLow != null ? `${this.changingLow} °C` : "-"}
-            <br />
-            High value: ${this.high} °C
-            <br />
-            High changing:
-            ${this.changingHigh != null ? `${this.changingHigh} °C` : "-"}
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ha-card {
-        max-width: 600px;
-        margin: 24px auto;
-      }
-      pre {
-        margin-top: 0;
-        margin-bottom: 8px;
-      }
-      p {
-        margin: 0;
-      }
-      p.title {
-        margin-bottom: 12px;
-      }
-      ha-control-circular-slider {
-        --control-circular-slider-color: #ff9800;
-      }
-      ha-control-circular-slider[inverted] {
-        --control-circular-slider-color: #2196f3;
-      }
-      ha-control-circular-slider[dual] {
-        --control-circular-slider-high-color: #2196f3;
-        --control-circular-slider-low-color: #ff9800;
-      }
-      .field {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-control-circular-slider": DemoHaCircularSlider;
-  }
-}

gallery/src/pages/components/ha-control-number-buttons.markdown

@@ -1,3 +0,0 @@
----
-title: Control Number Buttons
----

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -1,100 +0,0 @@
-import { LitElement, TemplateResult, css, html } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-number-buttons";
-import { repeat } from "lit/directives/repeat";
-import { ifDefined } from "lit/directives/if-defined";
-
-const buttons: {
-  id: string;
-  label: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  class?: string;
-}[] = [
-  {
-    id: "basic",
-    label: "Basic",
-  },
-  {
-    id: "min_max_step",
-    label: "With min/max and step",
-    min: 5,
-    max: 25,
-    step: 0.5,
-  },
-  {
-    id: "custom",
-    label: "Custom",
-    class: "custom",
-  },
-];
-
-@customElement("demo-components-ha-control-number-buttons")
-export class DemoHarControlNumberButtons extends LitElement {
-  @state() value = 5;
-
-  private _valueChanged(ev) {
-    this.value = ev.detail.value;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      ${repeat(buttons, (button) => {
-        const { id, label, ...config } = button;
-        return html`
-          <ha-card>
-            <div class="card-content">
-              <label id=${id}>${label}</label>
-              <pre>Config: ${JSON.stringify(config)}</pre>
-              <ha-control-number-buttons
-                .value=${this.value}
-                .min=${config.min}
-                .max=${config.max}
-                .step=${config.step}
-                class=${ifDefined(config.class)}
-                @value-changed=${this._valueChanged}
-                .label=${label}
-              >
-              </ha-control-number-buttons>
-            </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 {
-        color: #2196f3;
-        --control-number-buttons-color: #2196f3;
-        --control-number-buttons-background-color: #2196f3;
-        --control-number-buttons-background-opacity: 0.1;
-        --control-number-buttons-thickness: 100px;
-        --control-number-buttons-border-radius: 24px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-control-number-buttons": DemoHarControlNumberButtons;
-  }
-}

gallery/src/pages/components/ha-control-select-menu.markdown

@@ -1,3 +0,0 @@
----
-title: Control Select Menu
----

gallery/src/pages/components/ha-control-select-menu.ts

@@ -1,146 +0,0 @@
-import { mdiFan, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
-import { LitElement, TemplateResult, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-control-select-menu";
-import "../../../../src/components/ha-list-item";
-import "../../../../src/components/ha-svg-icon";
-
-type SelectMenuOptions = {
-  label: string;
-  value: string;
-  icon?: string;
-};
-
-type SelectMenu = {
-  label: string;
-  icon: string;
-  class?: string;
-  disabled?: boolean;
-  options: SelectMenuOptions[];
-};
-
-const selects: SelectMenu[] = [
-  {
-    label: "Basic select",
-    icon: mdiFan,
-    options: [
-      {
-        value: "low",
-        label: "Low",
-      },
-      {
-        value: "medium",
-        label: "Medium",
-      },
-      {
-        value: "high",
-        label: "High",
-      },
-    ],
-  },
-  {
-    label: "Select with icons",
-    icon: mdiFan,
-    options: [
-      {
-        value: "low",
-        label: "Low",
-        icon: mdiFanSpeed1,
-      },
-      {
-        value: "medium",
-        label: "Medium",
-        icon: mdiFanSpeed2,
-      },
-      {
-        value: "high",
-        label: "High",
-        icon: mdiFanSpeed3,
-      },
-    ],
-  },
-  {
-    label: "Disabled select",
-    icon: mdiFan,
-    options: [],
-    disabled: true,
-  },
-];
-
-@customElement("demo-components-ha-control-select-menu")
-export class DemoHaControlSelectMenu extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        ${repeat(
-          selects,
-          (select) => html`
-            <div class="card-content">
-              <ha-control-select-menu
-                .label=${select.label}
-                ?disabled=${select.disabled}
-                fixedMenuPosition
-                naturalMenuWidth
-              >
-                <ha-svg-icon slot="icon" .path=${select.icon}></ha-svg-icon>
-                ${select.options.map(
-                  (option) => html`
-                    <ha-list-item
-                      .value=${option.value}
-                      .graphic=${option.icon ? "icon" : undefined}
-                    >
-                      ${option.icon
-                        ? html`
-                            <ha-svg-icon
-                              slot="graphic"
-                              .path=${option.icon}
-                            ></ha-svg-icon>
-                          `
-                        : nothing}
-                      ${option.label ?? option.value}
-                    </ha-list-item>
-                  `
-                )}
-              </ha-control-select-menu>
-            </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 {
-        --control-button-icon-color: var(--primary-color);
-        --control-button-background-color: var(--primary-color);
-        --control-button-background-opacity: 0.2;
-        --control-button-border-radius: 18px;
-        height: 100px;
-        width: 100px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-control-select-menu": DemoHaControlSelectMenu;
-  }
-}

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

@@ -5,32 +5,28 @@ 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 its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview). 
 
 # Highlighted guidelines
 
 ## 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.
+* 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.
+* 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-form.ts

@@ -336,7 +336,7 @@ const SCHEMAS: {
           ["and", "another_one"],
           ["option", "1000"],
         ],
-        name: "select many options",
+        name: "select many otions",
         default: "default",
       },
     ],
@@ -364,7 +364,7 @@ const SCHEMAS: {
           and: "another_one",
           option: "1000",
         },
-        name: "multi many options",
+        name: "multi many otions",
         default: ["default"],
       },
     ],

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

@@ -32,6 +32,7 @@ Error color gauge
 Gauge with background color
 <ha-gauge value="75" style="--gauge-color: var(--info-color); --primary-background-color: lightgray"></ha-gauge>
 
+
 ## CSS variables
 
 ### Gauge

gallery/src/pages/components/ha-hs-color-picker.markdown

@@ -1,3 +0,0 @@
----
-title: HS Color Picker
----