Add move data disk

Co-authored-by: Bram Kragten <[email protected]>

.eslintrc.json

@@ -4,8 +4,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
-    "prettier",
-    "prettier/@typescript-eslint"
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -29,64 +28,89 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
     "es6": true
   },
   "rules": {
-    "class-methods-use-this": 0,
-    "new-cap": 0,
-    "prefer-template": 0,
-    "object-shorthand": 0,
-    "func-names": 0,
-    "prefer-arrow-callback": 0,
-    "no-underscore-dangle": 0,
-    "strict": 0,
-    "prefer-spread": 0,
-    "no-plusplus": 0,
-    "no-bitwise": 2,
-    "comma-dangle": 0,
-    "vars-on-top": 0,
-    "no-continue": 0,
-    "no-param-reassign": 0,
-    "no-multi-assign": 0,
-    "no-console": 2,
-    "radix": 0,
-    "no-alert": 0,
-    "no-return-await": 0,
-    "no-nested-ternary": 0,
-    "prefer-destructuring": 0,
+    "class-methods-use-this": "off",
+    "new-cap": "off",
+    "prefer-template": "off",
+    "object-shorthand": "off",
+    "func-names": "off",
+    "no-underscore-dangle": "off",
+    "strict": "off",
+    "no-plusplus": "off",
+    "no-bitwise": "error",
+    "comma-dangle": "off",
+    "vars-on-top": "off",
+    "no-continue": "off",
+    "no-param-reassign": "off",
+    "no-multi-assign": "off",
+    "no-console": "error",
+    "radix": "off",
+    "no-alert": "off",
+    "no-nested-ternary": "off",
+    "prefer-destructuring": "off",
     "no-restricted-globals": [2, "event"],
-    "prefer-promise-reject-errors": 0,
-    "import/order": 0,
-    "import/prefer-default-export": 0,
-    "import/no-unresolved": 0,
-    "import/no-cycle": 0,
+    "prefer-promise-reject-errors": "off",
+    "import/prefer-default-export": "off",
+    "import/no-default-export": "off",
+    "import/no-unresolved": "off",
+    "import/no-cycle": "off",
     "import/extensions": [
-      2,
+      "error",
       "ignorePackages",
       { "ts": "never", "js": "never" }
     ],
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "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/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,
+    "object-curly-newline": "off",
+    "default-case": "off",
+    "wc/no-self-class": "off",
+    "no-shadow": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-shadow": ["error"],
-    "lit/attribute-value-entities": 0
+    "@typescript-eslint/naming-convention": [
+      "off",
+      {
+        "selector": "default",
+        "format": ["camelCase", "snake_case"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": ["variable"],
+        "format": ["camelCase", "snake_case", "UPPER_CASE"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "unused-imports/no-unused-imports": "error",
+    "lit/attribute-value-entities": "off"
   },
-  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
+  "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,8 +1,6 @@
 name: Report a bug with the UI, Frontend or Lovelace
-about: Report an issue related to the Home Assistant frontend.
+description: Report an issue related to the Home Assistant frontend.
 labels: bug
-title: ""
-issue_body: true
 body:
   - type: markdown
     attributes:
@@ -97,11 +95,7 @@ body:
         If your issue is about how an entity is shown in the UI, please add the
         state and attributes for all situations. You can find this information
         at Developer Tools -> States.
-      value: |
-        ```yaml
-        # Paste your state here.
-
-        ```
+      render: txt
   - type: textarea
     attributes:
       label: Problem-relevant frontend configuration
@@ -110,29 +104,18 @@ body:
         configuration of the used cards. Fill this out even if it seems
         unimportant to you. Please be sure to remove personal information like
         passwords, private URLs and other credentials.
-      value: |
-        ```yaml
-        # Paste your YAML here.
-
-        ```
+      render: yaml
   - type: textarea
     attributes:
       label: Javascript errors shown in your browser console/inspector
       description: >
         If you come across any Javascript or other error logs, e.g., in your
         browser console/inspector please provide them.
-      value: |
-        ```txt
-        # Paste your logs here.
-
-        ```
-  - type: markdown
+      render: txt
+  - type: textarea
     attributes:
-      value: |
-        ## Additional information
-  - type: markdown
-    attributes:
-      value: |
+      label: Additional information
+      description: >
         If you have any additional information for us, use the field below.
-        Please note, you can attach screenshots or screen recordings here,
-        by dragging and dropping files in the field below.
+        Please note, you can attach screenshots or screen recordings here, by
+        dragging and dropping files in the field below.

.github/workflows/ci.yaml

@@ -10,26 +10,21 @@ on:
       - dev
       - master
 
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
+
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
@@ -37,54 +32,40 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
       - name: Run eslint
-        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
+        run: yarn run lint:eslint
       - name: Run tsc
-        run: ./node_modules/.bin/tsc
+        run: yarn run lint:types
+      - name: Run prettier
+        run: yarn run lint:prettier
+      - name: Check for duplicate dependencies
+        run: yarn dedupe --check
   test:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
           CI: true
       - name: Run Mocha
-        run: npm run mocha
+        run: yarn run mocha
   build:
     runs-on: ubuntu-latest
     needs: [lint, test]
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:
@@ -99,20 +80,11 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/demo.yaml

@@ -4,26 +4,22 @@ on:
   push:
     branches:
       - dev
+
+env:
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@v2
-      - name: Setting up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up Node ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
-      - name: Get yarn cache path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - name: Fetching Yarn cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/release.yaml

@@ -6,9 +6,9 @@ on:
       - published
 
 env:
-  WHEELS_TAG: 3.7-alpine3.11
-  PYTHON_VERSION: 3.7
-  NODE_VERSION: 12.1
+  PYTHON_VERSION: 3.8
+  NODE_VERSION: 14
+  NODE_OPTIONS: --max_old_space_size=4096
 
 jobs:
   release:
@@ -30,7 +30,15 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
 
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
           python3 -m pip install twine
@@ -64,6 +72,8 @@ jobs:
     strategy:
       matrix:
         arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.9-alpine3.14"
     steps:
       - name: Download requirements.txt
         uses: actions/download-artifact@v2
@@ -73,7 +83,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@master
         with:
-          tag: ${{ env.WHEELS_TAG }}
+          tag: ${{ matrix.tag }}
           arch: ${{ matrix.arch }}
           wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/translations.yaml

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

.gitignore

@@ -1,10 +1,23 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
-node_modules/*
-npm-debug.log
-.DS_Store
 hass_frontend/*
-.reify-cache
+dist
+
+# yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+node_modules/*
+yarn-error.log
+npm-debug.log
 
 # Python stuff
 *.py[cod]
@@ -14,11 +27,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +41,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

.mocharc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  require: "test-mocha/testconf.js",
+  timeout: 10000,
+};

.nvmrc

@@ -1 +1 @@
-12.1
+14

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

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

.yarn/patches/@polymer/polymer/pr-5569.patch

@@ -0,0 +1,34 @@
+diff --git a/lib/legacy/class.js b/lib/legacy/class.js
+index aee2511be1cd9bf900ee552bc98190c1631c57c0..f2f499d68bf52034cac9c28307c99e8ce6b8417d 100644
+--- a/lib/legacy/class.js
++++ b/lib/legacy/class.js
+@@ -304,17 +304,23 @@ function GenerateClassFromInfo(info, Base, behaviors) {
+       // only proceed if the generated class' prototype has not been registered.
+       const generatedProto = PolymerGenerated.prototype;
+       if (!generatedProto.hasOwnProperty(JSCompiler_renameProperty('__hasRegisterFinished', generatedProto))) {
+-        generatedProto.__hasRegisterFinished = true;
++        // make sure legacy lifecycle is called on the *element*'s prototype
++        // and not the generated class prototype; if the element has been
++        // extended, these are *not* the same.
++        const proto = Object.getPrototypeOf(this);
++        // Only set flag when generated prototype itself is registered,
++        // as this element may be extended from, and needs to run `registered`
++        // on all behaviors on the subclass as well.
++        if (proto === generatedProto) {
++          generatedProto.__hasRegisterFinished = true;
++        }
+         // ensure superclass is registered first.
+         super._registered();
+         // copy properties onto the generated class lazily if we're optimizing,
+-        if (legacyOptimizations) {
++        if (legacyOptimizations && !Object.hasOwnProperty(generatedProto, '__hasCopiedProperties')) {
++          generatedProto.__hasCopiedProperties = true;
+           copyPropertiesToProto(generatedProto);
+         }
+-        // make sure legacy lifecycle is called on the *element*'s prototype
+-        // and not the generated class prototype; if the element has been
+-        // extended, these are *not* the same.
+-        const proto = Object.getPrototypeOf(this);
+         let list = lifecycle.beforeRegister;
+         if (list) {
+           for (let i=0; i < list.length; i++) {

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -0,0 +1,77 @@
+/* eslint-disable */
+module.exports = {
+name: "@yarnpkg/plugin-interactive-tools",
+factory: function (require) {
+var plugin;plugin=(()=>{var __webpack_modules__={7560:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>K});function r(e,t,n,r){var i,o=arguments.length,u=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)u=Reflect.decorate(e,t,n,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(u=(o<3?i(u):o>3?i(t,n,u):i(t,n))||u);return o>3&&u&&Object.defineProperty(t,n,u),u}const i=require("@yarnpkg/cli"),o=require("@yarnpkg/core");var u=n(9245),a=n(7382);const l=(0,a.memo)(({active:e})=>{const t=(0,a.useMemo)(()=>e?"◉":"◯",[e]),n=(0,a.useMemo)(()=>e?"green":"yellow",[e]);return a.createElement(u.Text,{color:n},t)});function s({active:e},t,n){const{stdin:r}=(0,u.useStdin)(),i=(0,a.useCallback)((e,n)=>t(e,n),n);(0,a.useEffect)(()=>{if(e&&r)return r.on("keypress",i),()=>{r.off("keypress",i)}},[e,i,r])}var c;!function(e){e.BEFORE="before",e.AFTER="after"}(c||(c={}));const f=function(e,t,{active:n,minus:r,plus:i,set:o,loop:u=!0}){s({active:n},(n,a)=>{const l=t.indexOf(e);switch(a.name){case r:{const e=l-1;if(u)return void o(t[(t.length+e)%t.length]);if(e<0)return;o(t[e])}break;case i:{const e=l+1;if(u)return void o(t[e%t.length]);if(e>=t.length)return;o(t[e])}}},[t,e,i,o,u])},d=({active:e=!0,children:t=[],radius:n=10,size:r=1,loop:i=!0,onFocusRequest:o,willReachEnd:l})=>{const d=a.Children.map(t,e=>(e=>{if(null===e.key)throw new Error("Expected all children to have a key");return e.key})(e)),p=d[0],[h,v]=(0,a.useState)(p),m=d.indexOf(h);(0,a.useEffect)(()=>{d.includes(h)||v(p)},[t]),(0,a.useEffect)(()=>{l&&m>=d.length-2&&l()},[m]),function({active:e},t,n){s({active:e},(e,n)=>{"tab"===n.name&&(n.shift?t(c.BEFORE):t(c.AFTER))},n)}({active:e&&!!o},e=>{null==o||o(e)},[o]),f(h,d,{active:e,minus:"up",plus:"down",set:v,loop:i});let g=m-n,y=m+n;y>d.length&&(g-=y-d.length,y=d.length),g<0&&(y+=-g,g=0),y>=d.length&&(y=d.length-1);const _=[];for(let n=g;n<=y;++n){const i=d[n],o=e&&i===h;_.push(a.createElement(u.Box,{key:i,height:r},a.createElement(u.Box,{marginLeft:1,marginRight:1},a.createElement(u.Text,null,o?a.createElement(u.Text,{color:"cyan",bold:!0},">"):" ")),a.createElement(u.Box,null,a.cloneElement(t[n],{active:o}))))}return a.createElement(u.Box,{flexDirection:"column",width:"100%"},_)},p=require("readline"),h=a.createContext(null),v=({children:e})=>{const{stdin:t,setRawMode:n}=(0,u.useStdin)();(0,a.useEffect)(()=>{n&&n(!0),t&&(0,p.emitKeypressEvents)(t)},[t,n]);const[r,i]=(0,a.useState)(new Map),o=(0,a.useMemo)(()=>({getAll:()=>r,get:e=>r.get(e),set:(e,t)=>i(new Map([...r,[e,t]]))}),[r,i]);return a.createElement(h.Provider,{value:o,children:e})};function m(e,t){const n=(0,a.useContext)(h);if(null===n)throw new Error("Expected this hook to run with a ministore context attached");if(void 0===e)return n.getAll();const r=(0,a.useCallback)(t=>{n.set(e,t)},[e,n.set]);let i=n.get(e);return void 0===i&&(i=t),[i,r]}async function g(e,t){let n;const{waitUntilExit:r}=(0,u.render)(a.createElement(v,null,a.createElement(e,Object.assign({},t,{useSubmit:e=>{const{exit:t}=(0,u.useApp)();s({active:!0},(r,i)=>{"return"===i.name&&(n=e,t())},[t,e])}}))));return await r(),n}const y=require("clipanion");var _=n(7840),b=n(4410);const w={appId:"OFCNCOG2CU",apiKey:"6fe4476ee5a1832882e326b506d14126",indexName:"npm-search"},E=n.n(b)()(w.appId,w.apiKey).initIndex(w.indexName),D=async(e,t=0)=>await E.search(e,{analyticsTags:["yarn-plugin-interactive-tools"],attributesToRetrieve:["name","version","owner","repository","humanDownloadsLast30Days"],page:t,hitsPerPage:10}),S=["regular","dev","peer"];class C extends i.BaseCommand{async execute(){const e=await o.Configuration.find(this.context.cwd,this.context.plugins),t=()=>a.createElement(u.Box,{flexDirection:"row"},a.createElement(u.Box,{flexDirection:"column",width:48},a.createElement(u.Box,null,a.createElement(u.Text,null,"Press ",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<up>"),"/",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<down>")," to move between packages.")),a.createElement(u.Box,null,a.createElement(u.Text,null,"Press ",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<space>")," to select a package.")),a.createElement(u.Box,null,a.createElement(u.Text,null,"Press ",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<space>")," again to change the target."))),a.createElement(u.Box,{flexDirection:"column"},a.createElement(u.Box,{marginLeft:1},a.createElement(u.Text,null,"Press ",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<enter>")," to install the selected packages.")),a.createElement(u.Box,{marginLeft:1},a.createElement(u.Text,null,"Press ",a.createElement(u.Text,{bold:!0,color:"cyanBright"},"<ctrl+c>")," to abort.")))),n=()=>a.createElement(a.Fragment,null,a.createElement(u.Box,{width:15},a.createElement(u.Text,{bold:!0,underline:!0,color:"gray"},"Owner")),a.createElement(u.Box,{width:11},a.createElement(u.Text,{bold:!0,underline:!0,color:"gray"},"Version")),a.createElement(u.Box,{width:10Line truncated
+/** @license React v0.24.0
+ * react-reconciler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+e.exports=function t(r){"use strict";var i=n(9381),o=n(7382),u=n(7181);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var l=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;l.hasOwnProperty("ReactCurrentDispatcher")||(l.ReactCurrentDispatcher={current:null}),l.hasOwnProperty("ReactCurrentBatchConfig")||(l.ReactCurrentBatchConfig={suspense:null});var s="function"==typeof Symbol&&Symbol.for,c=s?Symbol.for("react.element"):60103,f=s?Symbol.for("react.portal"):60106,d=s?Symbol.for("react.fragment"):60107,p=s?Symbol.for("react.strict_mode"):60108,h=s?Symbol.for("react.profiler"):60114,v=s?Symbol.for("react.provider"):60109,m=s?Symbol.for("react.context"):60110,g=s?Symbol.for("react.concurrent_mode"):60111,y=s?Symbol.for("react.forward_ref"):60112,_=s?Symbol.for("react.suspense"):60113,b=s?Symbol.for("react.suspense_list"):60120,w=s?Symbol.for("react.memo"):60115,E=s?Symbol.for("react.lazy"):60116;s&&Symbol.for("react.fundamental"),s&&Symbol.for("react.responder"),s&&Symbol.for("react.scope");var D="function"==typeof Symbol&&Symbol.iterator;function S(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=D&&e[D]||e["@@iterator"])?e:null}function C(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case f:return"Portal";case h:return"Profiler";case p:return"StrictMode";case _:return"Suspense";case b:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case m:return"Context.Consumer";case v:return"Context.Provider";case y:var t=e.render;return t=t.displayName||t.name||"",e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef");case w:return C(e.type);case E:if(e=1===e._status?e._result:null)return C(e)}return null}function k(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).effectTag)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function T(e){if(k(e)!==e)throw Error(a(188))}function x(e){var t=e.alternate;if(!t){if(null===(t=k(e)))throw Error(a(188));return t!==e?null:e}for(var n=e,r=t;;){var i=n.return;if(null===i)break;var o=i.alternate;if(null===o){if(null!==(r=i.return)){n=r;continue}break}if(i.child===o.child){for(o=i.child;o;){if(o===n)return T(i),e;if(o===r)return T(i),t;o=o.sibling}throw Error(a(188))}if(n.return!==r.return)n=i,r=o;else{for(var u=!1,l=i.child;l;){if(l===n){u=!0,n=i,r=o;break}if(l===r){u=!0,r=i,n=o;break}l=l.sibling}if(!u){for(l=o.child;l;){if(l===n){u=!0,n=o,r=i;break}if(l===r){u=!0,r=o,n=i;break}l=l.sibling}if(!u)throw Error(a(189))}}if(n.alternate!==r)throw Error(a(190))}if(3!==n.tag)throw Error(a(188));return n.stateNode.current===n?e:t}function A(e){if(!(e=x(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}var O=r.getPublicInstance,P=r.getRootHostContext,I=r.getChildHostContext,N=r.prepareForCommit,M=r.resetAfterCommit,R=r.createInstance,F=r.appendInitialChild,L=r.finalizeInitialChildren,B=r.prepareUpdate,j=r.shouldSetTextContent,U=r.shouldDeprioritizeSubtree,z=r.createTextInstance,W=r.setTimeout,H=r.clearTimeout,V=r.noTimeout,q=r.isPrimaryRenderer,G=r.supportsMutation,$=r.supportsPersistence,Y=r.supportsHydration,K=r.appendChild,X=r.appendChildToContainer,Q=r.commitTextUpdate,J=r.commitMount,Z=r.commitUpdate,ee=r.insertBefore,te=r.insertInContainerBefore,ne=r.removeChild,re=r.removeChildFromContainer,ie=r.resetTextContent,oe=r.hideInstance,ue=r.hideTextInstance,ae=r.unhideInstance,le=r.unhideTextInstance,se=r.cloneInstance,ce=r.createContainerChildSet,fe=r.appendChildToContainerChildSet,de=r.finalizeContainerChildren,pe=r.replaceContainerChildren,he=r.cloneHiddenInstance,ve=r.cloneHiddenTextInstance,me=r.canHydrateInstance,ge=r.canHydrateTextInstance,ye=r.isSuspenseInstancePending,_e=r.isSuspenseInstanceFallback,be=r.getNextHydratableSibling,we=r.getFirstHydratableChild,Ee=r.hydrateInstance,De=r.hydrateTextInstance,Se=r.getNextHydratableInstanceAfterSuspenseInstance,Ce=r.commitHydratedContainer,ke=r.commitHydratedSuspenseInstance,Te=/^(.*)[\\\/]/;function xe(e){var t="";do{e:switch(e.tag){case 3:case 4:case 6:case 7:case 10:case 9:var n="";break e;default:var r=e._debugOwner,i=e._debugSource,o=C(e.type);n=null,r&&(n=C(r.type)),r=o,o="",i?o=" (at "+i.fileName.replace(Te,"")+":"+i.lineNumber+")":n&&(o=" (created by "+n+")"),n="\n    in "+(r||"Unknown")+o}t+=n,e=e.return}while(e);return t}new Set;var Ae=[],Oe=-1;function Pe(e){0>Oe||(e.current=Ae[Oe],Ae[Oe]=null,Oe--)}function Ie(e,t){Oe++,Ae[Oe]=e.current,e.current=t}var Ne={},Me={current:Ne},Re={current:!1},Fe=Ne;funcLine truncated
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */e=n.nmd(e),function(){var i="Expected a function",o="__lodash_placeholder__",u=[["ary",128],["bind",1],["bindKey",2],["curry",8],["curryRight",16],["flip",512],["partial",32],["partialRight",64],["rearg",256]],a="[object Arguments]",l="[object Array]",s="[object Boolean]",c="[object Date]",f="[object Error]",d="[object Function]",p="[object GeneratorFunction]",h="[object Map]",v="[object Number]",m="[object Object]",g="[object RegExp]",y="[object Set]",_="[object String]",b="[object Symbol]",w="[object WeakMap]",E="[object ArrayBuffer]",D="[object DataView]",S="[object Float32Array]",C="[object Float64Array]",k="[object Int8Array]",T="[object Int16Array]",x="[object Int32Array]",A="[object Uint8Array]",O="[object Uint16Array]",P="[object Uint32Array]",I=/\b__p \+= '';/g,N=/\b(__p \+=) '' \+/g,M=/(__e\(.*?\)|\b__t\)) \+\n'';/g,R=/&(?:amp|lt|gt|quot|#39);/g,F=/[&<>"']/g,L=RegExp(R.source),B=RegExp(F.source),j=/<%-([\s\S]+?)%>/g,U=/<%([\s\S]+?)%>/g,z=/<%=([\s\S]+?)%>/g,W=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,H=/^\w*$/,V=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,q=/[\\^$.*+?()[\]{}|]/g,G=RegExp(q.source),$=/^\s+|\s+$/g,Y=/^\s+/,K=/\s+$/,X=/\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,Q=/\{\n\/\* \[wrapped with (.+)\] \*/,J=/,? & /,Z=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g,ee=/\\(\\)?/g,te=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,ne=/\w*$/,re=/^[-+]0x[0-9a-f]+$/i,ie=/^0b[01]+$/i,oe=/^\[object .+?Constructor\]$/,ue=/^0o[0-7]+$/i,ae=/^(?:0|[1-9]\d*)$/,le=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,se=/($^)/,ce=/['\n\r\u2028\u2029\\]/g,fe="\\u0300-\\u036f\\ufe20-\\ufe2f\\u20d0-\\u20ff",de="\\xac\\xb1\\xd7\\xf7\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf\\u2000-\\u206f \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",pe="[\\ud800-\\udfff]",he="["+de+"]",ve="["+fe+"]",me="\\d+",ge="[\\u2700-\\u27bf]",ye="[a-z\\xdf-\\xf6\\xf8-\\xff]",_e="[^\\ud800-\\udfff"+de+me+"\\u2700-\\u27bfa-z\\xdf-\\xf6\\xf8-\\xffA-Z\\xc0-\\xd6\\xd8-\\xde]",be="\\ud83c[\\udffb-\\udfff]",we="[^\\ud800-\\udfff]",Ee="(?:\\ud83c[\\udde6-\\uddff]){2}",De="[\\ud800-\\udbff][\\udc00-\\udfff]",Se="[A-Z\\xc0-\\xd6\\xd8-\\xde]",Ce="(?:"+ye+"|"+_e+")",ke="(?:"+Se+"|"+_e+")",Te="(?:"+ve+"|"+be+")"+"?",xe="[\\ufe0e\\ufe0f]?"+Te+("(?:\\u200d(?:"+[we,Ee,De].join("|")+")[\\ufe0e\\ufe0f]?"+Te+")*"),Ae="(?:"+[ge,Ee,De].join("|")+")"+xe,Oe="(?:"+[we+ve+"?",ve,Ee,De,pe].join("|")+")",Pe=RegExp("['’]","g"),Ie=RegExp(ve,"g"),Ne=RegExp(be+"(?="+be+")|"+Oe+xe,"g"),Me=RegExp([Se+"?"+ye+"+(?:['’](?:d|ll|m|re|s|t|ve))?(?="+[he,Se,"$"].join("|")+")",ke+"+(?:['’](?:D|LL|M|RE|S|T|VE))?(?="+[he,Se+Ce,"$"].join("|")+")",Se+"?"+Ce+"+(?:['’](?:d|ll|m|re|s|t|ve))?",Se+"+(?:['’](?:D|LL|M|RE|S|T|VE))?","\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])","\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",me,Ae].join("|"),"g"),Re=RegExp("[\\u200d\\ud800-\\udfff"+fe+"\\ufe0e\\ufe0f]"),Fe=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,Le=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],Be=-1,je={};je[S]=je[C]=je[k]=je[T]=je[x]=je[A]=je["[object Uint8ClampedArray]"]=je[O]=je[P]=!0,je[a]=je[l]=je[E]=je[s]=je[D]=je[c]=je[f]=je[d]=je[h]=je[v]=je[m]=je[g]=je[y]=je[_]=je[w]=!1;var Ue={};Ue[a]=Ue[l]=Ue[E]=Ue[D]=Ue[s]=Ue[c]=Ue[S]=Ue[C]=Ue[k]=Ue[T]=Ue[x]=Ue[h]=Ue[v]=Ue[m]=Ue[g]=Ue[y]=Ue[_]=Ue[b]=Ue[A]=Ue["[object Uint8ClampedArray]"]=Ue[O]=Ue[P]=!0,Ue[f]=Ue[d]=Ue[w]=!1;var ze={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},We=parseFloat,He=parseInt,Ve="object"==typeof global&&global&&global.Object===Object&&global,qe="object"==typeof self&&self&&self.Object===Object&&self,Ge=Ve||qe||Function("return this")(),$e=t&&!t.nodeType&&t,Ye=$e&&e&&!e.nodeType&&e,Ke=Ye&&Ye.exports===$e,Xe=Ke&&Ve.process,Qe=function(){try{var e=Ye&&Ye.require&&Ye.require("util").types;return e||Xe&&Xe.binding&&Xe.binding("util")}catch(e){}}(),Je=Qe&&Qe.isArrayBuffer,Ze=Qe&&Qe.isDate,et=Qe&&Qe.isMap,tt=Qe&&Qe.isRegExp,nt=Qe&&Qe.isSet,rt=Qe&&Qe.isTypedArray;function it(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}function ot(e,t,n,r){for(var i=-1,o=null==e?0:e.length;++i<o;){var u=e[i];t(r,u,n(u),e)}return r}function ut(e,t){for(var n=-1,r=null==e?0:e.length;++n<r&&!1!==t(e[n],n,e););return e}function at(e,t){for(var n=null==e?0:e.length;n--&&!1!==t(e[n],n,e););return e}function lt(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(!t(e[n],n,e))return!1;return!0}function st(e,t){for(var n=-1,r=null==e?Line truncated
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,o){for(var u,a,l=i(e),s=1;s<arguments.length;s++){for(var c in u=Object(arguments[s]))n.call(u,c)&&(l[c]=u[c]);if(t){a=t(u);for(var f=0;f<a.length;f++)r.call(u,a[f])&&(l[a[f]]=u[a[f]])}}return l}},834:(e,t,n)=>{"use strict";const r=n(1573),i=new WeakMap,o=(e,t={})=>{if("function"!=typeof e)throw new TypeError("Expected a function");let n,o=!1,u=0;const a=e.displayName||e.name||"<anonymous>",l=function(...r){if(i.set(l,++u),o){if(!0===t.throw)throw new Error(`Function \`${a}\` can only be called once`);return n}return o=!0,n=e.apply(this,r),e=null,n};return r(l,e),i.set(l,u),l};e.exports=o,e.exports.default=o,e.exports.callCount=e=>{if(!i.has(e))throw new Error(`The given function \`${e.name}\` is not wrapped by the \`onetime\` package`);return i.get(e)}},8070:(e,t,n)=>{"use strict";const r=n(2413),i=["assert","count","countReset","debug","dir","dirxml","error","group","groupCollapsed","groupEnd","info","log","table","time","timeEnd","timeLog","trace","warn"];let o={};e.exports=e=>{const t=new r.PassThrough,n=new r.PassThrough;t.write=t=>e("stdout",t),n.write=t=>e("stderr",t);const u=new console.Console(t,n);for(const e of i)o[e]=console[e],console[e]=u[e];return()=>{for(const e of i)console[e]=o[e];o={}}}},5187:e=>{window,e.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=20)}([function(e,t,n){"use strict";e.exports=n(12)},function(e,t,n){"use strict";
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function u(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,l=u(e),s=1;s<arguments.length;s++){for(var c in n=Object(arguments[s]))i.call(n,c)&&(l[c]=n[c]);if(r){a=r(n);for(var f=0;f<a.length;f++)o.call(n,a[f])&&(l[a[f]]=n[a[f]])}}return l}},function(e,t,n){(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var r=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,u=/^0o[0-7]+$/i,a=parseInt,l="object"==(void 0===t?"undefined":n(t))&&t&&t.Object===Object&&t,s="object"==("undefined"==typeof self?"undefined":n(self))&&self&&self.Object===Object&&self,c=l||s||Function("return this")(),f=Object.prototype.toString,d=Math.max,p=Math.min,h=function(){return c.Date.now()};function v(e){var t=n(e);return!!e&&("object"==t||"function"==t)}function m(e){return"symbol"==n(e)||function(e){return!!e&&"object"==n(e)}(e)&&"[object Symbol]"==f.call(e)}function g(e){if("number"==typeof e)return e;if(m(e))return NaN;if(v(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=v(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(r,"");var n=o.test(e);return n||u.test(e)?a(e.slice(2),n?2:8):i.test(e)?NaN:+e}e.exports=function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return v(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),function(e,t,n){var r,i,o,u,a,l,s=0,c=!1,f=!1,m=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(t){var n=r,o=i;return r=i=void 0,s=t,u=e.apply(o,n)}function _(e){return s=e,a=setTimeout(w,t),c?y(e):u}function b(e){var n=e-l;return void 0===l||n>=t||n<0||f&&e-s>=o}function w(){var e=h();if(b(e))return E(e);a=setTimeout(w,function(e){var n=t-(e-l);return f?p(n,o-(e-s)):n}(e))}function E(e){return a=void 0,m&&r?y(e):(r=i=void 0,u)}function D(){var e=h(),n=b(e);if(r=arguments,i=this,l=e,n){if(void 0===a)return _(l);if(f)return a=setTimeout(w,t),y(l)}return void 0===a&&(a=setTimeout(w,t)),u}return t=g(t)||0,v(n)&&(c=!!n.leading,o=(f="maxWait"in n)?d(g(n.maxWait)||0,t):o,m="trailing"in n?!!n.trailing:m),D.cancel=function(){void 0!==a&&clearTimeout(a),s=0,r=l=i=a=void 0},D.flush=function(){return void 0===a?u:E(h())},D}(e,t,{leading:r,maxWait:t,trailing:i})}}).call(this,n(4))},function(e,t,n){(function(n){function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var i;t=e.exports=p,i="object"===(void 0===n?"undefined":r(n))&&n.env&&n.env.NODE_DEBUG&&/\bsemver\b/i.test(n.env.NODE_DEBUG)?function(){var e=Array.prototype.slice.call(arguments,0);e.unshift("SEMVER"),console.log.apply(console,e)}:function(){},t.SEMVER_SPEC_VERSION="2.0.0";var o=Number.MAX_SAFE_INTEGER||9007199254740991,u=t.re=[],a=t.src=[],l=t.tokens={},s=0;function c(e){l[e]=s++}c("NUMERICIDENTIFIER"),a[l.NUMERICIDENTIFIER]="0|[1-9]\\d*",c("NUMERICIDENTIFIERLOOSE"),a[l.NUMERICIDENTIFIERLOOSE]="[0-9]+",c("NONNUMERICIDENTIFIER"),a[l.NONNUMERICIDENTIFIER]="\\d*[a-zA-Z-][a-zA-Z0-9-]*",c("MAINVERSION"),a[l.MAINVERSION]="("+a[l.NUMERICIDENTIFIER]+")\\.("+a[l.NUMERICIDENTIFIER]+")\\.("+a[l.NUMERICIDENTIFIER]+")",c("MAINVERSIONLOOSE"),a[l.MAINVERSIONLOOSE]="("+a[l.NUMERICIDENTIFIERLOOSE]+")\\.("+a[l.NUMERICIDENTIFIERLOOSE]+")\\.("+a[l.NUMERICIDENTIFIERLOOSE]+")",c("PRERELEASEIDENTIFIER"),a[l.PRERELEASEIDENTIFIER]="(?:"+a[l.NUMERICIDENTIFIER]+"|"+a[l.NONNUMERICIDENTIFIER]+")",c("PRERELEASEIDENTIFIERLOOSE"),a[l.PRERELEASEIDENTIFIERLOOSE]="(?:"+a[l.NUMERICIDENTIFIERLOOSE]+"|"+a[l.NONNUMERICIDENTIFIER]+")",c("PRERELEASE"),a[l.PRERELEASE]="(?:-("+a[l.PRERELEASEIDENTIFIER]+"(?:\\."+a[l.PRERELEASEIDENTIFIER]+")*))",c("PRERELEASELOOSE"),a[l.PRERELEASELOOSE]="(?:-?("+a[l.PRERELEASEIDENTIFIERLOOSE]+"(?:\\."+a[l.PRERELEASEIDENTIFIERLOOSE]+")*))",c("BUILDIDENTIFIER"),a[l.BUILDIDENTIFIER]="[0-9A-Za-z-]+",c("BUILD"),a[l.BUILD]="(?:\\+("+a[l.BUILDIDENTIFIER]+"(?:\\."+a[l.BUILDIDENTIFIER]+")*))",c("FULL"),c("FULLPLAIN"),a[l.FULLPLAIN]="v?"+a[l.MAINVERSION]+a[l.PRERELEASE]+"?"+a[l.BUILD]+"?",a[l.FULL]="^"+a[l.FULLPLAIN]+"$",c("LOOSEPLAIN"),a[l.LOOSEPLAIN]="[v=\Line truncated
+/*! promise-polyfill 2.0.1 */
+function(r){function i(e,t){return function(){e.apply(t,arguments)}}function o(e){if("object"!=n(this))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=null,this._value=null,this._deferreds=[],f(e,i(a,this),i(l,this))}function u(e){var t=this;return null===this._state?void this._deferreds.push(e):void d((function(){var n=t._state?e.onFulfilled:e.onRejected;if(null!==n){var r;try{r=n(t._value)}catch(t){return void e.reject(t)}e.resolve(r)}else(t._state?e.resolve:e.reject)(t._value)}))}function a(e){try{if(e===this)throw new TypeError("A promise cannot be resolved with itself.");if(e&&("object"==n(e)||"function"==typeof e)){var t=e.then;if("function"==typeof t)return void f(i(t,e),i(a,this),i(l,this))}this._state=!0,this._value=e,s.call(this)}catch(e){l.call(this,e)}}function l(e){this._state=!1,this._value=e,s.call(this)}function s(){for(var e=0,t=this._deferreds.length;t>e;e++)u.call(this,this._deferreds[e]);this._deferreds=null}function c(e,t,n,r){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.resolve=n,this.reject=r}function f(e,t,n){var r=!1;try{e((function(e){r||(r=!0,t(e))}),(function(e){r||(r=!0,n(e))}))}catch(e){if(r)return;r=!0,n(e)}}var d=o.immediateFn||"function"==typeof t&&t||function(e){setTimeout(e,1)},p=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)};o.prototype.catch=function(e){return this.then(null,e)},o.prototype.then=function(e,t){var n=this;return new o((function(r,i){u.call(n,new c(e,t,r,i))}))},o.all=function(){var e=Array.prototype.slice.call(1===arguments.length&&p(arguments[0])?arguments[0]:arguments);return new o((function(t,r){function i(u,a){try{if(a&&("object"==n(a)||"function"==typeof a)){var l=a.then;if("function"==typeof l)return void l.call(a,(function(e){i(u,e)}),r)}e[u]=a,0==--o&&t(e)}catch(e){r(e)}}if(0===e.length)return t([]);for(var o=e.length,u=0;u<e.length;u++)i(u,e[u])}))},o.resolve=function(e){return e&&"object"==n(e)&&e.constructor===o?e:new o((function(t){t(e)}))},o.reject=function(e){return new o((function(t,n){n(e)}))},o.race=function(e){return new o((function(t,n){for(var r=0,i=e.length;i>r;r++)e[r].then(t,n)}))},e.exports?e.exports=o:r.Promise||(r.Promise=o)}(this),u.copy=function(e){return new Promise((function(t,n){if("string"!=typeof e&&!("text/plain"in e))throw new Error("You must provide a text/plain type.");var r="string"==typeof e?e:e["text/plain"];window.clipboardData.setData("Text",r)?t():n(new Error("Copying was rejected."))}))},u.paste=function(){return new Promise((function(e,t){var n=window.clipboardData.getData("Text");n?e(n):t(new Error("Pasting was rejected."))}))}),u}()}).call(this,n(13).setImmediate)},function(e,t,n){"use strict";e.exports=n(15)},function(e,t,n){"use strict";n.r(t),t.default=":root {\n  /**\n   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()\n   */\n\n  /* Light theme */\n  --light-color-attribute-name: #ef6632;\n  --light-color-attribute-name-not-editable: #23272f;\n  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);\n  --light-color-attribute-value: #1a1aa6;\n  --light-color-attribute-value-inverted: #ffffff;\n  --light-color-attribute-editable-value: #1a1aa6;\n  --light-color-background: #ffffff;\n  --light-color-background-hover: rgba(0, 136, 250, 0.1);\n  --light-color-background-inactive: #e5e5e5;\n  --light-color-background-invalid: #fff0f0;\n  --light-color-background-selected: #0088fa;\n  --light-color-button-background: #ffffff;\n  --light-color-button-background-focus: #ededed;\n  --light-color-button: #5f6673;\n  --light-color-button-disabled: #cfd1d5;\n  --light-color-button-active: #0088fa;\n  --light-color-button-focus: #23272f;\n  --light-color-button-hover: #23272f;\n  --light-color-border: #eeeeee;\n  --light-color-commit-did-not-render-fill: #cfd1d5;\n  --light-color-commit-did-not-render-fill-text: #000000;\n  --light-color-commit-did-not-render-pattern: #cfd1d5;\n  --light-color-commit-did-not-render-pattern-text: #333333;\n  --light-color-commit-gradient-0: #37afa9;\n  --light-color-commit-gradient-1: #63b19e;\n  --light-color-commit-gradient-2: #80b393;\n  --light-color-commit-gradient-3: #97b488;\n  --light-color-commit-gradient-4: #abb67d;\n  --light-color-commit-gradient-5: #beb771;\n  --light-color-commit-gradient-6: #cfb965;\n  --light-color-commit-gradient-7: #dfba57;\n  --light-color-commit-gradient-8: #efbb49;\n  --light-color-commit-gradient-9: #febc38;\n  --light-color-commit-gradient-text: #000000;\n  --light-color-component-name: #6a51b2;\n  --light-color-component-name-inverted: #ffffff;\n  --light-color-component-badge-background: rgba(0, 0, 0, 0.1);\n  --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);\n  --light-color-component-badge-count: #777d88;\n  --light-color-component-badge-count-inverted: rgba(255, 255, 2Line truncated
+/** @license React v0.0.0-experimental-51a3aa6af
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var i=60103,o=60106,u=60107,a=60108,l=60114,s=60109,c=60110,f=60112,d=60113,p=60120,h=60115,v=60116,m=60121,g=60122,y=60117,_=60129,b=60131;if("function"==typeof Symbol&&Symbol.for){var w=Symbol.for;i=w("react.element"),o=w("react.portal"),u=w("react.fragment"),a=w("react.strict_mode"),l=w("react.profiler"),s=w("react.provider"),c=w("react.context"),f=w("react.forward_ref"),d=w("react.suspense"),p=w("react.suspense_list"),h=w("react.memo"),v=w("react.lazy"),m=w("react.block"),g=w("react.server.block"),y=w("react.fundamental"),_=w("react.debug_trace_mode"),b=w("react.legacy_hidden")}function E(e){if("object"===r(e)&&null!==e){var t=e.$$typeof;switch(t){case i:switch(e=e.type){case u:case l:case a:case d:case p:return e;default:switch(e=e&&e.$$typeof){case c:case f:case v:case h:case s:return e;default:return t}}case o:return t}}}var D=s,S=i,C=f,k=u,T=v,x=h,A=o,O=l,P=a,I=d;t.ContextConsumer=c,t.ContextProvider=D,t.Element=S,t.ForwardRef=C,t.Fragment=k,t.Lazy=T,t.Memo=x,t.Portal=A,t.Profiler=O,t.StrictMode=P,t.Suspense=I,t.isAsyncMode=function(){return!1},t.isConcurrentMode=function(){return!1},t.isContextConsumer=function(e){return E(e)===c},t.isContextProvider=function(e){return E(e)===s},t.isElement=function(e){return"object"===r(e)&&null!==e&&e.$$typeof===i},t.isForwardRef=function(e){return E(e)===f},t.isFragment=function(e){return E(e)===u},t.isLazy=function(e){return E(e)===v},t.isMemo=function(e){return E(e)===h},t.isPortal=function(e){return E(e)===o},t.isProfiler=function(e){return E(e)===l},t.isStrictMode=function(e){return E(e)===a},t.isSuspense=function(e){return E(e)===d},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===u||e===l||e===_||e===a||e===d||e===p||e===b||"object"===r(e)&&null!==e&&(e.$$typeof===v||e.$$typeof===h||e.$$typeof===s||e.$$typeof===c||e.$$typeof===f||e.$$typeof===y||e.$$typeof===m||e[0]===g)},t.typeOf=E},function(e,t,n){(function(e){var r=void 0!==e&&e||"undefined"!=typeof self&&self||window,i=Function.prototype.apply;function o(e,t){this._id=e,this._clearFn=t}t.setTimeout=function(){return new o(i.call(setTimeout,r,arguments),clearTimeout)},t.setInterval=function(){return new o(i.call(setInterval,r,arguments),clearInterval)},t.clearTimeout=t.clearInterval=function(e){e&&e.close()},o.prototype.unref=o.prototype.ref=function(){},o.prototype.close=function(){this._clearFn.call(r,this._id)},t.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},t.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},t._unrefActive=t.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;t>=0&&(e._idleTimeoutId=setTimeout((function(){e._onTimeout&&e._onTimeout()}),t))},n(14),t.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,t.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(this,n(4))},function(e,t,n){(function(e,t){!function(e,n){"use strict";if(!e.setImmediate){var r,i,o,u,a,l=1,s={},c=!1,f=e.document,d=Object.getPrototypeOf&&Object.getPrototypeOf(e);d=d&&d.setTimeout?d:e,"[object process]"==={}.toString.call(e.process)?r=function(e){t.nextTick((function(){h(e)}))}:function(){if(e.postMessage&&!e.importScripts){var t=!0,n=e.onmessage;return e.onmessage=function(){t=!1},e.postMessage("","*"),e.onmessage=n,t}}()?(u="setImmediate$"+Math.random()+"$",a=function(t){t.source===e&&"string"==typeof t.data&&0===t.data.indexOf(u)&&h(+t.data.slice(u.length))},e.addEventListener?e.addEventListener("message",a,!1):e.attachEvent("onmessage",a),r=function(t){e.postMessage(u+t,"*")}):e.MessageChannel?((o=new MessageChannel).port1.onmessage=function(e){h(e.data)},r=function(e){o.port2.postMessage(e)}):f&&"onreadystatechange"in f.createElement("script")?(i=f.documentElement,r=function(e){var t=f.createElement("script");t.onreadystatechange=function(){h(e),t.onreadystatechange=null,i.removeChild(t),t=null},i.appendChild(t)}):r=function(e){setTimeout(h,0,e)},d.setImmediate=function(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),n=0;n<t.length;n++)t[n]=arguments[n+1];var i={callback:e,args:t};return s[l]=i,r(l),l++},d.clearImmediate=p}function p(e){delete s[e]}function h(e){if(c)setTimeout(h,0,e);else{var t=s[e];if(t){c=!0;try{!function(e){var t=e.callback,n=e.args;switch(n.length){case 0:t();break;case 1:t(n[0]);break;case 2:t(n[0],n[1]);break;case 3:t(n[0],n[1],n[2]);break;default:t.apply(void 0,n)}}(t)}finally{p(e),c=!1}}}}}("undefined"==typeof self?void 0===e?this:e:self)}).call(this,n(4),n(5))},function(e,t,n){"use strict";
+/** @license React v0.0.0-experimental-51a3aa6af
+ * react-debug-tools.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var i=n(1),o=n(16),u=n(18).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,a=60128;if("function"==typeof Symbol&&Symbol.for){var l=Symbol.for;a=l("react.opaque.id")}var s=[],c=null,f=null;function d(){if(null===c){var e=new Map;try{v.useContext({_currentValue:null}),v.useState(null),v.useReducer((function(e){return e}),null),v.useRef(null),v.useLayoutEffect((function(){})),v.useEffect((function(){})),v.useImperativeHandle(void 0,(function(){return null})),v.useDebugValue(null),v.useCallback((function(){})),v.useMemo((function(){return null}))}finally{var t=s;s=[]}for(var n=0;n<t.length;n++){var r=t[n];e.set(r.primitive,o.parse(r.stackError))}c=e}return c}var p=null;function h(){var e=p;return null!==e&&(p=e.next),e}var v={readContext:function(e){return e._currentValue},useCallback:function(e){var t=h();return s.push({primitive:"Callback",stackError:Error(),value:null!==t?t.memoizedState[0]:e}),e},useContext:function(e){return s.push({primitive:"Context",stackError:Error(),value:e._currentValue}),e._currentValue},useEffect:function(e){h(),s.push({primitive:"Effect",stackError:Error(),value:e})},useImperativeHandle:function(e){h();var t=void 0;null!==e&&"object"===r(e)&&(t=e.current),s.push({primitive:"ImperativeHandle",stackError:Error(),value:t})},useDebugValue:function(e,t){s.push({primitive:"DebugValue",stackError:Error(),value:"function"==typeof t?t(e):e})},useLayoutEffect:function(e){h(),s.push({primitive:"LayoutEffect",stackError:Error(),value:e})},useMemo:function(e){var t=h();return e=null!==t?t.memoizedState[0]:e(),s.push({primitive:"Memo",stackError:Error(),value:e}),e},useReducer:function(e,t,n){return t=null!==(e=h())?e.memoizedState:void 0!==n?n(t):t,s.push({primitive:"Reducer",stackError:Error(),value:t}),[t,function(){}]},useRef:function(e){var t=h();return e=null!==t?t.memoizedState:{current:e},s.push({primitive:"Ref",stackError:Error(),value:e.current}),e},useState:function(e){var t=h();return e=null!==t?t.memoizedState:"function"==typeof e?e():e,s.push({primitive:"State",stackError:Error(),value:e}),[e,function(){}]},useTransition:function(){return h(),h(),s.push({primitive:"Transition",stackError:Error(),value:void 0}),[function(){},!1]},useMutableSource:function(e,t){return h(),h(),h(),h(),e=t(e._source),s.push({primitive:"MutableSource",stackError:Error(),value:e}),e},useDeferredValue:function(e){return h(),h(),s.push({primitive:"DeferredValue",stackError:Error(),value:e}),e},useOpaqueIdentifier:function(){var e=h();return f&&0===f.mode&&h(),(e=null===e?void 0:e.memoizedState)&&e.$$typeof===a&&(e=void 0),s.push({primitive:"OpaqueIdentifier",stackError:Error(),value:e}),e}},m=0;function g(e,t,n){var r=t[n].source,i=0;e:for(;i<e.length;i++)if(e[i].source===r){for(var o=n+1,u=i+1;o<t.length&&u<e.length;o++,u++)if(e[u].source!==t[o].source)continue e;return i}return-1}function y(e,t){return!(!e||(t="use"+t,e.length<t.length||e.lastIndexOf(t)!==e.length-t.length))}function _(e){if(!e)return"";var t=e.lastIndexOf(".");return-1===t&&(t=0),"use"===e.substr(t,3)&&(t+=3),e.substr(t)}function b(e,t){for(var n=[],r=null,i=n,u=0,a=[],l=0;l<t.length;l++){var s=t[l],c=e,f=o.parse(s.stackError);e:{var p=f,h=g(p,c,m);if(-1!==h)c=h;else{for(var v=0;v<c.length&&5>v;v++)if(-1!==(h=g(p,c,v))){m=v,c=h;break e}c=-1}}e:{if(p=f,void 0!==(h=d().get(s.primitive)))for(v=0;v<h.length&&v<p.length;v++)if(h[v].source!==p[v].source){v<p.length-1&&y(p[v].functionName,s.primitive)&&v++,v<p.length-1&&y(p[v].functionName,s.primitive)&&v++,p=v;break e}p=-1}if(null!==(f=-1===c||-1===p||2>c-p?null:f.slice(p,c-1))){if(c=0,null!==r){for(;c<f.length&&c<r.length&&f[f.length-c-1].source===r[r.length-c-1].source;)c++;for(r=r.length-1;r>c;r--)i=a.pop()}for(r=f.length-c-1;1<=r;r--)c=[],i.push({id:null,isStateEditable:!1,name:_(f[r-1].functionName),value:void 0,subHooks:c}),a.push(i),i=c;r=f}c="Context"===(f=s.primitive)||"DebugValue"===f?null:u++,i.push({id:c,isStateEditable:"Reducer"===f||"State"===f,name:f,value:s.value,subHooks:[]})}return function e(t,n){for(var r=[],i=0;i<t.length;i++){var o=t[i];"DebugValue"===o.name&&0===o.subHooks.length?(t.splice(i,1),i--,r.push(o)):e(o.subHooks,o)}null!==n&&(1===r.length?n.value=r[0].value:1<r.length&&(n.value=r.map((function(e){return e.value}))))}(n,null),n}function w(e,t,n){null==n&&(n=u.ReactCurrentDispatcher);var r=n.current;n.current=v;try{var i=Error();e(t)}finally{e=s,s=[],n.current=r}return b(n=o.parse(i),e)}t.inspectHooks=w,t.inspectHooksOfFiber=function(e,t){if(null==t&&(t=u.ReactCurrentDispatcher),f=e,0!==e.tag&&15!==e.tag&&11!==e.tag&&22!==e.tag)throw Error("Unknown Fiber. Needs to be a function component to inspect hooks.");d();var n=e.type,r=e.memoizedProps;if(n!==e.elementType&&n&&n.defaultProps){r=i({},r);var a=n.defaultProps;for(l in a)void 0Line truncated
+/** @license React v0.0.0-experimental-51a3aa6af
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var i=n(1),o=60103,u=60106;t.Fragment=60107,t.StrictMode=60108,t.Profiler=60114;var a=60109,l=60110,s=60112;t.Suspense=60113,t.unstable_SuspenseList=60120;var c=60115,f=60116,d=60121;if(t.unstable_DebugTracingMode=60129,t.unstable_LegacyHidden=60131,"function"==typeof Symbol&&Symbol.for){var p=Symbol.for;o=p("react.element"),u=p("react.portal"),t.Fragment=p("react.fragment"),t.StrictMode=p("react.strict_mode"),t.Profiler=p("react.profiler"),a=p("react.provider"),l=p("react.context"),s=p("react.forward_ref"),t.Suspense=p("react.suspense"),t.unstable_SuspenseList=p("react.suspense_list"),c=p("react.memo"),f=p("react.lazy"),d=p("react.block"),t.unstable_DebugTracingMode=p("react.debug_trace_mode"),t.unstable_LegacyHidden=p("react.legacy_hidden")}var h="function"==typeof Symbol&&Symbol.iterator;function v(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g={};function y(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||m}function _(){}function b(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||m}y.prototype.isReactComponent={},y.prototype.setState=function(e,t){if("object"!==r(e)&&"function"!=typeof e&&null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,"setState")},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},_.prototype=y.prototype;var w=b.prototype=new _;w.constructor=b,i(w,y.prototype),w.isPureReactComponent=!0;var E={current:null},D=Object.prototype.hasOwnProperty,S={key:!0,ref:!0,__self:!0,__source:!0};function C(e,t,n){var r,i={},u=null,a=null;if(null!=t)for(r in void 0!==t.ref&&(a=t.ref),void 0!==t.key&&(u=""+t.key),t)D.call(t,r)&&!S.hasOwnProperty(r)&&(i[r]=t[r]);var l=arguments.length-2;if(1===l)i.children=n;else if(1<l){for(var s=Array(l),c=0;c<l;c++)s[c]=arguments[c+2];i.children=s}if(e&&e.defaultProps)for(r in l=e.defaultProps)void 0===i[r]&&(i[r]=l[r]);return{$$typeof:o,type:e,key:u,ref:a,props:i,_owner:E.current}}function k(e){return"object"===r(e)&&null!==e&&e.$$typeof===o}var T=/\/+/g;function x(e,t){return"object"===r(e)&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function A(e,t,n,i,a){var l=r(e);"undefined"!==l&&"boolean"!==l||(e=null);var s=!1;if(null===e)s=!0;else switch(l){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case o:case u:s=!0}}if(s)return a=a(s=e),e=""===i?"."+x(s,0):i,Array.isArray(a)?(n="",null!=e&&(n=e.replace(T,"$&/")+"/"),A(a,t,n,"",(function(e){return e}))):null!=a&&(k(a)&&(a=function(e,t){return{$$typeof:o,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(a,n+(!a.key||s&&s.key===a.key?"":(""+a.key).replace(T,"$&/")+"/")+e)),t.push(a)),1;if(s=0,i=""===i?".":i+":",Array.isArray(e))for(var c=0;c<e.length;c++){var f=i+x(l=e[c],c);s+=A(l,t,n,f,a)}else if("function"==typeof(f=function(e){return null===e||"object"!==r(e)?null:"function"==typeof(e=h&&e[h]||e["@@iterator"])?e:null}(e)))for(e=f.call(e),c=0;!(l=e.next()).done;)s+=A(l=l.value,t,n,f=i+x(l,c++),a);else if("object"===l)throw t=""+e,Error(v(31,"[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t));return s}function O(e,t,n){if(null==e)return e;var r=[],i=0;return A(e,r,"","",(function(e){return t.call(n,e,i++)})),r}function P(e){if(-1===e._status){var t=e._result;t=t(),e._status=0,e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}if(1===e._status)return e._result;throw e._result}function I(e){return{$$typeof:d,_data:e.load.apply(null,e.args),_render:e.render}}var N={current:null};function M(){var e=N.current;if(null===e)throw Error(v(321));return e}var R={transition:0},F={ReactCurrentDispatcher:N,ReactCurrentBatchConfig:R,ReactCurrentOwner:E,IsSomeRendererActing:{current:!1},assign:i};t.Children={map:O,forEach:function(e,t,n){O(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return O(e,(function(){t++})),t},toArray:function(e){return O(e,(function(e){return e}))||[]},only:function(e){if(!k(e))throw Error(v(143));return e}},t.Component=y,t.PureComponent=b,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=F,t.cloneElement=function(e,t,n){if(null==e)throw Error(v(267,e));var r=i({},e.props),u=e.key,a=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,l=E.cuLine truncated
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var r=n(9381),i="function"==typeof Symbol&&Symbol.for,o=i?Symbol.for("react.element"):60103,u=i?Symbol.for("react.portal"):60106,a=i?Symbol.for("react.fragment"):60107,l=i?Symbol.for("react.strict_mode"):60108,s=i?Symbol.for("react.profiler"):60114,c=i?Symbol.for("react.provider"):60109,f=i?Symbol.for("react.context"):60110,d=i?Symbol.for("react.forward_ref"):60112,p=i?Symbol.for("react.suspense"):60113,h=i?Symbol.for("react.memo"):60115,v=i?Symbol.for("react.lazy"):60116,m="function"==typeof Symbol&&Symbol.iterator;function g(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var y={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},_={};function b(e,t,n){this.props=e,this.context=t,this.refs=_,this.updater=n||y}function w(){}function E(e,t,n){this.props=e,this.context=t,this.refs=_,this.updater=n||y}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(g(85));this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},w.prototype=b.prototype;var D=E.prototype=new w;D.constructor=E,r(D,b.prototype),D.isPureReactComponent=!0;var S={current:null},C=Object.prototype.hasOwnProperty,k={key:!0,ref:!0,__self:!0,__source:!0};function T(e,t,n){var r,i={},u=null,a=null;if(null!=t)for(r in void 0!==t.ref&&(a=t.ref),void 0!==t.key&&(u=""+t.key),t)C.call(t,r)&&!k.hasOwnProperty(r)&&(i[r]=t[r]);var l=arguments.length-2;if(1===l)i.children=n;else if(1<l){for(var s=Array(l),c=0;c<l;c++)s[c]=arguments[c+2];i.children=s}if(e&&e.defaultProps)for(r in l=e.defaultProps)void 0===i[r]&&(i[r]=l[r]);return{$$typeof:o,type:e,key:u,ref:a,props:i,_owner:S.current}}function x(e){return"object"==typeof e&&null!==e&&e.$$typeof===o}var A=/\/+/g,O=[];function P(e,t,n,r){if(O.length){var i=O.pop();return i.result=e,i.keyPrefix=t,i.func=n,i.context=r,i.count=0,i}return{result:e,keyPrefix:t,func:n,context:r,count:0}}function I(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>O.length&&O.push(e)}function N(e,t,n){return null==e?0:function e(t,n,r,i){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var l=!1;if(null===t)l=!0;else switch(a){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case o:case u:l=!0}}if(l)return r(i,t,""===n?"."+M(t,0):n),1;if(l=0,n=""===n?".":n+":",Array.isArray(t))for(var s=0;s<t.length;s++){var c=n+M(a=t[s],s);l+=e(a,c,r,i)}else if(null===t||"object"!=typeof t?c=null:c="function"==typeof(c=m&&t[m]||t["@@iterator"])?c:null,"function"==typeof c)for(t=c.call(t),s=0;!(a=t.next()).done;)l+=e(a=a.value,c=n+M(a,s++),r,i);else if("object"===a)throw r=""+t,Error(g(31,"[object Object]"===r?"object with keys {"+Object.keys(t).join(", ")+"}":r,""));return l}(e,"",t,n)}function M(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function R(e,t){e.func.call(e.context,t,e.count++)}function F(e,t,n){var r=e.result,i=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?L(e,r,n,(function(e){return e})):null!=e&&(x(e)&&(e=function(e,t){return{$$typeof:o,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,i+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(A,"$&/")+"/")+n)),r.push(e))}function L(e,t,n,r,i){var o="";null!=n&&(o=(""+n).replace(A,"$&/")+"/"),N(e,F,t=P(t,o,r,i)),I(t)}var B={current:null};function j(){var e=B.current;if(null===e)throw Error(g(321));return e}var U={ReactCurrentDispatcher:B,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:r};t.Children={map:function(e,t,n){if(null==e)return e;var r=[];return L(e,r,null,t,n),r},forEach:function(e,t,n){if(null==e)return e;N(e,R,t=P(null,null,t,n)),I(t)},count:function(e){return N(e,(function(){return null}),null)},toArray:function(e){var t=[];return L(e,t,null,(function(e){return e})),t},only:function(e){if(!x(e))throw Error(g(143));return e}},t.Component=b,t.Fragment=a,t.Profiler=s,t.PureComponent=E,t.StrictMode=l,t.Suspense=p,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=U,t.cloneElement=function(e,t,n){if(null==e)throw Error(g(267,e));var i=r({},e.props),u=e.key,a=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,l=S.current),void 0!==t.key&&(u=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(c in t)C.call(t,c)&&!k.hasOwnProperty(c)&&(i[c]=void 0===t[c]&&void 0!==s?s[c]:t[c])}var c=arguments.length-2;if(1===c)i.children=n;else if(1<c){s=Array(c);for(var f=0;f<c;f++)s[f]=arguments[f+2];i.children=s}return{$$typeof:o,Line truncated
+/** @license React v0.18.0
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var n,r,i,o,u;if(Object.defineProperty(t,"__esModule",{value:!0}),"undefined"==typeof window||"function"!=typeof MessageChannel){var a=null,l=null,s=function(){if(null!==a)try{var e=t.unstable_now();a(!0,e),a=null}catch(e){throw setTimeout(s,0),e}},c=Date.now();t.unstable_now=function(){return Date.now()-c},n=function(e){null!==a?setTimeout(n,0,e):(a=e,setTimeout(s,0))},r=function(e,t){l=setTimeout(e,t)},i=function(){clearTimeout(l)},o=function(){return!1},u=t.unstable_forceFrameRate=function(){}}else{var f=window.performance,d=window.Date,p=window.setTimeout,h=window.clearTimeout;if("undefined"!=typeof console){var v=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof v&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}if("object"==typeof f&&"function"==typeof f.now)t.unstable_now=function(){return f.now()};else{var m=d.now();t.unstable_now=function(){return d.now()-m}}var g=!1,y=null,_=-1,b=5,w=0;o=function(){return t.unstable_now()>=w},u=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing framerates higher than 125 fps is not unsupported"):b=0<e?Math.floor(1e3/e):5};var E=new MessageChannel,D=E.port2;E.port1.onmessage=function(){if(null!==y){var e=t.unstable_now();w=e+b;try{y(!0,e)?D.postMessage(null):(g=!1,y=null)}catch(e){throw D.postMessage(null),e}}else g=!1},n=function(e){y=e,g||(g=!0,D.postMessage(null))},r=function(e,n){_=p((function(){e(t.unstable_now())}),n)},i=function(){h(_),_=-1}}function S(e,t){var n=e.length;e.push(t);e:for(;;){var r=Math.floor((n-1)/2),i=e[r];if(!(void 0!==i&&0<T(i,t)))break e;e[r]=t,e[n]=i,n=r}}function C(e){return void 0===(e=e[0])?null:e}function k(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,i=e.length;r<i;){var o=2*(r+1)-1,u=e[o],a=o+1,l=e[a];if(void 0!==u&&0>T(u,n))void 0!==l&&0>T(l,u)?(e[r]=l,e[a]=n,r=a):(e[r]=u,e[o]=n,r=o);else{if(!(void 0!==l&&0>T(l,n)))break e;e[r]=l,e[a]=n,r=a}}}return t}return null}function T(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var x=[],A=[],O=1,P=null,I=3,N=!1,M=!1,R=!1;function F(e){for(var t=C(A);null!==t;){if(null===t.callback)k(A);else{if(!(t.startTime<=e))break;k(A),t.sortIndex=t.expirationTime,S(x,t)}t=C(A)}}function L(e){if(R=!1,F(e),!M)if(null!==C(x))M=!0,n(B);else{var t=C(A);null!==t&&r(L,t.startTime-e)}}function B(e,n){M=!1,R&&(R=!1,i()),N=!0;var u=I;try{for(F(n),P=C(x);null!==P&&(!(P.expirationTime>n)||e&&!o());){var a=P.callback;if(null!==a){P.callback=null,I=P.priorityLevel;var l=a(P.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?P.callback=l:P===C(x)&&k(x),F(n)}else k(x);P=C(x)}if(null!==P)var s=!0;else{var c=C(A);null!==c&&r(L,c.startTime-n),s=!1}return s}finally{P=null,I=u,N=!1}}function j(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var U=u;t.unstable_ImmediatePriority=1,t.unstable_UserBlockingPriority=2,t.unstable_NormalPriority=3,t.unstable_IdlePriority=5,t.unstable_LowPriority=4,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=I;I=e;try{return t()}finally{I=n}},t.unstable_next=function(e){switch(I){case 1:case 2:case 3:var t=3;break;default:t=I}var n=I;I=t;try{return e()}finally{I=n}},t.unstable_scheduleCallback=function(e,o,u){var a=t.unstable_now();if("object"==typeof u&&null!==u){var l=u.delay;l="number"==typeof l&&0<l?a+l:a,u="number"==typeof u.timeout?u.timeout:j(e)}else u=j(e),l=a;return e={id:O++,callback:o,priorityLevel:e,startTime:l,expirationTime:u=l+u,sortIndex:-1},l>a?(e.sortIndex=l,S(A,e),null===C(x)&&e===C(A)&&(R?i():R=!0,r(L,l-a))):(e.sortIndex=u,S(x,e),M||N||(M=!0,n(B))),e},t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_wrapCallback=function(e){var t=I;return function(){var n=I;I=t;try{return e.apply(this,arguments)}finally{I=n}}},t.unstable_getCurrentPriorityLevel=function(){return I},t.unstable_shouldYield=function(){var e=t.unstable_now();F(e);var n=C(x);return n!==P&&null!==P&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime<P.expirationTime||o()},t.unstable_requestPaint=U,t.unstable_continueExecution=function(){M||N||(M=!0,n(B))},t.unstable_pauseExecution=function(){},t.unstable_getFirstCallbackNode=function(){return C(x)},t.unstable_Profiling=null},7181:(e,t,n)=>{"use strict";e.exports=n(706)},6458:(e,t,n)=>{var r,i=n(2357),o=n(8082),u=n(8614);function a(){c&&(c=!1,o.forEach((function(e){try{process.removeListener(e,s[e])}catch(e){}})),process.emit=h,process.reallyExit=d,r.count-=1)}function l(e,t,n){r.emitted[e]||(r.emitted[e]=!0,r.emit(e,t,n))}"function"!=typeof u&&(u=u.EventEmitter),process.__sig
Line truncated
+return plugin;
+}
+};

.yarn/plugins/@yarnpkg/plugin-typescript.cjs

@@ -0,0 +1,8 @@
+/* eslint-disable */
+module.exports = {
+name: "@yarnpkg/plugin-typescript",
+factory: function (require) {
+var plugin;plugin=(()=>{var e={958:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>u});const s=require("@yarnpkg/core"),a=require("@yarnpkg/plugin-essentials"),o=require("semver");var n=r.n(o),i=r(410),c=r.n(i);const d=e=>{const t={async send(t){try{const r=await s.httpUtils.request(t.url,t.data||null,{configuration:e,headers:t.headers});return{content:r.body,isTimedOut:!1,status:r.statusCode}}catch(e){return{content:e.response.body,isTimedOut:!1,status:e.response.statusCode}}}};return c()("OFCNCOG2CU","e8e1bd300d860104bb8c58453ffa1eb4",{requester:t})},l=e=>e.scope?`${e.scope}__${e.name}`:""+e.name,u={hooks:{afterWorkspaceDependencyAddition:async(e,t,r,o)=>{if("types"===r.scope)return;const{project:i}=e,{configuration:c}=i,u=c.makeResolver(),p={project:i,resolver:u,report:new s.ThrowReport};if(!await(async(e,t)=>{var r;const a=s.structUtils.stringifyIdent(e),o=d(t).initIndex("npm-search");try{return"definitely-typed"===(null===(r=(await o.getObject(a,{attributesToRetrieve:["types"]})).types)||void 0===r?void 0:r.ts)}catch(e){return!1}})(r,c))return;const m=l(r);let h=s.structUtils.parseRange(r.range).selector;if(!n().validRange(h)){const e=await u.getCandidates(r,new Map,p);h=s.structUtils.parseRange(e[0].reference).selector}const y=n().coerce(h);if(null===y)return;const g=`${a.suggestUtils.Modifier.CARET}${y.major}`,b=s.structUtils.makeDescriptor(s.structUtils.makeIdent("types",m),g),f=s.miscUtils.mapAndFind(i.workspaces,e=>{var t,a;const o=null===(t=e.manifest.dependencies.get(r.identHash))||void 0===t?void 0:t.descriptorHash,n=null===(a=e.manifest.devDependencies.get(r.identHash))||void 0===a?void 0:a.descriptorHash;if(o!==r.descriptorHash&&n!==r.descriptorHash)return s.miscUtils.mapAndFind.skip;const i=[];for(const t of s.Manifest.allDependencies){const r=e.manifest[t].get(b.identHash);void 0!==r&&i.push([t,r])}return 0===i.length?s.miscUtils.mapAndFind.skip:i});if(void 0!==f)for(const[t,r]of f)e.manifest[t].set(r.identHash,r);else{try{if(0===(await u.getCandidates(b,new Map,p)).length)return}catch(e){return}e.manifest[a.suggestUtils.Target.DEVELOPMENT].set(b.identHash,b)}},afterWorkspaceDependencyRemoval:async(e,t,r)=>{if("types"===r.scope)return;const a=l(r),o=s.structUtils.makeIdent("types",a);for(const t of s.Manifest.allDependencies){void 0!==e.manifest[t].get(o.identHash)&&e.manifest[t].delete(o.identHash)}},beforeWorkspacePacking:(e,t)=>{t.publishConfig&&t.publishConfig.typings&&(t.typings=t.publishConfig.typings),t.publishConfig&&t.publishConfig.types&&(t.types=t.publishConfig.types)}}}},469:(e,t,r)=>{"use strict";function s(e){const t=[...e.caches],r=t.shift();return void 0===r?a():{get:(e,a,o={miss:()=>Promise.resolve()})=>r.get(e,a,o).catch(()=>s({caches:t}).get(e,a,o)),set:(e,a)=>r.set(e,a).catch(()=>s({caches:t}).set(e,a)),delete:e=>r.delete(e).catch(()=>s({caches:t}).delete(e)),clear:()=>r.clear().catch(()=>s({caches:t}).clear())}}function a(){return{get:(e,t,r={miss:()=>Promise.resolve()})=>t().then(e=>Promise.all([e,r.miss(e)])).then(([e])=>e),set:(e,t)=>Promise.resolve(t),delete:e=>Promise.resolve(),clear:()=>Promise.resolve()}}r.r(t),r.d(t,{createFallbackableCache:()=>s,createNullCache:()=>a})},712:(e,t,r)=>{"use strict";function s(e={serializable:!0}){let t={};return{get(r,s,a={miss:()=>Promise.resolve()}){const o=JSON.stringify(r);if(o in t)return Promise.resolve(e.serializable?JSON.parse(t[o]):t[o]);const n=s(),i=a&&a.miss||(()=>Promise.resolve());return n.then(e=>i(e)).then(()=>n)},set:(r,s)=>(t[JSON.stringify(r)]=e.serializable?JSON.stringify(s):s,Promise.resolve(s)),delete:e=>(delete t[JSON.stringify(e)],Promise.resolve()),clear:()=>(t={},Promise.resolve())}}r.r(t),r.d(t,{createInMemoryCache:()=>s})},223:(e,t,r)=>{"use strict";r.r(t),r.d(t,{addABTest:()=>i,createAnalyticsClient:()=>n,deleteABTest:()=>c,getABTest:()=>d,getABTests:()=>l,stopABTest:()=>u});var s=r(757),a=r(858),o=r(541);const n=e=>{const t=e.region||"us",r=(0,s.createAuth)(s.AuthMode.WithinHeaders,e.appId,e.apiKey),o=(0,a.createTransporter)({hosts:[{url:`analytics.${t}.algolia.com`}],...e,headers:{...r.headers(),"content-type":"application/json",...e.headers},queryParameters:{...r.queryParameters(),...e.queryParameters}}),n=e.appId;return(0,s.addMethods)({appId:n,transporter:o},e.methods)},i=e=>(t,r)=>e.transporter.write({method:o.N.Post,path:"2/abtests",data:t},r),c=e=>(t,r)=>e.transporter.write({method:o.N.Delete,path:(0,s.encode)("2/abtests/%s",t)},r),d=e=>(t,r)=>e.transporter.read({method:o.N.Get,path:(0,s.encode)("2/abtests/%s",t)},r),l=e=>t=>e.transporter.read({method:o.N.Get,path:"2/abtests"},t),u=e=>(t,r)=>e.transporter.write({method:o.N.Post,path:(0,s.encode)("2/abtests/%s/stop",t)},r)},757:(e,t,r)=>{"use strict";function s(e,t,r){const s={"x-algolia-api-key":r,"x-algolia-application-id":t};return{headers:()=>e===u.WithinHeaders?s:{},queryParameters:()=>e===u.WithinQueryParameters?s:{}}}function a(e){let t=0;const r=()=>(t++,new Promise(s=>{setTimeout(()=>{s(e(r))},Math.min(100*t,1e3))}));return e(r)}funcLine truncated
+return plugin;
+}
+};

.yarn/releases/yarn-2.4.2.cjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+module.exports=(()=>{var e={25545:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=25545,e.exports=t},44692:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>g});var A=r(54143);const n={optional:!0},o=[["@samverschueren/stream-to-observable@<0.3.1",{peerDependenciesMeta:{rxjs:n,zenObservable:n}}],["any-observable@<0.5.1",{peerDependenciesMeta:{rxjs:n,zenObservable:n}}],["@pm2/agent@<1.0.4",{dependencies:{debug:"*"}}],["debug@<4.2.0",{peerDependenciesMeta:{"supports-color":n}}],["got@<11",{dependencies:{"@types/responselike":"^1.0.0","@types/keyv":"^3.1.1"}}],["cacheable-lookup@<4.1.2",{dependencies:{"@types/keyv":"^3.1.1"}}],["http-link-dataloader@*",{peerDependencies:{graphql:"^0.13.1 || ^14.0.0"}}],["typescript-language-server@*",{dependencies:{"vscode-jsonrpc":"^5.0.1","vscode-languageserver-protocol":"^3.15.0"}}],["postcss-syntax@*",{peerDependenciesMeta:{"postcss-html":n,"postcss-jsx":n,"postcss-less":n,"postcss-markdown":n,"postcss-scss":n}}],["jss-plugin-rule-value-function@<=10.1.1",{dependencies:{"tiny-warning":"^1.0.2"}}],["ink-select-input@<4.1.0",{peerDependencies:{react:"^16.8.2"}}],["promise-inflight@*",{peerDependenciesMeta:{bluebird:n}}],["reactcss@*",{peerDependencies:{react:"*"}}],["react-color@<=2.19.0",{peerDependencies:{react:"*"}}],["gatsby-plugin-i18n@*",{dependencies:{ramda:"^0.24.1"}}],["useragent@^2.0.0",{dependencies:{request:"^2.88.0",yamlparser:"0.0.x",semver:"5.5.x"}}],["@apollographql/apollo-tools@*",{peerDependencies:{graphql:"^14.2.1 || ^15.0.0"}}],["material-table@^2.0.0",{dependencies:{"@babel/runtime":"^7.11.2"}}],["@babel/parser@*",{dependencies:{"@babel/types":"^7.8.3"}}],["fork-ts-checker-webpack-plugin@*",{peerDependencies:{eslint:">= 6",typescript:">= 2.7",webpack:">= 4"},peerDependenciesMeta:{eslint:n}}],["rc-animate@*",{peerDependencies:{react:"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"}}],["react-bootstrap-table2-paginator@*",{dependencies:{classnames:"^2.2.6"}}],["react-draggable@<=4.4.3",{peerDependencies:{react:">= 16.3.0","react-dom":">= 16.3.0"}}],["apollo-upload-client@<14",{peerDependencies:{graphql:"14 - 15"}}],["react-instantsearch-core@<=6.7.0",{peerDependencies:{algoliasearch:">= 3.1 < 5"}}],["react-instantsearch-dom@<=6.7.0",{dependencies:{"react-fast-compare":"^3.0.0"}}],["ws@<7.2.1",{peerDependencies:{bufferutil:"^4.0.1","utf-8-validate":"^5.0.2"},peerDependenciesMeta:{bufferutil:n,"utf-8-validate":n}}],["react-portal@*",{peerDependencies:{"react-dom":"^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"}}]];let i,s,a;const c=new Map([[A.makeIdent(null,"fsevents").identHash,function(){return void 0===i&&(i=r(78761).brotliDecompressSync(Buffer.from("G7weAByFTVk3Vs7UfHhq4yykgEM7pbW7TI43SG2S5tvGrwHBAzdz+s/npQ6tgEvobvxisrPIadkXeUAJotBn5bDZ5kAhcRqsIHe3F75Walet5hNalwgFDtxb0BiDUjiUQkjG0yW2hto9HPgiCkm316d6bC0kST72YN7D7rfkhCE9x4J0XwB0yavalxpUu2t9xszHrmtwalOxT7VslsxWcB1qpqZwERUra4psWhTV8BgwWeizurec82Caf1ABL11YMfbf8FJ9JBceZOkgmvrQPbC9DUldX/yMbmX06UQluCEjSwUoyO+EZPIjofr+/oAZUck2enraRD+oWLlnlYnj8xB+gwSo9lmmks4fXv574qSqcWA6z21uYkzMu3EWj+K23RxeQlLqiE35/rC8GcS4CGkKHKKq+zAIQwD9iRDNfiAqueLLpicFFrNsAI4zeTD/eO9MHcnRa5m8UT+M2+V+AkFST4BlKneiAQRSdST8KEAIyFlULt6wa9EBd0Ds28VmpaxquJdVt+nwdEs5xUskI13OVtFyY0UrQIRAlCuvvWivvlSKQfTO+2Q8OyUR1W5RvetaPz4jD27hdtwHFFA1Ptx6Ee/t2cY2rg2G46M1pNDRf2pWhvpy8pqMnuI3++4OF3+7OFIWXGjh+o7Nr2jNvbiYcQdQS1h903/jVFgOpA0yJ78z+x759bFA0rq+6aY5qPB4FzS3oYoLupDUhD9nDz6F6H7hpnlMf18KNKDu4IKjTWwrAnY6MFQw1W6ymOALHlFyCZmQhldg1MQHaMVVQTVgDC60TfaBqG++Y8PEoFhN/PBTZT175KNP/BlHDYGOOBmnBdzqJKplZ/ljiVG0ZBzfqeBRrrUkn6rA54462SgiliKoYVnbeptMdXNfAuaupIEi0bApF10TlgHfmEJAPUVidRVFyDupSem5po5vErPqWKhKbUIp0LozpYsIKK57dM/HKr+nguF+7924IIWMICkQ8JUigs9D+W+c4LnNoRtPPKNRUiCYmP+Jfo2lfKCKw8qpraEeWU3uiNRO6zcyKQoXPR5htmzzLznke7b4YbXW3I1lIRzmgG02Udb58U+7TpwyN7XymCgH+wuPDthZVQvRZuEP+SnLtMicz9m5zASWOBiAcLmkuFlTKuHspSIhCBD0yUPKcxu81A+4YD78rA2vtwsUEday9WNyrShyrl60rWmA+SmbYZkQOwFJWArxRYYc5jGhA5ikxYw1rx3ei4NmeX/lKiwpZ9Ln1tV2Ae7sArvxuVLbJjqJRjW1vFXAyHpvLG+8MJ6T2Ubx5M2KDa2SN6vuIGxJ9WQM9Mk3Q7aCNiZONXllhqq24DmoLbQfW2rYWsOgHWjtOmIQMyMKdiHZDjoyIq5+U700nZ6odJAoYXPQBvFNiQ78d5jaXliBqLTJEqUCwi+LiH2mx92EmNKDsJL74Z613+3lf20pxkV1+erOrjj8pW00vsPaahKUM+05ssd5uwM7K482KWEf3TCwlg/o3e5ngto7qSMz7YteIgCsF1UOcsLk7F7MxWbvrPMY473ew0G+noVL8EPbkmEMftMSeL6HFub/zy+2JQ==","base64")).toString()),i}],[A.makeIdent(null,"resolve").identHash,function(){return void 0===s&&(s=r(78761).brotliDecompressSync(Buffer.from("G1QTIIzURnVBnGa0VPvr81orV8AFIqdU0sqrdcVgCdukgAZwi8a50gLk9+19Z2NcUILjmzXkzt4dzm5a6Yoys+/9qnKiaApXukOiuoyUaMcynG4X7X4vBaIE/PL30gwG6HSGJkLxb9PnLjfMr+748n7sM6C/NycK6ber/bX1reVVxta6W/31tZIhfrS+upoE/TPRHj0S/l0T59gTGdtKOp1OmMOJt9rhfucDdLJ2tgyfnO+u4YMkQAcYq/nebTcDmbXhqhgo6iQA4M3m4xya4Cos3p6klmkmQT+S4DLDZfwfMF+sUCx36KleOtaHLQfEIz0Bmncj/Ngi3lqOl4391EWEfIss6gVp3oDUGwsSZJKeOVONJWZg+Mue3KUMV3aMqYJ+7b2219D+GFDi8EV5y/Y+5J+He0oNjKAgqLsJziEsS9uIaCu3BHBKSXxNKKa2ShbfglcWoiiVT2kfGI7Gw+YJ/Sqy1H6wdFWtyVUQIa82JPwbeV25YKLzc5ZIFM6GCPSA+J9dTvJbs5LuuKnLP3f09gCu2jxqsAv6CLine truncated
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function R(e,t,r,A){var n,o=arguments.length,i=o<3?t:null===A?A=Object.getOwnPropertyDescriptor(t,r):A;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,A);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i}M.Entries={};class x extends M{async execute(){this.context.stdout.write(this.cli.usage(null))}}R([M.Path("--help"),M.Path("-h")],x.prototype,"execute",null);class L extends M{async execute(){var e;this.context.stdout.write((null!==(e=this.cli.binaryVersion)&&void 0!==e?e:"<unknown>")+"\n")}}R([M.Path("--version"),M.Path("-v")],L.prototype,"execute",null);const P={bold:e=>`${e}`,error:e=>`${e}`,code:e=>`${e}`},O={bold:e=>e,error:e=>e,code:e=>e};function U(e,{format:t,paragraphs:r}){return e=(e=(e=(e=(e=e.replace(/\r\n?/g,"\n")).replace(/^[\t ]+|[\t ]+$/gm,"")).replace(/^\n+|\n+$/g,"")).replace(/^-([^\n]*?)\n+/gm,"-$1\n\n")).replace(/\n(\n)?\n*/g,"$1"),r&&(e=e.split(/\n/).map((function(e){let t=e.match(/^[*-][\t ]+(.*)/);return t?t[1].match(/(.{1,78})(?: |$)/g).map((e,t)=>(0===t?"- ":"  ")+e).join("\n"):e.match(/(.{1,80})(?: |$)/g).join("\n")})).join("\n\n")),(e=e.replace(/(`+)((?:.|[\n])*?)\1/g,(function(e,r,A){return t.code(r+A+r)})))?e+"\n":""}class T extends M{constructor(e){super(),this.contexts=e,this.commands=[]}static from(e,t){const r=new T(t);r.path=e.path;for(const t of e.options)switch(t.name){case"-c":r.commands.push(Number(t.value));break;case"-i":r.index=Number(t.value)}return r}async execute(){let e=this.commands;if(void 0!==this.index&&this.index>=0&&this.index<e.length&&(e=[e[this.index]]),0===e.length)this.context.stdout.write(this.cli.usage());else if(1===e.length)this.context.stdout.write(this.cli.usage(this.contexts[e[0]].commandClass,{detailed:!0}));else if(e.length>1){this.context.stdout.write("Multiple commands match your selection:\n"),this.context.stdout.write("\n");let e=0;for(const t of this.commands)this.context.stdout.write(this.cli.usage(this.contexts[t].commandClass,{prefix:(e+++". ").padStart(5)}));this.context.stdout.write("\n"),this.context.stdout.write("Run again with -h=<index> to see the longer details of any of those commands.\n")}}}function j(){return"0"!==process.env.FORCE_COLOR&&("1"===process.env.FORCE_COLOR||!(void 0===process.stdout||!process.stdout.isTTY))}class Y{constructor({binaryLabel:e,binaryName:t="...",binaryVersion:r,enableColors:A=j()}={}){this.registrations=new Map,this.builder=new N({binaryName:t}),this.binaryLabel=e,this.binaryName=t,this.binaryVersion=r,this.enableColors=A}static from(e,t={}){const r=new Y(t);for(const t of e)r.register(t);return r}register(e){const t=this.builder.command();this.registrations.set(e,t.cliIndex);const{definitions:r}=e.resolveMeta(e.prototype);for(const e of r)e(t);t.setContext({commandClass:e})}process(e){const{contexts:t,process:r}=this.builder.compile(),A=r(e);switch(A.selectedIndex){case-1:return T.from(A,t);default:{const{commandClass:e}=t[A.selectedIndex],r=this.registrations.get(e);if(void 0===r)throw new Error("Assertion failed: Expected the command class to have been registered.");const n=this.builder.getBuilderByIndex(r),o=new e;o.path=A.path;const{transformers:i}=e.resolveMeta(e.prototype);for(const e of i)e(A,o,n);return o}}}async run(e,t){let r,A;if(Array.isArray(e))try{r=this.process(e)}catch(e){return t.stdout.write(this.error(e)),1}else r=e;if(r.help)return t.stdout.write(this.usage(r,{detailed:!0})),0;r.context=t,r.cli={binaryLabel:this.binaryLabel,binaryName:this.binaryName,binaryVersion:this.binaryVersion,enableColors:this.enableColors,definitions:()=>this.definitions(),error:(e,t)=>this.error(e,t),process:e=>this.process(e),run:(e,r)=>this.run(e,Object.assign(Object.assign({},t),r)),usage:(e,t)=>this.usage(e,t)};try{A=await r.validateAndExecute().catch(e=>r.catch(e).then(()=>0))}catch(e){return t.stdout.write(this.error(e,{command:r})),1}return A}async runExit(e,t){process.exitCode=await this.run(e,t)}suggest(e,t){const{contexts:r,process:A,suggest:n}=this.builder.compile();return n(e,t)}definitions({colored:e=!1}={}){const t=[];for(const[r,A]of this.registrations){if(void 0===r.usage)continue;const{usage:n}=this.getUsageByIndex(A,{detailed:!1}),{usage:o,options:i}=this.getUsageByIndex(A,{detailed:!0,inlineOptions:!1}),s=void 0!==r.usage.category?U(r.usage.category,{format:this.format(e),paragraphs:!1}):void 0,a=void 0!==r.usage.description?U(r.usage.description,{format:this.format(e),paragraphs:!1}):void 0,c=void 0!==r.usage.details?U(r.usage.details,{format:this.format(e),paragraphs:!0}):void 0,g=void 0!==r.usage.examples?r.usage.examples.map(([t,r])=>[U(t,{format:this.format(e),paragraphs:!1}),r.replace(/\$0/g,this.binaryName)]):void 0;t.push({path:n,usage:o,category:s,description:a,details:c,examples:g,options:i})}return t}usage(e=null,{colored:t,detailed:r=!1,prefix:A="$ "}={}){const n=null!==e&&void 0===e.getMeta?e.constructor:e;let o="Line truncated
+/*!
+ * fill-range <https://github.com/jonschlinkert/fill-range>
+ *
+ * Copyright (c) 2014-present, Jon Schlinkert.
+ * Licensed under the MIT License.
+ */const A=r(31669),n=r(84615),o=e=>null!==e&&"object"==typeof e&&!Array.isArray(e),i=e=>"number"==typeof e||"string"==typeof e&&""!==e,s=e=>Number.isInteger(+e),a=e=>{let t=""+e,r=-1;if("-"===t[0]&&(t=t.slice(1)),"0"===t)return!1;for(;"0"===t[++r];);return r>0},c=(e,t,r)=>{if(t>0){let r="-"===e[0]?"-":"";r&&(e=e.slice(1)),e=r+e.padStart(r?t-1:t,"0")}return!1===r?String(e):e},g=(e,t)=>{let r="-"===e[0]?"-":"";for(r&&(e=e.slice(1),t--);e.length<t;)e="0"+e;return r?"-"+e:e},l=(e,t,r,A)=>{if(r)return n(e,t,{wrap:!1,...A});let o=String.fromCharCode(e);return e===t?o:`[${o}-${String.fromCharCode(t)}]`},u=(e,t,r)=>{if(Array.isArray(e)){let t=!0===r.wrap,A=r.capture?"":"?:";return t?`(${A}${e.join("|")})`:e.join("|")}return n(e,t,r)},h=(...e)=>new RangeError("Invalid range arguments: "+A.inspect(...e)),p=(e,t,r)=>{if(!0===r.strictRanges)throw h([e,t]);return[]},d=(e,t,r=1,A={})=>{let n=Number(e),o=Number(t);if(!Number.isInteger(n)||!Number.isInteger(o)){if(!0===A.strictRanges)throw h([e,t]);return[]}0===n&&(n=0),0===o&&(o=0);let i=n>o,s=String(e),p=String(t),d=String(r);r=Math.max(Math.abs(r),1);let C=a(s)||a(p)||a(d),f=C?Math.max(s.length,p.length,d.length):0,I=!1===C&&!1===((e,t,r)=>"string"==typeof e||"string"==typeof t||!0===r.stringify)(e,t,A),E=A.transform||(e=>t=>!0===e?Number(t):String(t))(I);if(A.toRegex&&1===r)return l(g(e,f),g(t,f),!0,A);let B={negatives:[],positives:[]},y=[],m=0;for(;i?n>=o:n<=o;)!0===A.toRegex&&r>1?B[(w=n)<0?"negatives":"positives"].push(Math.abs(w)):y.push(c(E(n,m),f,I)),n=i?n-r:n+r,m++;var w;return!0===A.toRegex?r>1?((e,t)=>{e.negatives.sort((e,t)=>e<t?-1:e>t?1:0),e.positives.sort((e,t)=>e<t?-1:e>t?1:0);let r,A=t.capture?"":"?:",n="",o="";return e.positives.length&&(n=e.positives.join("|")),e.negatives.length&&(o=`-(${A}${e.negatives.join("|")})`),r=n&&o?`${n}|${o}`:n||o,t.wrap?`(${A}${r})`:r})(B,A):u(y,null,{wrap:!1,...A}):y},C=(e,t,r,A={})=>{if(null==t&&i(e))return[e];if(!i(e)||!i(t))return p(e,t,A);if("function"==typeof r)return C(e,t,1,{transform:r});if(o(r))return C(e,t,0,r);let n={...A};return!0===n.capture&&(n.wrap=!0),r=r||n.step||1,s(r)?s(e)&&s(t)?d(e,t,r,n):((e,t,r=1,A={})=>{if(!s(e)&&e.length>1||!s(t)&&t.length>1)return p(e,t,A);let n=A.transform||(e=>String.fromCharCode(e)),o=(""+e).charCodeAt(0),i=(""+t).charCodeAt(0),a=o>i,c=Math.min(o,i),g=Math.max(o,i);if(A.toRegex&&1===r)return l(c,g,!1,A);let h=[],d=0;for(;a?o>=i:o<=i;)h.push(n(o,d)),o=a?o-r:o+r,d++;return!0===A.toRegex?u(h,null,{wrap:!1,options:A}):h})(e,t,Math.max(Math.abs(r),1),n):null==r||o(r)?C(e,t,1,r):((e,t)=>{if(!0===t.strictRanges)throw new TypeError(`Expected step "${e}" to be a number`);return[]})(r,n)};e.exports=C},50683:e=>{e.exports=function(e){return[...e].reduce((e,[t,r])=>(e[t]=r,e),{})}},13302:(e,t,r)=>{e.exports=r(35747).constants||r(27619)},72137:(e,t,r)=>{"use strict";const{PassThrough:A}=r(92413);e.exports=e=>{e={...e};const{array:t}=e;let{encoding:r}=e;const n="buffer"===r;let o=!1;t?o=!(r||n):r=r||"utf8",n&&(r=null);const i=new A({objectMode:o});r&&i.setEncoding(r);let s=0;const a=[];return i.on("data",e=>{a.push(e),o?s=a.length:s+=e.length}),i.getBufferedValue=()=>t?a:n?Buffer.concat(a,s):a.join(""),i.getBufferedLength=()=>s,i}},58764:(e,t,r)=>{"use strict";const A=r(50372),n=r(72137);class o extends Error{constructor(){super("maxBuffer exceeded"),this.name="MaxBufferError"}}async function i(e,t){if(!e)return Promise.reject(new Error("Expected a stream"));t={maxBuffer:1/0,...t};const{maxBuffer:r}=t;let i;return await new Promise((s,a)=>{const c=e=>{e&&(e.bufferedData=i.getBufferedValue()),a(e)};i=A(e,n(t),e=>{e?c(e):s()}),i.on("data",()=>{i.getBufferedLength()>r&&c(new o)})}),i.getBufferedValue()}e.exports=i,e.exports.default=i,e.exports.buffer=(e,t)=>i(e,{...t,encoding:"buffer"}),e.exports.array=(e,t)=>i(e,{...t,array:!0}),e.exports.MaxBufferError=o},97098:(e,t,r)=>{"use strict";var A=r(18193),n=r(85622).posix.dirname,o="win32"===r(12087).platform(),i=/\\/g,s=/[\{\[].*[\/]*.*[\}\]]$/,a=/(^|[^\\])([\{\[]|\([^\)]+$)/,c=/\\([\*\?\|\[\]\(\)\{\}])/g;e.exports=function(e,t){Object.assign({flipBackslashes:!0},t).flipBackslashes&&o&&e.indexOf("/")<0&&(e=e.replace(i,"/")),s.test(e)&&(e+="/"),e+="a";do{e=n(e)}while(A(e)||a.test(e));return e.replace(c,"$1")}},90734:(e,t,r)=>{"use strict";const{promisify:A}=r(31669),n=r(35747),o=r(85622),i=r(19347),s=r(46458),a=r(17234),c=["**/node_modules/**","**/flow-typed/**","**/coverage/**","**/.git"],g=A(n.readFile),l=(e,t)=>{const r=a(o.relative(t.cwd,o.dirname(t.fileName)));return e.split(/\r?\n/).filter(Boolean).filter(e=>!e.startsWith("#")).map((e=>t=>t.startsWith("!")?"!"+o.posix.join(e,t.slice(1)):o.posix.join(e,t))(r))},u=e=>e.reduce((e,t)=>(e.add(l(t.content,{cwd:t.cwd,fileName:t.filePath})),e),s()),h=(e,t)=>r=>e.ignores(a(o.relative(t,((e,t)=>{if(e=a(e),o.isAbsolute(t)){if(t.startsWith(e))return t;throw new Error(`Path ${t} is not in cwd ${e}`)}return o.join(e,t)})(t,r)))),p=({ignore:e=[],cwd:t=a(process.cwd())}={})=>({ignore:e,cwd:t});e.exports=async Line truncated
+/*!
+ * is-extglob <https://github.com/jonschlinkert/is-extglob>
+ *
+ * Copyright (c) 2014-2016, Jon Schlinkert.
+ * Licensed under the MIT License.
+ */
+e.exports=function(e){if("string"!=typeof e||""===e)return!1;for(var t;t=/(\\).|([@?!+*]\(.*\))/g.exec(e);){if(t[2])return!0;e=e.slice(t.index+t[0].length)}return!1}},18193:(e,t,r)=>{
+/*!
+ * is-glob <https://github.com/jonschlinkert/is-glob>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+var A=r(44486),n={"{":"}","(":")","[":"]"},o=/\\(.)|(^!|\*|[\].+)]\?|\[[^\\\]]+\]|\{[^\\}]+\}|\(\?[:!=][^\\)]+\)|\([^|]+\|[^\\)]+\))/,i=/\\(.)|(^!|[*?{}()[\]]|\(\?)/;e.exports=function(e,t){if("string"!=typeof e||""===e)return!1;if(A(e))return!0;var r,s=o;for(t&&!1===t.strict&&(s=i);r=s.exec(e);){if(r[2])return!0;var a=r.index+r[0].length,c=r[1],g=c?n[c]:null;if(c&&g){var l=e.indexOf(g,a);-1!==l&&(a=l+1)}e=e.slice(a)}return!1}},59235:e=>{"use strict";
+/*!
+ * is-number <https://github.com/jonschlinkert/is-number>
+ *
+ * Copyright (c) 2014-present, Jon Schlinkert.
+ * Released under the MIT License.
+ */e.exports=function(e){return"number"==typeof e?e-e==0:"string"==typeof e&&""!==e.trim()&&(Number.isFinite?Number.isFinite(+e):isFinite(+e))}},97369:(e,t)=>{var r,A,n,o;
+/*!
+ * is-windows <https://github.com/jonschlinkert/is-windows>
+ *
+ * Copyright © 2015-2018, Jon Schlinkert.
+ * Released under the MIT License.
+ */o=function(){"use strict";return function(){return process&&("win32"===process.platform||/^(msys|cygwin)$/.test(process.env.OSTYPE))}},t&&"object"==typeof t?e.exports=o():(A=[],void 0===(n="function"==typeof(r=o)?r.apply(t,A):r)||(e.exports=n))},64151:(e,t,r)=>{var A;r(35747);function n(e,t,r){if("function"==typeof t&&(r=t,t={}),!r){if("function"!=typeof Promise)throw new TypeError("callback not provided");return new Promise((function(r,A){n(e,t||{},(function(e,t){e?A(e):r(t)}))}))}A(e,t||{},(function(e,A){e&&("EACCES"===e.code||t&&t.ignoreErrors)&&(e=null,A=!1),r(e,A)}))}A="win32"===process.platform||global.TESTING_WINDOWS?r(3202):r(2151),e.exports=n,n.sync=function(e,t){try{return A.sync(e,t||{})}catch(e){if(t&&t.ignoreErrors||"EACCES"===e.code)return!1;throw e}}},2151:(e,t,r)=>{e.exports=n,n.sync=function(e,t){return o(A.statSync(e),t)};var A=r(35747);function n(e,t,r){A.stat(e,(function(e,A){r(e,!e&&o(A,t))}))}function o(e,t){return e.isFile()&&function(e,t){var r=e.mode,A=e.uid,n=e.gid,o=void 0!==t.uid?t.uid:process.getuid&&process.getuid(),i=void 0!==t.gid?t.gid:process.getgid&&process.getgid(),s=parseInt("100",8),a=parseInt("010",8),c=parseInt("001",8),g=s|a;return r&c||r&a&&n===i||r&s&&A===o||r&g&&0===o}(e,t)}},3202:(e,t,r)=>{e.exports=o,o.sync=function(e,t){return n(A.statSync(e),e,t)};var A=r(35747);function n(e,t,r){return!(!e.isSymbolicLink()&&!e.isFile())&&function(e,t){var r=void 0!==t.pathExt?t.pathExt:process.env.PATHEXT;if(!r)return!0;if(-1!==(r=r.split(";")).indexOf(""))return!0;for(var A=0;A<r.length;A++){var n=r[A].toLowerCase();if(n&&e.substr(-n.length).toLowerCase()===n)return!0}return!1}(t,r)}function o(e,t,r){A.stat(e,(function(A,o){r(A,!A&&n(o,e,t))}))}},21194:(e,t,r)=>{"use strict";var A=r(40744);e.exports=A},40744:(e,t,r)=>{"use strict";var A=r(55384),n=r(24129);function o(e){return function(){throw new Error("Function "+e+" is deprecated and cannot be used.")}}e.exports.Type=r(81704),e.exports.Schema=r(8212),e.exports.FAILSAFE_SCHEMA=r(44413),e.exports.JSON_SCHEMA=r(45247),e.exports.CORE_SCHEMA=r(8769),e.exports.DEFAULT_SAFE_SCHEMA=r(65483),e.exports.DEFAULT_FULL_SCHEMA=r(5235),e.exports.load=A.load,e.exports.loadAll=A.loadAll,e.exports.safeLoad=A.safeLoad,e.exports.safeLoadAll=A.safeLoadAll,e.exports.dump=n.dump,e.exports.safeDump=n.safeDump,e.exports.YAMLException=r(17345),e.exports.MINIMAL_SCHEMA=r(44413),e.exports.SAFE_SCHEMA=r(65483),e.exports.DEFAULT_SCHEMA=r(5235),e.exports.scan=o("scan"),e.exports.parse=o("parse"),e.exports.compose=o("compose"),e.exports.addConstructor=o("addConstructor")},28149:e=>{"use strict";function t(e){return null==e}e.exports.isNothing=t,e.exports.isObject=function(e){return"object"==typeof e&&null!==e},e.exports.toArray=function(e){return Array.isArray(e)?e:t(e)?[]:[e]},e.exports.repeat=function(e,t){var r,A="";for(r=0;r<t;r+=1)A+=e;return A},e.exports.isNegativeZero=function(e){return 0===e&&Number.NEGATIVE_INFINITY===1/e},e.exports.extend=function(e,t){var r,A,n,o;if(t)for(r=0,A=(o=Object.keys(t)).length;r<A;r+=1)e[n=o[r]]=t[n];return e}},24129:(e,t,r)=>{"use strict";var A=r(28149),n=r(17345),o=r(5235),i=r(65483),s=Object.prototype.toString,a=Object.prototype.hasOwnProperty,c={0:"\\0",7:"\\a",8:"\\b",9:"\\t",10:"\\n",11:"\\v",12:"\\f",13:"\\r",27:"\\e",34:'\\"',92:"\\\\",133:"\\N",160:"\\_",8232:"\\L",8233:"\\P"},g=["y","Y","yes","Yes","YES","on","On","ON","n","N","no","No","NO","off","Off","OFF"];function l(e){var t,r,o;if(t=e.toString(16).toUpperCase(),e<=255)r="x",o=2;else if(e<=65535)r="u",o=4;else{if(!(e<=4294967295))throw new n("code point within a string may not be greater than 0xFFFFFFFF");r="U",o=8}return"\\"+r+A.repeat("0",o-t.length)+t}function u(e){this.schema=e.schema||o,this.indent=Math.max(1,e.indent||2),this.noArrayIndent=e.noArrayIndent||!1,this.skipInvalid=e.skipInvalid||!1,this.flowLevel=A.isNothing(e.flowLevel)?-1:e.flowLevel,this.styleMap=function(e,t){var r,A,n,o,i,s,c;if(null===t)return{};for(r={},n=0,o=(A=Object.keys(t)).length;n<o;n+=1)i=A[n],s=String(t[i]),"!!"===i.slice(0,2)&&(i="tag:yaml.org,2002:"+i.slice(2)),(c=e.compiledTypeMap.fallback[i])&&a.call(c.styleAliases,s)&&(s=c.styleAliases[s]),r[i]=s;return r}(this.schema,e.styles||null),this.sortKeys=e.sortKeys||!1,this.lineWidth=e.lineWidth||80,this.noRefs=e.noRefs||!1,this.noCompatMode=e.noCompatMode||!1,this.condenseFlow=e.condenseFlow||!1,this.implicitTypes=this.schema.compiledImplicit,this.explicitTypes=this.schema.compiledExplicit,this.tag=null,this.result="",this.duplicates=[],this.usedDuplicates=null}function h(e,t){for(var r,n=A.repeat(" ",t),o=0,i=-1,s="",a=e.length;o<a;)-1===(i=e.indexOf("\n",o))?(r=e.slice(o),o=a):(r=e.slice(o,i+1),o=i+1),r.length&&"\n"!==r&&(s+=n),s+=r;return s}function p(e,t){return"\n"+A.repeat(" ",e.indent*t)}function d(e){return 32===e||9===e}function C(e){return 32<=e&&e<=126||161<=e&&e<=55295&&8232!==e&&8233!==e||57344<=e&&e<=65533&&65279!==e||65536<=e&&e<=1114111}function f(e){return C(e)&&65279!==e&&44!==e&&91!==e&&93!==e&&123Line truncated
+/*!
+ * to-regex-range <https://github.com/micromatch/to-regex-range>
+ *
+ * Copyright (c) 2015-present, Jon Schlinkert.
+ * Released under the MIT License.
+ */const A=r(59235),n=(e,t,r)=>{if(!1===A(e))throw new TypeError("toRegexRange: expected the first argument to be a number");if(void 0===t||e===t)return String(e);if(!1===A(t))throw new TypeError("toRegexRange: expected the second argument to be a number.");let o={relaxZeros:!0,...r};"boolean"==typeof o.strictZeros&&(o.relaxZeros=!1===o.strictZeros);let a=e+":"+t+"="+String(o.relaxZeros)+String(o.shorthand)+String(o.capture)+String(o.wrap);if(n.cache.hasOwnProperty(a))return n.cache[a].result;let c=Math.min(e,t),g=Math.max(e,t);if(1===Math.abs(c-g)){let r=e+"|"+t;return o.capture?`(${r})`:!1===o.wrap?r:`(?:${r})`}let l=p(e)||p(t),u={min:e,max:t,a:c,b:g},h=[],d=[];if(l&&(u.isPadded=l,u.maxLen=String(u.max).length),c<0){d=i(g<0?Math.abs(g):1,Math.abs(c),u,o),c=u.a=0}return g>=0&&(h=i(c,g,u,o)),u.negatives=d,u.positives=h,u.result=function(e,t,r){let A=s(e,t,"-",!1,r)||[],n=s(t,e,"",!1,r)||[],o=s(e,t,"-?",!0,r)||[];return A.concat(o).concat(n).join("|")}(d,h,o),!0===o.capture?u.result=`(${u.result})`:!1!==o.wrap&&h.length+d.length>1&&(u.result=`(?:${u.result})`),n.cache[a]=u,u.result};function o(e,t,r){if(e===t)return{pattern:e,count:[],digits:0};let A=function(e,t){let r=[];for(let A=0;A<e.length;A++)r.push([e[A],t[A]]);return r}(e,t),n=A.length,o="",i=0;for(let e=0;e<n;e++){let[t,n]=A[e];t===n?o+=t:"0"!==t||"9"!==n?o+=h(t,n,r):i++}return i&&(o+=!0===r.shorthand?"\\d":"[0-9]"),{pattern:o,count:[i],digits:n}}function i(e,t,r,A){let n,i=function(e,t){let r=1,A=1,n=g(e,r),o=new Set([t]);for(;e<=n&&n<=t;)o.add(n),r+=1,n=g(e,r);for(n=l(t+1,A)-1;e<n&&n<=t;)o.add(n),A+=1,n=l(t+1,A)-1;return o=[...o],o.sort(a),o}(e,t),s=[],c=e;for(let e=0;e<i.length;e++){let t=i[e],a=o(String(c),String(t),A),g="";r.isPadded||!n||n.pattern!==a.pattern?(r.isPadded&&(g=d(t,r,A)),a.string=g+a.pattern+u(a.count),s.push(a),c=t+1,n=a):(n.count.length>1&&n.count.pop(),n.count.push(a.count[0]),n.string=n.pattern+u(n.count),c=t+1)}return s}function s(e,t,r,A,n){let o=[];for(let n of e){let{string:e}=n;A||c(t,"string",e)||o.push(r+e),A&&c(t,"string",e)&&o.push(r+e)}return o}function a(e,t){return e>t?1:t>e?-1:0}function c(e,t,r){return e.some(e=>e[t]===r)}function g(e,t){return Number(String(e).slice(0,-t)+"9".repeat(t))}function l(e,t){return e-e%Math.pow(10,t)}function u(e){let[t=0,r=""]=e;return r||t>1?`{${t+(r?","+r:"")}}`:""}function h(e,t,r){return`[${e}${t-e==1?"":"-"}${t}]`}function p(e){return/^-?(0+)\d/.test(e)}function d(e,t,r){if(!t.isPadded)return e;let A=Math.abs(t.maxLen-String(e).length),n=!1!==r.relaxZeros;switch(A){case 0:return"";case 1:return n?"0?":"0";case 2:return n?"0{0,2}":"00";default:return n?`0{0,${A}}`:`0{${A}}`}}n.cache={},n.clearCache=()=>n.cache={},e.exports=n},75158:e=>{function t(e,t){var r=e.length,A=new Array(r),n={},o=r,i=function(e){for(var t=new Map,r=0,A=e.length;r<A;r++){var n=e[r];t.has(n[0])||t.set(n[0],new Set),t.has(n[1])||t.set(n[1],new Set),t.get(n[0]).add(n[1])}return t}(t),s=function(e){for(var t=new Map,r=0,A=e.length;r<A;r++)t.set(e[r],r);return t}(e);for(t.forEach((function(e){if(!s.has(e[0])||!s.has(e[1]))throw new Error("Unknown node. There is an unknown node in the supplied edges.")}));o--;)n[o]||a(e[o],o,new Set);return A;function a(e,t,o){if(o.has(e)){var c;try{c=", node was:"+JSON.stringify(e)}catch(e){c=""}throw new Error("Cyclic dependency"+c)}if(!s.has(e))throw new Error("Found unknown node. Make sure to provided all involved nodes. Unknown node: "+JSON.stringify(e));if(!n[t]){n[t]=!0;var g=i.get(e)||new Set;if(t=(g=Array.from(g)).length){o.add(e);do{var l=g[--t];a(l,s.get(l),o)}while(t);o.delete(e)}A[--r]=e}}}e.exports=function(e){return t(function(e){for(var t=new Set,r=0,A=e.length;r<A;r++){var n=e[r];t.add(n[0]),t.add(n[1])}return Array.from(t)}(e),e)},e.exports.array=t},94682:function(e){e.exports=function(){function e(t,r,A,n,o,i,s){var a,c,g="",l=0,u=n.slice(0);if(u.push([r,A])&&n.length>0&&(n.forEach((function(e,t){t>0&&(g+=(e[1]?" ":"│")+"  "),c||e[0]!==r||(c=!0)})),g+=function(e,t){var r=t?"└":"├";return r+=e?"─ ":"──┐"}(t,A)+t,o&&("object"!=typeof r||r instanceof Date)&&(g+=": "+r),c&&(g+=" (circular ref.)"),s(g)),!c&&"object"==typeof r){var h=function(e,t){var r=[];for(var A in e)e.hasOwnProperty(A)&&(t&&"function"==typeof e[A]||r.push(A));return r}(r,i);h.forEach((function(t){a=++l===h.length,e(t,r[t],a,u,o,i,s)}))}}var t={asLines:function(t,r,A,n){e(".",t,!1,[],r,"function"!=typeof A&&A,n||A)},asTree:function(t,r,A){var n="";return e(".",t,!1,[],r,A,(function(e){n+=e+"\n"})),n}};return t}()},36370:(e,t,r)=>{"use strict";r.d(t,{gn:()=>A});function A(e,t,r,A){var n,o=arguments.length,i=o<3?t:null===A?A=Object.getOwnPropertyDescriptor(t,r):A;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,A);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(o<3?n(i):o>3?n(t,r,i):n(t,r))||i);return o>3&&i&&Object.defineProperty(t,r,i),i}},98161:(e,t,r)=>{e.exports=r(69876)},69876:(e,t,r)=>{"use strict";r(11631);var A,n=r(4016),o=r(98605Line truncated

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

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

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+
+// Currently only supports CommonJS modules, as require is synchronous. `import` would need babel running asynchronous.
+module.exports = function inlineConstants(babel, options, cwd) {
+  const t = babel.types;
+
+  if (!Array.isArray(options.modules)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected a `modules` array to be passed"
+    );
+  }
+
+  if (options.resolveExtensions && !Array.isArray(options.resolveExtensions)) {
+    throw new TypeError(
+      "babel-plugin-inline-constants: expected `resolveExtensions` to be an array"
+    );
+  }
+
+  const ignoreModuleNotFound = options.ignoreModuleNotFound;
+  const resolveExtensions = options.resolveExtensions;
+
+  const hasRelativeModules = options.modules.some(
+    (module) => module.startsWith(".") || module.startsWith("/")
+  );
+
+  const modules = Object.fromEntries(
+    options.modules.map((module) => {
+      const absolute = module.startsWith(".")
+        ? require.resolve(module, { paths: [cwd] })
+        : module;
+      // eslint-disable-next-line import/no-dynamic-require
+      return [absolute, require(absolute)];
+    })
+  );
+
+  const toLiteral = (value) => {
+    if (typeof value === "string") {
+      return t.stringLiteral(value);
+    }
+
+    if (typeof value === "number") {
+      return t.numericLiteral(value);
+    }
+
+    if (typeof value === "boolean") {
+      return t.booleanLiteral(value);
+    }
+
+    if (value === null) {
+      return t.nullLiteral();
+    }
+
+    throw new Error(
+      "babel-plugin-inline-constants: cannot handle non-literal `" + value + "`"
+    );
+  };
+
+  const resolveAbsolute = (value, state, resolveExtensionIndex) => {
+    if (!state.filename) {
+      throw new TypeError(
+        "babel-plugin-inline-constants: expected a `filename` to be set for files"
+      );
+    }
+
+    if (resolveExtensions && resolveExtensionIndex !== undefined) {
+      value += resolveExtensions[resolveExtensionIndex];
+    }
+
+    try {
+      return require.resolve(value, { paths: [path.dirname(state.filename)] });
+    } catch (error) {
+      if (
+        error.code === "MODULE_NOT_FOUND" &&
+        resolveExtensions &&
+        (resolveExtensionIndex === undefined ||
+          resolveExtensionIndex < resolveExtensions.length - 1)
+      ) {
+        const resolveExtensionIdx = (resolveExtensionIndex || -1) + 1;
+        return resolveAbsolute(value, state, resolveExtensionIdx);
+      }
+
+      if (error.code === "MODULE_NOT_FOUND" && ignoreModuleNotFound) {
+        return undefined;
+      }
+      throw error;
+    }
+  };
+
+  const importDeclaration = (p, state) => {
+    if (p.node.type !== "ImportDeclaration") {
+      return;
+    }
+    const absolute =
+      hasRelativeModules && p.node.source.value.startsWith(".")
+        ? resolveAbsolute(p.node.source.value, state)
+        : p.node.source.value;
+
+    if (!absolute || !(absolute in modules)) {
+      return;
+    }
+
+    const module = modules[absolute];
+
+    for (const specifier of p.node.specifiers) {
+      if (
+        specifier.type === "ImportDefaultSpecifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!("default" in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access default export from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module.default);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else if (
+        specifier.type === "ImportSpecifier" &&
+        specifier.imported &&
+        specifier.imported.type === "Identifier" &&
+        specifier.local &&
+        specifier.local.type === "Identifier"
+      ) {
+        if (!(specifier.imported.name in module)) {
+          throw new Error(
+            "babel-plugin-inline-constants: cannot access `" +
+              specifier.imported.name +
+              "` from `" +
+              p.node.source.value +
+              "`"
+          );
+        }
+
+        const variableValue = toLiteral(module[specifier.imported.name]);
+        const variable = t.variableDeclarator(
+          t.identifier(specifier.local.name),
+          variableValue
+        );
+
+        p.insertBefore({
+          type: "VariableDeclaration",
+          kind: "const",
+          declarations: [variable],
+        });
+      } else {
+        throw new Error("Cannot handle specifier `" + specifier.type + "`");
+      }
+    }
+    p.remove();
+  };
+
+  return {
+    visitor: {
+      ImportDeclaration: importDeclaration,
+    },
+  };
+};

build-scripts/bundle.js

@@ -1,11 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
 
 // Files from NPM Packages that should not be imported
 module.exports.ignorePackages = ({ latestBuild }) => [
-  // Bloats bundle and it's not used.
-  path.resolve(require.resolve("moment"), "../locale"),
   // Part of yaml.js and only used for !!js functions that we don't use
   require.resolve("esprima"),
 ];
@@ -19,7 +18,8 @@ module.exports.emptyPackages = ({ latestBuild }) =>
     require.resolve("@polymer/paper-styles/default-theme.js"),
     // Loads stuff from a CDN
     require.resolve("@polymer/font-roboto/roboto.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Compatibility not needed for latest builds
     latestBuild &&
       // wrapped in require.resolve so it blows up if file no longer exists
@@ -51,17 +51,29 @@ module.exports.terserOptions = (latestBuild) => ({
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
     !latestBuild && [
-      require("@babel/preset-env").default,
+      "@babel/preset-env",
       {
         useBuiltIns: "entry",
-        corejs: "3.6",
+        corejs: "3.15",
+        bugfixes: true,
       },
     ],
-    require("@babel/preset-typescript").default,
+    "@babel/preset-typescript",
   ].filter(Boolean),
   plugins: [
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/inline-constants-plugin.js"
+      ),
+      {
+        modules: ["@mdi/js"],
+        ignoreModuleNotFound: true,
+      },
+    ],
     // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
     !latestBuild && [
       "@babel/plugin-proposal-object-rest-spread",
@@ -72,23 +84,18 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      require("@babel/plugin-proposal-decorators").default,
-      { decoratorsBeforeExport: true },
-    ],
-    [
-      require("@babel/plugin-proposal-class-properties").default,
-      { loose: true },
-    ],
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
   ].filter(Boolean),
+  exclude: [
+    // \\ for Windows, / for Mac OS and Linux
+    /node_modules[\\/]core-js/,
+    /node_modules[\\/]webpack[\\/]buildin/,
+  ],
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 

build-scripts/env.js

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

build-scripts/gulp/app.js

@@ -47,8 +47,8 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
-    ...// Don't compress running tests
-    (env.isTest() ? [] : ["compress-app"]),
+    // Don't compress running tests
+    ...(env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/clean.js

@@ -5,32 +5,32 @@ require("./translations");
 
 gulp.task(
   "clean",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.app_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.app_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-demo",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.demo_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.demo_output_root, paths.build_dir])
+  )
 );
 
 gulp.task(
   "clean-cast",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.cast_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.cast_output_root, paths.build_dir])
+  )
 );
 
-gulp.task("clean-hassio", function cleanOutputAndBuildDir() {
-  return del([paths.hassio_output_root, paths.build_dir]);
-});
+gulp.task("clean-hassio", () =>
+  del([paths.hassio_output_root, paths.build_dir])
+);
 
 gulp.task(
   "clean-gallery",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([paths.gallery_output_root, paths.build_dir]);
-  })
+  gulp.parallel("clean-translations", () =>
+    del([paths.gallery_output_root, paths.build_dir])
+  )
 );

build-scripts/gulp/entry-html.js

@@ -302,15 +302,23 @@ gulp.task("gen-index-hassio-prod", async () => {
 
 function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
   fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
   fs.writeFileSync(
     path.resolve(paths.hassio_output_root, "entrypoint.js"),
     `
-try {
-  new Function("import('${latestEntrypoint}')")();
-} catch (err) {
+function loadES5() {
   var el = document.createElement('script');
   el.src = '${es5Entrypoint}';
   document.body.appendChild(el);
+}
+if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
+    loadES5();
+} else {
+  try {
+    new Function("import('${latestEntrypoint}')")();
+  } catch (err) {
+    loadES5();
+  }
 }
   `,
     { encoding: "utf-8" }

build-scripts/gulp/gather-static.js

@@ -2,7 +2,6 @@
 
 const gulp = require("gulp");
 const path = require("path");
-const cpx = require("cpx");
 const fs = require("fs-extra");
 const paths = require("../paths");
 
@@ -13,8 +12,10 @@ const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
 
-const genStaticPath = (staticDir) => (...parts) =>
-  path.resolve(staticDir, ...parts);
+const genStaticPath =
+  (staticDir) =>
+  (...parts) =>
+    path.resolve(staticDir, ...parts);
 
 function copyTranslations(staticDir) {
   const staticPath = genStaticPath(staticDir);
@@ -62,9 +63,12 @@ function copyLoaderJS(staticDir) {
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
-  cpx.copySync(
-    npmPath("roboto-fontface/fonts/roboto/*.woff2"),
-    staticPath("fonts/roboto")
+  fs.copySync(
+    npmPath("roboto-fontface/fonts/roboto/"),
+    staticPath("fonts/roboto/"),
+    {
+      filter: (src) => !src.includes(".") || src.endsWith(".woff2"),
+    }
   );
 }
 

build-scripts/gulp/translations.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const crypto = require("crypto");
 const del = require("del");
 const path = require("path");
@@ -26,13 +28,6 @@ gulp.task("translations-enable-merge-backend", (done) => {
   done();
 });
 
-String.prototype.rsplit = function (sep, maxsplit) {
-  var split = this.split(sep);
-  return maxsplit
-    ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
-    : split;
-};
-
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
   require("../../src/translations/en.json").ui.panel
@@ -40,7 +35,7 @@ const TRANSLATION_FRAGMENTS = Object.keys(
 
 function recursiveFlatten(prefix, data) {
   let output = {};
-  Object.keys(data).forEach(function (key) {
+  Object.keys(data).forEach((key) => {
     if (typeof data[key] === "object") {
       output = {
         ...output,
@@ -101,15 +96,19 @@ function lokaliseTransform(data, original, file) {
     if (value instanceof Object) {
       output[key] = lokaliseTransform(value, original, file);
     } else {
-      output[key] = value.replace(re_key_reference, (match, key) => {
-        const replace = key.split("::").reduce((tr, k) => {
+      output[key] = value.replace(re_key_reference, (_match, lokalise_key) => {
+        const replace = lokalise_key.split("::").reduce((tr, k) => {
           if (!tr) {
-            throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+            throw Error(
+              `Invalid key placeholder ${lokalise_key} in ${file.path}`
+            );
           }
           return tr[k];
         }, original);
         if (typeof replace !== "string") {
-          throw Error(`Invalid key placeholder ${key} in ${file.path}`);
+          throw Error(
+            `Invalid key placeholder ${lokalise_key} in ${file.path}`
+          );
         }
         return replace;
       });
@@ -118,9 +117,7 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", function () {
-  return del([workDir]);
-});
+gulp.task("clean-translations", () => del([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
@@ -129,7 +126,7 @@ gulp.task("ensure-translations-build-dir", (done) => {
   done();
 });
 
-gulp.task("create-test-metadata", function (cb) {
+gulp.task("create-test-metadata", (cb) => {
   fs.writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
@@ -143,17 +140,13 @@ gulp.task("create-test-metadata", function (cb) {
 
 gulp.task(
   "create-test-translation",
-  gulp.series("create-test-metadata", function createTestTranslation() {
-    return gulp
+  gulp.series("create-test-metadata", () =>
+    gulp
       .src(path.join(paths.translations_src, "en.json"))
-      .pipe(
-        transform(function (data, file) {
-          return recursiveEmpty(data);
-        })
-      )
+      .pipe(transform((data, _file) => recursiveEmpty(data)))
       .pipe(rename("test.json"))
-      .pipe(gulp.dest(workDir));
-  })
+      .pipe(gulp.dest(workDir))
+  )
 );
 
 /**
@@ -165,7 +158,7 @@ gulp.task(
  * project is buildable immediately after merging new translation keys, since
  * the Lokalise update to translations/en.json will not happen immediately.
  */
-gulp.task("build-master-translation", function () {
+gulp.task("build-master-translation", () => {
   const src = [path.join(paths.translations_src, "en.json")];
 
   if (mergeBackend) {
@@ -174,11 +167,7 @@ gulp.task("build-master-translation", function () {
 
   return gulp
     .src(src)
-    .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       merge({
         fileName: "translationMaster.json",
@@ -187,18 +176,14 @@ gulp.task("build-master-translation", function () {
     .pipe(gulp.dest(workDir));
 });
 
-gulp.task("build-merged-translations", function () {
-  return gulp
+gulp.task("build-merged-translations", () =>
+  gulp
     .src([inFrontendDir + "/*.json", workDir + "/test.json"], {
       allowEmpty: true,
     })
+    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      transform(function (data, file) {
-        return lokaliseTransform(data, data, file);
-      })
-    )
-    .pipe(
-      foreach(function (stream, file) {
+      foreach((stream, file) => {
         // For each language generate a merged json file. It begins with the master
         // translation as a failsafe for untranslated strings, and merges all parent
         // tags into one file for each specific subtag
@@ -230,17 +215,17 @@ gulp.task("build-merged-translations", function () {
           )
           .pipe(gulp.dest(fullDir));
       })
-    );
-});
+    )
+);
 
-var taskName;
+let taskName;
 
 const splitTasks = [];
 TRANSLATION_FRAGMENTS.forEach((fragment) => {
   taskName = "build-translation-fragment-" + fragment;
-  gulp.task(taskName, function () {
+  gulp.task(taskName, () =>
     // Return only the translations for this fragment.
-    return gulp
+    gulp
       .src(fullDir + "/*.json")
       .pipe(
         transform((data) => ({
@@ -251,18 +236,18 @@ TRANSLATION_FRAGMENTS.forEach((fragment) => {
           },
         }))
       )
-      .pipe(gulp.dest(workDir + "/" + fragment));
-  });
+      .pipe(gulp.dest(workDir + "/" + fragment))
+  );
   splitTasks.push(taskName);
 });
 
 taskName = "build-translation-core";
-gulp.task(taskName, function () {
+gulp.task(taskName, () =>
   // Remove the fragment translations from the core translation.
-  return gulp
+  gulp
     .src(fullDir + "/*.json")
     .pipe(
-      transform((data, file) => {
+      transform((data, _file) => {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
@@ -270,14 +255,14 @@ gulp.task(taskName, function () {
         return data;
       })
     )
-    .pipe(gulp.dest(coreDir));
-});
+    .pipe(gulp.dest(coreDir))
+);
 
 splitTasks.push(taskName);
 
-gulp.task("build-flattened-translations", function () {
+gulp.task("build-flattened-translations", () =>
   // Flatten the split versions of our translations, and move them into outDir
-  return gulp
+  gulp
     .src(
       TRANSLATION_FRAGMENTS.map(
         (fragment) => workDir + "/" + fragment + "/*.json"
@@ -285,41 +270,45 @@ gulp.task("build-flattened-translations", function () {
       { base: workDir }
     )
     .pipe(
-      transform(function (data) {
+      transform((data) =>
         // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
+        flatten(data)
+      )
     )
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {
           filePath.dirname = "";
         }
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
       })
     )
-    .pipe(gulp.dest(outDir));
-});
+    .pipe(gulp.dest(outDir))
+);
 
 const fingerprints = {};
 
-gulp.task(
-  "build-translation-fingerprints",
-  function fingerprintTranslationFiles() {
-    // Fingerprint full file of each language
-    const files = fs.readdirSync(fullDir);
+gulp.task("build-translation-fingerprints", () => {
+  // Fingerprint full file of each language
+  const files = fs.readdirSync(fullDir);
 
-    for (let i = 0; i < files.length; i++) {
-      fingerprints[files[i].split(".")[0]] = {
-        // In dev we create fake hashes
-        hash: env.isProdBuild()
-          ? crypto
-              .createHash("md5")
-              .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
-              .digest("hex")
-          : "dev",
-      };
-    }
+  for (let i = 0; i < files.length; i++) {
+    fingerprints[files[i].split(".")[0]] = {
+      // In dev we create fake hashes
+      hash: env.isProdBuild()
+        ? crypto
+            .createHash("md5")
+            .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
+            .digest("hex")
+        : "dev",
+    };
+  }
 
+  // In dev we create the file with the fake hash in the filename
+  if (env.isProdBuild()) {
     mapFiles(outDir, ".json", (filename) => {
       const parsed = path.parse(filename);
 
@@ -335,35 +324,35 @@ gulp.task(
         }`
       );
     });
-
-    const stream = source("translationFingerprints.json");
-    stream.write(JSON.stringify(fingerprints));
-    process.nextTick(() => stream.end());
-    return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
   }
-);
 
-gulp.task("build-translation-fragment-supervisor", function () {
-  return gulp
+  const stream = source("translationFingerprints.json");
+  stream.write(JSON.stringify(fingerprints));
+  process.nextTick(() => stream.end());
+  return stream.pipe(vinylBuffer()).pipe(gulp.dest(workDir));
+});
+
+gulp.task("build-translation-fragment-supervisor", () =>
+  gulp
     .src(fullDir + "/*.json")
     .pipe(transform((data) => data.supervisor))
-    .pipe(gulp.dest(workDir + "/supervisor"));
-});
+    .pipe(gulp.dest(workDir + "/supervisor"))
+);
 
-gulp.task("build-translation-flatten-supervisor", function () {
-  return gulp
+gulp.task("build-translation-flatten-supervisor", () =>
+  gulp
     .src(workDir + "/supervisor/*.json")
     .pipe(
-      transform(function (data) {
+      transform((data) =>
         // Polymer.AppLocalizeBehavior requires flattened json
-        return flatten(data);
-      })
+        flatten(data)
+      )
     )
-    .pipe(gulp.dest(outDir));
-});
+    .pipe(gulp.dest(outDir))
+);
 
-gulp.task("build-translation-write-metadata", function writeMetadata() {
-  return gulp
+gulp.task("build-translation-write-metadata", () =>
+  gulp
     .src(
       [
         path.join(paths.translations_src, "translationMetadata.json"),
@@ -374,13 +363,14 @@ gulp.task("build-translation-write-metadata", function writeMetadata() {
     )
     .pipe(merge({}))
     .pipe(
-      transform(function (data) {
+      transform((data) => {
         const newData = {};
         Object.entries(data).forEach(([key, value]) => {
           // Filter out translations without native name.
           if (value.nativeName) {
             newData[key] = value;
           } else {
+            // eslint-disable-next-line no-console
             console.warn(
               `Skipping language ${key}. Native name was not translated.`
             );
@@ -396,19 +386,26 @@ gulp.task("build-translation-write-metadata", function writeMetadata() {
       }))
     )
     .pipe(rename("translationMetadata.json"))
-    .pipe(gulp.dest(workDir));
-});
+    .pipe(gulp.dest(workDir))
+);
+
+gulp.task(
+  "create-translations",
+  gulp.series(
+    env.isProdBuild() ? (done) => done() : "create-test-translation",
+    "build-master-translation",
+    "build-merged-translations",
+    gulp.parallel(...splitTasks),
+    "build-flattened-translations"
+  )
+);
 
 gulp.task(
   "build-translations",
   gulp.series(
     "clean-translations",
     "ensure-translations-build-dir",
-    env.isProdBuild() ? (done) => done() : "create-test-translation",
-    "build-master-translation",
-    "build-merged-translations",
-    gulp.parallel(...splitTasks),
-    "build-flattened-translations",
+    "create-translations",
     "build-translation-fingerprints",
     "build-translation-write-metadata"
   )

build-scripts/gulp/webpack.js

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // Tasks to run webpack.
+const fs = require("fs");
 const gulp = require("gulp");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
@@ -18,6 +20,13 @@ const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: false }),
 ];
 
+const isWsl =
+  fs.existsSync("/proc/version") &&
+  fs
+    .readFileSync("/proc/version", "utf-8")
+    .toLocaleLowerCase()
+    .includes("microsoft");
+
 /**
  * @param {{
  *   compiler: import("webpack").Compiler,
@@ -36,7 +45,7 @@ const runDevServer = ({
     open: true,
     watchContentBase: true,
     contentBase,
-  }).listen(port, listenHost, function (err) {
+  }).listen(port, listenHost, (err) => {
     if (err) {
       throw err;
     }
@@ -57,6 +66,7 @@ const doneHandler = (done) => (err, stats) => {
   }
 
   if (stats.hasErrors() || stats.hasWarnings()) {
+    // eslint-disable-next-line no-console
     console.log(stats.toString("minimal"));
   }
 
@@ -78,13 +88,14 @@ const prodBuild = (conf) =>
 
 gulp.task("webpack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch(
-    { ignored: /build-translations/ },
-    doneHandler()
-  );
+  webpack(
+    process.env.ES5
+      ? bothBuilds(createAppConfig, { isProdBuild: false })
+      : createAppConfig({ isProdBuild: false, latestBuild: true })
+  ).watch({ poll: isWsl }, doneHandler());
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations-app")
+    gulp.series("create-translations", "copy-translations-app")
   );
 });
 
@@ -137,7 +148,7 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({ ignored: /build-translations/ }, doneHandler());
+  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
 
   gulp.watch(
     path.join(paths.translations_src, "en.json"),

build-scripts/paths.js

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

build-scripts/removedIcons.json

@@ -1 +1,102 @@
-[]
+[
+  {
+    "path": "M21.8 14.5C21.3 13.7 20.1 13.4 18.1 13.4C17.4 13.4 16.7 13.4 16 13.5C15.5 13.2 15 12.9 14.6 12.6C13.6 11.8 12.7 10.3 12 8.5C12 8.5 12 8.4 12.1 8.3C12.6 6.2 13.1 3.6 12.1 2.5C11.8 2.2 11.5 2.1 11.1 2.1H10.7C10.1 2.1 9.6 2.7 9.4 3.3C8.8 5.4 9.2 6.6 9.8 8.5C9.4 10 8.9 11.6 8 13.3C7.5 14.4 6.9 15.4 6.5 16.2C5.9 16.5 5.4 16.8 5.1 17C3.2 18.2 2.2 19.6 2.1 20.4C2 20.7 2 21 2.1 21.2V21.3L2.9 21.8C3.1 21.9 3.4 22 3.6 22C4.9 22 6.4 20.5 8.4 17C8.5 17 8.6 16.9 8.7 16.9C10.4 16.4 12.4 16 15.2 15.7C16.8 16.5 18.8 16.9 20 16.9C20.7 16.9 21.2 16.7 21.5 16.4C21.8 16.1 21.9 15.7 22 15.3C22 15 22 14.7 21.8 14.5M3.4 20.9C3.5 20.3 4.2 19.2 5.4 18.2C5.6 18.1 5.8 17.9 6.2 17.7C5 19.6 4.1 20.6 3.4 20.9M10.8 3.2C10.9 3.1 10.9 3 11 3L11.2 3.1C11.5 3.5 11.5 4 11.3 4.9V5.2C11.2 5.6 11.2 6 11 6.5C10.6 5 10.6 3.9 10.8 3.2M8.8 15.8L8.6 15.9C8.7 15.4 9.1 14.8 9.4 14.2C10.1 12.8 10.7 11.5 11 10.3C11.7 11.8 12.5 12.9 13.5 13.8C13.7 14 13.9 14.2 14.2 14.3C12.8 14.5 10.9 15 8.8 15.8M20.9 15.7H20.5C19.8 15.7 18.6 15.4 17.4 14.9C17.5 14.7 17.7 14.7 17.8 14.7C20.1 14.7 20.7 15.1 20.9 15.3C21 15.4 21 15.4 21 15.5C21 15.6 21 15.6 20.9 15.7Z",
+    "name": "adobe-acrobat"
+  },
+  {
+    "path": "M14.58,3H22V19.67L14.58,3M9.42,3H2V19.67L9.42,3M12,9.17L16.67,19.67H13.5L12.17,16.33H8.75L12,9.17Z",
+    "name": "adobe"
+  },
+  {
+    "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,2M10.43,21.87V19.91C10.43,19.22 10,18.57 9.35,18.3C6.91,17.26 5.17,14.83 5.17,12C5.17,8.26 8.22,5.17 12,5.17C15.78,5.17 18.83,8.26 18.83,12C18.83,16.43 15.39,20.61 10.43,21.87Z",
+    "name": "amazon-alexa"
+  },
+  {
+    "path": "M15.93,17.09C15.75,17.25 15.5,17.26 15.3,17.15C14.41,16.41 14.25,16.07 13.76,15.36C12.29,16.86 11.25,17.31 9.34,17.31C7.09,17.31 5.33,15.92 5.33,13.14C5.33,10.96 6.5,9.5 8.19,8.76C9.65,8.12 11.68,8 13.23,7.83V7.5C13.23,6.84 13.28,6.09 12.9,5.54C12.58,5.05 11.95,4.84 11.4,4.84C10.38,4.84 9.47,5.37 9.25,6.45C9.2,6.69 9,6.93 8.78,6.94L6.18,6.66C5.96,6.61 5.72,6.44 5.78,6.1C6.38,2.95 9.23,2 11.78,2C13.08,2 14.78,2.35 15.81,3.33C17.11,4.55 17,6.18 17,7.95V12.12C17,13.37 17.5,13.93 18,14.6C18.17,14.85 18.21,15.14 18,15.31L15.94,17.09H15.93M13.23,10.56V10C11.29,10 9.24,10.39 9.24,12.67C9.24,13.83 9.85,14.62 10.87,14.62C11.63,14.62 12.3,14.15 12.73,13.4C13.25,12.47 13.23,11.6 13.23,10.56M20.16,19.54C18,21.14 14.82,22 12.1,22C8.29,22 4.85,20.59 2.25,18.24C2.05,18.06 2.23,17.81 2.5,17.95C5.28,19.58 8.75,20.56 12.33,20.56C14.74,20.56 17.4,20.06 19.84,19.03C20.21,18.87 20.5,19.27 20.16,19.54M21.07,18.5C20.79,18.14 19.22,18.33 18.5,18.42C18.31,18.44 18.28,18.26 18.47,18.12C19.71,17.24 21.76,17.5 22,17.79C22.24,18.09 21.93,20.14 20.76,21.11C20.58,21.27 20.41,21.18 20.5,21C20.76,20.33 21.35,18.86 21.07,18.5Z",
+    "name": "amazon"
+  },
+  {
+    "path": "M22.78,17.91C22.94,18.16 23,18.42 23,18.7C23,19.08 22.87,19.39 22.57,19.64C22.27,19.89 21.94,20 21.56,20H19.08L12.42,8H11.58L4.92,20H2.39C1.92,20 1.53,19.8 1.22,19.38C0.91,18.96 0.89,18.5 1.17,18L10.78,1.69C11.09,1.22 11.5,1 12,1C12.53,1 12.92,1.22 13.17,1.69L22.78,17.91M4.78,22.31L12,9.38L19.22,22.31L18.5,23L12,20.34L5.44,23L4.78,22.31Z",
+    "name": "android-auto"
+  },
+  {
+    "path": "M15,9A1,1 0 0,1 14,8A1,1 0 0,1 15,7A1,1 0 0,1 16,8A1,1 0 0,1 15,9M9,9A1,1 0 0,1 8,8A1,1 0 0,1 9,7A1,1 0 0,1 10,8A1,1 0 0,1 9,9M16.12,4.37L18.22,2.27L17.4,1.44L15.09,3.75C14.16,3.28 13.11,3 12,3C10.88,3 9.84,3.28 8.91,3.75L6.6,1.44L5.78,2.27L7.88,4.37C6.14,5.64 5,7.68 5,10V11H19V10C19,7.68 17.86,5.64 16.12,4.37M5,16C5,19.86 8.13,23 12,23A7,7 0 0,0 19,16V12H5V16Z",
+    "name": "android-debug-bridge"
+  },
+  {
+    "path": "M22,6L15.5,18H2L8.5,6H22Z",
+    "name": "bandcamp"
+  },
+  {
+    "path": "M19.92,10.76C19.92,10.76 22.5,12.24 22.5,13.89C22.5,15.5 19.5,16.06 16.18,15.9C16.18,15.9 14.77,17.87 13.42,18.7C14.88,21.44 16,22.5 15.97,22.5C15.97,22.5 15.23,22.69 13,19.04C11.66,19.89 10.17,20.23 9.56,19.7C8.94,19.17 9.42,18.28 9.68,17.85C9.41,18 8,18.83 6.75,18.83C5.26,18.83 5.05,17.72 5.05,17.15C5.05,15 7.12,12 7.12,12C7.12,12 6.16,9.88 6.05,8.22C4.17,8.06 2,8.39 1.53,8.54C1.4,8.54 1.84,8.22 2,8.18C2.15,8.13 3.91,7.67 6,7.67C6,5.93 6.35,4.33 7.41,4.33C8.13,4.33 8.71,5.45 8.71,5.45C8.71,5.45 8.7,1.5 10.74,1.5C12.8,1.5 15,6.11 15,6.11C15,6.11 17.22,6.32 18.85,7.09C19.5,5.73 20.09,5.11 20.81,3C21,3.7 20.2,5.5 19.35,7.3V7.3H19.35C19.35,7.3 21.65,8.5 21.65,9.83C21.65,10.84 19.92,10.76 19.92,10.76M10.68,18.58C11.36,18.69 12.41,18.1 12.4,18.1L11.58,16.57L10.4,17.4C10.39,17.41 9.64,18.38 10.68,18.58M20.15,9.76C20.15,9.1 18.95,8.35 18.81,8.27L17.89,9.75L19.17,10.37C19.59,10.34 20.15,10.35 20.15,9.76M8,5.63C7.7,5.63 7.09,6.07 7.09,7.64L8.83,7.7L8.72,6.3C8.6,6 8.3,5.63 8,5.63M10.18,15.78C8.92,15.13 8.16,14.06 7.54,12.9C7.54,12.9 5.96,15.55 6.97,16.22C8,16.89 9.64,16.16 10.18,15.78M12.97,17.76C14.11,16.89 17.19,14.73 17.45,11.08C14.57,9.44 10.62,8.71 10.62,8.71C10.62,8.71 10.61,8.21 10.7,7.86C11.64,7.97 14.59,8.47 17.03,9.43C16.35,8.28 15.84,7.85 15.37,7.5C16.53,7.76 17.36,9.26 17.36,9.26L18.28,7.96C18.28,7.96 13.91,5.61 10.19,7.42C10.11,10.3 11.59,14.56 11.59,14.56L10.82,14.89C10.3,13.84 9.63,12.09 9,8.67C8.7,9.08 8.17,9.55 8.16,11.09C7.7,9.8 8.66,8.43 8.67,8.42L7.07,8.26C7.17,9.92 8.05,14.2 10.68,15.53C13,14.21 15.5,11.54 16.13,10.77L16.82,11.28L12.35,15.97C13.59,16 14.32,15.72 14.82,15.5C14.1,16.25 12.86,16.32 12.27,16.32C12.28,16.34 12.57,17.07 12.97,17.76M14.03,6.05C14,5.97 12.66,3.69 11.47,3.86C10.69,4.11 10.24,5.43 10.23,6.87C10.76,6.56 12,6 14.03,6.05M16.71,15.07C16.71,15.07 20,15 19.9,13.76C19.9,12.56 17.92,11.33 17.92,11.35C17.93,13.47 16.71,15.07 16.71,15.07Z",
+    "name": "battlenet"
+  },
+  {
+    "path": "M12.5 10H10C9.45 10 9 9.55 9 9C9 8.45 9.45 8 10 8H12.5C13.05 8 13.5 8.45 13.5 9C13.5 9.55 13.05 10 12.5 10M15 14C15 13.45 14.55 13 14 13H10C9.45 13 9 13.45 9 14C9 14.55 9.45 15 10 15H14C14.55 15 15 14.55 15 14M22 4V20C22 21.11 21.11 22 20 22H4C2.89 22 2 21.11 2 20V4C2 2.89 2.89 2 4 2H20C21.11 2 22 2.89 22 4M18 12C18 12 18 11 17 11C16.05 11.03 16 10 16 10L16 8C16 6.34 14.66 5 13 5H9C7.34 5 6 6.34 6 8V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15L18 12Z",
+    "name": "blogger"
+  },
+  {
+    "path": "M12.6,2.86C15.27,4.1 18,5.39 20.66,6.63C20.81,6.7 21,6.75 21,6.95C21,7.15 20.81,7.19 20.66,7.26C18,8.5 15.3,9.77 12.62,11C12.21,11.21 11.79,11.21 11.38,11C8.69,9.76 6,8.5 3.32,7.25C3.18,7.19 3,7.14 3,6.94C3,6.76 3.18,6.71 3.31,6.65C6,5.39 8.74,4.1 11.44,2.85C11.73,2.72 12.3,2.73 12.6,2.86M12,21.15C11.8,21.15 11.66,21.07 11.38,20.97C8.69,19.73 6,18.47 3.33,17.22C3.19,17.15 3,17.11 3,16.9C3,16.7 3.19,16.66 3.34,16.59C3.78,16.38 4.23,16.17 4.67,15.96C5.12,15.76 5.56,15.76 6,15.97C7.79,16.8 9.57,17.63 11.35,18.46C11.79,18.67 12.23,18.66 12.67,18.46C14.45,17.62 16.23,16.79 18,15.96C18.44,15.76 18.87,15.75 19.29,15.95C19.77,16.16 20.24,16.39 20.71,16.61C20.78,16.64 20.85,16.68 20.91,16.73C21.04,16.83 21.04,17 20.91,17.08C20.83,17.14 20.74,17.19 20.65,17.23C18,18.5 15.33,19.72 12.66,20.95C12.46,21.05 12.19,21.15 12,21.15M12,16.17C11.9,16.17 11.55,16.07 11.36,16C8.68,14.74 6,13.5 3.34,12.24C3.2,12.18 3,12.13 3,11.93C3,11.72 3.2,11.68 3.35,11.61C3.8,11.39 4.25,11.18 4.7,10.97C5.13,10.78 5.56,10.78 6,11C7.78,11.82 9.58,12.66 11.38,13.5C11.79,13.69 12.21,13.69 12.63,13.5C14.43,12.65 16.23,11.81 18.04,10.97C18.45,10.78 18.87,10.78 19.29,10.97C19.76,11.19 20.24,11.41 20.71,11.63C20.77,11.66 20.84,11.69 20.9,11.74C21.04,11.85 21.04,12 20.89,12.12C20.84,12.16 20.77,12.19 20.71,12.22C18,13.5 15.31,14.75 12.61,16C12.42,16.09 12.08,16.17 12,16.17Z",
+    "name": "buffer"
+  },
+  {
+    "path": "M20,18H4V6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4M11,17H13V16H14A1,1 0 0,0 15,15V12A1,1 0 0,0 14,11H11V10H15V8H13V7H11V8H10A1,1 0 0,0 9,9V12A1,1 0 0,0 10,13H13V14H9V16H11V17Z",
+    "name": "cash-usd-outline"
+  },
+  {
+    "path": "M20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.1 4 20 4M15 10H11V11H14C14.55 11 15 11.45 15 12V15C15 15.55 14.55 16 14 16H13V17H11V16H9V14H13V13H10C9.45 13 9 12.55 9 12V9C9 8.45 9.45 8 10 8H11V7H13V8H15V10Z",
+    "name": "cash-usd"
+  },
+  {
+    "path": "M10.94 12.09A1.06 1.06 0 1 0 11.91 10.95A1.06 1.06 0 0 0 10.94 12.09M13.54 13.21A2.62 2.62 0 0 1 12.58 13.88L12.57 13.89A11.17 11.17 0 0 0 13.87 16.92A4.83 4.83 0 0 1 12.92 17.3A4.9 4.9 0 0 1 12.24 17.44L12.16 17.45L12.06 17.46L11.87 17.47C11.75 17.47 11.64 17.5 11.5 17.47A5 5 0 0 1 10.79 17.4A5.13 5.13 0 0 1 10.09 17.23A4.78 4.78 0 0 1 9.46 17A5 5 0 0 1 8.93 16.68A4.45 4.45 0 0 1 8.5 16.38C8.38 16.29 8.28 16.19 8.2 16.12L7.95 15.87C7.95 15.87 8 15.97 8.16 16.15C8.24 16.23 8.32 16.34 8.44 16.45A4.93 4.93 0 0 0 8.82 16.82A5.21 5.21 0 0 0 9.33 17.2A5.08 5.08 0 0 0 9.96 17.56A5.43 5.43 0 0 0 10.68 17.85A5.5 5.5 0 0 0 11.46 18.03C11.6 18.06 11.74 18.07 11.88 18.08L12.07 18.1H12.27A5.5 5.5 0 0 0 13.07 18.05A5.61 5.61 0 0 0 14.39 17.7Q14.63 18.03 14.9 18.34L14.87 18.36L14.66 18.5H14.62C14.59 18.53 14.67 18.5 14.66 18.5H14.64L14.58 18.54L14.44 18.61L14.37 18.64L14.33 18.66L14.32 18.67H14.31C14.3 18.68 14.36 18.66 14.33 18.67H14.32L14.17 18.74Q14.09 18.77 14 18.81V18.82L13.93 18.84L13.84 18.87A6.5 6.5 0 0 1 12.25 19.26A6.4 6.4 0 0 1 11.31 19.3H11.19L11.07 19.29L10.81 19.27C10.65 19.24 10.5 19.23 10.33 19.2A6.59 6.59 0 0 1 8.5 18.57C8.35 18.5 8.21 18.43 8.08 18.35C7.95 18.27 7.83 18.19 7.71 18.11A6.64 6.64 0 0 1 7.07 17.6A6.35 6.35 0 0 1 6.57 17.11C6.43 16.96 6.32 16.82 6.22 16.7C6.13 16.58 6.06 16.5 6 16.42L5.94 16.32L6 16.43C6.04 16.5 6.1 16.6 6.18 16.73C6.26 16.86 6.36 17 6.5 17.18A6.5 6.5 0 0 0 6.94 17.73A6.86 6.86 0 0 0 7.55 18.31C7.67 18.41 7.78 18.5 7.91 18.6C8.04 18.7 8.17 18.79 8.31 18.88A7.12 7.12 0 0 0 9.21 19.37A7.2 7.2 0 0 0 10.2 19.74C10.37 19.8 10.55 19.83 10.73 19.87L11 19.92L11.11 19.94L11.25 19.96A7.27 7.27 0 0 0 12.29 20.03A7.38 7.38 0 0 0 14.14 19.77L14.23 19.74L14.28 19.73L14.34 19.71C14.4 19.69 14.46 19.68 14.5 19.66L14.68 19.6L14.85 19.54L15 19.5L15.06 19.45H15.08L15.13 19.43L15.14 19.42L15.17 19.41L15.39 19.3L15.67 19.16C15.86 19.34 16.06 19.5 16.26 19.69C16.26 19.69 17.23 20.69 17.76 20.28C18.26 19.89 17.68 18.68 17.68 18.68A11.2 11.2 0 0 0 13.54 13.21M10.16 11.57L10.15 11.56A11.18 11.18 0 0 0 6.91 11.11A4.72 4.72 0 0 1 7.34 9.39L7.38 9.31L7.42 9.23L7.5 9.06C7.57 8.96 7.62 8.85 7.69 8.75A4.97 4.97 0 0 1 8.14 8.17A5.05 5.05 0 0 1 8.66 7.67A4.77 4.77 0 0 1 9.2 7.27A5.06 5.06 0 0 1 9.74 7A4.88 4.88 0 0 1 10.22 6.78C10.37 6.72 10.5 6.69 10.61 6.66C10.82 6.6 10.95 6.58 10.95 6.58S10.82 6.59 10.6 6.61C10.5 6.63 10.35 6.64 10.19 6.68A4.94 4.94 0 0 0 9.67 6.82A5.34 5.34 0 0 0 9.08 7.05A5.08 5.08 0 0 0 8.45 7.39A5.47 5.47 0 0 0 7.82 7.84A5.55 5.55 0 0 0 7.25 8.41C7.16 8.5 7.08 8.63 7 8.74L6.88 8.89L6.82 8.97L6.76 9.06A5.5 5.5 0 0 0 6.38 9.77A5.61 5.61 0 0 0 5.97 11.14L5.96 11.16C5.7 11.18 5.43 11.21 5.16 11.26V11.12L5.17 10.87V10.82C5.17 10.78 5.16 10.88 5.16 10.87V10.84L5.17 10.77L5.18 10.62L5.19 10.54V10.5H5.2V10.47C5.2 10.46 5.19 10.5 5.19 10.5L5.22 10.32L5.24 10.14L5.25 10.12V10.11L5.24 10.13L5.25 10.12V10.11L5.26 10.07L5.27 9.97A6.5 6.5 0 0 1 6.26 7.59L6.32 7.5L6.39 7.4L6.55 7.19C6.65 7.07 6.74 6.94 6.86 6.82A6.61 6.61 0 0 1 8.37 5.59C8.5 5.5 8.64 5.43 8.77 5.37C8.9 5.29 9.04 5.24 9.17 5.18A6.76 6.76 0 0 1 9.94 4.9A6.5 6.5 0 0 1 10.62 4.74C10.82 4.69 11 4.68 11.15 4.66C11.3 4.64 11.42 4.64 11.5 4.63L11.62 4.62H11.5C11.42 4.62 11.3 4.61 11.15 4.61C11 4.61 10.82 4.61 10.61 4.63A6.41 6.41 0 0 0 9.9 4.73A7.03 7.03 0 0 0 9.08 4.93C8.94 5 8.79 5.03 8.65 5.09C8.5 5.14 8.35 5.21 8.2 5.28A7.26 7.26 0 0 0 7.31 5.78A7.33 7.33 0 0 0 6.47 6.42C6.33 6.54 6.2 6.68 6.07 6.8L5.9 7L5.82 7.09L5.72 7.19A7.25 7.25 0 0 0 5.12 8.04A7.38 7.38 0 0 0 4.36 9.75L4.33 9.84L4.32 9.89L4.3 9.95L4.25 10.13L4.21 10.29L4.18 10.5L4.15 10.63C4.14 10.65 4.14 10.67 4.14 10.7L4.13 10.72V10.78L4.12 10.81L4.09 11.06L4.05 11.5C3.79 11.57 3.53 11.65 3.28 11.74C3.28 11.74 1.93 12.05 2 12.72C2.08 13.35 3.41 13.5 3.41 13.5A11.21 11.21 0 0 0 10.24 12.74A2.62 2.62 0 0 1 10.16 11.57M19.7 10.84A7.19 7.19 0 0 0 19.53 9.79C19.5 9.62 19.43 9.45 19.38 9.27L19.3 9.03L19.26 8.91L19.21 8.77A7.23 7.23 0 0 0 18.75 7.83A7.35 7.35 0 0 0 17.62 6.35L17.55 6.28L17.5 6.25L17.47 6.2L17.33 6.08L17.21 5.97L17.06 5.85L16.94 5.75L16.89 5.7L16.88 5.69H16.87L16.83 5.66L16.8 5.64L16.59 5.5L16.32 5.31Q16.42 4.88 16.5 4.45S16.88 3.11 16.25 2.85C15.67 2.61 14.91 3.72 14.91 3.72A11.21 11.21 0 0 0 12.25 10.05A2.63 2.63 0 0 1 13.32 10.55A11.2 11.2 0 0 0 15.25 8A4.73 4.73 0 0 1 16.08 8.66A4.81 4.81 0 0 1 16.53 9.19L16.58 9.25L16.63 9.33L16.74 9.5C16.8 9.59 16.86 9.69 16.92 9.8A4.89 4.89 0 0 1 17.4 11.16A4.78 4.78 0 0 1 17.5 11.83A4.88 4.88 0 0 1 17.5 12.44A4.76 4.76 0 0 1 17.44 12.96C17.42 13.11 17.39 13.25 17.36 13.36C17.31 13.57 17.27 13.7 17.27 13.7L17.41 13.37C17.45 13.26 17.5 13.14 17.54 13A5.06 5.06 0 0 0 17.67 12.46A5.34 5.34 0 0 0 17.75 11.83A5.04 5.04 0 0 0 17.76 11.11A5.38 5.38 0 0 0 17.43 9.57C17.38 9.44 17.32 9.31 17.27 9.19L17.18 9L17.14 8.93L17.09 8.83A5.53 5.53 0 0 0 15.67 7.16C15.79 6.9 15.89 6.65 16 6.38L16.03 6.41L16.25 6.53L16.28 6.54V6.55H16.29C16.32 6.57 16.24 6.5 16.25 6.53H16.26L16.27 6.54L16.33 6.58L16.45 6.66L16.5 6.71L16.56 6.73L16.57 Line truncated
+    "name": "concourse-ci"
+  },
+  {
+    "path": "M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M15 10H11V11H14A1 1 0 0 1 15 12V15A1 1 0 0 1 14 16H13V17H11V16H9V14H13V13H10A1 1 0 0 1 9 12V9A1 1 0 0 1 10 8H11V7H13V8H15Z",
+    "name": "currency-usd-circle"
+  },
+  {
+    "path": "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,17V16H9V14H13V13H10A1,1 0 0,1 9,12V9A1,1 0 0,1 10,8H11V7H13V8H15V10H11V11H14A1,1 0 0,1 15,12V15A1,1 0 0,1 14,16H13V17H11Z",
+    "name": "currency-usd-circle-outline"
+  },
+  {
+    "path": "M20,6H4V4H20V6M20,18V20H4V18H7.33L6.26,14H5V8H19V14H17.74L16.67,18H20M7,12H17V10H7V12M9.4,18H14.6L15.67,14H8.33L9.4,18Z",
+    "name": "douban"
+  },
+  {
+    "path": "M10,13C10.55,13 11,13.18 11.41,13.57C11.8,13.96 12,14.44 12,15V22C12,22.17 11.91,22.27 11.72,22.27C11.66,22.27 11.58,22.22 11.5,22.13L7,17.67V13H10M12.5,1.88L17,6.33V11H14C13.45,11 13,10.82 12.59,10.43C12.2,10.04 12,9.56 12,9V2C12,1.83 12.09,1.73 12.28,1.73C12.34,1.73 12.42,1.78 12.5,1.88M22,12C22.17,12 22.27,12.09 22.27,12.28C22.27,12.34 22.22,12.42 22.13,12.5L17.67,17H13V14C13,13.45 13.18,13 13.57,12.59C13.96,12.2 14.44,12 15,12H22M6.33,7H11V10C11,10.55 10.82,11 10.43,11.41C10.04,11.8 9.56,12 9,12H2C1.83,12 1.73,11.91 1.73,11.72C1.73,11.66 1.78,11.58 1.88,11.5L6.33,7Z",
+    "name": "google-photos"
+  },
+  {
+    "path": "M12,3L22,12H19V20H5V12H2L12,3M9.22,8.93C8.75,9.4 8.5,10.03 8.5,10.75C8.5,12.43 10.54,13.07 11.76,13.46C13.26,13.93 13.47,14.21 13.5,14.25C13.5,15 12.15,15 12,15V15C11.37,15 11.03,14.88 10.86,14.78C10.67,14.67 10.5,14.5 10.5,14H8.5C8.5,15.43 9.24,16.16 9.85,16.5C10.18,16.7 10.57,16.84 11,16.92V18H13V16.91C14.53,16.61 15.5,15.62 15.5,14.25C15.5,12.67 13.88,12.03 12.36,11.55C10.8,11.06 10.53,10.77 10.5,10.75C10.5,10.5 10.57,10.41 10.64,10.34C10.85,10.13 11.36,10 12,10V10C12.68,10 13.5,10.13 13.5,10.75H15.5C15.5,9.34 14.56,8.37 13,8.09V7H11V8.08C10.26,8.21 9.65,8.5 9.22,8.93Z",
+    "name": "home-currency-usd"
+  },
+  {
+    "path": "M 2.73675,10.8077C 3.8293,-1.36109 22.5157,-1.36109 21.1971,13.5579L 8.61392,13.5579C 8.61392,17.8527 14.4157,19.209 19.5394,16.3081L 19.5394,20.5276C 13.2478,23.8806 4.9972,21.4318 4.9972,14.0853C 4.9972,8.58476 9.97019,6.8142 9.97019,6.8142C 9.97019,6.8142 8.57624,8.58489 8.53857,10.0542L 15.6967,10.0542C 15.6967,2.93376 5.90137,5.57095 2.73675,10.8077 Z",
+    "name": "microsoft-edge-legacy"
+  },
+  {
+    "path": "M22 12Q22 12.43 21.97 12.94 21.95 13.45 21.89 13.97 21.84 14.5 21.76 15 21.68 15.5 21.56 15.89 21.5 16.07 21.38 16.19 21.24 16.3 21.04 16.3 20.95 16.3 20.66 16.23 20.37 16.16 20.03 16.07L19.39 15.88Q19.09 15.79 18.96 15.76 18.75 16.54 18.41 17.38 18.08 18.21 17.65 19 17.22 19.8 16.7 20.5 16.18 21.25 15.61 21.82L15.43 21.95Q15.33 22 15.21 22 15 22 14.84 21.84L10.1 17.11H2.85Q2.5 17.11 2.25 16.86 2 16.61 2 16.26V7.74Q2 7.39 2.25 7.14 2.5 6.89 2.85 6.89H10.1L14.83 2.16Q15 2 15.21 2 15.33 2 15.42 2.05 15.5 2.09 15.59 2.18 15.85 2.44 16.08 2.71 16.3 3 16.5 3.28 18.23 5.55 18.96 8.28 19.14 8.23 19.44 8.14 19.74 8.05 20.06 7.96 20.37 7.87 20.65 7.8 20.92 7.74 21.04 7.74 21.24 7.74 21.38 7.85 21.5 7.97 21.56 8.15 21.68 8.56 21.77 9.05 21.85 9.55 21.91 10.06 21.96 10.57 22 11.08V12M9.82 9.37Q9.82 9.06 9.62 8.85 9.4 8.64 9.1 8.64 8.9 8.64 8.72 8.74 8.55 8.85 8.45 9.03L7.15 11.47L5.89 9.03Q5.77 8.8 5.57 8.72 5.37 8.64 5.13 8.64 4.82 8.64 4.61 8.85 4.4 9.06 4.4 9.36 4.4 9.57 4.5 9.73L6.25 12.87Q6.27 12.91 6.29 12.97 6.3 13.03 6.3 13.08V14.63Q6.3 15 6.56 15.19 6.81 15.36 7.15 15.36 7.39 15.36 7.54 15.27 7.68 15.18 7.76 15.03 7.84 14.88 7.87 14.69 7.9 14.5 7.9 14.28 7.9 14 7.88 13.76 7.86 13.5 7.86 13.28 7.86 13.14 7.87 13.03 7.88 12.93 7.93 12.85L9.73 9.73Q9.83 9.55 9.83 9.37M15.17 3.63L11.8 7Q12 7.12 12.1 7.31 12.22 7.5 12.22 7.74V10.07L17.72 8.61Q17.34 7.19 16.71 6 16.08 4.77 15.17 3.63M17.73 15.42L12.22 13.95V16.26Q12.22 16.5 12.1 16.69 12 16.88 11.8 17L15.18 20.37Q16.07 19.29 16.72 18.04 17.37 16.79 17.73 15.43V15.42M20.47 14.84Q20.6 14.14 20.66 13.43 20.72 12.73 20.72 12 20.72 11.29 20.66 10.59 20.6 9.89 20.47 9.19 18.4 9.74 16.35 10.29 14.3 10.83 12.22 11.39 12.21 11.55 12.21 11.7V12.32L12.22 12.63Q14.3 13.19 16.35 13.73 18.4 14.27 20.47 14.84Z",
+    "name": "microsoft-yammer"
+  },
+  {
+    "path": "M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z",
+    "name": "telegram"
+  },
+  {
+    "path": "M14.41,4C14.41,4 14.94,4.39 14.97,4.71C14.97,4.81 14.73,4.85 14.68,4.93C14.62,5 14.7,5.15 14.65,5.21C14.59,5.26 14.5,5.26 14.41,5.41C14.33,5.56 12.07,10.09 11.73,10.63C11.59,11.03 11.47,12.46 11.37,12.66C11.26,12.85 6.34,19.84 6.16,20.05C5.67,20.63 4.31,20.3 3.28,19.56C2.3,18.86 1.74,17.7 2.11,17.16C2.27,16.93 7.15,9.92 7.29,9.75C7.44,9.58 8.75,9 9.07,8.71C9.47,8.22 12.96,4.54 13.07,4.42C13.18,4.3 13.15,4.2 13.18,4.13C13.22,4.06 13.38,4.08 13.43,4C13.5,3.93 13.39,3.71 13.5,3.68C13.59,3.64 13.96,3.67 14.41,4M10.85,4.44L11.74,5.37L10.26,6.94L9.46,5.37C9.38,5.22 9.28,5.22 9.22,5.17C9.17,5.11 9.24,4.97 9.19,4.89C9.13,4.81 8.9,4.83 8.9,4.73C8.9,4.62 9.05,4.28 9.5,3.96C9.5,3.96 10.06,3.6 10.37,3.68C10.47,3.71 10.43,3.95 10.5,4C10.54,4.1 10.7,4.08 10.73,4.15C10.77,4.21 10.73,4.32 10.85,4.44M21.92,17.15C22.29,17.81 21.53,19 20.5,19.7C19.5,20.39 18.21,20.54 17.83,20C17.66,19.78 12.67,12.82 12.56,12.62C12.45,12.43 12.32,11 12.18,10.59L12.15,10.55C12.45,10 13.07,8.77 13.73,7.47C14.3,8.06 14.75,8.56 14.88,8.72C15.21,9 16.53,9.58 16.68,9.75C16.82,9.92 21.78,16.91 21.92,17.15Z",
+    "name": "untappd"
+  },
+  {
+    "path": "M15.07 2H8.93C3.33 2 2 3.33 2 8.93V15.07C2 20.67 3.33 22 8.93 22H15.07C20.67 22 22 20.67 22 15.07V8.93C22 3.33 20.67 2 15.07 2M18.15 16.27H16.69C16.14 16.27 15.97 15.82 15 14.83C14.12 14 13.74 13.88 13.53 13.88C13.24 13.88 13.15 13.96 13.15 14.38V15.69C13.15 16.04 13.04 16.26 12.11 16.26C10.57 16.26 8.86 15.32 7.66 13.59C5.85 11.05 5.36 9.13 5.36 8.75C5.36 8.54 5.43 8.34 5.85 8.34H7.32C7.69 8.34 7.83 8.5 7.97 8.9C8.69 11 9.89 12.8 10.38 12.8C10.57 12.8 10.65 12.71 10.65 12.25V10.1C10.6 9.12 10.07 9.03 10.07 8.68C10.07 8.5 10.21 8.34 10.44 8.34H12.73C13.04 8.34 13.15 8.5 13.15 8.88V11.77C13.15 12.08 13.28 12.19 13.38 12.19C13.56 12.19 13.72 12.08 14.05 11.74C15.1 10.57 15.85 8.76 15.85 8.76C15.95 8.55 16.11 8.35 16.5 8.35H17.93C18.37 8.35 18.47 8.58 18.37 8.89C18.19 9.74 16.41 12.25 16.43 12.25C16.27 12.5 16.21 12.61 16.43 12.9C16.58 13.11 17.09 13.55 17.43 13.94C18.05 14.65 18.53 15.24 18.66 15.65C18.77 16.06 18.57 16.27 18.15 16.27Z",
+    "name": "vk"
+  },
+  {
+    "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"
+  },
+  {
+    "path": "M2,2H22V22H2V2M11.25,17.5H12.75V13.06L16,7H14.5L12,11.66L9.5,7H8L11.25,13.06V17.5Z",
+    "name": "y-combinator"
+  }
+]

build-scripts/rollup.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 const commonjs = require("@rollup/plugin-commonjs");
@@ -32,88 +33,77 @@ const createRollupConfig = ({
   publicPath,
   dontHash,
   isWDS,
-}) => {
-  return {
-    /**
-     * @type { import("rollup").InputOptions }
-     */
-    inputOptions: {
-      input: entry,
-      // Some entry points contain no JavaScript. This setting silences a warning about that.
-      // https://rollupjs.org/guide/en/#preserveentrysignatures
-      preserveEntrySignatures: false,
-      plugins: [
-        ignore({
-          files: bundle.emptyPackages({ latestBuild }),
+}) => ({
+  /**
+   * @type { import("rollup").InputOptions }
+   */
+  inputOptions: {
+    input: entry,
+    // Some entry points contain no JavaScript. This setting silences a warning about that.
+    // https://rollupjs.org/guide/en/#preserveentrysignatures
+    preserveEntrySignatures: false,
+    plugins: [
+      ignore({
+        files: bundle.emptyPackages({ latestBuild }),
+      }),
+      resolve({
+        extensions,
+        preferBuiltins: false,
+        browser: true,
+        rootDir: paths.polymer_dir,
+      }),
+      commonjs(),
+      json(),
+      babel({
+        ...bundle.babelOptions({ latestBuild }),
+        extensions,
+        babelHelpers: isWDS ? "inline" : "bundled",
+      }),
+      string({
+        // Import certain extensions as strings
+        include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
+      }),
+      replace(bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })),
+      !isWDS &&
+        manifest({
+          publicPath,
         }),
-        resolve({
-          extensions,
-          preferBuiltins: false,
-          browser: true,
-          rootDir: paths.polymer_dir,
+      !isWDS && worker(),
+      !isWDS && dontHashPlugin({ dontHash }),
+      !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
+      !isWDS &&
+        isStatsBuild &&
+        visualizer({
+          // https://github.com/btd/rollup-plugin-visualizer#options
+          open: true,
+          sourcemap: true,
         }),
-        commonjs({
-          namedExports: {
-            "js-yaml": ["safeDump", "safeLoad"],
-          },
-        }),
-        json(),
-        babel({
-          ...bundle.babelOptions({ latestBuild }),
-          extensions,
-          exclude: bundle.babelExclude(),
-          babelHelpers: isWDS ? "inline" : "bundled",
-        }),
-        string({
-          // Import certain extensions as strings
-          include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
-        }),
-        replace(
-          bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
-        ),
-        !isWDS &&
-          manifest({
-            publicPath,
-          }),
-        !isWDS && worker(),
-        !isWDS && dontHashPlugin({ dontHash }),
-        !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
-        !isWDS &&
-          isStatsBuild &&
-          visualizer({
-            // https://github.com/btd/rollup-plugin-visualizer#options
-            open: true,
-            sourcemap: true,
-          }),
-      ].filter(Boolean),
-    },
-    /**
-     * @type { import("rollup").OutputOptions }
-     */
-    outputOptions: {
-      // https://rollupjs.org/guide/en/#outputdir
-      dir: outputPath,
-      // https://rollupjs.org/guide/en/#outputformat
-      format: latestBuild ? "es" : "systemjs",
-      // https://rollupjs.org/guide/en/#outputexternallivebindings
-      externalLiveBindings: false,
-      // https://rollupjs.org/guide/en/#outputentryfilenames
-      // https://rollupjs.org/guide/en/#outputchunkfilenames
-      // https://rollupjs.org/guide/en/#outputassetfilenames
-      entryFileNames:
-        isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
-      chunkFileNames:
-        isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
-      assetFileNames:
-        isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
-      // https://rollupjs.org/guide/en/#outputsourcemap
-      sourcemap: isProdBuild ? true : "inline",
-    },
-  };
-};
+    ].filter(Boolean),
+  },
+  /**
+   * @type { import("rollup").OutputOptions }
+   */
+  outputOptions: {
+    // https://rollupjs.org/guide/en/#outputdir
+    dir: outputPath,
+    // https://rollupjs.org/guide/en/#outputformat
+    format: latestBuild ? "es" : "systemjs",
+    // https://rollupjs.org/guide/en/#outputexternallivebindings
+    externalLiveBindings: false,
+    // https://rollupjs.org/guide/en/#outputentryfilenames
+    // https://rollupjs.org/guide/en/#outputchunkfilenames
+    // https://rollupjs.org/guide/en/#outputassetfilenames
+    entryFileNames:
+      isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
+    chunkFileNames: isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
+    assetFileNames: isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
+    // https://rollupjs.org/guide/en/#outputsourcemap
+    sourcemap: isProdBuild ? true : "inline",
+  },
+});
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
-  return createRollupConfig(
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) =>
+  createRollupConfig(
     bundle.config.app({
       isProdBuild,
       latestBuild,
@@ -121,31 +111,24 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
       isWDS,
     })
   );
-};
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createRollupConfig(
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRollupConfig(
     bundle.config.demo({
       isProdBuild,
       latestBuild,
       isStatsBuild,
     })
   );
-};
 
-const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-};
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
-};
+const createHassioConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild })
-  );
-};
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,

build-scripts/util.js

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

build-scripts/webpack.js

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
-const bundle = require("./bundle");
+const bundle = require("./bundle.js");
 const log = require("fancy-log");
 
 class LogStartCompilePlugin {
@@ -46,15 +47,18 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
-            options: bundle.babelOptions({ latestBuild }),
+            options: {
+              ...bundle.babelOptions({ latestBuild }),
+              cacheDirectory: !isProdBuild,
+              cacheCompression: false,
+            },
           },
         },
         {
           test: /\.css$/,
-          use: "raw-loader",
+          type: "asset/source",
         },
       ],
     },
@@ -66,6 +70,8 @@ const createWebpackConfig = ({
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
+      moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
+      chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
       new WebpackManifestPlugin({
@@ -94,6 +100,7 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,
@@ -111,31 +118,25 @@ 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")
-      ),
       !isProdBuild && new LogStartCompilePlugin(),
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
+      alias: {
+        "lit/decorators$": "lit/decorators.js",
+        "lit/directive$": "lit/directive.js",
+        "lit/polyfill-support$": "lit/polyfill-support.js",
+      },
     },
     output: {
       filename: ({ chunk }) => {
-        if (!isProdBuild || dontHash.has(chunk.name)) {
+        if (!isProdBuild || isStatsBuild || dontHash.has(chunk.name)) {
           return `${chunk.name}.js`;
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
       chunkFilename:
-        isProdBuild && !isStatsBuild
-          ? "chunk.[chunkhash].js"
-          : "[name].chunk.js",
+        isProdBuild && !isStatsBuild ? "[chunkhash:8].js" : "[id].chunk.js",
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
@@ -144,33 +145,24 @@ const createWebpackConfig = ({
   };
 };
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-};
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.hassio({ isProdBuild, latestBuild })
-  );
-};
+const createHassioConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild })
-  );
-};
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,

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

@@ -139,7 +139,7 @@
           Your authentication credentials or Home Assistant url are never sent
           to the Cloud. You can validate this behavior in
           <a
-            href="https://github.com/home-assistant/home-assistant-polymer/tree/dev/cast"
+            href="https://github.com/home-assistant/frontend/tree/dev/cast"
             target="_blank"
             >the source code</a
           >.

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

@@ -1,16 +1,9 @@
+import "@material/mwc-button/mwc-button";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
@@ -32,7 +25,6 @@ import {
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
-import "@material/mwc-button/mwc-button";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -42,9 +34,9 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @internalProperty() private askWrite = false;
+  @state() private askWrite = false;
 
-  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
@@ -54,9 +46,7 @@ class HcCast extends LitElement {
     const error =
       this.castManager.castState === "NO_DEVICES_AVAILABLE"
         ? html`
-            <p>
-              There were no suitable Chromecast devices to cast to found.
-            </p>
+            <p>There were no suitable Chromecast devices to cast to found.</p>
           `
         : undefined;
 
@@ -206,7 +196,7 @@ class HcCast extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .center-item {
         display: flex;

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

@@ -11,15 +11,8 @@ import {
   getAuth,
   getAuthOptions,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
@@ -60,19 +53,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @internalProperty() private loading = false;
+  @state() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @internalProperty() private cannotConnect = false;
+  @state() private cannotConnect = false;
 
-  @internalProperty() private error?: string | TemplateResult;
+  @state() private error?: string | TemplateResult;
 
-  @internalProperty() private auth?: Auth;
+  @state() private auth?: Auth;
 
-  @internalProperty() private connection?: Connection;
+  @state() private connection?: Connection;
 
-  @internalProperty() private castManager?: CastManager | null;
+  @state() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -86,9 +79,7 @@ export class HcConnect extends LitElement {
           </div>
           <div class="card-actions">
             <a href="/">
-              <mwc-button>
-                Retry
-              </mwc-button>
+              <mwc-button> Retry </mwc-button>
             </a>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
@@ -299,7 +290,7 @@ export class HcConnect extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .card-content a {
         color: var(--primary-color);

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

@@ -4,15 +4,8 @@ import {
   getUser,
   HassUser,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
@@ -69,7 +62,7 @@ class HcLayout extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -5,8 +5,8 @@ import {
 import { castContext } from "../cast_context";
 
 export const castDemoLovelace: () => LovelaceConfig = () => {
-  const touchSupported = castContext.getDeviceCapabilities()
-    .touch_input_supported;
+  const touchSupported =
+    castContext.getDeviceCapabilities().touch_input_supported;
   return {
     views: [
       {

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

@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -21,7 +16,7 @@ import "./hc-lovelace";
 class HcDemo extends HassElement {
   @property({ attribute: false }) public lovelacePath!: string;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {
@@ -38,10 +33,10 @@ class HcDemo extends HassElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._initialize();
+    this._initializeHass();
   }
 
-  private async _initialize() {
+  private async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
       // Override updateHass so that the correct hass lifecycle methods are called
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
@@ -29,7 +22,7 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
@@ -35,6 +28,7 @@ class HcLovelace extends LitElement {
     }
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
+      rawConfig: this.lovelaceConfig,
       editMode: false,
       urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
@@ -90,7 +84,7 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-height: 100vh;

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

@@ -3,12 +3,8 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -36,13 +32,13 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @internalProperty() private _showDemo = false;
+  @state() private _showDemo = false;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
-  @internalProperty() private _lovelacePath: string | number | null = null;
+  @state() private _lovelacePath: string | number | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
 
@@ -221,11 +217,17 @@ export class HcMain extends HassElement {
   }
 
   private async _generateLovelaceConfig() {
-    const { generateLovelaceConfigFromHass } = await import(
-      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceConfigFromHass(this.hass!)
+      await generateLovelaceDashboardStrategy(
+        {
+          hass: this.hass!,
+          narrow: false,
+        },
+        "original-states"
+      )
     );
   }
 

demo/src/configs/arsaboo/entities.ts

@@ -246,11 +246,15 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
 
     "light.living_room_lights": {
       entity_id: "light.living_room_lights",
-      state: "off",
+      state: "on",
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
+        brightness: 175,
+        color_temp: 300,
+        supported_color_modes: ["brightness", "color_temp"],
         friendly_name: "Living Room Lights",
+        color_mode: "color_temp",
         supported_features: 55,
       },
     },
@@ -263,13 +267,27 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
     },
     "light.kitchen_lights": {
       entity_id: "light.kitchen_lights",
+      state: "on",
+      attributes: {
+        min_mireds: 111,
+        max_mireds: 400,
+        brightness: 200,
+        rgb_color: [255, 175, 96],
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "rgb",
+        friendly_name: "Kitchen Lights",
+        supported_features: 55,
+      },
+    },
+    "light.lifx5": {
+      entity_id: "light.lifx5",
       state: "off",
       attributes: {
-        friendly_name: "Kitchen Lights",
+        supported_color_modes: ["brightness"],
+        friendly_name: "Garage Lights",
         supported_features: 1,
       },
     },
-
     "sensor.plexspy": {
       entity_id: "sensor.plexspy",
       state: "0",
@@ -482,16 +500,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:history",
       },
     },
-    "light.lifx5": {
-      entity_id: "light.lifx5",
-      state: "on",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        friendly_name: "Garage Lights",
-        supported_features: 55,
-      },
-    },
     "sensor.alok_to_home": {
       entity_id: "sensor.alok_to_home",
       state: "41",

demo/src/configs/arsaboo/lovelace.ts

@@ -29,6 +29,11 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             },
           ],
         },
+        {
+          title: "Energy distribution today",
+          type: "energy-distribution",
+          link_dashboard: true,
+        },
         {
           type: "thermostat",
           entity: "climate.upstairs",
@@ -113,8 +118,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -196,8 +200,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -277,8 +280,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {
@@ -315,8 +317,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
                 on: "/assets/arsaboo/icons/light_bulb_on.png",
               },
               state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
+                on: "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
                 off: "brightness(80%) saturate(0.8)",
               },
               style: {

demo/src/configs/demo-configs.ts

@@ -1,5 +1,6 @@
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace } from "../../../src/panels/lovelace/types";
+import { energyEntities } from "../stubs/entities";
 import { DemoConfig } from "./types";
 
 export const demoConfigs: Array<() => Promise<DemoConfig>> = [
@@ -12,9 +13,8 @@ export const demoConfigs: Array<() => Promise<DemoConfig>> = [
 // eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
 // eslint-disable-next-line import/no-mutable-exports
-export let selectedDemoConfig: Promise<DemoConfig> = demoConfigs[
-  selectedDemoConfigIndex
-]();
+export let selectedDemoConfig: Promise<DemoConfig> =
+  demoConfigs[selectedDemoConfigIndex]();
 
 export const setDemoConfig = async (
   hass: MockHomeAssistant,
@@ -28,6 +28,7 @@ export const setDemoConfig = async (
   selectedDemoConfig = confProm;
 
   hass.addEntities(config.entities(hass.localize), true);
+  hass.addEntities(energyEntities());
   lovelace.saveConfig(config.lovelace(hass.localize));
   hass.mockTheme(config.theme());
 };

demo/src/configs/teachingbirds/entities.ts

@@ -980,8 +980,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         icon: "mdi:account-off",
         custom_ui_state_card: "state-card-custom-ui",
         templates: {
-          icon:
-            "if (state === 'on') return 'mdi:account'; else if (state === 'off') return 'mdi:account-off';\n",
+          icon: "if (state === 'on') return 'mdi:account'; else if (state === 'off') return 'mdi:account-off';\n",
           icon_color:
             "if (state === 'on') return 'rgb(56, 150, 56)'; else if (state === 'off') return 'rgb(249, 251, 255)';\n",
         },
@@ -1005,8 +1004,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         icon: "mdi:account-multiple-minus",
         custom_ui_state_card: "state-card-custom-ui",
         templates: {
-          icon:
-            "if (state === 'on') return 'mdi:account-group'; else if (state === 'off') return 'mdi:account-multiple-minus';\n",
+          icon: "if (state === 'on') return 'mdi:account-group'; else if (state === 'off') return 'mdi:account-multiple-minus';\n",
           icon_color:
             "if (state === 'on') return 'rgb(56, 150, 56)'; else if (state === 'off') return 'rgb(249, 251, 255)';\n",
         },
@@ -1114,6 +1112,9 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         min_mireds: 153,
         max_mireds: 500,
         brightness: 63,
+        color_temp: 200,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         friendly_name: "Upstairs lights",
         supported_features: 63,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1125,6 +1126,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Walk in closet lights",
         supported_features: 41,
+        supported_color_modes: ["brightness", "color_temp"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1136,6 +1138,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         brightness: 254,
         friendly_name: "Outdoor lights",
         supported_features: 41,
+        supported_color_modes: ["brightness"],
+        color_mode: "brightness",
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1148,6 +1152,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         friendly_name: "Downstairs lights",
         supported_features: 63,
@@ -1307,6 +1313,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
+        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Bedside Lamp",
         supported_features: 63,
@@ -1320,6 +1327,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
+        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Floorlamp Reading Light",
         supported_features: 43,
@@ -1335,6 +1343,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Hallway window light",
@@ -1349,6 +1359,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         brightness: 77,
         is_deconz_group: false,
+        supported_color_modes: ["brightness"],
         friendly_name: "Isa Ceiling Light",
         supported_features: 41,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1363,6 +1374,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 150,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Floorlamp",
@@ -1377,6 +1390,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Bedroom Ceiling Light",
         supported_features: 41,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1387,6 +1401,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Nightlight",
         supported_features: 17,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:lamp",
       },
@@ -1753,6 +1768,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.2,
         friendly_name: "Upstairs Hallway Light",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1768,6 +1784,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Dining Room Light",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1783,6 +1800,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Living room Spotlights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1799,6 +1817,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.5,
         friendly_name: "Passage Lights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1843,6 +1862,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 37.4,
         friendly_name: "Kitchen Lights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },

demo/src/configs/teachingbirds/lovelace.ts

@@ -440,57 +440,43 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           type: "horizontal-stack",
         },
         {
+          type: "grid",
+          columns: 2,
           cards: [
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_bedroom",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "S's room",
-                  entity: "sensor.temperature_stefan",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_bedroom",
             },
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_passage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Bathroom",
-                  entity: "sensor.temperature_downstairs_bathroom",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              name: "S's room",
+              entity: "sensor.temperature_stefan",
             },
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_storage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Refrigerator",
-                  entity: "sensor.refrigerator",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_passage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Bathroom",
+              entity: "sensor.temperature_downstairs_bathroom",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_storage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Refrigerator",
+              entity: "sensor.refrigerator",
             },
           ],
-          type: "vertical-stack",
         },
         {
           entities: [

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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import "./card-tools";
 
 class CardModder extends LitElement {

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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { html, LitElement } from "lit-element";
+import { html, LitElement } from "lit";
 
 if (!window.cardTools) {
   const version = 0.2;

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
 import "../../../src/components/ha-icon";
@@ -20,7 +13,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _castManager?: CastManager | null;
+  @state() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.
@@ -73,7 +66,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

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

@@ -1,14 +1,7 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { until } from "lit-html/directives/until";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
@@ -26,7 +19,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @internalProperty() private _switching?: boolean;
+  @state() private _switching = false;
 
   private _hidden = localStorage.hide_demo_card;
 
@@ -34,12 +27,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return this._hidden ? 0 : 2;
   }
 
-  public setConfig(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    config: LovelaceCardConfig
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-  ) {}
+  public setConfig(_config: LovelaceCardConfig) {}
 
   protected render(): TemplateResult {
     if (this._hidden) {
@@ -113,7 +101,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         a {

demo/src/entrypoint.ts

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

demo/src/ha-demo.ts

@@ -20,11 +20,14 @@ import { mockShoppingList } from "./stubs/shopping_list";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
+import { mockEnergy } from "./stubs/energy";
+import { mockConfig } from "./stubs/config";
+import { energyEntities } from "./stubs/entities";
 
 class HaDemo extends HomeAssistantAppEl {
-  protected async _initialize() {
+  protected async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
-      panelUrl: (this as any).panelUrl,
+      panelUrl: (this as any)._panelUrl,
       // Override updateHass so that the correct hass lifecycle methods are called
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>
         this._updateHass(hassUpdate),
@@ -47,8 +50,12 @@ class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
+    mockEnergy(hass);
+    mockConfig(hass);
     mockPersistentNotification(hass);
 
+    hass.addEntities(energyEntities());
+
     // Once config is loaded AND localize, set entities and apply theme.
     Promise.all([selectedDemoConfig, localizePromise]).then(
       ([conf, localize]) => {
@@ -70,7 +77,7 @@ class HaDemo extends HomeAssistantAppEl {
         }
 
         e.preventDefault();
-        navigate(this, href);
+        navigate(href);
       },
       { capture: true }
     );

demo/src/stubs/config.ts

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

demo/src/stubs/energy.ts

@@ -0,0 +1,134 @@
+import { format, startOfToday, startOfTomorrow } from "date-fns";
+import { EnergySolarForecasts } from "../../../src/data/energy";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEnergy = (hass: MockHomeAssistant) => {
+  hass.mockWS("energy/get_prefs", () => ({
+    energy_sources: [
+      {
+        type: "grid",
+        flow_from: [
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_1",
+            stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_from: "sensor.energy_consumption_tarif_2",
+            stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        flow_to: [
+          {
+            stat_energy_to: "sensor.energy_production_tarif_1",
+            stat_compensation: "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+          {
+            stat_energy_to: "sensor.energy_production_tarif_2",
+            stat_compensation: "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
+            entity_energy_price: null,
+            number_energy_price: null,
+          },
+        ],
+        cost_adjustment_day: 0,
+      },
+      {
+        type: "solar",
+        stat_energy_from: "sensor.solar_production",
+        config_entry_solar_forecast: ["solar_forecast"],
+      },
+      /* {
+        type: "battery",
+        stat_energy_from: "sensor.battery_output",
+        stat_energy_to: "sensor.battery_input",
+      }, */
+      {
+        type: "gas",
+        stat_energy_from: "sensor.energy_gas",
+        stat_cost: "sensor.energy_gas_cost",
+        entity_energy_from: "sensor.energy_gas",
+        entity_energy_price: null,
+        number_energy_price: null,
+      },
+    ],
+    device_consumption: [
+      {
+        stat_consumption: "sensor.energy_car",
+      },
+      {
+        stat_consumption: "sensor.energy_ac",
+      },
+      {
+        stat_consumption: "sensor.energy_washing_machine",
+      },
+      {
+        stat_consumption: "sensor.energy_dryer",
+      },
+      {
+        stat_consumption: "sensor.energy_heat_pump",
+      },
+      {
+        stat_consumption: "sensor.energy_boiler",
+      },
+    ],
+  }));
+  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  const todayString = format(startOfToday(), "yyyy-MM-dd");
+  const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
+  hass.mockWS(
+    "energy/solar_forecast",
+    (): EnergySolarForecasts => ({
+      solar_forecast: {
+        wh_hours: {
+          [`${todayString}T06:00:00`]: 0,
+          [`${todayString}T06:23:00`]: 6,
+          [`${todayString}T06:45:00`]: 39,
+          [`${todayString}T07:00:00`]: 28,
+          [`${todayString}T08:00:00`]: 208,
+          [`${todayString}T09:00:00`]: 352,
+          [`${todayString}T10:00:00`]: 544,
+          [`${todayString}T11:00:00`]: 748,
+          [`${todayString}T12:00:00`]: 1259,
+          [`${todayString}T13:00:00`]: 1361,
+          [`${todayString}T14:00:00`]: 1373,
+          [`${todayString}T15:00:00`]: 1370,
+          [`${todayString}T16:00:00`]: 1186,
+          [`${todayString}T17:00:00`]: 937,
+          [`${todayString}T18:00:00`]: 652,
+          [`${todayString}T19:00:00`]: 370,
+          [`${todayString}T20:00:00`]: 155,
+          [`${todayString}T21:48:00`]: 24,
+          [`${todayString}T22:36:00`]: 0,
+          [`${tomorrowString}T06:01:00`]: 0,
+          [`${tomorrowString}T06:23:00`]: 9,
+          [`${tomorrowString}T06:45:00`]: 47,
+          [`${tomorrowString}T07:00:00`]: 48,
+          [`${tomorrowString}T08:00:00`]: 473,
+          [`${tomorrowString}T09:00:00`]: 827,
+          [`${tomorrowString}T10:00:00`]: 1153,
+          [`${tomorrowString}T11:00:00`]: 1413,
+          [`${tomorrowString}T12:00:00`]: 1590,
+          [`${tomorrowString}T13:00:00`]: 1652,
+          [`${tomorrowString}T14:00:00`]: 1612,
+          [`${tomorrowString}T15:00:00`]: 1438,
+          [`${tomorrowString}T16:00:00`]: 1149,
+          [`${tomorrowString}T17:00:00`]: 830,
+          [`${tomorrowString}T18:00:00`]: 542,
+          [`${tomorrowString}T19:00:00`]: 311,
+          [`${tomorrowString}T20:00:00`]: 140,
+          [`${tomorrowString}T21:47:00`]: 22,
+          [`${tomorrowString}T22:34:00`]: 0,
+        },
+      },
+    })
+  );
+};

demo/src/stubs/entities.ts

@@ -0,0 +1,178 @@
+import { convertEntities } from "../../../src/fake_data/entity";
+
+export const energyEntities = () =>
+  convertEntities({
+    "sensor.grid_fossil_fuel_percentage": {
+      entity_id: "sensor.grid_fossil_fuel_percentage",
+      state: "88.6",
+      attributes: {
+        unit_of_measurement: "%",
+      },
+    },
+    "sensor.solar_production": {
+      entity_id: "sensor.solar_production",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Solar",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.battery_input": {
+      entity_id: "sensor.battery_input",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Battery Input",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.battery_output": {
+      entity_id: "sensor.battery_output",
+      state: "3",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Battery Output",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_1": {
+      entity_id: "sensor.energy_consumption_tarif_1	",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Grid consumption low tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_2": {
+      entity_id: "sensor.energy_consumption_tarif_2",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Grid consumption high tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_production_tarif_1": {
+      entity_id: "sensor.energy_production_tarif_1",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Returned to grid low tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_production_tarif_2": {
+      entity_id: "sensor.energy_production_tarif_2",
+      state: "88.6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Returned to grid high tariff",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_consumption_tarif_1_cost": {
+      entity_id: "sensor.energy_consumption_tarif_1_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_consumption_tarif_2_cost": {
+      entity_id: "sensor.energy_consumption_tarif_2_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_production_tarif_1_compensation": {
+      entity_id: "sensor.energy_production_tarif_1_compensation",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_production_tarif_2_compensation": {
+      entity_id: "sensor.energy_production_tarif_2_compensation",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_gas_cost": {
+      entity_id: "sensor.energy_gas_cost",
+      state: "2",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        unit_of_measurement: "EUR",
+      },
+    },
+    "sensor.energy_gas": {
+      entity_id: "sensor.energy_gas",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Gas",
+        unit_of_measurement: "m³",
+      },
+    },
+    "sensor.energy_car": {
+      entity_id: "sensor.energy_car",
+      state: "4",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Electric car",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_ac": {
+      entity_id: "sensor.energy_ac",
+      state: "3",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Air conditioning",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_washing_machine": {
+      entity_id: "sensor.energy_washing_machine",
+      state: "6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Washing machine",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_dryer": {
+      entity_id: "sensor.energy_dryer",
+      state: "5.5",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Dryer",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_heat_pump": {
+      entity_id: "sensor.energy_heat_pump",
+      state: "6",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Heat pump",
+        unit_of_measurement: "kWh",
+      },
+    },
+    "sensor.energy_boiler": {
+      entity_id: "sensor.energy_boiler",
+      state: "7",
+      attributes: {
+        last_reset: "1970-01-01T00:00:00:00+00",
+        friendly_name: "Boiler",
+        unit_of_measurement: "kWh",
+      },
+    },
+  });

demo/src/stubs/history.ts

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

demo/src/stubs/lovelace.ts

@@ -10,10 +10,9 @@ export const mockLovelace = (
   localizePromise: Promise<LocalizeFunc>
 ) => {
   hass.mockWS("lovelace/config", () =>
-    Promise.all([
-      selectedDemoConfig,
-      localizePromise,
-    ]).then(([config, localize]) => config.lovelace(localize))
+    Promise.all([selectedDemoConfig, localizePromise]).then(
+      ([config, localize]) => config.lovelace(localize)
+    )
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

demo/src/stubs/template.ts

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

demo/src/stubs/translations.ts

@@ -3,8 +3,6 @@ import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockTranslations = (hass: MockHomeAssistant) => {
   hass.mockWS(
     "frontend/get_translations",
-    (/* msg: {language: string, category: string} */) => {
-      return { resources: {} };
-    }
+    (/* msg: {language: string, category: string} */) => ({ resources: {} })
   );
 };

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
@@ -15,6 +15,10 @@ class DemoCard extends PolymerElement {
           margin: 0 0 20px;
           color: var(--primary-color);
         }
+        h2 small {
+          font-size: 0.5em;
+          color: var(--primary-text-color);
+        }
         #card {
           max-width: 400px;
           width: 100vw;
@@ -34,7 +38,12 @@ class DemoCard extends PolymerElement {
           }
         }
       </style>
-      <h2>[[config.heading]]</h2>
+      <h2>
+        [[config.heading]]
+        <template is="dom-if" if="[[_size]]">
+          <small>(size [[_size]])</small>
+        </template>
+      </h2>
       <div class="root">
         <div id="card"></div>
         <template is="dom-if" if="[[showConfig]]">
@@ -55,6 +64,9 @@ class DemoCard extends PolymerElement {
         observer: "_configChanged",
       },
       showConfig: Boolean,
+      _size: {
+        type: Number,
+      },
     };
   }
 
@@ -68,8 +80,19 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = this._createCardElement(safeLoad(config.config)[0]);
+    const el = this._createCardElement(load(config.config)[0]);
     card.appendChild(el);
+    this._getSize(el);
+  }
+
+  async _getSize(el) {
+    await customElements.whenDefined(el.localName);
+
+    if (!("getCardSize" in el)) {
+      this._size = undefined;
+      return;
+    }
+    this._size = await el.getCardSize();
   }
 
   _createCardElement(cardConfig) {

gallery/src/demos/demo-automation-describe-action.ts

@@ -1,12 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { describeAction } from "../../../src/data/script_i18n";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -62,7 +56,7 @@ export class DemoAutomationDescribeAction extends LitElement {
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-condition.ts

@@ -1,11 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { describeCondition } from "../../../src/data/automation_i18n";
 
@@ -31,7 +26,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
           (conf) => html`
             <div class="condition">
               <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-trigger.ts

@@ -1,11 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { describeTrigger } from "../../../src/data/automation_i18n";
 
@@ -34,7 +29,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
           (conf) => html`
             <div class="trigger">
               <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";
 import "../../../src/components/trace/hat-trace-timeline";

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

@@ -1,15 +1,8 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-  property,
-} from "lit-element";
+import { html, css, LitElement, TemplateResult } from "lit";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";
 import "../../../src/components/trace/hat-trace-timeline";
+import { customElement, property, state } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../src/types";
 import { DemoTrace } from "../data/traces/types";
@@ -22,7 +15,7 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 export class DemoAutomationTrace extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
-  @internalProperty() private _selected = {};
+  @state() private _selected = {};
 
   protected render(): TemplateResult {
     if (!this.hass) {

gallery/src/demos/demo-ha-alert.ts

@@ -0,0 +1,150 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-card";
+
+const alerts: {
+  title?: string;
+  description: string | TemplateResult;
+  type: "info" | "warning" | "error" | "success";
+  dismissable?: boolean;
+  action?: string;
+  rtl?: boolean;
+}[] = [
+  {
+    title: "Test info alert",
+    description: "This is a test info alert with a title and description",
+    type: "info",
+  },
+  {
+    title: "Test warning alert",
+    description: "This is a test warning alert with a title and description",
+    type: "warning",
+  },
+  {
+    title: "Test error alert",
+    description: "This is a test error alert with a title and description",
+    type: "error",
+  },
+  {
+    title: "Test warning with long string",
+    description:
+      "sensor.lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum_lorem_ipsum",
+    type: "warning",
+  },
+  {
+    title: "Test success alert",
+    description: "This is a test success alert with a title and description",
+    type: "success",
+  },
+  {
+    description: "This is a test info alert with description only",
+    type: "info",
+  },
+  {
+    description:
+      "This is a test warning alert with a rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really rally really really long description only",
+    type: "warning",
+  },
+  {
+    title: "Error with description and list",
+    description: html`<p>
+        This is a test error alert with a title, description and a list
+      </p>
+      <ul>
+        <li>List item #1</li>
+        <li>List item #2</li>
+        <li>List item #3</li>
+      </ul>`,
+    type: "error",
+  },
+  {
+    title: "Test dismissable alert",
+    description: "This is a test success alert that can be dismissable",
+    type: "success",
+    dismissable: true,
+  },
+  {
+    description: "Dismissable information",
+    type: "info",
+    dismissable: true,
+  },
+  {
+    title: "Error with action",
+    description: "This is a test error alert with action",
+    type: "error",
+    action: "restart",
+  },
+  {
+    title: "Unsaved data",
+    description: "You have unsaved data",
+    type: "warning",
+    action: "save",
+  },
+  {
+    description: "Dismissable information (RTL)",
+    type: "info",
+    dismissable: true,
+    rtl: true,
+  },
+  {
+    title: "Error with action",
+    description: "This is a test error alert with action (RTL)",
+    type: "error",
+    action: "restart",
+    rtl: true,
+  },
+  {
+    title: "Test success alert (RTL)",
+    description: "This is a test success alert with a title and description",
+    type: "success",
+    rtl: true,
+  },
+];
+
+@customElement("demo-ha-alert")
+export class DemoHaAlert extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-alert demo">
+        ${alerts.map(
+          (alert) => html`
+            <ha-alert
+              .title=${alert.title || ""}
+              .alertType=${alert.type}
+              .dismissable=${alert.dismissable || false}
+              .actionText=${alert.action || ""}
+              .rtl=${alert.rtl || false}
+            >
+              ${alert.description}
+            </ha-alert>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-alert": DemoHaAlert;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -93,4 +87,8 @@ class DemoAlarmPanelEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-alarm-panel-card": DemoAlarmPanelEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -75,4 +69,8 @@ class DemoConditional extends LitElement {
   }
 }
 
-customElements.define("demo-hui-conditional-card", DemoConditional);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-conditional-card": DemoConditional;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -239,4 +233,8 @@ class DemoEntities extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entities-card", DemoEntities);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entities-card": DemoEntities;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -91,4 +85,8 @@ class DemoButtonEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoButtonEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entity-button-card": DemoButtonEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -132,4 +126,8 @@ class DemoEntityFilter extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entity-filter-card": DemoEntityFilter;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -129,4 +123,8 @@ class DemoGaugeEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-gauge-card", DemoGaugeEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-gauge-card": DemoGaugeEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -186,7 +180,7 @@ const CONFIGS = [
       name:
     - light.kitchen_lights
     - entity: lock.kitchen_door
-      name: 
+      name:
     - light.ceiling_lights
     `,
   },
@@ -194,7 +188,7 @@ const CONFIGS = [
     heading: "Custom tap action",
     config: `
 - type: glance
-  columns: 4  
+  columns: 4
   entities:
     - entity: lock.kitchen_door
       name: Custom
@@ -232,4 +226,8 @@ class DemoGlanceEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-glance-card", DemoGlanceEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-glance-card": DemoGlanceEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -49,6 +43,110 @@ const ENTITIES = [
 ];
 
 const CONFIGS = [
+  {
+    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
+    `,
+  },
+  {
+    heading: "Default Grid with title",
+    config: `
+- type: grid
+  title: Kitchen
+  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: "Columns 4",
+    config: `
+- type: grid
+  columns: 4
+  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
+    `,
+  },
+  {
+    heading: "Columns 2",
+    config: `
+- type: grid
+  columns: 2
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    `,
+  },
+  {
+    heading: "Columns 1",
+    config: `
+- type: grid
+  columns: 1
+  cards:
+  - type: entity
+    entity: light.kitchen_lights
+    `,
+  },
+  {
+    heading: "Size for single card",
+    config: `
+- type: grid
+  cards:
+  - type: entity
+    entity: light.kitchen_lights
+    `,
+  },
+
   {
     heading: "Vertical Stack",
     config: `
@@ -99,45 +197,9 @@ 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
-    `,
-  },
 ];
 
-@customElement("demo-hui-stack-card")
+@customElement("demo-hui-grid-and-stack-card")
 class DemoStack extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -155,4 +217,8 @@ class DemoStack extends LitElement {
   }
 }
 
-customElements.define("demo-hui-stack-card", DemoStack);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-grid-and-stack-card": DemoStack;
+  }
+}

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

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -42,4 +43,8 @@ class DemoIframe extends LitElement {
   }
 }
 
-customElements.define("demo-hui-iframe-card", DemoIframe);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-iframe-card": DemoIframe;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -85,4 +79,8 @@ class DemoLightEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-light-card", DemoLightEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-light-card": DemoLightEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -183,4 +177,8 @@ class DemoMap extends LitElement {
   }
 }
 
-customElements.define("demo-hui-map-card", DemoMap);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-map-card": DemoMap;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -276,4 +270,8 @@ class DemoMarkdown extends LitElement {
   }
 }
 
-customElements.define("demo-hui-markdown-card", DemoMarkdown);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-markdown-card": DemoMarkdown;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -180,4 +174,8 @@ class DemoHuiMediaControlCard extends LitElement {
   }
 }
 
-customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-media-control-card": DemoHuiMediaControlCard;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -77,4 +71,8 @@ class DemoHuiMediaPlayerRow extends LitElement {
   }
 }
 
-customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-media-player-row": DemoHuiMediaPlayerRow;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -147,4 +141,8 @@ class DemoPictureElements extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-elements-card", DemoPictureElements);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-elements-card": DemoPictureElements;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -102,4 +96,8 @@ class DemoPictureEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-entity-card": DemoPictureEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -143,4 +137,8 @@ class DemoPictureGlance extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-glance-card": DemoPictureGlance;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createPlantEntities } from "../data/plants";
@@ -52,4 +46,8 @@ export class DemoPlantEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-plant-card", DemoPlantEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-plant-card": DemoPlantEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
@@ -48,4 +42,8 @@ class DemoShoppingListEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-shopping-list-card": DemoShoppingListEntity;
+  }
+}

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

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -96,4 +90,8 @@ class DemoThermostatEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-thermostat-card", DemoThermostatEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-thermostat-card": DemoThermostatEntity;
+  }
+}

gallery/src/demos/demo-integration-card.ts

@@ -0,0 +1,354 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+
+import { classMap } from "lit/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
+import { IntegrationManifest } from "../../../src/data/integration";
+
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/config/integrations/ha-integration-card";
+import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
+import "../../../src/panels/config/integrations/ha-config-flow-card";
+import type {
+  ConfigEntryExtended,
+  DataEntryFlowProgressExtended,
+} from "../../../src/panels/config/integrations/ha-config-integrations";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+
+const createConfigEntry = (
+  title: string,
+  override: Partial<ConfigEntryExtended> = {}
+): ConfigEntryExtended => ({
+  entry_id: title,
+  domain: "esphome",
+  localized_domain_name: "ESPHome",
+  title,
+  source: "zeroconf",
+  state: "loaded",
+  supports_options: false,
+  supports_unload: true,
+  disabled_by: null,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
+  reason: null,
+  ...override,
+});
+
+const createManifest = (
+  isCustom: boolean,
+  isCloud: boolean,
+  name = "ESPHome"
+): IntegrationManifest => ({
+  name,
+  domain: "esphome",
+  is_built_in: !isCustom,
+  config_flow: false,
+  documentation: "https://www.home-assistant.io/integrations/esphome/",
+  iot_class: isCloud ? "cloud_polling" : "local_polling",
+});
+
+const loadedEntry = createConfigEntry("Loaded");
+const nameAsDomainEntry = createConfigEntry("ESPHome");
+const longNameEntry = createConfigEntry(
+  "Entry with a super long name that is going to the next line"
+);
+const longNonBreakingNameEntry = createConfigEntry(
+  "EntryWithASuperLongNameThatDoesNotBreak"
+);
+const configPanelEntry = createConfigEntry("Config Panel", {
+  domain: "mqtt",
+  localized_domain_name: "MQTT",
+});
+const optionsFlowEntry = createConfigEntry("Options Flow", {
+  supports_options: true,
+});
+const disabledPollingEntry = createConfigEntry("Disabled Polling", {
+  pref_disable_polling: true,
+});
+const setupErrorEntry = createConfigEntry("Setup Error", {
+  state: "setup_error",
+});
+const migrationErrorEntry = createConfigEntry("Migration Error", {
+  state: "migration_error",
+});
+const setupRetryEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+});
+const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "connection_error",
+});
+const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason:
+    "HTTPSConnectionpool: Max retries exceeded with NewConnectionError('<urllib3.connection.HTTPSConnection object at 0x9eedfc10>: Failed to establish a new connection: [Errno 113] Host is unreachable')",
+});
+const failedUnloadEntry = createConfigEntry("Failed Unload", {
+  state: "failed_unload",
+});
+const notLoadedEntry = createConfigEntry("Not Loaded", { state: "not_loaded" });
+const disabledEntry = createConfigEntry("Disabled", {
+  state: "not_loaded",
+  disabled_by: "user",
+});
+const disabledFailedUnloadEntry = createConfigEntry(
+  "Disabled - Failed Unload",
+  {
+    state: "failed_unload",
+    disabled_by: "user",
+  }
+);
+
+const configFlows: DataEntryFlowProgressExtended[] = [
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "roku",
+    context: {
+      source: "ssdp",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Living room Roku",
+  },
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "hue",
+    context: {
+      source: "reauth",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Philips Hue",
+  },
+];
+
+const configEntries: Array<{
+  items: ConfigEntryExtended[];
+  is_custom?: boolean;
+  disabled?: boolean;
+  highlight?: string;
+}> = [
+  { items: [loadedEntry] },
+  { items: [configPanelEntry] },
+  { items: [optionsFlowEntry] },
+  { items: [disabledPollingEntry] },
+  { items: [nameAsDomainEntry] },
+  { items: [longNameEntry] },
+  { items: [longNonBreakingNameEntry] },
+  { items: [setupErrorEntry] },
+  { items: [migrationErrorEntry] },
+  { items: [setupRetryEntry] },
+  { items: [setupRetryReasonEntry] },
+  { items: [setupRetryReasonMissingKeyEntry] },
+  { items: [failedUnloadEntry] },
+  { items: [notLoadedEntry] },
+  {
+    items: [
+      loadedEntry,
+      setupErrorEntry,
+      migrationErrorEntry,
+      longNameEntry,
+      longNonBreakingNameEntry,
+      setupRetryEntry,
+      failedUnloadEntry,
+      notLoadedEntry,
+      disabledEntry,
+      nameAsDomainEntry,
+      configPanelEntry,
+      optionsFlowEntry,
+    ],
+  },
+  { disabled: true, items: [disabledEntry] },
+  { disabled: true, items: [disabledFailedUnloadEntry] },
+  {
+    disabled: true,
+    items: [disabledEntry, disabledFailedUnloadEntry],
+  },
+  {
+    items: [loadedEntry, configPanelEntry],
+    highlight: "Loaded",
+  },
+];
+
+const createEntityRegistryEntries = (
+  item: ConfigEntryExtended
+): EntityRegistryEntry[] => [
+  {
+    config_entry_id: item.entry_id,
+    device_id: "mock-device-id",
+    area_id: null,
+    disabled_by: null,
+    entity_id: "binary_sensor.updater",
+    name: null,
+    icon: null,
+    platform: "updater",
+  },
+];
+
+const createDeviceRegistryEntries = (
+  item: ConfigEntryExtended
+): DeviceRegistryEntry[] => [
+  {
+    entry_type: null,
+    config_entries: [item.entry_id],
+    connections: [],
+    manufacturer: "ESPHome",
+    model: "Mock Device",
+    name: "Tag Reader",
+    sw_version: null,
+    id: "mock-device-id",
+    identifiers: [],
+    via_device_id: null,
+    area_id: null,
+    name_by_user: null,
+    disabled_by: null,
+  },
+];
+
+@customElement("demo-integration-card")
+export class DemoIntegrationCard extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @state() isCustomIntegration = false;
+
+  @state() isCloud = false;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <div class="container">
+        <div class="filters">
+          <ha-formfield label="Custom Integration">
+            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Relies on cloud">
+            <ha-switch @change=${this._toggleCloud}></ha-switch>
+          </ha-formfield>
+        </div>
+
+        <ha-ignored-config-entry-card
+          .hass=${this.hass}
+          .entry=${createConfigEntry("Ignored Entry")}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+        ></ha-ignored-config-entry-card>
+
+        ${configFlows.map(
+          (flow) => html`
+            <ha-config-flow-card
+              .hass=${this.hass}
+              .flow=${flow}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud,
+                flow.handler === "roku" ? "Roku" : "Philips Hue"
+              )}
+            ></ha-config-flow-card>
+          `
+        )}
+        ${configEntries.map(
+          (info) => html`
+            <ha-integration-card
+              class=${classMap({
+                highlight: info.highlight !== undefined,
+              })}
+              .hass=${this.hass}
+              domain="esphome"
+              .items=${info.items}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
+              ?disabled=${info.disabled}
+              .selectedConfigEntryId=${info.highlight}
+            ></ha-integration-card>
+          `
+        )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    // Normally this string is loaded from backend
+    hass.addTranslations(
+      {
+        "component.esphome.config.error.connection_error":
+          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
+      },
+      "en"
+    );
+  }
+
+  private _toggleCustomIntegration() {
+    this.isCustomIntegration = !this.isCustomIntegration;
+  }
+
+  private _toggleCloud() {
+    this.isCloud = !this.isCloud;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 16px 16px;
+        padding: 8px 16px 16px;
+        margin-bottom: 64px;
+      }
+
+      .container > * {
+        max-width: 500px;
+      }
+
+      ha-formfield {
+        margin: 8px 0;
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-integration-card": DemoIntegrationCard;
+  }
+}

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

@@ -1,21 +1,11 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../../src/components/ha-card";
 import {
-  SUPPORT_BRIGHTNESS,
-  SUPPORT_COLOR,
-  SUPPORT_COLOR_TEMP,
+  LightColorModes,
   SUPPORT_EFFECT,
   SUPPORT_FLASH,
   SUPPORT_TRANSITION,
-  SUPPORT_WHITE_VALUE,
 } from "../../../src/data/light";
 import "../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
@@ -32,7 +22,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_features: SUPPORT_BRIGHTNESS,
+    supported_color_modes: [LightColorModes.BRIGHTNESS],
+    color_mode: LightColorModes.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -40,20 +31,96 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_BRIGHTNESS + SUPPORT_COLOR_TEMP,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+    ],
+    color_mode: LightColorModes.COLOR_TEMP,
   }),
-  getEntity("light", "color_effectslight", "on", {
-    friendly_name: "Color Effets Light",
+  getEntity("light", "color_hs_light", "on", {
+    friendly_name: "Color HS Light",
     brightness: 255,
     hs_color: [30, 100],
-    white_value: 36,
-    supported_features:
-      SUPPORT_BRIGHTNESS +
-      SUPPORT_EFFECT +
-      SUPPORT_FLASH +
-      SUPPORT_COLOR +
-      SUPPORT_TRANSITION +
-      SUPPORT_WHITE_VALUE,
+    rgb_color: [30, 100, 255],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.HS,
+    ],
+    color_mode: LightColorModes.HS,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgb_ct_light", "on", {
+    friendly_name: "Color RGB + CT Light",
+    brightness: 255,
+    color_temp: 75,
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGB,
+    ],
+    color_mode: LightColorModes.COLOR_TEMP,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_RGB_light", "on", {
+    friendly_name: "Color Effets Light",
+    brightness: 255,
+    rgb_color: [30, 100, 255],
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
+    color_mode: LightColorModes.RGB,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgbw_light", "on", {
+    friendly_name: "Color RGBW Light",
+    brightness: 255,
+    rgbw_color: [30, 100, 255, 125],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBW,
+    ],
+    color_mode: LightColorModes.RGBW,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgbww_light", "on", {
+    friendly_name: "Color RGBWW Light",
+    brightness: 255,
+    rgbww_color: [30, 100, 255, 125, 10],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBWW,
+    ],
+    color_mode: LightColorModes.RGBWW,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_xy_light", "on", {
+    friendly_name: "Color XY Light",
+    brightness: 255,
+    xy_color: [30, 100],
+    rgb_color: [30, 100, 255],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.XY,
+    ],
+    color_mode: LightColorModes.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

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

@@ -1,5 +1,6 @@
 import "@material/mwc-button";
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";

gallery/src/ha-gallery.js

@@ -172,6 +172,14 @@ class HaGallery extends PolymerElement {
       this.$.notifications.showDialog({ message: ev.detail.message })
     );
 
+    this.addEventListener("alert-dismissed-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
+    );
+
+    this.addEventListener("alert-action-clicked", () =>
+      this.$.notifications.showDialog({ message: "Alert action clicked" })
+    );
+
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({

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

@@ -1,12 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import {
-  css,
-  CSSResultArray,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
@@ -47,9 +41,7 @@ class HassioAddonRepositoryEl extends LitElement {
     const repo = this.repo;
     let _addons = this.addons;
     if (!this.hass.userData?.showAdvanced) {
-      _addons = _addons.filter((addon) => {
-        return !addon.advanced;
-      });
+      _addons = _addons.filter((addon) => !addon.advanced);
     }
     const addons = this._getAddons(_addons, this.filter);
 
@@ -68,9 +60,7 @@ class HassioAddonRepositoryEl extends LitElement {
     }
     return html`
       <div class="content">
-        <h1>
-          ${repo.name}
-        </h1>
+        <h1>${repo.name}</h1>
         <div class="card-group">
           ${addons.map(
             (addon) => html`
@@ -130,10 +120,10 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       hassioStyle,
       css`

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

@@ -4,13 +4,13 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  internalProperty,
+  CSSResultGroup,
+  html,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
+  TemplateResult,
+} from "lit";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -58,7 +58,7 @@ class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   public async refreshData() {
     await reloadHassioAddons(this.hass);
@@ -86,9 +86,7 @@ class HassioAddonStore extends LitElement {
         main-page
         supervisor
       >
-        <span slot="header">
-          ${this.supervisor.localize("panel.store")}
-        </span>
+        <span slot="header"> ${this.supervisor.localize("panel.store")} </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -140,7 +138,7 @@ class HassioAddonStore extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     const repositoryUrl = extractSearchParam("repository_url");
-    navigate(this, "/hassio/store", true);
+    navigate("/hassio/store", { replace: true });
     if (repositoryUrl) {
       this._manageRepositories(repositoryUrl);
     }
@@ -154,8 +152,8 @@ class HassioAddonStore extends LitElement {
       repositories: HassioAddonRepository[],
       addons: HassioAddonInfo[],
       filter?: string
-    ) => {
-      return repositories.sort(sortRepos).map((repo) => {
+    ) =>
+      repositories.sort(sortRepos).map((repo) => {
         const filteredAddons = addons.filter(
           (addon) => addon.repository === repo.slug
         );
@@ -171,8 +169,7 @@ class HassioAddonStore extends LitElement {
               ></hassio-addon-repository>
             `
           : html``;
-      });
-    }
+      })
   );
 
   private _handleAction(ev: CustomEvent<ActionDetail>) {
@@ -221,7 +218,7 @@ class HassioAddonStore extends LitElement {
     this._filter = e.detail.value;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hassio-addon-repository {
         margin-top: 24px;

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

@@ -4,17 +4,16 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
@@ -39,15 +38,15 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
+  @state() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
+  @state() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _selectedInput!: null | string;
+  @state() private _selectedInput!: null | string;
 
-  @internalProperty() private _selectedOutput!: null | string;
+  @state() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`
@@ -55,7 +54,9 @@ class HassioAddonAudio extends LitElement {
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
 
           <paper-dropdown-menu
             .label=${this.supervisor.localize(
@@ -69,13 +70,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedInput!}
             >
               ${this._inputDevices &&
-              this._inputDevices.map((item) => {
-                return html`
+              this._inputDevices.map(
+                (item) => html`
                   <paper-item device=${item.device || ""}>
                     ${item.name}
                   </paper-item>
-                `;
-              })}
+                `
+              )}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
@@ -90,13 +91,13 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedOutput!}
             >
               ${this._outputDevices &&
-              this._outputDevices.map((item) => {
-                return html`
+              this._outputDevices.map(
+                (item) => html`
                   <paper-item device=${item.device || ""}
                     >${item.name}</paper-item
                   >
-                `;
-              })}
+                `
+              )}
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
@@ -109,7 +110,7 @@ class HassioAddonAudio extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -119,10 +120,6 @@ class HassioAddonAudio extends LitElement {
         paper-dropdown-menu {
           display: block;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
         paper-item {
           width: 450px;
         }

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -70,7 +63,7 @@ class HassioAddonConfigDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -2,24 +2,22 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-formfield";
@@ -30,6 +28,7 @@ import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -41,6 +40,13 @@ import { hassioStyle } from "../../resources/hassio-style";
 
 const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
 
+const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
+  new Type("!secret", {
+    kind: "scalar",
+    construct: (data) => `!secret ${data}`,
+  }),
+]);
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -53,31 +59,27 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _valid = true;
 
-  @internalProperty() private _canShowSchema = false;
+  @state() private _canShowSchema = false;
 
-  @internalProperty() private _showOptional = false;
+  @state() private _showOptional = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _options?: Record<string, unknown>;
+  @state() private _options?: Record<string, unknown>;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  public computeLabel = (entry: HaFormSchema): string => {
-    return (
-      this.addon.translations[this.hass.language]?.configuration?.[entry.name]
-        ?.name ||
-      this.addon.translations.en?.configuration?.[entry.name].name ||
-      entry.name
-    );
-  };
+  public computeLabel = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.name ||
+    this.addon.translations.en?.configuration?.[entry.name].name ||
+    entry.name;
 
   private _filteredShchema = memoizeOne(
-    (options: Record<string, unknown>, schema: HaFormSchema[]) => {
-      return schema.filter((entry) => entry.name in options || entry.required);
-    }
+    (options: Record<string, unknown>, schema: HaFormSchema[]) =>
+      schema.filter((entry) => entry.name in options || entry.required)
   );
 
   protected render(): TemplateResult {
@@ -132,18 +134,21 @@ class HassioAddonConfig extends LitElement {
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
+                .yamlSchema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           ${!this._yamlMode ||
           (this._canShowSchema && this.addon.schema) ||
           this._valid
             ? ""
             : html`
-                <div class="errors">
+                <ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "addon.configuration.options.invalid_yaml"
                   )}
-                </div>
+                </ha-alert>
               `}
         </div>
         ${hasHiddenOptions
@@ -266,36 +271,48 @@ class HassioAddonConfig extends LitElement {
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    const options: Record<string, unknown> = this._yamlMode
+      ? this._editor?.value
+      : this._options;
+    const eventdata = {
+      success: true,
+      response: undefined,
+      path: "options",
+    };
     button.progress = true;
 
     this._error = undefined;
 
     try {
+      const validation = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug,
+        options
+      );
+      if (!validation.valid) {
+        throw Error(validation.message);
+      }
       await setHassioAddonOption(this.hass, this.addon.slug, {
-        options: this._yamlMode ? this._editor?.value : this._options,
+        options,
       });
 
       this._configHasChanged = false;
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "options",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
       this._error = this.supervisor.localize(
-        "addon.configuration.options.failed_to_save",
+        "addon.failed_to_save",
         "error",
         extractApiErrorMessage(err)
       );
+      eventdata.success = false;
     }
     button.progress = false;
+    fireEvent(this, "hass-api-called", eventdata);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -310,17 +327,7 @@ class HassioAddonConfig extends LitElement {
           display: flex;
           justify-content: space-between;
         }
-        .errors {
-          color: var(--error-color);
-          margin-top: 16px;
-        }
-        iron-autogrow-textarea {
-          width: 100%;
-          font-family: var(--code-font-family, monospace);
-        }
-        .syntaxerror {
-          color: var(--error-color);
-        }
+
         .card-menu {
           float: right;
           z-index: 3;

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

@@ -1,17 +1,16 @@
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
@@ -43,9 +42,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _config?: NetworkItem[];
+  @state() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -64,7 +63,9 @@ class HassioAddonNetwork extends LitElement {
         )}
       >
         <div class="card-content">
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
 
           <table>
             <tbody>
@@ -79,12 +80,10 @@ class HassioAddonNetwork extends LitElement {
                     "addon.configuration.network.host"
                   )}
                 </th>
-                <th>
-                  ${this.supervisor.localize("common.description")}
-                </th>
+                <th>${this.supervisor.localize("common.description")}</th>
               </tr>
-              ${this._config!.map((item) => {
-                return html`
+              ${this._config!.map(
+                (item) => html`
                   <tr>
                     <td>${item.container}</td>
                     <td>
@@ -100,8 +99,8 @@ class HassioAddonNetwork extends LitElement {
                     </td>
                     <td>${this._computeDescription(item)}</td>
                   </tr>
-                `;
-              })}
+                `
+              )}
             </tbody>
           </table>
         </div>
@@ -124,25 +123,20 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
-  private _computeDescription = (item: NetworkItem): string => {
-    return (
-      this.addon.translations[this.hass.language]?.network?.[item.container]
-        ?.description ||
-      this.addon.translations.en?.network?.[item.container]?.description ||
-      item.description
-    );
-  };
+  private _computeDescription = (item: NetworkItem): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.container]
+      ?.description ||
+    this.addon.translations.en?.network?.[item.container]?.description ||
+    item.description;
 
   private _setNetworkConfig(): void {
     const network = this.addon.network || {};
     const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => {
-      return {
-        container: key,
-        host: network[key],
-        description: description[key],
-      };
-    });
+    const items: NetworkItem[] = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
     this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
   }
 
@@ -223,7 +217,7 @@ class HassioAddonNetwork extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -234,10 +228,6 @@ class HassioAddonNetwork extends LitElement {
         ha-card {
           display: block;
         }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
         .card-actions {
           display: flex;
           justify-content: space-between;

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

@@ -1,16 +1,9 @@
 import "../../../../src/components/ha-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
+import { customElement, property, state } from "lit/decorators";
 import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
@@ -30,9 +23,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -46,7 +39,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
     return html`
       <div class="content">
         <ha-card>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           <div class="card-content">
             ${this._content
               ? html`<ha-markdown .content=${this._content}></ha-markdown>`
@@ -57,7 +52,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -4,16 +4,8 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
@@ -52,7 +44,7 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() _error?: string;
+  @state() _error?: string;
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -133,7 +125,7 @@ class HassioAddonDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -177,12 +169,13 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons
-          .some((addon) => addon.slug === requestedAddon);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {
-          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
         }
       }
     }
@@ -190,6 +183,10 @@ class HassioAddonDashboard extends LitElement {
   }
 
   private async _apiCalled(ev): Promise<void> {
+    if (!ev.detail.success) {
+      return;
+    }
+
     const pathSplit: string[] = ev.detail.path?.split("/");
 
     if (!pathSplit || pathSplit.length === 0) {

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

@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -42,7 +35,7 @@ class HassioAddonInfoDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -14,23 +14,16 @@ import {
   mdiPound,
   mdiShield,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
@@ -90,9 +83,9 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _addonStoreInfo = memoizeOne(
     (slug: string, storeAddons: StoreAddon[]) =>
@@ -151,14 +144,14 @@ class HassioAddonInfo extends LitElement {
                       this.addon.arch
                     )
                     ? html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch"
                           )}
-                        </p>
+                        </ha-alert>
                       `
                     : html`
-                        <p class="warning">
+                        <ha-alert alert-type="warning">
                           ${this.supervisor.localize(
                             "addon.dashboard.not_available_arch",
                             "core_version_installed",
@@ -166,21 +159,21 @@ class HassioAddonInfo extends LitElement {
                             "core_version_needed",
                             addonStoreInfo.homeassistant
                           )}
-                        </p>
+                        </ha-alert>
                       `
                   : ""}
               </div>
               <div class="card-actions">
-                <mwc-button @click=${this._updateClicked}>
-                  ${this.supervisor.localize("common.update")}
-                </mwc-button>
                 ${this.addon.changelog
                   ? html`
                       <mwc-button @click=${this._openChangelog}>
                         ${this.supervisor.localize("addon.dashboard.changelog")}
                       </mwc-button>
                     `
-                  : ""}
+                  : html`<span></span>`}
+                <mwc-button @click=${this._updateClicked}>
+                  ${this.supervisor.localize("common.update")}
+                </mwc-button>
               </div>
             </ha-card>
           `
@@ -242,14 +235,18 @@ class HassioAddonInfo extends LitElement {
               ? html`
                   Current version: ${this.addon.version}
                   <div class="changelog" @click=${this._openChangelog}>
-                    (<span class="changelog-link">${
-                      this.supervisor.localize("addon.dashboard.changelog")}</span
+                    (<span class="changelog-link"
+                      >${this.supervisor.localize(
+                        "addon.dashboard.changelog"
+                      )}</span
                     >)
                   </div>
                 `
-              : html`<span class="changelog-link" @click=${this._openChangelog}>${
-                  this.supervisor.localize("addon.dashboard.changelog")
-                }</span>`}
+              : html`<span class="changelog-link" @click=${this._openChangelog}
+                  >${this.supervisor.localize(
+                    "addon.dashboard.changelog"
+                  )}</span
+                >`}
           </div>
 
           <div class="description light-color">
@@ -257,13 +254,9 @@ class HassioAddonInfo extends LitElement {
             ${this.supervisor.localize(
               "addon.dashboard.visit_addon_page",
               "name",
-              html`<a
-                href="${this.addon.url!}"
-                target="_blank"
-                rel="noreferrer"
-              >
-                ${this.addon.name}
-              </a>`
+              html`<a href="${this.addon.url!}" target="_blank" rel="noreferrer"
+                >${this.addon.name}</a
+              >`
             )}
           </div>
           <div class="addon-container">
@@ -562,9 +555,7 @@ class HassioAddonInfo extends LitElement {
                       <span slot="heading">
                         ${this.supervisor.localize("addon.dashboard.hostname")}
                       </span>
-                      <code slot="description">
-                        ${this.addon.hostname}
-                      </code>
+                      <code slot="description"> ${this.addon.hostname} </code>
                     </ha-settings-row>
                     ${metrics.map(
                       (metric) =>
@@ -579,21 +570,23 @@ class HassioAddonInfo extends LitElement {
                 : ""}
             </div>
           </div>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
           ${!this.addon.version && addonStoreInfo && !this.addon.available
             ? !addonArchIsSupported(
                 this.supervisor.info.supported_arch,
                 this.addon.arch
               )
               ? html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_arch"
                     )}
-                  </p>
+                  </ha-alert>
                 `
               : html`
-                  <p class="warning">
+                  <ha-alert alert-type="warning">
                     ${this.supervisor.localize(
                       "addon.dashboard.not_available_version",
                       "core_version_installed",
@@ -601,7 +594,7 @@ class HassioAddonInfo extends LitElement {
                       "core_version_needed",
                       addonStoreInfo!.homeassistant
                     )}
-                  </p>
+                  </ha-alert>
                 `
             : ""}
         </div>
@@ -771,7 +764,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+    navigate(`/hassio/ingress/${this.addon.slug}`);
   }
 
   private get _computeShowIngressUI(): boolean {
@@ -902,10 +895,19 @@ class HassioAddonInfo extends LitElement {
 
   private async _openChangelog(): Promise<void> {
     try {
-      const content = await fetchHassioAddonChangelog(
-        this.hass,
-        this.addon.slug
-      );
+      let content = await fetchHassioAddonChangelog(this.hass, this.addon.slug);
+      if (
+        content.includes(`# ${this.addon.version}`) &&
+        content.includes(`# ${this.addon.version_latest}`)
+      ) {
+        const newcontent = content.split(`# ${this.addon.version}`)[0];
+        if (newcontent.includes(`# ${this.addon.version_latest}`)) {
+          // Only change the content if the new version still exist
+          // if the changelog does not have the newests version on top
+          // this will not be true, and we don't modify the content
+          content = newcontent;
+        }
+      }
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("addon.dashboard.changelog"),
         content,
@@ -988,12 +990,12 @@ class HassioAddonInfo extends LitElement {
       supervisor: this.supervisor,
       name: this.addon.name,
       version: this.addon.version_latest,
-      snapshotParams: {
+      backupParams: {
         name: `addon_${this.addon.slug}_${this.addon.version}`,
         addons: [this.addon.slug],
         homeassistant: false,
       },
-      updateHandler: async () => await this._updateAddon(),
+      updateHandler: async () => this._updateAddon(),
     });
   }
 
@@ -1061,7 +1063,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openConfiguration(): void {
-    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+    navigate(`/hassio/addon/${this.addon.slug}/config`);
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {
@@ -1100,7 +1102,7 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -1150,6 +1152,7 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         img.logo {
+          max-width: 100%;
           max-height: 60px;
           margin: 16px 0;
           display: block;
@@ -1159,10 +1162,10 @@ class HassioAddonInfo extends LitElement {
           display: flex;
         }
         ha-svg-icon.running {
-          color: var(--paper-green-400);
+          color: var(--success-color);
         }
         ha-svg-icon.stopped {
-          color: var(--google-red-300);
+          color: var(--error-color);
         }
         ha-call-api-button {
           font-weight: 500;

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -38,7 +31,7 @@ class HassioAddonLogDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,