POC

.eslintrc.json

@@ -75,16 +75,13 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
-    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/ban-ts-ignore": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/explicit-function-return-type": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,26 @@
+---
+name: Request a feature for the UI, Frontend or Lovelace
+about: Request an new feature for the Home Assistant frontend.
+labels: feature request
+---
+
+<!--
+  DO NOT DELETE ANY TEXT from this template!
+  Otherwise, your request may be closed without comment.
+-->
+
+## The request
+
+<!--
+  Describe to our maintainers, the feature you would like to be added.
+  Please be clear and concise and, if possible, provide a screenshot or mockup.
+-->
+
+## The alternatives
+
+<!--
+  Are you currently using, or have you considered alternatives?
+  If so, could you please describe those?
+-->
+
+## Additional information

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI, Frontend or Lovelace
-    url: https://github.com/home-assistant/frontend/discussions/category_choices
-    about: Request an new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.

README.md

@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
-We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.

build-scripts/bundle.js

@@ -52,13 +52,7 @@ module.exports.terserOptions = (latestBuild) => ({
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
   presets: [
-    !latestBuild && [
-      require("@babel/preset-env").default,
-      {
-        useBuiltIns: "entry",
-        corejs: "3.6",
-      },
-    ],
+    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
   plugins: [
@@ -68,8 +62,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
+    "@babel/syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/gulp/translations.js

@@ -7,6 +7,7 @@ const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
 const merge = require("gulp-merge-json");
+const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
 const { mapFiles } = require("../util");
@@ -300,6 +301,7 @@ gulp.task("build-flattened-translations", function () {
         return flatten(data);
       })
     )
+    .pipe(minify())
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {

build-scripts/removedIcons.json

@@ -1 +1,267 @@
-[]
+[
+  {
+    "path": "M17.5,15.61C17.33,15.37 9.53,5.4 9.27,5.08C9,4.75 9.08,4.65 9.13,4.59C9.22,4.5 9.36,4.5 9.93,4.5C10.26,4.5 13.59,4.5 13.94,4.47C14.66,4.47 14.78,4.53 14.85,4.56C14.93,4.58 15.13,4.75 15.26,4.92C15.33,5 22.32,13.36 22.39,13.45C22.46,13.54 22.59,13.69 22.67,13.84C22.76,14 22.77,14.18 22.64,14.25C22.56,14.3 18.7,15.89 18.59,15.93C18.5,16 18.27,16.06 18.11,16.04C18,16 17.77,15.92 17.5,15.61M21.47,15.42L21.75,15.47C21.75,15.47 22.68,15.65 22.77,15.67C22.87,15.69 22.96,15.76 22.95,15.79C22.94,15.87 22.9,15.91 22.83,15.95C22.77,16 18.58,18.58 18.5,18.62C18.43,18.66 18.33,18.72 18.11,18.75C17.7,18.83 16.91,18.61 16.66,18.56C16.41,18.5 6.15,16.23 6.06,16.2C5.97,16.17 5.91,16.16 5.9,16.08C5.89,15.94 6.11,15.88 6.28,15.81C6.46,15.75 11.28,14 11.45,13.93C11.62,13.86 11.84,13.84 11.95,13.83C12.06,13.82 12.73,13.93 13.03,13.97C13.34,14 14.2,14.15 14.2,14.15L16.16,16.7C16.5,17.09 16.72,17.25 17,17.28C17.15,17.29 17.31,17.25 17.42,17.2C17.5,17.16 21.47,15.42 21.47,15.42M10.25,9.18L11.96,11.37L12,11.45V11.5C11.96,11.54 8.93,14.32 8.91,14.35L5.72,15.5C5.72,15.5 5.63,15.55 5.58,15.58C5.53,15.61 5.47,15.67 5.5,15.82C5.5,15.87 5.5,16.59 5.5,16.79L1.56,18.04C1.37,18.1 1,18.23 0.95,18.19C0.88,18.14 0.97,18.03 1,17.97C1.06,17.91 9.08,10 9.39,9.7C9.84,9.24 10.25,9.18 10.25,9.18",
+    "name": "accusoft"
+  },
+  {
+    "path": "M4.94,11.12C5.23,11.12 5.5,11.16 5.76,11.23C5.77,9.09 7.5,7.35 9.65,7.35C11.27,7.35 12.67,8.35 13.24,9.77C13.83,9 14.74,8.53 15.76,8.53C17.5,8.53 18.94,9.95 18.94,11.71C18.94,11.95 18.91,12.2 18.86,12.43C19.1,12.34 19.37,12.29 19.65,12.29C20.95,12.29 22,13.35 22,14.65C22,15.95 20.95,17 19.65,17C18.35,17 6.36,17 4.94,17C3.32,17 2,15.68 2,14.06C2,12.43 3.32,11.12 4.94,11.12Z",
+    "name": "amazon-drive"
+  },
+  {
+    "path": "M8,11.5A1.25,1.25 0 0,0 6.75,12.75A1.25,1.25 0 0,0 8,14A1.25,1.25 0 0,0 9.25,12.75A1.25,1.25 0 0,0 8,11.5M16,11.5A1.25,1.25 0 0,0 14.75,12.75A1.25,1.25 0 0,0 16,14A1.25,1.25 0 0,0 17.25,12.75A1.25,1.25 0 0,0 16,11.5M12,7C13.5,7 14.9,7.33 16.18,7.91L18.34,5.75C18.73,5.36 19.36,5.36 19.75,5.75C20.14,6.14 20.14,6.77 19.75,7.16L17.95,8.96C20.41,10.79 22,13.71 22,17H2C2,13.71 3.59,10.79 6.05,8.96L4.25,7.16C3.86,6.77 3.86,6.14 4.25,5.75C4.64,5.36 5.27,5.36 5.66,5.75L7.82,7.91C9.1,7.33 10.5,7 12,7Z",
+    "name": "android-head"
+  },
+  {
+    "path": "M2,16.25C2,16.25 4,3.75 12,3.75C20,3.75 22,16.25 22,16.25C22,16.25 20,20.25 12,20.25C4,20.25 2,16.25 2,16.25M3.35,15.65C3.35,15.65 4.3,19 12,19C17,19 20,17.8 20.65,15.85C21.3,13.9 15.65,7.6 14.65,7.6C13.65,7.6 11.2,12 10.45,12C8.45,12 8.9,10 7.15,10C5.4,10 3.35,15.65 3.35,15.65Z",
+    "name": "basecamp"
+  },
+  {
+    "path": "M7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7C10.87,7 9.84,7.37 9,8V2.46C9.95,2.16 10.95,2 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12C2,8.3 4,5.07 7,3.34V12M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z",
+    "name": "beats"
+  },
+  {
+    "path": "M19.58,12.27C19.54,11.65 19.33,11.18 18.96,10.86C18.59,10.54 18.13,10.38 17.58,10.38C17,10.38 16.5,10.55 16.19,10.89C15.86,11.23 15.65,11.69 15.57,12.27M21.92,12.04C22,12.45 22,13.04 22,13.81H15.5C15.55,14.71 15.85,15.33 16.44,15.69C16.79,15.92 17.22,16.03 17.73,16.03C18.26,16.03 18.69,15.89 19,15.62C19.2,15.47 19.36,15.27 19.5,15H21.88C21.82,15.54 21.53,16.07 21,16.62C20.22,17.5 19.1,17.92 17.66,17.92C16.47,17.92 15.43,17.55 14.5,16.82C13.62,16.09 13.16,14.9 13.16,13.25C13.16,11.7 13.57,10.5 14.39,9.7C15.21,8.87 16.27,8.46 17.58,8.46C18.35,8.46 19.05,8.6 19.67,8.88C20.29,9.16 20.81,9.59 21.21,10.2C21.58,10.73 21.81,11.34 21.92,12.04M9.58,14.07C9.58,13.42 9.31,12.97 8.79,12.73C8.5,12.6 8.08,12.53 7.54,12.5H4.87V15.84H7.5C8.04,15.84 8.46,15.77 8.76,15.62C9.31,15.35 9.58,14.83 9.58,14.07M4.87,10.46H7.5C8.04,10.46 8.5,10.36 8.82,10.15C9.16,9.95 9.32,9.58 9.32,9.06C9.32,8.5 9.1,8.1 8.66,7.91C8.27,7.78 7.78,7.72 7.19,7.72H4.87M11.72,12.42C12.04,12.92 12.2,13.53 12.2,14.24C12.2,15 12,15.64 11.65,16.23C11.41,16.62 11.12,16.94 10.77,17.21C10.37,17.5 9.9,17.72 9.36,17.83C8.82,17.94 8.24,18 7.61,18H2V5.55H8C9.53,5.58 10.6,6 11.23,6.88C11.61,7.41 11.8,8.04 11.8,8.78C11.8,9.54 11.61,10.15 11.23,10.61C11,10.87 10.7,11.11 10.28,11.32C10.91,11.55 11.39,11.92 11.72,12.42M20.06,7.32H15.05V6.07H20.06V7.32Z",
+    "name": "behance"
+  },
+  {
+    "path": "M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z",
+    "name": "blackberry"
+  },
+  {
+    "path": "M12,3A9,9 0 0,1 21,12A9,9 0 0,1 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M5.94,8.5C4,11.85 5.15,16.13 8.5,18.06C11.85,20 18.85,7.87 15.5,5.94C12.15,4 7.87,5.15 5.94,8.5Z",
+    "name": "cisco-webex"
+  },
+  {
+    "path": "M11.9,14.5H10.8V9.5H11.9C13.5,9.5 14.6,10.4 14.6,12C14.6,13.6 13.5,14.5 11.9,14.5M11.9,7H8.1V17H11.8C15.3,17 17.4,14.9 17.4,12V12C17.4,9.1 15.4,7 11.9,7M12,20C10.1,20 8.3,19.3 6.9,18.1L6.2,17.5L4.5,17.7L5.2,16.1L4.9,15.3C4.4,14.2 4.2,13.1 4.2,11.9C4.2,7.5 7.8,3.9 12.1,3.9C16.4,3.9 19.9,7.6 19.9,12C19.9,16.4 16.3,20 12,20M12,2C6.5,2 2.1,6.5 2.1,12C2.1,13.5 2.4,14.9 3,16.2L1.4,20.3L5.7,19.7C7.4,21.2 9.7,22.1 12.1,22.1C17.6,22.1 22,17.6 22,12.1C22,6.6 17.5,2 12,2Z",
+    "name": "disqus-outline"
+  },
+  {
+    "path": "M16.42,18.42C16,16.5 15.5,14.73 15,13.17C15.5,13.1 16,13.06 16.58,13.06H16.6V13.06H16.6C17.53,13.06 18.55,13.18 19.66,13.43C19.28,15.5 18.08,17.27 16.42,18.42M12,19.8C10.26,19.8 8.66,19.23 7.36,18.26C7.64,17.81 8.23,16.94 9.18,16.04C10.14,15.11 11.5,14.15 13.23,13.58C13.82,15.25 14.36,17.15 14.77,19.29C13.91,19.62 13,19.8 12,19.8M4.2,12C4.2,11.96 4.2,11.93 4.2,11.89C4.42,11.9 4.71,11.9 5.05,11.9H5.06C6.62,11.89 9.36,11.76 12.14,10.89C12.29,11.22 12.44,11.56 12.59,11.92C10.73,12.54 9.27,13.53 8.19,14.5C7.16,15.46 6.45,16.39 6.04,17C4.9,15.66 4.2,13.91 4.2,12M8.55,5C9.1,5.65 10.18,7.06 11.34,9.25C9,9.96 6.61,10.12 5.18,10.12C5.14,10.12 5.1,10.12 5.06,10.12H5.05C4.81,10.12 4.6,10.12 4.43,10.11C5,7.87 6.5,6 8.55,5M12,4.2C13.84,4.2 15.53,4.84 16.86,5.91C15.84,7.14 14.5,8 13.03,8.65C12,6.67 11,5.25 10.34,4.38C10.88,4.27 11.43,4.2 12,4.2M18.13,7.18C19.1,8.42 19.71,9.96 19.79,11.63C18.66,11.39 17.6,11.28 16.6,11.28V11.28H16.59C15.79,11.28 15.04,11.35 14.33,11.47C14.16,11.05 14,10.65 13.81,10.26C15.39,9.57 16.9,8.58 18.13,7.18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+    "name": "dribbble"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15.09,16.5C14.81,15.14 14.47,13.91 14.08,12.82L15.2,12.74H15.22V12.74C15.87,12.74 16.59,12.82 17.36,13C17.09,14.44 16.26,15.69 15.09,16.5M12,17.46C10.79,17.46 9.66,17.06 8.76,16.39C8.95,16.07 9.36,15.46 10,14.83C10.7,14.18 11.64,13.5 12.86,13.11C13.28,14.27 13.65,15.6 13.94,17.1C13.33,17.33 12.68,17.46 12,17.46M6.54,12V11.92L7.14,11.93V11.93C8.24,11.93 10.15,11.83 12.1,11.22L12.41,11.94C11.11,12.38 10.09,13.07 9.34,13.76C8.61,14.42 8.12,15.08 7.83,15.5C7.03,14.56 6.54,13.34 6.54,12M9.59,7.11C9.97,7.56 10.73,8.54 11.54,10.08C9.89,10.57 8.23,10.68 7.22,10.68H7.14V10.68H6.7C7.09,9.11 8.17,7.81 9.59,7.11M12,6.54C13.29,6.54 14.47,7 15.41,7.74C14.69,8.6 13.74,9.22 12.72,9.66C12,8.27 11.31,7.28 10.84,6.67C11.21,6.59 11.6,6.54 12,6.54M16.29,8.63C16.97,9.5 17.4,10.57 17.45,11.74C16.66,11.58 15.92,11.5 15.22,11.5V11.5C14.66,11.5 14.13,11.54 13.63,11.63L13.27,10.78C14.37,10.3 15.43,9.61 16.29,8.63M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z",
+    "name": "dribbble-box"
+  },
+  {
+    "path": "M6.72,20.78C8.23,20.71 10.07,20.78 11.87,20.78C13.72,20.78 15.62,20.66 17.12,20.78C17.72,20.83 18.28,21.19 18.77,20.87C19.16,20.38 18.87,19.71 18.96,19.05C19.12,17.78 20.28,16.27 18.59,15.95C17.87,16.61 18.35,17.23 17.95,18.05C17.45,19.03 15.68,19.37 14,19.5C12.54,19.62 10,19.76 9.5,18.77C9.04,17.94 9.29,16.65 9.29,15.58C9.29,14.38 9.16,13.22 9.5,12.3C11.32,12.43 13.7,11.69 15,12.5C15.87,13 15.37,14.06 16.38,14.4C17.07,14.21 16.7,13.32 16.66,12.5C16.63,11.94 16.63,11.19 16.66,10.57C16.69,9.73 17,8.76 16.1,8.74C15.39,9.3 15.93,10.23 15.18,10.75C14.95,10.92 14.43,11 14.08,11C12.7,11.17 10.54,11.05 9.38,10.84C9.23,9.16 9.24,6.87 9.38,5.19C10,4.57 11.45,4.54 12.42,4.55C14.13,4.55 16.79,4.7 17.3,5.55C17.58,6 17.36,7 17.85,7.1C18.85,7.33 18.36,5.55 18.41,4.73C18.44,4.11 18.71,3.72 18.59,3.27C18.27,2.83 17.79,3.05 17.5,3.09C14.35,3.5 9.6,3.27 6.26,3.27C5.86,3.27 5.16,3.07 4.88,3.54C4.68,4.6 6.12,4.16 6.62,4.73C6.79,4.91 7.03,5.73 7.08,6.28C7.23,7.74 7.08,9.97 7.08,12.12C7.08,14.38 7.26,16.67 7.08,18.05C7,18.53 6.73,19.3 6.62,19.41C6,20.04 4.34,19.35 4.5,20.69C5.09,21.08 5.93,20.82 6.72,20.78Z",
+    "name": "etsy"
+  },
+  {
+    "path": "M12,17.5C10.15,17.5 8.42,16.56 7.41,15L17.41,12.75L22.08,11.75C22.05,10.32 21.71,8.92 21.08,7.64C18.66,2.61 12.62,0.5 7.58,2.92C2.55,5.34 0.44,11.38 2.86,16.41C5.29,21.44 11.33,23.56 16.36,21.14C18.5,20.09 20.25,18.31 21.22,16.11L16.61,15C15.6,16.57 13.86,17.5 12,17.5M12,6.5C13.76,6.5 15.41,7.34 16.44,8.77L6.57,11.19C6.96,8.5 9.28,6.5 12,6.5Z",
+    "name": "eventbrite"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z",
+    "name": "facebook-box"
+  },
+  {
+    "path": "M21,12A9,9 0 0,1 12,21H4.5L9.74,15.76L11.16,17.17L9.33,19H12A7,7 0 0,0 19,12V7L21,5V12M3,12A9,9 0 0,1 12,3H19.5L14.26,8.24L12.84,6.83L14.67,5H12A7,7 0 0,0 5,12V17L3,19V12Z",
+    "name": "flattr"
+  },
+  {
+    "path": "M11,12C11,14.5 9,16.5 6.5,16.5C4,16.5 2,14.5 2,12C2,9.5 4,7.5 6.5,7.5C9,7.5 11,9.5 11,12M17.5,7.5C15,7.5 13,9.5 13,12C13,14.5 15,16.5 17.5,16.5C20,16.5 22,14.5 22,12C22,9.5 20,7.5 17.5,7.5Z",
+    "name": "flickr"
+  },
+  {
+    "path": "M17,5L16.57,7.5C16.5,7.73 16.2,8 15.91,8C15.61,8 12,8 12,8C11.53,8 10.95,8.32 10.95,8.79V9.2C10.95,9.67 11.53,10 12,10C12,10 14.95,10 15.28,10C15.61,10 15.93,10.36 15.86,10.71C15.79,11.07 14.94,13.28 14.9,13.5C14.86,13.67 14.64,14 14.25,14C13.92,14 11.37,14 11.37,14C10.85,14 10.69,14.07 10.34,14.5C10,14.94 7.27,18.1 7.27,18.1C7.24,18.13 7,18.04 7,18V5C7,4.7 7.61,4 8,4C8,4 16.17,4 16.5,4C16.82,4 17.08,4.61 17,5M17,14.45C17.11,13.97 18.78,6.72 19.22,4.55M17.58,2C17.58,2 8.38,2 6.91,2C5.43,2 5,3.11 5,3.8C5,4.5 5,20.76 5,20.76C5,21.54 5.42,21.84 5.66,21.93C5.9,22.03 6.55,22.11 6.94,21.66C6.94,21.66 11.65,16.22 11.74,16.13C11.87,16 11.87,16 12,16C12.26,16 14.2,16 15.26,16C16.63,16 16.85,15 17,14.45C17.11,13.97 18.78,6.72 19.22,4.55C19.56,2.89 19.14,2 17.58,2Z",
+    "name": "foursquare"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H14.56C14.24,20.93 14.23,20.32 14.23,20.11L14.24,17.64C14.24,16.8 13.95,16.25 13.63,15.97C15.64,15.75 17.74,15 17.74,11.53C17.74,10.55 17.39,9.74 16.82,9.11C16.91,8.89 17.22,7.97 16.73,6.73C16.73,6.73 15.97,6.5 14.25,7.66C13.53,7.46 12.77,7.36 12,7.35C11.24,7.36 10.46,7.46 9.75,7.66C8.03,6.5 7.27,6.73 7.27,6.73C6.78,7.97 7.09,8.89 7.18,9.11C6.61,9.74 6.26,10.55 6.26,11.53C6.26,15 8.36,15.75 10.36,16C10.1,16.2 9.87,16.6 9.79,17.18C9.27,17.41 7.97,17.81 7.17,16.43C7.17,16.43 6.69,15.57 5.79,15.5C5.79,15.5 4.91,15.5 5.73,16.05C5.73,16.05 6.32,16.33 6.73,17.37C6.73,17.37 7.25,19.12 9.76,18.58L9.77,20.11C9.77,20.32 9.75,20.93 9.43,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "github-box"
+  },
+  {
+    "path": "M20.38,8.53C20.54,8.13 21.06,6.54 20.21,4.39C20.21,4.39 18.9,4 15.91,6C14.66,5.67 13.33,5.62 12,5.62C10.68,5.62 9.34,5.67 8.09,6C5.1,3.97 3.79,4.39 3.79,4.39C2.94,6.54 3.46,8.13 3.63,8.53C2.61,9.62 2,11 2,12.72C2,19.16 6.16,20.61 12,20.61C17.79,20.61 22,19.16 22,12.72C22,11 21.39,9.62 20.38,8.53M12,19.38C7.88,19.38 4.53,19.19 4.53,15.19C4.53,14.24 5,13.34 5.8,12.61C7.14,11.38 9.43,12.03 12,12.03C14.59,12.03 16.85,11.38 18.2,12.61C19,13.34 19.5,14.23 19.5,15.19C19.5,19.18 16.13,19.38 12,19.38M8.86,13.12C8.04,13.12 7.36,14.12 7.36,15.34C7.36,16.57 8.04,17.58 8.86,17.58C9.69,17.58 10.36,16.58 10.36,15.34C10.36,14.11 9.69,13.12 8.86,13.12M15.14,13.12C14.31,13.12 13.64,14.11 13.64,15.34C13.64,16.58 14.31,17.58 15.14,17.58C15.96,17.58 16.64,16.58 16.64,15.34C16.64,14.11 16,13.12 15.14,13.12Z",
+    "name": "github-face"
+  },
+  {
+    "path": "M8,2A3,3 0 0,0 5,5V16.5H8V5H19A3,3 0 0,0 16,2H8M16,7.5V19H5A3,3 0 0,0 8,22H16A3,3 0 0,0 19,19V7.5H16Z",
+    "name": "glassdoor"
+  },
+  {
+    "path": "M2,22L8.5,2H15.4L9.2,20C9.2,20 8.6,22 7,22C5.9,22 2,22 2,22M16.4,5L13,15L15,20.7C15,20.7 15.4,22 17,22C18.3,22 22,22 22,22L16.4,5Z",
+    "name": "google-adwords"
+  },
+  {
+    "path": "M19,3H13V8L17,7L16,11H21V5C21,3.89 20.1,3 19,3M17,17L13,16V21H19A2,2 0 0,0 21,19V13H16M8,13H3V19A2,2 0 0,0 5,21H11V16L7,17M3,5V11H8L7,7L11,8V3H5C3.89,3 3,3.89 3,5Z",
+    "name": "google-pages"
+  },
+  {
+    "path": "M12,1.5A9,9 0 0,1 21,10.5C21,13.11 19.89,15.47 18.11,17.11L17.05,16.05C18.55,14.68 19.5,12.7 19.5,10.5A7.5,7.5 0 0,0 12,3A7.5,7.5 0 0,0 4.5,10.5C4.5,12.7 5.45,14.68 6.95,16.05L5.89,17.11C4.11,15.47 3,13.11 3,10.5A9,9 0 0,1 12,1.5M12,4.5A6,6 0 0,1 18,10.5C18,12.28 17.22,13.89 16,15L14.92,13.92C15.89,13.1 16.5,11.87 16.5,10.5C16.5,8 14.5,6 12,6C9.5,6 7.5,8 7.5,10.5C7.5,11.87 8.11,13.1 9.08,13.92L8,15C6.78,13.89 6,12.28 6,10.5A6,6 0 0,1 12,4.5M8.11,17.65L11.29,14.46C11.68,14.07 12.32,14.07 12.71,14.46L15.89,17.65C16.28,18.04 16.28,18.67 15.89,19.06L12.71,22.24C12.32,22.63 11.68,22.63 11.29,22.24L8.11,19.06C7.72,18.67 7.72,18.04 8.11,17.65Z",
+    "name": "google-physical-web"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M19.5,12H18V10.5H17V12H15.5V13H17V14.5H18V13H19.5V12M9.65,11.36V12.9H12.22C12.09,13.54 11.45,14.83 9.65,14.83C8.11,14.83 6.89,13.54 6.89,12C6.89,10.46 8.11,9.17 9.65,9.17C10.55,9.17 11.13,9.56 11.45,9.88L12.67,8.72C11.9,7.95 10.87,7.5 9.65,7.5C7.14,7.5 5.15,9.5 5.15,12C5.15,14.5 7.14,16.5 9.65,16.5C12.22,16.5 13.96,14.7 13.96,12.13C13.96,11.81 13.96,11.61 13.89,11.36H9.65Z",
+    "name": "google-plus-box"
+  },
+  {
+    "path": "M14,20.95H20V10.78L8,7.34V3.05H4V20.95H10V15.31H14V20.95Z",
+    "name": "houzz"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M13.5,18.71H18V11.09L9,8.5V5.29H6V18.71H10.5V14.5H13.5V18.71Z",
+    "name": "houzz-box"
+  },
+  {
+    "path": "M10,5A1,1 0 0,0 9,4H8V2H16V4H15A1,1 0 0,0 14,5V19A1,1 0 0,0 15,20H16V22H8V20H9A1,1 0 0,0 10,19V5Z",
+    "name": "instapaper"
+  },
+  {
+    "path": "M7.85,17.07C7.03,17.17 3.5,17.67 4.06,20.26C4.69,23.3 9.87,22.59 9.83,19C9.81,16.57 9.83,9.2 9.83,9.2C9.83,9.2 9.76,8.53 10.43,8.39L18.19,6.79C18.19,6.79 18.83,6.65 18.83,7.29C18.83,7.89 18.83,14.2 18.83,14.2C18.83,14.2 18.9,14.83 18.12,15C17.34,15.12 13.91,15.4 14.19,18C14.5,21.07 20,20.65 20,17.07V2.61C20,2.61 20.04,1.62 18.9,1.87L9.5,3.78C9.5,3.78 8.66,3.96 8.66,4.77C8.66,5.5 8.66,16.11 8.66,16.11C8.66,16.11 8.66,16.96 7.85,17.07Z",
+    "name": "itunes"
+  },
+  {
+    "path": "M2,5.69C8.92,1.07 11.1,7 11.28,10.27C11.46,13.53 8.29,17.64 4.31,14.92V20.3L2,18.77V5.69M4.22,7.4V12.78C7.84,14.95 9.08,13.17 9.08,10.09C9.08,5.74 6.57,5.59 4.22,7.4M15.08,4.15C15.08,4.15 14.9,7.64 15.08,11.07C15.44,14.5 19.69,11.84 19.69,11.84V4.92L22,5.2V14.44C22,20.6 15.85,20.3 15.85,20.3L15.08,18C20.46,18 19.78,14.43 19.78,14.43C13.27,16.97 12.77,12.61 12.77,12.61V5.69L15.08,4.15Z",
+    "name": "language-python-text"
+  },
+  {
+    "path": "M18,17.93C15.92,17.92 14.81,16.9 14.04,15.09L13.82,14.6L11.92,10.23C11.29,8.69 9.72,7.64 7.96,7.64C5.57,7.64 3.63,9.59 3.63,12C3.63,14.41 5.57,16.36 7.96,16.36C9.62,16.36 11.08,15.41 11.8,14L12.57,15.81C11.5,17.15 9.82,18 7.96,18C4.67,18 2,15.32 2,12C2,8.69 4.67,6 7.96,6C10.44,6 12.45,7.34 13.47,9.7C13.54,9.89 14.54,12.24 15.42,14.24C15.96,15.5 16.42,16.31 17.91,16.36C19.38,16.41 20.39,15.5 20.39,14.37C20.39,13.26 19.62,13 18.32,12.56C16,11.79 14.79,11 14.79,9.15C14.79,7.33 16,6.12 18,6.12C19.31,6.12 20.24,6.7 20.89,7.86L19.62,8.5C19.14,7.84 18.61,7.57 17.94,7.57C17,7.57 16.33,8.23 16.33,9.1C16.33,10.34 17.43,10.53 18.97,11.03C21.04,11.71 22,12.5 22,14.42C22,16.45 20.27,17.93 18,17.93Z",
+    "name": "lastfm"
+  },
+  {
+    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z",
+    "name": "linkedin-box"
+  },
+  {
+    "path": "M9.56,12.5C9.56,12.6 9.5,12.72 9.4,12.79C9.2,12.97 8.89,12.94 8.71,12.74C8.63,12.65 8.59,12.53 8.59,12.41V8.5H5.66V13.39A2.44,2.44 0 0,0 8.1,15.83C8.68,15.83 9.24,15.62 9.68,15.24C9.64,15.6 9.43,15.93 9.11,16.11C8.75,16.31 8.35,16.42 7.94,16.41C7.46,16.41 7,16.3 6.56,16.09L6.39,16V18.6C7.04,18.86 7.74,19 8.44,19C9.47,19 10.46,18.66 11.25,18C12.08,17.25 12.54,16.18 12.5,15.06V8.5H9.56V12.5M4.93,13.39V5.59H2V12.9C1.84,14.35 2.88,15.65 4.33,15.81C4.41,15.82 4.5,15.83 4.56,15.83V15.83C4.93,15.83 5.29,15.74 5.63,15.59L5.75,15.5L5.65,15.41C5.17,14.85 4.91,14.13 4.93,13.39M22,11.39V8.5H21C20.59,6.38 18.53,5 16.41,5.41C16.17,5.45 15.94,5.5 15.71,5.61C14.28,6.24 13.33,7.62 13.26,9.18V15.83H13.39C14.95,15.76 16.19,14.47 16.19,12.9H17.41V10H16.15V9.17C16.15,8.86 16.32,8.57 16.59,8.41C17.06,8.13 17.68,8.28 17.96,8.76C18.05,8.91 18.09,9.07 18.1,9.24V11.93C18.07,14.05 19.75,15.79 21.87,15.83H22V12.9H22A1,1 0 0,1 21,11.9V11.41L22,11.39Z",
+    "name": "lyft"
+  },
+  {
+    "path": "M15.45,11.91C15.34,9.7 13.7,8.37 11.72,8.37H11.64C9.35,8.37 8.09,10.17 8.09,12.21C8.09,14.5 9.62,15.95 11.63,15.95C13.88,15.95 15.35,14.3 15.46,12.36M11.65,6.39C13.18,6.39 14.62,7.07 15.67,8.13V8.13C15.67,7.62 16,7.24 16.5,7.24H16.61C17.35,7.24 17.5,7.94 17.5,8.16V16.06C17.46,16.58 18.04,16.84 18.37,16.5C19.64,15.21 21.15,9.81 17.58,6.69C14.25,3.77 9.78,4.25 7.4,5.89C4.88,7.63 3.26,11.5 4.83,15.11C6.54,19.06 11.44,20.24 14.35,19.06C15.83,18.47 16.5,20.46 15,21.11C12.66,22.1 6.23,22 3.22,16.79C1.19,13.27 1.29,7.08 6.68,3.87C10.81,1.42 16.24,2.1 19.5,5.5C22.95,9.1 22.75,15.8 19.4,18.41C17.89,19.59 15.64,18.44 15.66,16.71L15.64,16.15C14.59,17.2 13.18,17.81 11.65,17.81C8.63,17.81 6,15.15 6,12.13C6,9.08 8.63,6.39 11.65,6.39Z",
+    "name": "mail-ru"
+  },
+  {
+    "path": "M20.93,14C20.66,15.4 18.5,16.95 15.97,17.25C14.66,17.4 13.38,17.55 12,17.5C9.76,17.38 8,16.95 8,16.95L8.03,17.57C8.32,19.78 10.22,19.92 12.03,20C13.85,20.04 15.47,19.53 15.47,19.53L15.55,21.17C15.55,21.17 14.27,21.86 12,22C10.75,22.05 9.2,21.95 7.39,21.47C3.47,20.43 2.79,16.25 2.69,12L2.68,8.57C2.68,4.23 5.5,2.96 5.5,2.96C6.95,2.3 9.41,2 11.97,2H12.03C14.59,2 17.05,2.3 18.5,2.96C18.5,2.96 21.33,4.23 21.33,8.57C21.33,8.57 21.36,11.77 20.93,14M8.33,10.32C8.33,9.54 7.7,8.91 6.93,8.91C6.15,8.91 5.5,9.54 5.5,10.32C5.5,11.09 6.15,11.72 6.93,11.72A1.4,1.4 0 0,0 8.33,10.32M13.41,10.32A1.41,1.41 0 0,0 12,8.91A1.41,1.41 0 0,0 10.59,10.32C10.59,11.09 11.22,11.72 12,11.72C12.78,11.72 13.41,11.09 13.41,10.32M18.5,10.32C18.5,9.54 17.85,8.91 17.07,8.91C16.3,8.91 15.67,9.54 15.67,10.32A1.4,1.4 0 0,0 17.07,11.72C17.85,11.72 18.5,11.09 18.5,10.32Z",
+    "name": "mastodon-variant"
+  },
+  {
+    "path": "M4.37,7.3C4.4,7.05 4.3,6.81 4.12,6.65L2.25,4.4V4.06H8.05L12.53,13.89L16.47,4.06H22V4.4L20.4,5.93C20.27,6.03 20.2,6.21 20.23,6.38V17.62C20.2,17.79 20.27,17.97 20.4,18.07L21.96,19.6V19.94H14.12V19.6L15.73,18.03C15.89,17.88 15.89,17.83 15.89,17.59V8.5L11.4,19.9H10.8L5.57,8.5V16.14C5.5,16.46 5.63,16.78 5.86,17L7.96,19.57V19.9H2V19.57L4.1,17C4.33,16.78 4.43,16.46 4.37,16.14V7.3Z",
+    "name": "medium"
+  },
+  {
+    "path": "M19.61,14.86C19.61,16.68 18.3,18.25 16.5,18.55C16.29,18.59 16.07,18.62 15.84,18.61C15.76,18.61 15.73,18.64 15.71,18.71C15.35,19.74 14.64,20.35 13.57,20.5C12.86,20.6 12.22,20.41 11.65,19.97C11.57,19.9 11.5,19.9 11.44,19.96C10.78,20.43 10.04,20.64 9.23,20.59C7.66,20.5 6.33,19.29 6.08,17.74C6.06,17.63 6.04,17.5 6.04,17.41C6.04,17.32 6,17.29 5.92,17.27C5.44,17.18 5,17 4.63,16.68C3.92,16.13 3.5,15.41 3.4,14.5C3.29,13.5 3.61,12.62 4.32,11.89C4.38,11.83 4.38,11.79 4.34,11.72C4.07,11.24 3.94,10.72 3.96,10.17C4,8.79 4.97,7.65 6.31,7.37C6.46,7.33 6.54,7.27 6.61,7.13C7.27,5.71 8.37,4.85 9.91,4.56C11,4.36 12,4.58 12.94,5.13C13,5.18 13.08,5.18 13.17,5.16C14.67,4.72 16,5.04 17.12,6.11C17.78,6.74 18.15,7.54 18.26,8.46C18.28,8.66 18.29,8.86 18.28,9.06C18.27,9.14 18.29,9.17 18.37,9.19C19.04,9.44 19.5,9.91 19.71,10.6C19.96,11.45 19.75,12.21 19.11,12.83C19.05,12.89 19.07,12.92 19.1,12.97C19.44,13.56 19.61,14.18 19.61,14.86M12.93,14.57C12.93,15.34 13.43,16 14.14,16.26C14.5,16.37 14.85,16.43 15.22,16.45C15.5,16.46 15.75,16.44 16,16.32C16.19,16.22 16.28,16.06 16.27,15.85C16.26,15.64 16.16,15.5 15.96,15.4C15.89,15.37 15.82,15.34 15.74,15.33C15.5,15.29 15.3,15.26 15.07,15.21C14.71,15.14 14.55,14.95 14.55,14.57C14.54,14.24 14.63,13.93 14.73,13.63C14.92,13.07 15.17,12.53 15.41,12C15.64,11.47 15.88,10.95 16.04,10.4C16.13,10.1 16.18,9.8 16.09,9.5C15.97,9 15.69,8.7 15.2,8.61C14.75,8.5 14.3,8.5 13.9,8.78C13.76,8.87 13.63,8.85 13.5,8.74C13.43,8.67 13.34,8.58 13.26,8.5C12.84,8.12 12.3,8.1 11.85,8.45C11.67,8.59 11.5,8.76 11.33,8.89C11.16,9 11,9.03 10.79,8.92C10.6,8.83 10.42,8.74 10.23,8.65C10.03,8.57 9.85,8.46 9.63,8.44C8.95,8.38 8.24,8.79 7.94,9.41C7.8,9.68 7.69,9.96 7.59,10.25C7.11,11.57 6.72,12.91 6.32,14.26C6.14,14.86 6.35,15.45 6.86,15.77C7.26,16 7.69,16.09 8.14,15.95C8.5,15.84 8.71,15.55 8.85,15.22C9.31,14.13 9.73,13 10.17,11.91C10.29,11.61 10.41,11.3 10.54,11C10.67,10.7 11.04,10.6 11.26,10.8C11.4,10.92 11.44,11.09 11.42,11.26C11.41,11.45 11.34,11.62 11.27,11.79C11,12.5 10.69,13.24 10.4,13.97C10.34,14.11 10.28,14.26 10.25,14.42C10.21,14.69 10.31,14.93 10.54,15C10.76,15.12 11,15.14 11.23,15.05C11.5,14.95 11.67,14.74 11.79,14.5C12.22,13.65 12.65,12.8 13.08,11.95C13.28,11.56 13.5,11.17 13.68,10.78C13.76,10.64 13.85,10.5 14,10.41C14.12,10.33 14.25,10.33 14.38,10.4C14.5,10.47 14.5,10.6 14.5,10.73C14.5,10.8 14.5,10.87 14.47,10.93C14.41,11.07 14.36,11.2 14.3,11.33C13.94,12.09 13.57,12.84 13.22,13.59C13.07,13.91 12.91,14.23 12.93,14.57M17.96,20.12C17.96,19.62 17.54,19.2 17.04,19.2C16.5,19.2 16.1,19.61 16.1,20.12A0.93,0.93 0 0,0 17.03,21.05A0.93,0.93 0 0,0 17.96,20.12M2.38,12.46C2.86,12.46 3.27,12.05 3.27,11.57C3.27,11.09 2.87,10.69 2.39,10.69C1.89,10.69 1.5,11.08 1.5,11.57C1.5,12.06 1.89,12.46 2.38,12.46M13.26,2.55C12.77,2.55 12.37,2.94 12.37,3.42C12.37,3.91 12.77,4.3 13.25,4.3C13.74,4.3 14.13,3.92 14.13,3.43C14.13,2.95 13.74,2.55 13.26,2.55M20.45,8.03C20.45,7.63 20.11,7.29 19.71,7.29C19.3,7.28 18.95,7.63 18.95,8.04C18.95,8.45 19.28,8.78 19.7,8.78C20.12,8.78 20.46,8.45 20.45,8.03M5.04,5.89C5.04,6.27 5.34,6.56 5.71,6.56C6.09,6.56 6.39,6.26 6.38,5.88C6.38,5.5 6.09,5.22 5.72,5.22C5.33,5.22 5.04,5.5 5.04,5.89M12.06,21.44C12.06,21.12 11.81,20.86 11.5,20.86C11.16,20.86 10.91,21.11 10.91,21.44C10.91,21.75 11.16,22 11.5,22C11.8,22 12.06,21.75 12.06,21.44M21,12.5C20.71,12.5 20.45,12.78 20.45,13.08A0.55,0.55 0 0,0 21,13.63C21.33,13.63 21.57,13.4 21.57,13.08C21.57,12.77 21.33,12.5 21,12.5M7.62,2C7.35,2 7.14,2.2 7.14,2.47C7.14,2.73 7.35,2.94 7.62,2.94A0.47,0.47 0 0,0 8.09,2.47C8.09,2.2 7.89,2 7.62,2M22.08,10C21.86,10 21.67,10.17 21.66,10.4C21.66,10.63 21.85,10.82 22.08,10.82C22.32,10.82 22.5,10.64 22.5,10.41C22.5,10.17 22.32,10 22.08,10M5.5,18.26C5.5,18.04 5.29,17.85 5.06,17.84C4.84,17.84 4.65,18.03 4.65,18.27C4.65,18.5 4.84,18.68 5.07,18.68C5.3,18.68 5.5,18.5 5.5,18.26Z",
+    "name": "meetup"
+  },
+  {
+    "path": "M21.11,18.5C20.97,18.5 20.83,18.44 20.71,18.36C20.37,18.13 20.28,17.68 20.5,17.34C21.18,16.34 21.54,15.16 21.54,13.93C21.54,12.71 21.18,11.53 20.5,10.5C20.28,10.18 20.37,9.73 20.71,9.5C21.04,9.28 21.5,9.37 21.72,9.7C22.56,10.95 23,12.41 23,13.93C23,15.45 22.56,16.91 21.72,18.16C21.58,18.37 21.35,18.5 21.11,18.5M19,17.29C18.88,17.29 18.74,17.25 18.61,17.17C18.28,16.94 18.19,16.5 18.42,16.15C18.86,15.5 19.1,14.73 19.1,13.93C19.1,13.14 18.86,12.37 18.42,11.71C18.19,11.37 18.28,10.92 18.61,10.69C18.95,10.47 19.4,10.55 19.63,10.89C20.24,11.79 20.56,12.84 20.56,13.93C20.56,15 20.24,16.07 19.63,16.97C19.5,17.18 19.25,17.29 19,17.29M14.9,15.73C15.89,15.73 16.7,14.92 16.7,13.93C16.7,13.17 16.22,12.5 15.55,12.25C15.5,12.55 15.43,12.85 15.34,13.14C15.23,13.44 14.95,13.64 14.64,13.64C14.57,13.64 14.5,13.62 14.41,13.6C14.03,13.47 13.82,13.06 13.95,12.67C14.09,12.24 14.17,11.78 14.17,11.32C14.17,8.93 12.22,7 9.82,7C8.1,7 6.56,8 5.87,9.5C6.54,9.7 7.16,10.04 7.66,10.54C7.95,10.83 7.95,11.29 7.66,11.58C7.38,11.86 6.91,11.86 6.63,11.58C6.17,11.12 5.56,10.86 4.9,10.86C3.56,10.86 2.46,11.96 2.46,13.3C2.46,14.64 3.56,15.73 4.9,15.73H14.9M15.6,10.75C17.06,11.07 18.17,12.37 18.17,13.93C18.17,15.73 16.7,17.19 14.9,17.19H4.9C2.75,17.19 1,15.45 1,13.3C1,11.34 2.45,9.73 4.33,9.45C5.12,7.12 7.33,5.5 9.82,5.5C12.83,5.5 15.31,7.82 15.6,10.75Z",
+    "name": "mixcloud"
+  },
+  {
+    "path": "M5.68,3.96L11.41,11.65C11.55,11.84 11.55,12.1 11.41,12.29L5.65,20L5.5,20.18C4.76,21 3.47,21.07 2.64,20.31C1.85,19.59 1.79,18.37 2.43,17.5L6.56,11.97L2.46,6.47C1.83,5.62 1.88,4.39 2.67,3.67L2.82,3.54C3.73,2.87 5,3.05 5.68,3.96M18.32,3.96C19,3.05 20.27,2.87 21.18,3.54L21.33,3.67C22.12,4.39 22.17,5.61 21.54,6.47L17.44,11.97L21.57,17.5C22.21,18.36 22.15,19.59 21.36,20.31C20.53,21.07 19.24,21 18.5,20.18L18.35,20L12.59,12.29C12.45,12.1 12.45,11.84 12.59,11.65L18.32,3.96Z",
+    "name": "mixer"
+  },
+  {
+    "path": "M3.25,4.03L19.95,20.73L18.7,22L14.86,18.13C14.77,18.12 14.68,18.09 14.59,18.05C14.26,17.89 14.14,17.62 14.11,17.38L12.18,15.45C12.14,15.53 12.09,15.6 12.05,15.66C11.62,16.26 11.19,16.26 10.86,16.04C10.54,15.83 5.5,12 5.23,11.87C4.95,11.76 4.85,12.03 5.12,13.5C5.39,15 4.95,15.39 4.57,15.45C4.2,15.5 3.06,15.18 3,12.14C2.95,9.11 3.76,8.62 4.14,8.62C4.6,8.62 7.08,10.69 8.84,12.12L2,5.28L3.25,4.03M18.38,16.56C18.75,15.4 19.12,13.8 19.1,12.03V12C19.14,8.5 17.66,5.58 17.66,5.58C17.66,5.58 17.42,4.72 18.12,4.39C18.83,4.06 19.3,4.61 19.3,4.61C21.12,8.22 21,11.64 21,12C21,12.27 21.09,14.96 19.88,18.05L18.38,16.56M15.14,13.31C15.19,12.92 15.22,12.5 15.24,12.03V12C15.14,8.5 14.13,7.21 14.13,7.21C14.13,7.21 13.89,6.34 14.59,6C15.3,5.69 15.77,6.23 15.77,6.23C17.26,8.94 17.16,11.64 17.14,12C17.15,12.2 17.2,13.38 16.82,15L15.14,13.31M10.2,8.38C10.23,7.77 10.59,7.64 10.59,7.64C10.59,7.64 11.19,7.37 11.57,7.8C11.91,8.19 12.72,9.57 12.89,11.07L10.2,8.38Z",
+    "name": "nfc-off"
+  },
+  { "path": "M20,4H4V20H12V8H16V20H20V4", "name": "npm-variant" },
+  {
+    "path": "M3,3V21H21V3H3M6,6H18V18H15V9H12V18H6V6Z",
+    "name": "npm-variant-outline"
+  },
+  {
+    "path": "M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z",
+    "name": "paypal"
+  },
+  {
+    "path": "M12,7A2,2 0 0,1 10,9A2,2 0 0,1 8,7C7.37,7.84 7,8.87 7,10A5,5 0 0,0 12,15A5,5 0 0,0 17,10A5,5 0 0,0 12,5C11.57,5 11.16,5.05 10.77,5.15C11.5,5.45 12,6.17 12,7M12,2A8,8 0 0,1 20,10C20,11.05 19.8,12.04 19.43,12.96C17.89,17.38 13.63,22 12,22C10.37,22 6.11,17.38 4.57,12.96C4.2,12.04 4,11.05 4,10A8,8 0 0,1 12,2Z",
+    "name": "periscope"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "pinterest-box"
+  },
+  {
+    "path": "M21.9,4.26C21.64,3.55 20.96,3.07 20.2,3.07H20.19L18.46,3.07H3.81C3.07,3.07 2.39,3.54 2.12,4.24C2.04,4.45 2,4.66 2,4.88V10.92L2.07,12.12C2.36,14.85 3.78,17.23 5.97,18.9C6,18.93 6.05,18.96 6.09,19H6.11C7.29,19.86 8.6,20.44 10,20.73C10.68,20.86 11.35,20.93 12,20.93C12.63,20.93 13.25,20.87 13.85,20.76C13.93,20.75 14,20.73 14.07,20.72C14.09,20.71 14.11,20.7 14.14,20.69C15.5,20.4 16.76,19.83 17.89,19H17.91C17.95,18.96 18,18.93 18.03,18.9C20.22,17.23 21.64,14.85 21.93,12.12L22,10.92V4.88C22,4.68 21.97,4.47 21.9,4.26M17.67,10.55L12.96,15.06C12.7,15.32 12.35,15.44 12,15.44C11.67,15.44 11.33,15.32 11.06,15.06L6.36,10.55C5.81,10.03 5.79,9.16 6.32,8.61C6.84,8.06 7.71,8.05 8.26,8.57L12,12.17L15.77,8.57C16.31,8.05 17.18,8.07 17.71,8.61C18.23,9.16 18.21,10.03 17.67,10.55Z",
+    "name": "pocket"
+  },
+  {
+    "path": "M12,3A9,9 0 0,1 21,12C21,13.76 20.5,15.4 19.62,16.79L21,18.17V20A1,1 0 0,1 20,21H18.18L16.79,19.62C15.41,20.5 13.76,21 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17C12.65,17 13.26,16.88 13.83,16.65L10.95,13.77C10.17,13 10.17,11.72 10.95,10.94C11.73,10.16 13,10.16 13.78,10.94L16.66,13.82C16.88,13.26 17,12.64 17,12A5,5 0 0,0 12,7Z",
+    "name": "quicktime"
+  },
+  {
+    "path": "M18.61,5.89C18.6,5.79 18.5,5.73 18.44,5.73C18.37,5.72 16.83,5.61 16.83,5.61C16.83,5.61 15.76,4.55 15.65,4.43C15.53,4.31 15.3,4.35 15.21,4.37C15.2,4.37 15,4.44 14.61,4.55C14.25,3.5 13.62,2.58 12.43,2.58C12.11,2.18 11.72,2 11.38,2C8.8,2 7.57,5.22 7.18,6.86C6.18,7.17 5.47,7.39 5.37,7.42C4.82,7.6 4.8,7.62 4.73,8.14C4.67,8.54 3.21,19.86 3.21,19.86L14.61,22L20.79,20.66C20.79,20.66 18.62,6 18.61,5.89M14,4.76C13.69,4.85 13.37,4.95 13,5.06C13,5 13,4.93 13,4.85C13,4.21 12.93,3.7 12.79,3.29C13.35,3.36 13.73,4 14,4.76M12.08,3.42C12.24,3.82 12.34,4.39 12.34,5.16C12.34,5.2 12.34,5.24 12.34,5.27C11.71,5.46 11.03,5.68 10.35,5.89C10.73,4.4 11.45,3.69 12.08,3.42M11.31,2.69C11.42,2.69 11.53,2.73 11.64,2.8C10.81,3.19 9.93,4.17 9.55,6.12C9,6.3 8.47,6.46 8,6.62C8.42,5.12 9.46,2.69 11.31,2.69M12.5,9.15L11.76,11.42C11.76,11.42 11.09,11.06 10.27,11.06C9.07,11.06 9,11.81 9,12C9,13.04 11.71,13.43 11.71,15.86C11.71,17.77 10.5,19 8.87,19C6.91,19 5.91,17.78 5.91,17.78L6.43,16.05C6.43,16.05 7.46,16.93 8.33,16.93C8.9,16.93 9.13,16.5 9.13,16.16C9.13,14.81 6.92,14.75 6.92,12.53C6.92,10.66 8.26,8.85 10.97,8.85C12,8.85 12.5,9.15 12.5,9.15M15.43,5.29L16.75,6.6L17.71,6.68C18.05,9 19.19,16.73 19.66,19.88L14.66,20.97L15.43,5.29Z",
+    "name": "shopify"
+  },
+  {
+    "path": "M7.47,17.19C7.37,17.95 7.08,18.21 6.19,18.21C5.27,18.21 4.87,17.79 4.81,16.87L4.61,13.65C4.61,12.91 4.87,12.55 5.86,12.55C7.21,12.55 7.04,13.54 7.64,14.5C8.33,15.62 10,16.35 12.31,16.35C15.17,16.35 17,15.14 17,13.57C17,12.23 15.89,11.39 13.85,11.16L11.5,10.89C7.21,10.42 5.1,9.19 5.1,6.62C5.1,4.07 8.06,2 12.21,2C13.5,2 14.81,2.29 16.29,2.76C16.29,2.26 16.58,2.1 17.3,2.1C18.46,2.1 18.55,2.39 18.62,3.08L18.85,5.88C18.85,6.5 18.39,6.83 17.63,6.83C16.35,6.83 16.55,5.88 15.86,5.07C15.17,4.26 13.79,3.73 12.08,3.73C9.44,3.73 7.7,4.89 7.7,6.5C7.7,7.8 8.92,8.56 11.38,8.82L13.95,9.08C17.7,9.5 19.61,10.92 19.61,13.33C19.61,16.17 16.71,18.08 12.21,18.08C10.56,18.08 9.08,17.77 7.47,17.19M1,16H2V21H23V22H1V16Z",
+    "name": "slackware"
+  },
+  {
+    "path": "M6,3H18A3,3 0 0,1 21,6V18A3,3 0 0,1 18,21H6A3,3 0 0,1 3,18V6A3,3 0 0,1 6,3M7,6A1,1 0 0,0 6,7V17A1,1 0 0,0 7,18H17A1,1 0 0,0 18,17V7A1,1 0 0,0 17,6H7M9.5,9H14.5A0.5,0.5 0 0,1 15,9.5V14.5A0.5,0.5 0 0,1 14.5,15H9.5A0.5,0.5 0 0,1 9,14.5V9.5A0.5,0.5 0 0,1 9.5,9Z",
+    "name": "square-inc"
+  },
+  {
+    "path": "M5.5,0H18.5A5.5,5.5 0 0,1 24,5.5V18.5A5.5,5.5 0 0,1 18.5,24H5.5A5.5,5.5 0 0,1 0,18.5V5.5A5.5,5.5 0 0,1 5.5,0M15.39,15.18C15.39,16.76 14.5,17.81 12.85,17.95V12.61C14.55,13.13 15.39,13.66 15.39,15.18M11.65,6V10.88C10.34,10.5 9.03,9.93 9.03,8.43C9.03,6.94 10.18,6.12 11.65,6M15.5,7.6L16.5,6.8C15.62,5.66 14.4,4.92 12.85,4.77V3.8H11.65V3.8L11.65,4.75C9.5,4.89 7.68,6.17 7.68,8.5C7.68,11 9.74,11.78 11.65,12.29V17.96C10.54,17.84 9.29,17.31 8.43,16.03L7.3,16.78C8.2,18.12 9.76,19 11.65,19.14V20.2H12.07L12.85,20.2V19.16C15.35,19 16.7,17.34 16.7,15.14C16.7,12.58 14.81,11.76 12.85,11.19V6.05C14,6.22 14.85,6.76 15.5,7.6Z",
+    "name": "square-inc-cash"
+  },
+  {
+    "path": "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V15L6.19,16.31C6.45,17.6 7.6,18.58 8.97,18.58C10.53,18.58 11.8,17.31 11.8,15.75V15.62L15.2,13.19H15.28C17.36,13.19 19.05,11.5 19.05,9.42C19.05,7.34 17.36,5.65 15.28,5.65C13.2,5.65 11.5,7.34 11.5,9.42V9.47L9.13,12.93L8.97,12.92C8.38,12.92 7.83,13.1 7.38,13.41L3,11.6V5A2,2 0 0,1 5,3H19M8.28,17.17C9.08,17.5 10,17.13 10.33,16.33C10.66,15.53 10.28,14.62 9.5,14.29L8.22,13.76C8.71,13.58 9.26,13.57 9.78,13.79C10.31,14 10.72,14.41 10.93,14.94C11.15,15.46 11.15,16.04 10.93,16.56C10.5,17.64 9.23,18.16 8.15,17.71C7.65,17.5 7.27,17.12 7.06,16.67L8.28,17.17M17.8,9.42C17.8,10.81 16.67,11.94 15.28,11.94C13.9,11.94 12.77,10.81 12.77,9.42A2.51,2.51 0 0,1 15.28,6.91C16.67,6.91 17.8,8.04 17.8,9.42M13.4,9.42C13.4,10.46 14.24,11.31 15.29,11.31C16.33,11.31 17.17,10.46 17.17,9.42C17.17,8.38 16.33,7.53 15.29,7.53C14.24,7.53 13.4,8.38 13.4,9.42Z",
+    "name": "steam-box"
+  },
+  {
+    "path": "M14.92,17.16L16.75,13.53H19.45L14.94,22.5L10.37,13.53H13.07L14.92,17.16M10.63,8.66L8.18,13.55H4.55L10.61,1.5L16.74,13.55H13.11L10.63,8.66Z",
+    "name": "strava"
+  },
+  {
+    "path": "M12,14C11,14 9,15 9,16C9,18 12,18 12,18V17A1,1 0 0,1 11,16A1,1 0 0,1 12,15V14M12,19C12,19 8,18.5 8,16.5C8,13.5 11,12.75 12,12.75V11.5C11,11.5 7,13 7,16C7,20 12,20 12,20V19M10.07,7.03L11.26,7.56C11.69,5.12 12.84,3.5 12.84,3.5C12.41,4.53 12.13,5.38 11.95,6.05C13.16,3.55 15.61,2 15.61,2C14.43,3.18 13.56,4.46 12.97,5.53C14.55,3.85 16.74,2.75 16.74,2.75C14.05,4.47 12.84,7.2 12.54,7.96L13.09,8.04C13.09,8.56 13.09,9.04 13.34,9.42C14.1,11.31 18,11.47 18,16C18,20.53 13.97,22 11.83,22C9.69,22 5,21.03 5,16C5,10.97 9.95,10.93 10.83,8.92C10.95,8.54 10.07,7.03 10.07,7.03Z",
+    "name": "tor"
+  },
+  {
+    "path": "M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17",
+    "name": "tumblr"
+  },
+  {
+    "path": "M16,11H13V14.9C13,15.63 13.14,16 14.1,16H16V19C16,19 14.97,19.1 13.9,19.1C11.25,19.1 10,17.5 10,15.7V11H8V8.2C10.41,8 10.62,6.16 10.8,5H13V8H16M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z",
+    "name": "tumblr-box"
+  },
+  {
+    "path": "M3.75,17L8,12.75V16H18V11.5L20,9.5V16A2,2 0 0,1 18,18H8V21.25L3.75,17M20.25,7L16,11.25V8H6V12.5L4,14.5V8A2,2 0 0,1 6,6H16V2.75L20.25,7Z",
+    "name": "tumblr-reblog"
+  },
+  {
+    "path": "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z",
+    "name": "twitter-box"
+  },
+  {
+    "path": "M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
+    "name": "twitter-circle"
+  },
+  {
+    "path": "M6.38,13.24V13.24C6.38,11.84 6.38,10.44 6.38,9.04H7.4V15.84H6.39C6.39,15.63 6.39,15.42 6.39,15.21C5.93,15.68 5.29,15.96 4.58,15.96C3.12,15.96 2,14.9 2,13.3V9.04H3V13.24C3,14.33 3.74,15.04 4.7,15.04C5.64,15.04 6.38,14.31 6.38,13.24M9.14,9.04V11.5C9.37,11.29 9.65,11.1 9.95,10.97C10.25,10.85 10.58,10.78 10.91,10.78C12.37,10.78 13.5,11.94 13.5,13.37C13.5,14.8 12.37,15.96 10.91,15.96C10.58,15.96 10.25,15.89 9.95,15.77C9.64,15.64 9.37,15.45 9.13,15.22C9.13,15.43 9.13,15.63 9.13,15.84C8.81,15.84 8.5,15.84 8.16,15.84V9.04H9.14M12.55,13.37V13.37C12.55,12.41 11.77,11.65 10.84,11.65C9.89,11.65 9.13,12.41 9.13,13.37C9.13,14.32 9.88,15.09 10.84,15.09C11.77,15.09 12.55,14.32 12.55,13.37M16.46,10.79C17.9,10.79 18.95,11.89 18.95,13.36V13.69H14.91C15.04,14.5 15.71,15.09 16.55,15.09C17.13,15.09 17.61,14.86 18,14.36L18.7,14.89C18.2,15.55 17.46,15.95 16.55,15.95C15.06,15.95 13.91,14.84 13.91,13.36C13.91,11.97 15,10.79 16.46,10.79M14.92,12.91H17.95C17.79,12.15 17.18,11.65 16.44,11.65C15.71,11.65 15.1,12.15 14.92,12.91M20.5,13V15.84H19.5V10.89C19.82,10.89 20.14,10.89 20.47,10.89V11.5C20.71,11.1 21.11,10.85 21.66,10.85H22V11.76H21.59C20.95,11.76 20.5,12.26 20.5,13",
+    "name": "uber"
+  },
+  {
+    "path": "M19.5,3C20.14,4.08 20.44,5.19 20.44,6.6C20.44,11.08 16.61,16.91 13.5,21H6.41L3.56,4L9.77,3.39L11.28,15.5C12.69,13.21 14.42,9.61 14.42,7.16C14.42,5.81 14.19,4.9 13.83,4.15L19.5,3Z",
+    "name": "venmo"
+  },
+  {
+    "path": "M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
+    "name": "vk-box"
+  },
+  {
+    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M5.5,8.5H7C7.36,8.5 7.5,8.66 7.64,9.07C8.36,11.17 9.57,13 10.07,13C10.26,13 10.35,12.92 10.35,12.45V10.28C10.29,9.28 9.76,9.19 9.76,8.84C9.76,8.67 9.9,8.5 10.14,8.5H12.45C12.77,8.5 12.87,8.67 12.87,9.04V11.96C12.87,12.27 13,12.38 13.1,12.38C13.29,12.38 13.45,12.27 13.79,11.93C14.85,10.74 15.6,8.92 15.6,8.92C15.7,8.7 15.87,8.5 16.24,8.5H17.71C18.16,8.5 18.26,8.73 18.16,9.04C17.97,9.9 16.18,12.43 16.18,12.43C16,12.68 15.96,12.8 16.18,13.09C16.33,13.3 16.85,13.74 17.19,14.15C17.83,14.86 18.3,15.46 18.44,15.87C18.56,16.29 18.35,16.5 17.93,16.5H16.45C15.89,16.5 15.73,16.05 14.73,15.05C13.85,14.21 13.5,14.1 13.26,14.1C12.96,14.1 12.87,14.18 12.87,14.61V15.93C12.87,16.29 12.76,16.5 11.82,16.5C10.26,16.5 8.54,15.55 7.33,13.8C5.5,11.24 5,9.31 5,8.92C5,8.7 5.08,8.5 5.5,8.5Z",
+    "name": "vk-circle"
+  },
+  {
+    "path": "M17,17.5L12,15L7,17.5V5H5V19H19V5H17V17.5M12,12.42L14.25,13.77L13.65,11.22L15.64,9.5L13,9.27L12,6.86L11,9.27L8.36,9.5L10.35,11.22L9.75,13.77L12,12.42M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z",
+    "name": "wunderlist"
+  },
+  {
+    "path": "M0 16.7L3.2 12.9L0 9.1L1.5 7.8L4.5 11.3L7.5 7.8L9 9.1L5.8 12.9L9 16.7L7.5 18L4.5 14.4L1.5 18L0 16.7M24 16.9C24 17.4 23.6 17.9 23 17.9H20C18.9 17.9 18 17 18 15.9V13.9C18 12.8 18.9 11.9 20 11.9H22V9.9H18V8H23C23.5 8 24 8.4 24 9M22 14H20V16H22V14M16 16.9C16 17.4 15.6 17.9 15 17.9H12C10.9 17.9 10 17 10 15.9V9.9C10 8.8 10.9 7.9 12 7.9H14V5H16V16.9M14 15.9V9.9H12V15.9H14Z",
+    "name": "xda"
+  },
+  {
+    "path": "M4.8,3C3.8,3 3,3.8 3,4.8V19.2C3,20.2 3.8,21 4.8,21H19.2C20.2,21 21,20.2 21,19.2V4.8C21,3.8 20.2,3 19.2,3M16.07,5H18.11C18.23,5 18.33,5.04 18.37,5.13C18.43,5.22 18.43,5.33 18.37,5.44L13.9,13.36L16.75,18.56C16.81,18.67 16.81,18.78 16.75,18.87C16.7,18.95 16.61,19 16.5,19H14.47C14.16,19 14,18.79 13.91,18.61L11.04,13.35C11.18,13.1 15.53,5.39 15.53,5.39C15.64,5.19 15.77,5 16.07,5M7.09,7.76H9.1C9.41,7.76 9.57,7.96 9.67,8.15L11.06,10.57C10.97,10.71 8.88,14.42 8.88,14.42C8.77,14.61 8.63,14.81 8.32,14.81H6.3C6.18,14.81 6.09,14.76 6.04,14.67C6,14.59 6,14.47 6.04,14.36L8.18,10.57L6.82,8.2C6.77,8.09 6.75,8 6.81,7.89C6.86,7.81 6.96,7.76 7.09,7.76Z",
+    "name": "xing-box"
+  },
+  {
+    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.85,6H17.74C17.86,6 17.94,6.04 18,6.12C18.04,6.2 18.04,6.3 18,6.41L13.84,13.76L16.5,18.59C16.53,18.69 16.53,18.8 16.5,18.88C16.43,18.96 16.35,19 16.24,19H14.36C14.07,19 13.93,18.81 13.84,18.64L11.17,13.76C11.31,13.5 15.35,6.36 15.35,6.36C15.45,6.18 15.57,6 15.85,6M7.5,8.57H9.39C9.67,8.57 9.81,8.75 9.9,8.92L11.19,11.17C11.12,11.3 9.17,14.75 9.17,14.75C9.07,14.92 8.94,15.11 8.66,15.11H6.78C6.67,15.11 6.59,15.06 6.54,15C6.5,14.9 6.5,14.8 6.54,14.69L8.53,11.17L7.27,9C7.21,8.87 7.2,8.77 7.25,8.69C7.3,8.61 7.39,8.57 7.5,8.57Z",
+    "name": "xing-circle"
+  },
+  {
+    "path": "M10.59,2C11.23,2 11.5,2.27 11.58,2.97L11.79,6.14L12.03,10.29C12.05,10.64 12,11 11.86,11.32C11.64,11.77 11.14,11.89 10.73,11.58C10.5,11.39 10.31,11.14 10.15,10.87L6.42,4.55C6.06,3.94 6.17,3.54 6.77,3.16C7.5,2.68 9.73,2 10.59,2M14.83,14.85L15.09,14.91L18.95,16.31C19.61,16.55 19.79,16.92 19.5,17.57C19.06,18.7 18.34,19.66 17.42,20.45C16.96,20.85 16.5,20.78 16.21,20.28L13.94,16.32C13.55,15.61 14.03,14.8 14.83,14.85M4.5,14C4.5,13.26 4.5,12.55 4.75,11.87C4.97,11.2 5.33,11 6,11.27L9.63,12.81C10.09,13 10.35,13.32 10.33,13.84C10.3,14.36 9.97,14.58 9.53,14.73L5.85,15.94C5.15,16.17 4.79,15.96 4.64,15.25C4.55,14.83 4.47,14.4 4.5,14M11.97,21C11.95,21.81 11.6,22.12 10.81,22C9.77,21.8 8.81,21.4 7.96,20.76C7.54,20.44 7.45,19.95 7.76,19.53L10.47,15.97C10.7,15.67 11.03,15.6 11.39,15.74C11.77,15.88 11.97,16.18 11.97,16.59V21M14.45,13.32C13.73,13.33 13.23,12.5 13.64,11.91C14.47,10.67 15.35,9.46 16.23,8.26C16.5,7.85 16.94,7.82 17.31,8.16C18.24,9 18.91,10 19.29,11.22C19.43,11.67 19.25,12.08 18.83,12.2L15.09,13.17L14.45,13.32Z",
+    "name": "yelp"
+  }
+]

build-scripts/webpack.js

@@ -2,6 +2,7 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
 
@@ -29,15 +30,12 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.m?js$|\.ts$/,
+          test: /\.js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
             options: bundle.babelOptions({ latestBuild }),
           },
-          resolve: {
-            fullySpecified: false,
-          },
         },
         {
           test: /\.css$/,
@@ -48,13 +46,16 @@ const createWebpackConfig = ({
     optimization: {
       minimizer: [
         new TerserPlugin({
+          cache: true,
           parallel: true,
           extractComments: true,
+          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
+      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -98,15 +99,6 @@ const createWebpackConfig = ({
         new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
-      new webpack.NormalModuleReplacementPlugin(
-        new RegExp(
-          require.resolve(
-            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
-          )
-        ),
-        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
-      ),
     ],
     resolve: {
       extensions: [".ts", ".js", ".json"],
@@ -118,22 +110,6 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
-      environment: {
-        // The environment supports arrow functions ('() => { ... }').
-        arrowFunction: latestBuild,
-        // The environment supports BigInt as literal (123n).
-        bigIntLiteral: false,
-        // The environment supports const and let for variable declarations.
-        const: latestBuild,
-        // The environment supports destructuring ('{ a, b } = obj').
-        destructuring: latestBuild,
-        // The environment supports an async import() function to import EcmaScript modules.
-        dynamicImport: latestBuild,
-        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-        forOf: latestBuild,
-        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-        module: latestBuild,
-      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

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

@@ -212,8 +212,13 @@
           Chromecast is a technology developed by Google, and is available on:
         </p>
         <ul>
-          <li>Google Chrome (all platforms except iOS)</li>
-          <li>Microsoft Edge (all platforms)</li>
+          <li>Google Chrome (all platforms except on iOS)</li>
+          <li>
+            Microsoft Edge (all platforms,
+            <a href="https://www.microsoftedgeinsider.com" target="_blank"
+              >dev and canary builds only</a
+            >)
+          </li>
         </ul>
       </div>
 

cast/src/launcher/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

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

@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <h1 class="card-header">
+          <div class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </h1>
+          </div>
           <slot></slot>
         </div>
       </ha-card>

cast/src/receiver/entrypoint.ts

@@ -6,60 +6,13 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const lovelaceController = new HcMain();
-document.body.append(lovelaceController);
-
-const mediaPlayer = document.createElement("cast-media-player");
-mediaPlayer.style.display = "none";
-document.body.append(mediaPlayer);
-const playerStylesAdded = false;
-
-let controls: HTMLElement | null;
-
-const setTouchControlsVisibility = (visible: boolean) => {
-  if (!castContext.getDeviceCapabilities().touch_input_supported) {
-    return;
-  }
-  controls =
-    controls ||
-    (document.body.querySelector("touch-controls") as HTMLElement | null);
-  if (controls) {
-    controls.style.display = visible ? "initial" : "none";
-  }
-};
-
-const showLovelaceController = () => {
-  mediaPlayer.style.display = "none";
-  lovelaceController.style.display = "initial";
-  document.body.setAttribute("style", "overflow-y: auto !important");
-  setTouchControlsVisibility(false);
-};
-
-const showMediaPlayer = () => {
-  lovelaceController.style.display = "none";
-  mediaPlayer.style.display = "initial";
-  document.body.removeAttribute("style");
-  setTouchControlsVisibility(true);
-  if (!playerStylesAdded) {
-    const style = document.createElement("style");
-    style.innerHTML = `
-    body {
-      --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-      --logo-repeat: no-repeat;
-      --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
-      --theme-hue: 200;
-      --progress-color: #03a9f4;
-      --splash-image: url('https://home-assistant.io/images/cast/splash.png');
-      --splash-size: cover;
-    }
-    `;
-    document.head.appendChild(style);
-  }
-};
+const controller = new HcMain();
+document.body.append(controller);
 
 const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
+  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
@@ -77,61 +30,13 @@ options.uiConfig = new cast.framework.ui.UiConfig();
 // @ts-ignore
 options.uiConfig.touchScreenOptimizedApp = true;
 
-castContext.setInactivityTimeout(86400); // 1 day
-
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
-    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !==
-      cast.framework.messages.PlayerState.IDLE
-    ) {
-      playerManager.stop();
-    } else {
-      showLovelaceController();
-    }
     const msg = ev.data;
     msg.senderId = ev.senderId;
-    lovelaceController.processIncomingMessage(msg);
-  }
-);
-
-const playerManager = castContext.getPlayerManager();
-
-playerManager.setMessageInterceptor(
-  cast.framework.messages.MessageType.LOAD,
-  (loadRequestData) => {
-    // We received a play media command, hide Lovelace and show media player
-    showMediaPlayer();
-    const media = loadRequestData.media;
-    // Special handling if it came from Google Assistant
-    if (media.entity) {
-      media.contentId = media.entity;
-      media.streamType = cast.framework.messages.StreamType.LIVE;
-      media.contentType = "application/vnd.apple.mpegurl";
-      // @ts-ignore
-      media.hlsVideoSegmentFormat =
-        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
-    }
-    return loadRequestData;
-  }
-);
-
-playerManager.addEventListener(
-  cast.framework.events.EventType.MEDIA_STATUS,
-  (event) => {
-    if (
-      event.mediaStatus?.playerState ===
-        cast.framework.messages.PlayerState.IDLE &&
-      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        cast.framework.messages.IdleReason.INTERRUPTED
-    ) {
-      // media finished or stopped, return to default Lovelace
-      showLovelaceController();
-    }
+    controller.processIncomingMessage(msg);
   }
 );
 

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

@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
@@ -44,13 +45,22 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return html`
-      <hui-view
-        .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-      ></hui-view>
-    `;
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : html`
+          <hui-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .index=${index}
+            columns="2"
+          ></hui-view>
+        `;
   }
 
   protected updated(changedProps) {
@@ -66,7 +76,7 @@ class HcLovelace extends LitElement {
 
         if (configBackground) {
           (this.shadowRoot!.querySelector(
-            "hui-view"
+            "hui-view, hui-panel-view"
           ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground

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

@@ -216,7 +216,9 @@ export class HcMain extends HassElement {
     }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
-
+    if (castContext.getDeviceCapabilities().touch_input_supported) {
+      this._breakFree();
+    }
     this._sendStatus();
   }
 
@@ -239,6 +241,9 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
+      if (castContext.getDeviceCapabilities().touch_input_supported) {
+        this._breakFree();
+      }
     });
   }
 
@@ -259,6 +264,14 @@ export class HcMain extends HassElement {
     }
   }
 
+  private _breakFree() {
+    const controls = document.body.querySelector("touch-controls");
+    if (controls) {
+      controls.remove();
+    }
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  }
+
   private sendMessage(senderId: string, response: any) {
     castContext.sendCustomMessage(CAST_NS, senderId, response);
   }

demo/src/configs/teachingbirds/lovelace.ts

@@ -7,183 +7,205 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
       cards: [
         { type: "custom:ha-demo-card" },
         {
-          type: "grid",
-          columns: 4,
           cards: [
             {
-              image: "/assets/teachingbirds/isa_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "more-info",
-              },
-              entity: "sensor.presence_isa",
-            },
-            {
-              image: "/assets/teachingbirds/Stefan_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "more-info",
-              },
-              entity: "sensor.presence_stefan",
-            },
-            {
-              image: "/assets/teachingbirds/background_square.png",
-              elements: [
+              cards: [
                 {
-                  state_image: {
-                    on: "/assets/teachingbirds/radiator_on.jpg",
-                    off: "/assets/teachingbirds/radiator_off.jpg",
-                  },
-                  type: "image",
-                  style: {
-                    width: "100%",
-                    top: "50%",
-                    left: "50%",
-                  },
+                  image: "/assets/teachingbirds/isa_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
                   tap_action: {
                     action: "more-info",
                   },
-                  entity: "switch.stefan_radiator_3",
+                  entity: "sensor.presence_isa",
                 },
                 {
-                  style: {
-                    top: "90%",
-                    left: "50%",
+                  image: "/assets/teachingbirds/Stefan_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "more-info",
                   },
-                  type: "state-label",
+                  entity: "sensor.presence_stefan",
+                },
+                {
+                  image: "/assets/teachingbirds/background_square.png",
+                  elements: [
+                    {
+                      state_image: {
+                        on: "/assets/teachingbirds/radiator_on.jpg",
+                        off: "/assets/teachingbirds/radiator_off.jpg",
+                      },
+                      type: "image",
+                      style: {
+                        width: "100%",
+                        top: "50%",
+                        left: "50%",
+                      },
+                      tap_action: {
+                        action: "more-info",
+                      },
+                      entity: "switch.stefan_radiator_3",
+                    },
+                    {
+                      style: {
+                        top: "90%",
+                        left: "50%",
+                      },
+                      type: "state-label",
+                      entity: "sensor.temperature_stefan",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+                {
+                  image: "/assets/teachingbirds/background_square.png",
+                  elements: [
+                    {
+                      style: {
+                        "--mdc-icon-size": "100%",
+                        top: "50%",
+                        left: "50%",
+                      },
+                      type: "icon",
+                      tap_action: {
+                        action: "navigate",
+                        navigation_path: "/lovelace/home_info",
+                      },
+                      icon: "mdi:car",
+                    },
+                  ],
+                  type: "picture-elements",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+            {
+              cards: [
+                {
+                  show_name: false,
+                  type: "picture-entity",
+                  name: "Alarm",
+                  image: "/assets/teachingbirds/House_square.jpg",
+                  entity: "alarm_control_panel.house",
+                },
+                {
+                  name: "Roomba",
+                  image: "/assets/teachingbirds/roomba_square.jpg",
+                  show_name: false,
+                  type: "picture-entity",
+                  state_image: {
+                    "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
+                  },
+                  entity: "input_select.roomba_mode",
+                },
+                {
+                  show_name: false,
+                  type: "picture-entity",
+                  state_image: {
+                    Mail: "/assets/teachingbirds/mailbox_square.jpg",
+                    "Package and mail":
+                      "/assets/teachingbirds/mailbox_square.jpg",
+                    Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
+                    Package: "/assets/teachingbirds/mailbox_square.jpg",
+                  },
+                  entity: "sensor.mailbox",
+                },
+                {
+                  show_name: false,
+                  state_image: {
+                    "Put out": "/assets/teachingbirds/trash_square.jpg",
+                    "Take in": "/assets/teachingbirds/trash_square.jpg",
+                  },
+                  type: "picture-entity",
+                  image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
+                  entity: "sensor.trash_status",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+            {
+              cards: [
+                {
+                  state_image: {
+                    Idle: "/assets/teachingbirds/washer_square.jpg",
+                    Running: "/assets/teachingbirds/laundry_running_square.jpg",
+                    Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
+                  },
+                  entity: "input_select.washing_machine_status",
+                  type: "picture-entity",
+                  show_name: false,
+                  name: "Washer",
+                },
+                {
+                  state_image: {
+                    Idle: "/assets/teachingbirds/dryer_square.jpg",
+                    Running: "/assets/teachingbirds/clothes_drying_square.jpg",
+                    Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
+                  },
+                  entity: "input_select.dryer_status",
+                  type: "picture-entity",
+                  show_name: false,
+                  name: "Dryer",
+                },
+                {
+                  image: "/assets/teachingbirds/guests_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "toggle",
+                  },
+                  entity: "input_boolean.guest_mode",
+                },
+                {
+                  image: "/assets/teachingbirds/cleaning_square.jpg",
+                  type: "picture-entity",
+                  show_name: false,
+                  tap_action: {
+                    action: "toggle",
+                  },
+                  entity: "input_boolean.cleaning_day",
+                },
+              ],
+              type: "horizontal-stack",
+            },
+          ],
+          type: "vertical-stack",
+        },
+        {
+          type: "vertical-stack",
+          cards: [
+            {
+              cards: [
+                {
+                  graph: "line",
+                  type: "sensor",
+                  entity: "sensor.temperature_bedroom",
+                },
+                {
+                  graph: "line",
+                  type: "sensor",
+                  name: "S's room",
                   entity: "sensor.temperature_stefan",
                 },
               ],
-              type: "picture-elements",
+              type: "horizontal-stack",
             },
             {
-              image: "/assets/teachingbirds/background_square.png",
-              elements: [
+              cards: [
                 {
-                  style: {
-                    "--mdc-icon-size": "100%",
-                    top: "50%",
-                    left: "50%",
-                  },
-                  type: "icon",
-                  tap_action: {
-                    action: "navigate",
-                    navigation_path: "/lovelace/home_info",
-                  },
-                  icon: "mdi:car",
+                  graph: "line",
+                  type: "sensor",
+                  entity: "sensor.temperature_passage",
+                },
+                {
+                  graph: "line",
+                  type: "sensor",
+                  name: "Laundry",
+                  entity: "sensor.temperature_downstairs_bathroom",
                 },
               ],
-              type: "picture-elements",
-            },
-
-            {
-              show_name: false,
-              type: "picture-entity",
-              name: "Alarm",
-              image: "/assets/teachingbirds/House_square.jpg",
-              entity: "alarm_control_panel.house",
-            },
-            {
-              name: "Roomba",
-              image: "/assets/teachingbirds/roomba_square.jpg",
-              show_name: false,
-              type: "picture-entity",
-              state_image: {
-                "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
-              },
-              entity: "input_select.roomba_mode",
-            },
-            {
-              show_name: false,
-              type: "picture-entity",
-              state_image: {
-                Mail: "/assets/teachingbirds/mailbox_square.jpg",
-                "Package and mail": "/assets/teachingbirds/mailbox_square.jpg",
-                Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
-                Package: "/assets/teachingbirds/mailbox_square.jpg",
-              },
-              entity: "sensor.mailbox",
-            },
-            {
-              show_name: false,
-              state_image: {
-                "Put out": "/assets/teachingbirds/trash_square.jpg",
-                "Take in": "/assets/teachingbirds/trash_square.jpg",
-              },
-              type: "picture-entity",
-              image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
-              entity: "sensor.trash_status",
-            },
-
-            {
-              state_image: {
-                Idle: "/assets/teachingbirds/washer_square.jpg",
-                Running: "/assets/teachingbirds/laundry_running_square.jpg",
-                Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
-              },
-              entity: "input_select.washing_machine_status",
-              type: "picture-entity",
-              show_name: false,
-              name: "Washer",
-            },
-            {
-              state_image: {
-                Idle: "/assets/teachingbirds/dryer_square.jpg",
-                Running: "/assets/teachingbirds/clothes_drying_square.jpg",
-                Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
-              },
-              entity: "input_select.dryer_status",
-              type: "picture-entity",
-              show_name: false,
-              name: "Dryer",
-            },
-            {
-              image: "/assets/teachingbirds/guests_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "toggle",
-              },
-              entity: "input_boolean.guest_mode",
-            },
-            {
-              image: "/assets/teachingbirds/cleaning_square.jpg",
-              type: "picture-entity",
-              show_name: false,
-              tap_action: {
-                action: "toggle",
-              },
-              entity: "input_boolean.cleaning_day",
-            },
-          ],
-        },
-        {
-          type: "grid",
-          columns: 2,
-          cards: [
-            {
-              graph: "line",
-              type: "sensor",
-              entity: "sensor.temperature_bedroom",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              name: "S's room",
-              entity: "sensor.temperature_stefan",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              entity: "sensor.temperature_passage",
-            },
-            {
-              graph: "line",
-              type: "sensor",
-              name: "Laundry",
-              entity: "sensor.temperature_downstairs_bathroom",
+              type: "horizontal-stack",
             },
           ],
         },

demo/src/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/stubs/template.ts

@@ -6,11 +6,4 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       body: { message: "Template dev tool does not work in the demo." },
     })
   );
-  hass.mockWS("render_template", (msg, onChange) => {
-    onChange!({
-      result: msg.template,
-      listeners: { all: false, domains: [], entities: [], time: false },
-    });
-    return () => {};
-  });
 };

gallery/src/components/demo-cards.js

@@ -5,16 +5,11 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
 import "../../../src/components/ha-formfield";
 import "./demo-card";
-import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 class DemoCards extends PolymerElement {
   static get template() {
     return html`
       <style>
-        #container {
-          min-height: calc(100vh - 128px);
-          background: var(--primary-background-color);
-        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -29,9 +24,6 @@ class DemoCards extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
-        ha-formfield {
-          margin-right: 16px;
-        }
       </style>
       <app-toolbar>
         <div class="filters">
@@ -39,21 +31,16 @@ class DemoCards extends PolymerElement {
             <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
             </ha-switch>
           </ha-formfield>
-          <ha-formfield label="Dark theme">
-            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
-          </ha-formfield>
         </div>
       </app-toolbar>
-      <div id="container">
-        <div class="cards">
-          <template is="dom-repeat" items="[[configs]]">
-            <demo-card
-              config="[[item]]"
-              show-config="[[_showConfig]]"
-              hass="[[hass]]"
-            ></demo-card>
-          </template>
-        </div>
+      <div class="cards">
+        <template is="dom-repeat" items="[[configs]]">
+          <demo-card
+            config="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
+          ></demo-card>
+        </template>
       </div>
     `;
   }
@@ -72,12 +59,6 @@ class DemoCards extends PolymerElement {
   _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
-
-  _darkThemeToggled(ev) {
-    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
-      dark: ev.target.checked,
-    });
-  }
 }
 
 customElements.define("demo-cards", DemoCards);

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

@@ -3,7 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
 import "../../../src/state-summary/state-card-content";
-import "../../../src/dialogs/more-info/more-info-content";
+import "./more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
@@ -16,12 +16,15 @@ class DemoMoreInfo extends PolymerElement {
 
         ha-card {
           width: 333px;
-          padding: 20px 24px;
         }
 
         state-card-content {
           display: block;
-          margin-bottom: 16px;
+          padding: 16px;
+        }
+
+        more-info-content {
+          padding: 0 16px;
         }
 
         pre {

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

@@ -0,0 +1,73 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
+import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
+import "../../../src/dialogs/more-info/controls/more-info-automation";
+import "../../../src/dialogs/more-info/controls/more-info-camera";
+import "../../../src/dialogs/more-info/controls/more-info-climate";
+import "../../../src/dialogs/more-info/controls/more-info-configurator";
+import "../../../src/dialogs/more-info/controls/more-info-counter";
+import "../../../src/dialogs/more-info/controls/more-info-cover";
+import "../../../src/dialogs/more-info/controls/more-info-default";
+import "../../../src/dialogs/more-info/controls/more-info-fan";
+import "../../../src/dialogs/more-info/controls/more-info-group";
+import "../../../src/dialogs/more-info/controls/more-info-humidifier";
+import "../../../src/dialogs/more-info/controls/more-info-input_datetime";
+import "../../../src/dialogs/more-info/controls/more-info-light";
+import "../../../src/dialogs/more-info/controls/more-info-lock";
+import "../../../src/dialogs/more-info/controls/more-info-media_player";
+import "../../../src/dialogs/more-info/controls/more-info-person";
+import "../../../src/dialogs/more-info/controls/more-info-script";
+import "../../../src/dialogs/more-info/controls/more-info-sun";
+import "../../../src/dialogs/more-info/controls/more-info-timer";
+import "../../../src/dialogs/more-info/controls/more-info-vacuum";
+import "../../../src/dialogs/more-info/controls/more-info-water_heater";
+import "../../../src/dialogs/more-info/controls/more-info-weather";
+import { HomeAssistant } from "../../../src/types";
+
+class MoreInfoContent extends UpdatingElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public stateObj?: HassEntity;
+
+  private _detachedChild?: ChildNode;
+
+  protected firstUpdated(): void {
+    this.style.position = "relative";
+    this.style.display = "block";
+  }
+
+  // This is not a lit element, but an updating element, so we implement update
+  protected update(changedProps: PropertyValues): void {
+    super.update(changedProps);
+    const stateObj = this.stateObj;
+    const hass = this.hass;
+
+    if (!stateObj || !hass) {
+      if (this.lastChild) {
+        this._detachedChild = this.lastChild;
+        // Detach child to prevent it from doing work.
+        this.removeChild(this.lastChild);
+      }
+      return;
+    }
+
+    if (this._detachedChild) {
+      this.appendChild(this._detachedChild);
+      this._detachedChild = undefined;
+    }
+
+    const moreInfoType =
+      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
+        ? stateObj.attributes.custom_ui_more_info
+        : "more-info-" + stateMoreInfoType(stateObj);
+
+    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+      hass,
+      stateObj,
+    });
+  }
+}
+
+customElements.define("more-info-content", MoreInfoContent);

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

@@ -15,10 +15,6 @@ const ENTITIES = [
   getEntity("alarm_control_panel", "unavailable", "unavailable", {
     friendly_name: "Alarm",
   }),
-  getEntity("alarm_control_panel", "alarm_code", "disarmed", {
-    friendly_name: "Alarm",
-    code_format: "number",
-  }),
 ];
 
 const CONFIGS = [
@@ -34,14 +30,7 @@ const CONFIGS = [
     config: `
 - type: alarm-panel
   entity: alarm_control_panel.alarm_armed
-  name: My Alarm
-    `,
-  },
-  {
-    heading: "Code Example",
-    config: `
-- type: alarm-panel
-  entity: alarm_control_panel.alarm_code
+  title: My Alarm
     `,
   },
   {
@@ -94,12 +83,8 @@ class DemoAlarmPanelEntity extends PolymerElement {
 
   public ready() {
     super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
     const hass = provideHass(this.$.demos);
-    await hass.updateTranslations(null, "en");
+    hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

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

@@ -98,4 +98,4 @@ class DemoButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoButtonEntity);
+customElements.define("demo-hui-button-card", DemoButtonEntity);

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

@@ -8,7 +8,6 @@ import "../components/demo-cards";
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
   getEntity("plant", "bonsai", "ok", {}),
-  getEntity("sensor", "not_working", "unavailable", {}),
   getEntity("sensor", "outside_humidity", "54", {
     unit_of_measurement: "%",
   }),
@@ -75,13 +74,6 @@ const CONFIGS = [
   entity: plant.bonsai
     `,
   },
-  {
-    heading: "Unavailable entity",
-    config: `
-- type: gauge
-  entity: sensor.not_working
-    `,
-  },
 ];
 
 class DemoGaugeEntity extends PolymerElement {

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

@@ -1,8 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { mockTemplate } from "../../../demo/src/stubs/template";
-import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -256,7 +254,7 @@ const CONFIGS = [
 
 class DemoMarkdown extends PolymerElement {
   static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
   }
 
   static get properties() {
@@ -267,12 +265,6 @@ class DemoMarkdown extends PolymerElement {
       },
     };
   }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
-    mockTemplate(hass);
-  }
 }
 
 customElements.define("demo-hui-markdown-card", DemoMarkdown);

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

@@ -1,7 +1,6 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -37,10 +36,6 @@ const ENTITIES = [
     battery: 71,
     friendly_name: "Home Boy",
   }),
-  getEntity("sensor", "illumination", "23", {
-    friendly_name: "Illumination",
-    unit_of_measurement: "lx",
-  }),
 ];
 
 const CONFIGS = [
@@ -94,42 +89,6 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
-  {
-    heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
 ];
 
 class DemoStack extends PolymerElement {
@@ -151,7 +110,6 @@ class DemoStack extends PolymerElement {
     const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
-    mockHistory(hass);
   }
 }
 

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

@@ -6,7 +6,7 @@ import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
-import "../../../src/dialogs/more-info/more-info-content";
+import "../components/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -40,12 +40,8 @@ class DemoMoreInfoLight extends PolymerElement {
 
   public ready() {
     super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
     const hass = provideHass(this);
-    await hass.updateTranslations(null, "en");
+    hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/ha-gallery.js

@@ -1,17 +1,16 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "../../src/components/ha-icon-button";
+import "../../src/components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 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/components/ha-icon";
-import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
 import "../../src/styles/polymer-ha-style";
-// eslint-disable-next-line import/extensions
 import { DEMOS } from "../build/import-demos";
 
 const fixPath = (path) => path.substr(2, path.length - 5);

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

@@ -23,9 +23,9 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public repo!: HassioAddonRepository;
+  @property() public repo!: HassioAddonRepository;
 
-  @property({ attribute: false }) public addons!: HassioAddonInfo[];
+  @property() public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
@@ -78,18 +78,18 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${addon.installed && addon.update_available
+                    .icon=${addon.installed && addon.installed !== addon.version
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "New version available"
                         : "Add-on is installed"
                       : addon.available
                       ? "Add-on is not installed"
                       : "Add-on is not available on your system"}
                     .iconClass=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.update_available
+                      ? addon.installed !== addon.version
                         ? "update"
                         : "installed"
                       : !addon.available

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

@@ -11,7 +11,6 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
-import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/common/search/search-input";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
@@ -25,7 +24,6 @@ import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
@@ -100,14 +98,14 @@ class HassioAddonStore extends LitElement {
         main-page
         .tabs=${supervisorTabs}
       >
-        <span slot="header">Add-on Store</span>
+        <span slot="header">Add-on store</span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
           <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             Repositories
@@ -115,12 +113,6 @@ class HassioAddonStore extends LitElement {
           <mwc-list-item>
             Reload
           </mwc-list-item>
-          ${this.hass.userData?.showAdvanced &&
-          atLeastVersion(this.hass.config.version, 0, 117)
-            ? html`<mwc-list-item>
-                Registries
-              </mwc-list-item>`
-            : ""}
         </ha-button-menu>
         ${repos.length === 0
           ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
@@ -165,9 +157,6 @@ class HassioAddonStore extends LitElement {
       case 1:
         this.refreshData();
         break;
-      case 2:
-        this._manageRegistries();
-        break;
     }
   }
 
@@ -184,10 +173,6 @@ class HassioAddonStore extends LitElement {
     });
   }
 
-  private async _manageRegistries() {
-    showRegistriesDialog(this);
-  }
-
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);

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

@@ -39,11 +39,13 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
-  @property({ type: Boolean }) private _valid = true;
-
-  @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
+  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
 
   protected render(): TemplateResult {
+    const editor = this._editor;
+    // If editor not rendered, don't show the error.
+    const valid = editor ? editor.isValid : true;
+
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card header="Configuration">
@@ -52,7 +54,7 @@ class HassioAddonConfig extends LitElement {
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
@@ -60,7 +62,7 @@ class HassioAddonConfig extends LitElement {
           </ha-progress-button>
           <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !this._valid}
+            .disabled=${!this._configHasChanged || !valid}
           >
             Save
           </ha-progress-button>
@@ -76,9 +78,9 @@ class HassioAddonConfig extends LitElement {
     }
   }
 
-  private _configChanged(ev): void {
+  private _configChanged(): void {
     this._configHasChanged = true;
-    this._valid = ev.detail.isValid;
+    this.requestUpdate();
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -173,7 +175,7 @@ class HassioAddonConfig extends LitElement {
         }
         iron-autogrow-textarea {
           width: 100%;
-          font-family: var(--code-font-family, monospace);
+          font-family: monospace;
         }
         .syntaxerror {
           color: var(--error-color);

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

@@ -69,7 +69,7 @@ const STAGE_ICON = {
 const PERMIS_DESC = {
   stage: {
     title: "Add-on Stage",
-    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon .path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon .path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon .path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
+    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
   },
   rating: {
     title: "Add-on Security Rating",
@@ -135,7 +135,7 @@ class HassioAddonInfo extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.addon.update_available
+      ${this._computeUpdateAvailable
         ? html`
             <ha-card header="Update available! 🎉">
               <div class="card-content">
@@ -178,7 +178,7 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
+          <div class="card-header">Warning: Protection mode is disabled!</div>
           <div class="card-content">
             Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
           </div>
@@ -202,14 +202,14 @@ class HassioAddonInfo extends LitElement {
                           <ha-svg-icon
                             title="Add-on is running"
                             class="running"
-                            .path=${mdiCircle}
+                            path=${mdiCircle}
                           ></ha-svg-icon>
                         `
                       : html`
                           <ha-svg-icon
                             title="Add-on is stopped"
                             class="stopped"
-                            .path=${mdiCircle}
+                            path=${mdiCircle}
                           ></ha-svg-icon>
                         `}
                   `
@@ -283,7 +283,7 @@ class HassioAddonInfo extends LitElement {
                     label="host"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -295,7 +295,7 @@ class HassioAddonInfo extends LitElement {
                     label="hardware"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiChip}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -307,7 +307,7 @@ class HassioAddonInfo extends LitElement {
                     label="hass"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -319,7 +319,7 @@ class HassioAddonInfo extends LitElement {
                     label="hassio"
                     .description=${this.addon.hassio_role}
                   >
-                    <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -331,7 +331,7 @@ class HassioAddonInfo extends LitElement {
                     label="docker"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiDocker}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -343,7 +343,7 @@ class HassioAddonInfo extends LitElement {
                     label="host pid"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiPound}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -356,7 +356,7 @@ class HassioAddonInfo extends LitElement {
                     label="apparmor"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiShield}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -368,7 +368,7 @@ class HassioAddonInfo extends LitElement {
                     label="auth"
                     description=""
                   >
-                    <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
+                    <ha-svg-icon path=${mdiKey}></ha-svg-icon>
                   </ha-label-badge>
                 `
               : ""}
@@ -381,7 +381,7 @@ class HassioAddonInfo extends LitElement {
                     description=""
                   >
                     <ha-svg-icon
-                      .path=${mdiCursorDefaultClickOutline}
+                      path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
                   </ha-label-badge>
                 `
@@ -609,6 +609,15 @@ class HassioAddonInfo extends LitElement {
     return this.addon?.state === "started";
   }
 
+  private get _computeUpdateAvailable(): boolean | "" {
+    return (
+      this.addon &&
+      !this.addon.detached &&
+      this.addon.version &&
+      this.addon.version !== this.addon.version_latest
+    );
+  }
+
   private get _pathWebui(): string | null {
     return (
       this.addon.webui &&
@@ -789,10 +798,10 @@ class HassioAddonInfo extends LitElement {
       );
       if (!validate.data.valid) {
         await showConfirmationDialog(this, {
-          title: "Failed to start addon - configuration validation failed!",
+          title: "Failed to start addon - configruation validation faled!",
           text: validate.data.message.split(" Got ")[0],
           confirm: () => this._openConfiguration(),
-          confirmText: "Go to configuration",
+          confirmText: "Go to configruation",
           dismissText: "Cancel",
         });
         button.progress = false;

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

@@ -50,7 +50,7 @@ class HassioCardContent extends LitElement {
           `
         : html`
             <ha-svg-icon
-              class=${this.iconClass!}
+              class=${this.iconClass}
               .path=${this.icon}
               .title=${this.iconTitle}
             ></ha-svg-icon>

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

@@ -1,82 +0,0 @@
-import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
-import "@polymer/paper-input/paper-input-container";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-circular-progress";
-import "../../../src/components/ha-file-upload";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
-  HassioSnapshot,
-  uploadSnapshot,
-} from "../../../src/data/hassio/snapshot";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import { HomeAssistant } from "../../../src/types";
-
-declare global {
-  interface HASSDomEvents {
-    "snapshot-uploaded": { snapshot: HassioSnapshot };
-  }
-}
-
-@customElement("hassio-upload-snapshot")
-export class HassioUploadSnapshot extends LitElement {
-  public hass!: HomeAssistant;
-
-  @internalProperty() public value: string | null = null;
-
-  @internalProperty() private _uploading = false;
-
-  public render(): TemplateResult {
-    return html`
-      <ha-file-upload
-        .uploading=${this._uploading}
-        .icon=${mdiFolderUpload}
-        accept="application/x-tar"
-        label="Upload snapshot"
-        @file-picked=${this._uploadFile}
-        auto-open-file-dialog
-      ></ha-file-upload>
-    `;
-  }
-
-  private async _uploadFile(ev) {
-    const file = ev.detail.files[0];
-
-    if (!["application/x-tar"].includes(file.type)) {
-      showAlertDialog(this, {
-        title: "Unsupported file format",
-        text: "Please choose a Home Assistant snapshot file (.tar)",
-        confirmText: "ok",
-      });
-      return;
-    }
-    this._uploading = true;
-    try {
-      const snapshot = await uploadSnapshot(this.hass, file);
-      fireEvent(this, "snapshot-uploaded", { snapshot: snapshot.data });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Upload failed",
-        text: extractApiErrorMessage(err),
-        confirmText: "ok",
-      });
-    } finally {
-      this._uploading = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-upload-snapshot": HassioUploadSnapshot;
-  }
-}

hassio/src/dashboard/hassio-addons.ts

@@ -10,7 +10,6 @@ import {
 } from "lit-element";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { compare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 import { haStyle } from "../../../src/resources/styles";
@@ -22,27 +21,25 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddons extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public addons?: HassioAddonInfo[];
+  @property() public addons?: HassioAddonInfo[];
 
   protected render(): TemplateResult {
     return html`
       <div class="content">
         <h1>Add-ons</h1>
         <div class="card-group">
-          ${!this.addons?.length
+          ${!this.addons
             ? html`
                 <ha-card>
                   <div class="card-content">
                     You don't have any add-ons installed yet. Head over to
-                    <button class="link" @click=${this._openStore}>
-                      the add-on store
-                    </button>
+                    <a href="#" @click=${this._openStore}>the add-on store</a>
                     to get started!
                   </div>
                 </ha-card>
               `
             : this.addons
-                .sort((a, b) => compare(a.name, b.name))
+                .sort((a, b) => (a.name > b.name ? 1 : -1))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>
@@ -52,21 +49,22 @@ class HassioAddons extends LitElement {
                           .title=${addon.name}
                           .description=${addon.description}
                           available
-                          .showTopbar=${addon.update_available}
+                          .showTopbar=${addon.installed !== addon.version}
                           topbarClass="update"
-                          .icon=${addon.update_available!
+                          .icon=${addon.installed !== addon.version
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
                             ? "Add-on is stopped"
-                            : addon.update_available!
+                            : addon.installed !== addon.version
                             ? "New version available"
                             : "Add-on is running"}
-                          .iconClass=${addon.update_available
+                          .iconClass=${addon.installed &&
+                          addon.installed !== addon.version
                             ? addon.state === "started"
                               ? "update"
                               : "update stopped"
-                            : addon.state === "started"
+                            : addon.installed && addon.state === "started"
                             ? "running"
                             : "stopped"}
                           .iconImage=${atLeastVersion(

hassio/src/dashboard/hassio-update.ts

@@ -5,11 +5,11 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
-import memoizeOne from "memoize-one";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
@@ -35,30 +35,29 @@ import { hassioStyle } from "../resources/hassio-style";
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public hassInfo?: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
 
   @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
-  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
+  @property() public supervisorInfo: HassioSupervisorInfo;
 
-  private _pendingUpdates = memoizeOne(
-    (
-      core?: HassioHomeAssistantInfo,
-      supervisor?: HassioSupervisorInfo,
-      os?: HassioHassOSInfo
-    ): number => {
-      return [core, supervisor, os].filter(
-        (value) => !!value && value?.update_available
-      ).length;
-    }
-  );
+  @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
-    const updatesAvailable = this._pendingUpdates(
+    const updatesAvailable: number = [
       this.hassInfo,
       this.supervisorInfo,
-      this.hassOsInfo
-    );
+      this.hassOsInfo,
+    ].filter((value) => {
+      return (
+        !!value &&
+        (value.version_latest
+          ? value.version !== value.version_latest
+          : value.version_latest
+          ? value.version !== value.version_latest
+          : false)
+      );
+    }).length;
 
     if (!updatesAvailable) {
       return html``;
@@ -66,6 +65,9 @@ export class HassioUpdate extends LitElement {
 
     return html`
       <div class="content">
+        ${this._error
+          ? html` <div class="error">Error: ${this._error}</div> `
+          : ""}
         <h1>
           ${updatesAvailable > 1
             ? "Updates Available 🎉"
@@ -74,24 +76,26 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo!,
+            this.hassInfo.version,
+            this.hassInfo.version_latest,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`
+              this.hassInfo.version_latest.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`,
+            mdiHomeAssistant
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo!,
+            this.supervisorInfo.version,
+            this.supervisorInfo.version_latest,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${
-              this.supervisorInfo!.version_latest
-            }`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
                 "Operating System",
-                this.hassOsInfo,
+                this.hassOsInfo.version,
+                this.hassOsInfo.version_latest,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
@@ -103,22 +107,28 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
+    curVersion: string,
+    lastVersion: string,
     apiPath: string,
-    releaseNotesUrl: string
+    releaseNotesUrl: string,
+    icon?: string
   ): TemplateResult {
-    if (!object.update_available) {
+    if (!lastVersion || lastVersion === curVersion) {
       return html``;
     }
     return html`
       <ha-card>
         <div class="card-content">
-          <div class="icon">
-            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-          </div>
-          <div class="update-heading">${name} ${object.version_latest}</div>
+          ${icon
+            ? html`
+                <div class="icon">
+                  <ha-svg-icon .path=${icon}></ha-svg-icon>
+                </div>
+              `
+            : ""}
+          <div class="update-heading">${name} ${lastVersion}</div>
           <div class="warning">
-            You are currently running version ${object.version}
+            You are currently running version ${curVersion}
           </div>
         </div>
         <div class="card-actions">
@@ -128,7 +138,7 @@ export class HassioUpdate extends LitElement {
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
-            .version=${object.version_latest}
+            .version=${lastVersion}
             @click=${this._confirmUpdate}
           >
             Update
@@ -143,7 +153,7 @@ export class HassioUpdate extends LitElement {
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
       title: `Update ${item.name}`,
-      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
+      text: `Are you sure you want to upgrade ${item.name} to version ${item.version}?`,
       confirmText: "update",
       dismissText: "cancel",
     });

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

@@ -39,8 +39,7 @@ import type { HomeAssistant } from "../../../../src/types";
 import { HassioNetworkDialogParams } from "./show-dialog-network";
 
 @customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement
-  implements HassDialog<HassioNetworkDialogParams> {
+export class DialogHassioNetwork extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @internalProperty() private _prosessing = false;

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

@@ -1,245 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
-import "@material/mwc-list/mwc-list-item";
-import { mdiDelete } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import "../../../../src/components/ha-circular-progress";
-import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import {
-  addHassioDockerRegistry,
-  fetchHassioDockerRegistries,
-  removeHassioDockerRegistry,
-} from "../../../../src/data/hassio/docker";
-import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("dialog-hassio-registries")
-class HassioRegistriesDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) private _registries?: {
-    registry: string;
-    username: string;
-  }[];
-
-  @internalProperty() private _registry?: string;
-
-  @internalProperty() private _username?: string;
-
-  @internalProperty() private _password?: string;
-
-  @internalProperty() private _opened = false;
-
-  @internalProperty() private _addingRegistry = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-dialog
-        .open=${this._opened}
-        @closing=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this._addingRegistry
-            ? "Add New Docker Registry"
-            : "Manage Docker Registries"
-        )}
-      >
-        <div class="form">
-          ${this._addingRegistry
-            ? html`
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="registry"
-                  label="Registry"
-                  required
-                  auto-validate
-                ></paper-input>
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="username"
-                  label="Username"
-                  required
-                  auto-validate
-                ></paper-input>
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="password"
-                  label="Password"
-                  type="password"
-                  required
-                  auto-validate
-                ></paper-input>
-
-                <mwc-button
-                  ?disabled=${Boolean(
-                    !this._registry || !this._username || !this._password
-                  )}
-                  @click=${this._addNewRegistry}
-                >
-                  Add registry
-                </mwc-button>
-              `
-            : html`${this._registries?.length
-                  ? this._registries.map((entry) => {
-                      return html`
-                        <mwc-list-item class="option" hasMeta twoline>
-                          <span>${entry.registry}</span>
-                          <span slot="secondary"
-                            >Username: ${entry.username}</span
-                          >
-                          <mwc-icon-button
-                            .entry=${entry}
-                            title="Remove"
-                            slot="meta"
-                            @click=${this._removeRegistry}
-                          >
-                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                          </mwc-icon-button>
-                        </mwc-list-item>
-                      `;
-                    })
-                  : html`
-                      <mwc-list-item>
-                        <span>No registries configured</span>
-                      </mwc-list-item>
-                    `}
-                <mwc-button @click=${this._addRegistry}>
-                  Add new registry
-                </mwc-button> `}
-        </div>
-      </ha-dialog>
-    `;
-  }
-
-  private _inputChanged(ev: Event) {
-    const target = ev.currentTarget as PaperInputElement;
-    this[`_${target.name}`] = target.value;
-  }
-
-  public async showDialog(_dialogParams: any): Promise<void> {
-    this._opened = true;
-    await this._loadRegistries();
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._addingRegistry = false;
-    this._opened = false;
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (this.shadowRoot?.querySelector(
-        "[dialogInitialFocus]"
-      ) as HTMLElement)?.focus()
-    );
-  }
-
-  private async _loadRegistries(): Promise<void> {
-    const registries = await fetchHassioDockerRegistries(this.hass);
-    this._registries = Object.keys(registries!.registries).map((key) => ({
-      registry: key,
-      username: registries.registries[key].username,
-    }));
-  }
-
-  private _addRegistry(): void {
-    this._addingRegistry = true;
-  }
-
-  private async _addNewRegistry(): Promise<void> {
-    const data = {};
-    data[this._registry!] = {
-      username: this._username,
-      password: this._password,
-    };
-
-    try {
-      await addHassioDockerRegistry(this.hass, data);
-      await this._loadRegistries();
-      this._addingRegistry = false;
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to add registry",
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
-  private async _removeRegistry(ev: Event): Promise<void> {
-    const entry = (ev.currentTarget as any).entry;
-
-    try {
-      await removeHassioDockerRegistry(this.hass, entry.registry);
-      await this._loadRegistries();
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to remove registry",
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-dialog.button-left {
-          --justify-action-buttons: flex-start;
-        }
-        paper-icon-item {
-          cursor: pointer;
-        }
-        .form {
-          color: var(--primary-text-color);
-        }
-        .option {
-          border: 1px solid var(--divider-color);
-          border-radius: 4px;
-          margin-top: 4px;
-        }
-        mwc-button {
-          margin-left: 8px;
-        }
-        mwc-icon-button {
-          color: var(--error-color);
-          margin: -10px;
-        }
-        mwc-list-item {
-          cursor: default;
-        }
-        mwc-list-item span[slot="secondary"] {
-          color: var(--secondary-text-color);
-        }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-registries": HassioRegistriesDialog;
-  }
-}

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

@@ -1,13 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "./dialog-hassio-registries";
-
-export const showRegistriesDialog = (element: HTMLElement): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-registries",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "dialog-hassio-registries" */ "./dialog-hassio-registries"
-      ),
-    dialogParams: {},
-  });
-};

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

@@ -39,7 +39,7 @@ class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false })
   private _dialogParams?: HassioRepositoryDialogParams;
 
-  @query("#repository_input", true) private _optionInput?: PaperInputElement;
+  @query("#repository_input") private _optionInput?: PaperInputElement;
 
   @internalProperty() private _opened = false;
 
@@ -91,7 +91,7 @@ class HassioRepositoriesDialog extends LitElement {
                       title="Remove"
                       @click=${this._removeRepository}
                     >
-                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                      <ha-svg-icon path=${mdiDelete}></ha-svg-icon>
                     </mwc-icon-button>
                   </paper-item>
                 `;

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -1,107 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-header-bar";
-import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/hassio-upload-snapshot";
-import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload";
-
-@customElement("dialog-hassio-snapshot-upload")
-export class DialogHassioSnapshotUpload extends LitElement
-  implements HassDialog<HassioSnapshotUploadDialogParams> {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @internalProperty() private _params?: HassioSnapshotUploadDialogParams;
-
-  public async showDialog(
-    params: HassioSnapshotUploadDialogParams
-  ): Promise<void> {
-    this._params = params;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    if (this._params && !this._params.onboarding) {
-      if (this._params.reloadSnapshot) {
-        this._params.reloadSnapshot();
-      }
-    }
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        .heading=${true}
-        @closed=${this.closeDialog}
-      >
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title">
-              Upload snapshot
-            </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
-          </ha-header-bar>
-        </div>
-        <hassio-upload-snapshot
-          @snapshot-uploaded=${this._snapshotUploaded}
-          .hass=${this.hass}
-        ></hassio-upload-snapshot>
-      </ha-dialog>
-    `;
-  }
-
-  private _snapshotUploaded(ev) {
-    const snapshot = ev.detail.snapshot;
-    this._params?.showSnapshot(snapshot.slug);
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-snapshot-upload": DialogHassioSnapshotUpload;
-  }
-}

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

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
-import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import { mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
+import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import {
   css,
@@ -13,8 +12,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-header-bar";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -24,7 +22,7 @@ import {
 } from "../../../../src/data/hassio/snapshot";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../../../../src/polymer-types";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 
@@ -77,8 +75,6 @@ class HassioSnapshotDialog extends LitElement {
 
   @internalProperty() private _error?: string;
 
-  @internalProperty() private _onboarding = false;
-
   @internalProperty() private _snapshot?: HassioSnapshotDetail;
 
   @internalProperty() private _folders!: FolderItem[];
@@ -94,14 +90,13 @@ class HassioSnapshotDialog extends LitElement {
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
     this._folders = _computeFolders(
-      this._snapshot?.folders
+      this._snapshot.folders
     ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
     this._addons = _computeAddons(
-      this._snapshot?.addons
+      this._snapshot.addons
     ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
 
     this._dialogParams = params;
-    this._onboarding = params.onboarding ?? false;
   }
 
   protected render(): TemplateResult {
@@ -109,17 +104,12 @@ class HassioSnapshotDialog extends LitElement {
       return html``;
     }
     return html`
-      <ha-dialog open stacked @closing=${this._closeDialog} .heading=${true}>
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title">
-              ${this._computeName}
-            </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
-          </ha-header-bar>
-        </div>
+      <ha-dialog
+        open
+        stacked
+        @closing=${this._closeDialog}
+        .heading=${createCloseHeading(this.hass, this._computeName)}
+      >
         <div class="details">
           ${this._snapshot.type === "full"
             ? "Full snapshot"
@@ -192,21 +182,17 @@ class HassioSnapshotDialog extends LitElement {
         ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
 
         <div>Actions:</div>
-        ${!this._onboarding
-          ? html`<mwc-button
-              @click=${this._downloadClicked}
-              slot="primaryAction"
-            >
-              <ha-svg-icon .path=${mdiDownload} class="icon"></ha-svg-icon>
-              Download Snapshot
-            </mwc-button>`
-          : ""}
+
+        <mwc-button @click=${this._downloadClicked} slot="primaryAction">
+          <ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
+          Download Snapshot
+        </mwc-button>
 
         <mwc-button
           @click=${this._partialRestoreClicked}
           slot="secondaryAction"
         >
-          <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
+          <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
           Restore Selected
         </mwc-button>
         ${this._snapshot.type === "full"
@@ -215,30 +201,21 @@ class HassioSnapshotDialog extends LitElement {
                 @click=${this._fullRestoreClicked}
                 slot="secondaryAction"
               >
-                <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
+                <ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
                 Wipe &amp; restore
               </mwc-button>
             `
           : ""}
-        ${!this._onboarding
-          ? html`<mwc-button
-              @click=${this._deleteClicked}
-              slot="secondaryAction"
-            >
-              <ha-svg-icon
-                .path=${mdiDelete}
-                class="icon warning"
-              ></ha-svg-icon>
-              <span class="warning">Delete Snapshot</span>
-            </mwc-button>`
-          : ""}
+        <mwc-button @click=${this._deleteClicked} slot="secondaryAction">
+          <ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
+          <span class="warning">Delete Snapshot</span>
+        </mwc-button>
       </ha-dialog>
     `;
   }
 
   static get styles(): CSSResult[] {
     return [
-      haStyle,
       haStyleDialog,
       css`
         paper-checkbox {
@@ -265,18 +242,6 @@ class HassioSnapshotDialog extends LitElement {
         .no-margin-top {
           margin-top: 0;
         }
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
-        }
       `,
     ];
   }
@@ -307,8 +272,6 @@ class HassioSnapshotDialog extends LitElement {
     if (
       !(await showConfirmationDialog(this, {
         title: "Are you sure you want partially to restore this snapshot?",
-        confirmText: "restore",
-        dismissText: "cancel",
       }))
     ) {
       return;
@@ -337,31 +300,22 @@ class HassioSnapshotDialog extends LitElement {
       data.password = this._snapshotPassword;
     }
 
-    if (!this._onboarding) {
-      this.hass
-        .callApi(
-          "POST",
+    this.hass
+      .callApi(
+        "POST",
 
-          `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
-          data
-        )
-        .then(
-          () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
-          },
-          (error) => {
-            this._error = error.body.message;
-          }
-        );
-    } else {
-      fireEvent(this, "restoring");
-      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/partial`, {
-        method: "POST",
-        body: JSON.stringify(data),
-      });
-      this._closeDialog();
-    }
+        `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
+        data
+      )
+      .then(
+        () => {
+          alert("Snapshot restored!");
+          this._closeDialog();
+        },
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
   }
 
   private async _fullRestoreClicked() {
@@ -369,8 +323,6 @@ class HassioSnapshotDialog extends LitElement {
       !(await showConfirmationDialog(this, {
         title:
           "Are you sure you want to wipe your system and restore this snapshot?",
-        confirmText: "restore",
-        dismissText: "cancel",
       }))
     ) {
       return;
@@ -379,38 +331,28 @@ class HassioSnapshotDialog extends LitElement {
     const data = this._snapshot!.protected
       ? { password: this._snapshotPassword }
       : undefined;
-    if (!this._onboarding) {
-      this.hass
-        .callApi(
-          "POST",
-          `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
-          data
-        )
-        .then(
-          () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
-          },
-          (error) => {
-            this._error = error.body.message;
-          }
-        );
-    } else {
-      fireEvent(this, "restoring");
-      fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/full`, {
-        method: "POST",
-        body: JSON.stringify(data),
-      });
-      this._closeDialog();
-    }
+
+    this.hass
+      .callApi(
+        "POST",
+        `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
+        data
+      )
+      .then(
+        () => {
+          alert("Snapshot restored!");
+          this._closeDialog();
+        },
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
   }
 
   private async _deleteClicked() {
     if (
       !(await showConfirmationDialog(this, {
         title: "Are you sure you want to delete this snapshot?",
-        confirmText: "delete",
-        dismissText: "cancel",
       }))
     ) {
       return;
@@ -421,9 +363,7 @@ class HassioSnapshotDialog extends LitElement {
       .callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
       .then(
         () => {
-          if (this._dialogParams!.onDelete) {
-            this._dialogParams!.onDelete();
-          }
+          this._dialogParams!.onDelete();
           this._closeDialog();
         },
         (error) => {
@@ -444,19 +384,6 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    if (window.location.href.includes("ui.nabu.casa")) {
-      const confirm = await showConfirmationDialog(this, {
-        title: "Potential slow download",
-        text:
-          "Downloading snapshots over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
-        confirmText: "continue",
-        dismissText: "cancel",
-      });
-      if (!confirm) {
-        return;
-      }
-    }
-
     const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
     const a = document.createElement("a");
     a.href = signedPath.path;

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

@@ -2,8 +2,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 
 export interface HassioSnapshotDialogParams {
   slug: string;
-  onDelete?: () => void;
-  onboarding?: boolean;
+  onDelete: () => void;
 }
 
 export const showHassioSnapshotDialog = (