make it an option to track scrolling

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.devcontainer/devcontainer.json

@@ -21,7 +21,8 @@
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
         "github.vscode-pull-request-github",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
+        "yeion7.styled-global-variables-autocomplete"
       ],
       "settings": {
         "files.eol": "\n",

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -41,9 +41,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=cast/dist --alias dev
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -62,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -77,9 +76,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=cast/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,9 +42,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=demo/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -63,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,9 +77,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=demo/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -34,9 +34,8 @@ jobs:
 
       - name: Deploy to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=gallery/dist --prod
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -39,13 +39,14 @@ jobs:
 
       - name: Deploy preview to Netlify
         id: deploy
-        uses: netlify/actions/cli@master
-        with:
-          args: deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}"
+        run: |
+          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+            --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
 
       - name: Generate summary
         run: |
-          echo "${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}" >> "$GITHUB_STEP_SUMMARY"
+          NETLIFY_LIVE_URL=$(jq -r '.deploy_url' deploy_output.json)
+          echo "$NETLIFY_LIVE_URL" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.2.2
         with:
           files: |
             dist/*.whl
@@ -74,7 +74,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2025.02.0
+        uses: home-assistant/wheels@2025.03.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -92,7 +92,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -107,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.2.2
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -121,7 +121,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@v4.3.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -136,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.2.1
+        uses: softprops/action-gh-release@v2.2.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "runem.lit-plugin",
     "github.vscode-pull-request-github",
     "eamodio.gitlens",
-    "vitest.explorer"
+    "vitest.explorer",
+    "yeion7.styled-global-variables-autocomplete"
   ]
 }

.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch

@@ -0,0 +1,22 @@
+diff --git a/mwc-formfield-base.js b/mwc-formfield-base.js
+index 7b763326d7d51835ad52646bfbc80fe21989abd3..f2baa8224e6d03df1fdb0b9fd03f5c6d77fc8747 100644
+--- a/mwc-formfield-base.js
++++ b/mwc-formfield-base.js
+@@ -9,7 +9,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
+ import { FormElement } from '@material/mwc-base/form-element.js';
+ import { observer } from '@material/mwc-base/observer.js';
+ import { html } from 'lit';
+-import { property, query, queryAssignedNodes } from 'lit/decorators.js';
++import { property, query, queryAssignedElements } from 'lit/decorators.js';
+ import { classMap } from 'lit/directives/class-map.js';
+ export class FormfieldBase extends BaseElement {
+     constructor() {
+@@ -96,7 +96,7 @@ __decorate([
+     query('.mdc-form-field')
+ ], FormfieldBase.prototype, "mdcRoot", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '*')
++    queryAssignedElements({ slot: "", flatten: true, selector: "*" })
+ ], FormfieldBase.prototype, "slottedInputs", void 0);
+ __decorate([
+     query('label')

.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch

@@ -0,0 +1,26 @@
+diff --git a/mwc-list-base.js b/mwc-list-base.js
+index 1ba95b6a01dcecea4d85b5cbbbcc3dfb04c40d5f..dced13fdb7929c490d6661b1bbe7e9f96dcd2285 100644
+--- a/mwc-list-base.js
++++ b/mwc-list-base.js
+@@ -11,7 +11,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js';
+ import { observer } from '@material/mwc-base/observer.js';
+ import { deepActiveElementPath, doesElementContainFocus, isNodeElement } from '@material/mwc-base/utils.js';
+ import { html } from 'lit';
+-import { property, query, queryAssignedNodes } from 'lit/decorators.js';
++import { property, query, queryAssignedElements } from 'lit/decorators.js';
+ import { ifDefined } from 'lit/directives/if-defined.js';
+ import MDCListFoundation, { isIndexSet } from './mwc-list-foundation.js';
+ export { createSetFromIndex, isEventMulti, isIndexSet } from './mwc-list-foundation.js';
+@@ -425,10 +425,10 @@ __decorate([
+     query('.mdc-deprecated-list')
+ ], ListBase.prototype, "mdcRoot", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '*')
++    queryAssignedElements({ flatten: true, selector: "*" })
+ ], ListBase.prototype, "assignedElements", void 0);
+ __decorate([
+-    queryAssignedNodes('', true, '[tabindex="0"]')
++    queryAssignedElements({ flatten: true, selector: '[tabindex="0"]' })
+ ], ListBase.prototype, "tabbableElements", void 0);
+ __decorate([
+     property({ type: Boolean }),

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

@@ -1,34 +0,0 @@
-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++) {

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.7.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -2,7 +2,7 @@ import defineProvider from "@babel/helper-define-polyfill-provider";
 import { join } from "node:path";
 import paths from "../paths.cjs";
 
-const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
+const POLYFILL_DIR = join(paths.root_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const polyfillSupport = {

build-scripts/bundle.cjs

@@ -20,22 +20,16 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
-    // Contains all color definitions for all material color sets.
-    // We don't use it
-    require.resolve("@polymer/paper-styles/color.js"),
-    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/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+        path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+        path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 
@@ -50,7 +44,8 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __HASS_URL__: `\`${
     "HASS_URL" in process.env
       ? process.env.HASS_URL
-      : "${location.protocol}//${location.host}"
+      : // eslint-disable-next-line no-template-curly-in-string
+        "${location.protocol}//${location.host}"
   }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
@@ -78,6 +73,19 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
   sourceMap: !isTestBuild,
 });
 
+/** @type {import('@rspack/core').SwcLoaderOptions} */
+module.exports.swcOptions = () => ({
+  jsc: {
+    loose: true,
+    externalHelpers: true,
+    target: "ES2021",
+    parser: {
+      syntax: "typescript",
+      decorators: true,
+    },
+  },
+});
+
 module.exports.babelOptions = ({
   latestBuild,
   isProdBuild,
@@ -102,7 +110,6 @@ module.exports.babelOptions = ({
         shippedProposals: true,
       },
     ],
-    "@babel/preset-typescript",
   ],
   plugins: [
     [
@@ -139,12 +146,6 @@ module.exports.babelOptions = ({
       "@babel/plugin-transform-runtime",
       { version: dependencies["@babel/runtime"] },
     ],
-    // Transpile decorators (still in TC39 process)
-    // Modern browsers support class fields and private methods, but transform is required with the older decorator version dictated by Lit
-    [
-      "@babel/plugin-proposal-decorators",
-      { version: "2018-09", decoratorsBeforeExport: true },
-    ],
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-private-methods",
   ].filter(Boolean),
@@ -164,7 +165,7 @@ module.exports.babelOptions = ({
         ],
       ],
       exclude: [
-        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        path.join(paths.root_dir, "src/resources/polyfills"),
         ...[
           "@formatjs/(?:ecma402-abstract|intl-\\w+)",
           "@lit-labs/virtualizer/polyfills",
@@ -182,6 +183,7 @@ module.exports.babelOptions = ({
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
+        "@shoelace-style",
         "@?lit(?:-labs|-element|-html)?",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },

build-scripts/env.cjs

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

build-scripts/gulp/entry-html.js

@@ -169,14 +169,14 @@ const APP_PAGE_ENTRIES = {
 
 gulp.task(
   "gen-pages-app-dev",
-  genPagesDevTask(APP_PAGE_ENTRIES, paths.polymer_dir, paths.app_output_root)
+  genPagesDevTask(APP_PAGE_ENTRIES, paths.root_dir, paths.app_output_root)
 );
 
 gulp.task(
   "gen-pages-app-prod",
   genPagesProdTask(
     APP_PAGE_ENTRIES,
-    paths.polymer_dir,
+    paths.root_dir,
     paths.app_output_root,
     paths.app_output_latest,
     paths.app_output_es5

build-scripts/gulp/gather-static.js

@@ -6,8 +6,8 @@ import path from "path";
 import paths from "../paths.cjs";
 
 const npmPath = (...parts) =>
-  path.resolve(paths.polymer_dir, "node_modules", ...parts);
-const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
+  path.resolve(paths.root_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.root_dir, ...parts);
 
 const copyFileDir = (fromFile, toDir) =>
   fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));

build-scripts/gulp/locale-data.js

@@ -4,7 +4,7 @@ import gulp from "gulp";
 import { join, resolve } from "node:path";
 import paths from "../paths.cjs";
 
-const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
+const formatjsDir = join(paths.root_dir, "node_modules", "@formatjs");
 const outDir = join(paths.build_dir, "locale-data");
 
 const INTL_POLYFILLS = {

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

@@ -16,6 +16,7 @@ const detailsClose = "</details>\n";
 
 const dummyAPI = {
   version: babelVersion,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   assertVersion: () => {},
   caller: (callback) =>
     callback({

build-scripts/paths.cjs

@@ -1,7 +1,7 @@
 const path = require("path");
 
 module.exports = {
-  polymer_dir: path.resolve(__dirname, ".."),
+  root_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
   app_output_root: path.resolve(__dirname, "../hass_frontend"),

build-scripts/rspack.cjs

@@ -65,19 +65,26 @@ const createRspackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          use: (info) => ({
-            loader: "babel-loader",
-            options: {
-              ...bundle.babelOptions({
-                latestBuild,
-                isProdBuild,
-                isTestBuild,
-                sw: info.issuerLayer === "sw",
-              }),
-              cacheDirectory: !isProdBuild,
-              cacheCompression: false,
+          exclude: /node_modules[\\/]core-js/,
+          use: (info) => [
+            {
+              loader: "babel-loader",
+              options: {
+                ...bundle.babelOptions({
+                  latestBuild,
+                  isProdBuild,
+                  isTestBuild,
+                  sw: info.issuerLayer === "sw",
+                }),
+                cacheDirectory: !isProdBuild,
+                cacheCompression: false,
+              },
             },
-          }),
+            {
+              loader: "builtin:swc-loader",
+              options: bundle.swcOptions(),
+            },
+          ],
           resolve: {
             fullySpecified: false,
           },
@@ -136,7 +143,8 @@ const createRspackConfig = ({
             // calling define.amd will call require("!!webpack amd options")
             resource.startsWith("!!webpack") ||
             // loaded by webpack dev server but doesn't exist.
-            resource === "webpack/hot"
+            resource === "webpack/hot" ||
+            resource.startsWith("@swc/helpers")
           ) {
             return false;
           }
@@ -161,7 +169,7 @@ const createRspackConfig = ({
       }),
       new rspack.NormalModuleReplacementPlugin(
         new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
+        path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,3 @@
 import "./layout/hc-connect";
 
-import("../../../src/resources/ha-style");
+import("../../../src/resources/append-ha-style");

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list";
+
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
@@ -19,6 +19,8 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
@@ -29,7 +31,6 @@ import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/vi
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
-import "../../../../src/components/ha-list-item";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -85,7 +86,7 @@ class HcCast extends LitElement {
               `
             : html`
                 <div class="section-header">PICK A VIEW</div>
-                <mwc-list @action=${this._handlePickView} activatable>
+                <ha-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
                       generateDefaultViewConfig({}, {}, {}, {}, () => ""),
@@ -113,7 +114,7 @@ class HcCast extends LitElement {
                             ></ha-svg-icon>`}
                       </ha-list-item>
                     `
-                  )}</mwc-list
+                  )}</ha-list
                 >
               `}
 

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

@@ -109,7 +109,7 @@ export class HcMain extends HassElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
-    import("../../../../src/resources/ha-style");
+    import("../../../../src/resources/append-ha-style");
 
     window.addEventListener("location-changed", () => {
       const panelPath = `/${this._urlPath || "lovelace"}/`;

demo/src/configs/jimpower/theme.ts

@@ -1,37 +1,28 @@
 export const demoThemeJimpower = () => ({
   "text-primary-color": "var(--primary-text-color)",
-  "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#5294E2",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#383C45",
   "primary-text-color": "#FFFFFF",
-  "paper-item-selected_-_background-color": "#434954",
   "secondary-background-color": "#383C45",
   "disabled-text-color": "#7F848E",
-  "paper-item-icon_-_color": "green",
   "paper-grey-200": "#414A59",
   "label-badge-background-color": "#2E333A",
-  "paper-card-header-color": "var(--accent-color)",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
-  "paper-listbox-background-color": "#2E333A",
+  "sidebar-icon-color": "var(--state-icon-color)",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
   "switch-checked-color": "var(--accent-color)",
-  "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
   "error-color": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
   "success-color": "#39E949",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
-  "paper-listbox-color": "var(--primary-color)",
   "card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
-  "paper-item-icon-active-color": "#F9C536",
   "accent-color": "#E45E65",
   "table-row-alternative-background-color": "#3E424B",
 });

demo/src/configs/kernehed/theme.ts

@@ -1,38 +1,29 @@
 // https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
 export const demoThemeKernehed = () => ({
   "text-primary-color": "var(--primary-text-color)",
-  "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#2980b9",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "primary-text-color": "#FFFFFF",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#222222",
   "sidebar-icon-color": "#777777",
-  "paper-item-selected_-_background-color": "#292929",
   "secondary-background-color": "#222222",
   "disabled-text-color": "#777777",
-  "paper-item-icon_-_color": "green",
   "paper-grey-200": "#222222",
   "label-badge-background-color": "#222222",
-  "paper-card-header-color": "var(--accent-color)",
-  "paper-listbox-background-color": "#141414",
   "table-row-background-color": "#292929",
   "paper-grey-50": "var(--primary-text-color)",
   "switch-checked-color": "var(--accent-color)",
-  "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
   "error-color": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
   "success-color": "#2980b9",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
-  "paper-listbox-color": "#777777",
   "card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
-  "paper-item-icon-active-color": "#b58e31",
   "accent-color": "#2980b9",
   "table-row-alternative-background-color": "#292929",
 });

demo/src/configs/teachingbirds/theme.ts

@@ -1,26 +1,18 @@
 export const demoThemeTeachingbirds = () => ({
-  "paper-card-header-color": "var(--paper-item-icon-color)",
-  "paper-listbox-background-color": "#202020",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-item-icon-color": "#d3d3d3",
   "divider-color": "rgba(255, 255, 255, 0.12)",
   "primary-color": "#389638",
   "light-primary-color": "#6f956f",
   "label-badge-red": "var(--primary-color)",
-  "paper-listbox-color": "#FFFFFF",
-  "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
   "switch-unchecked-track-color": "var(--primary-text-color)",
   "card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "sidebar-icon-color": "#d3d3d3",
   "secondary-background-color": "#2b2b2b",
-  "paper-item-icon-active-color": "#d8bf50",
   "switch-checked-color": "var(--primary-color)",
   "secondary-text-color": "#389638",
   "disabled-text-color": "#545454",
-  "paper-item-icon_-_color": "var(--primary-text-color)",
   "paper-grey-200": "#191919",
-  "primary-text-color": "#cfcfcf",
   "label-badge-background-color": "var(--secondary-background-color)",
 });

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

@@ -73,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     }
     ha-svg-icon {
       padding: 8px;
-      color: var(--paper-item-icon-color);
+      color: var(--state-icon-color);
     }
     .flex {
       flex: 1;

demo/src/entrypoint.ts

@@ -1,4 +1,4 @@
 import "./util/is_frontpage";
 import "./ha-demo";
 
-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");

demo/src/stubs/todo.ts

@@ -2,26 +2,36 @@ import type { TodoItem } from "../../../src/data/todo";
 import { TodoItemStatus } from "../../../src/data/todo";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-export const mockTodo = (hass: MockHomeAssistant) => {
-  hass.mockWS("todo/item/list", () => ({
-    items: [
-      {
-        uid: "12",
-        summary: "Milk",
-        status: TodoItemStatus.NeedsAction,
-      },
-      {
-        uid: "13",
-        summary: "Eggs",
-        status: TodoItemStatus.NeedsAction,
-      },
-      {
-        uid: "14",
-        summary: "Oranges",
-        status: TodoItemStatus.Completed,
-      },
-    ] as TodoItem[],
-  }));
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
+const items = {
+  items: [
+    {
+      uid: "12",
+      summary: "Milk",
+      status: TodoItemStatus.NeedsAction,
+    },
+    {
+      uid: "13",
+      summary: "Eggs",
+      status: TodoItemStatus.NeedsAction,
+    },
+    {
+      uid: "14",
+      summary: "Oranges",
+      status: TodoItemStatus.Completed,
+    },
+    {
+      uid: "15",
+      summary: "Beer",
+    },
+  ] as TodoItem[],
+};
+
+export const mockTodo = (hass: MockHomeAssistant) => {
+  hass.mockWS("todo/item/list", () => items);
+  hass.mockWS("todo/item/move", () => undefined);
+  hass.mockWS("todo/item/subscribe", (_msg, _hass, onChange) => {
+    onChange!(items);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
 };

eslint.config.mjs

@@ -42,7 +42,6 @@ export default tseslint.config(
         __VERSION__: false,
         __STATIC_PATH__: false,
         __SUPERVISOR__: false,
-        Polymer: true,
       },
 
       parser: tseslint.parser,

gallery/src/entrypoint.js

@@ -1,5 +1,5 @@
 import "./ha-gallery";
 
-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");
 
 document.body.appendChild(document.createElement("ha-gallery"));

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

@@ -1,29 +1,30 @@
 import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
+import "../../../../src/components/ha-formfield";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import type { Action } from "../../../../src/data/script";
 import "../../../../src/panels/config/automation/action/ha-automation-action";
 import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose";
+import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
 import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay";
 import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
+import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
+import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
+import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
+import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
 import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
-import type { Action } from "../../../../src/data/script";
-import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
-import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
-import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
-import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },

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

@@ -1,26 +1,27 @@
 import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import "../../../../src/components/ha-formfield";
 import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
+import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
+import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not";
 import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
+import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or";
 import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
 import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
 import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
 import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
-import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and";
-import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or";
-import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
 
 const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
   {

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

@@ -1,35 +1,36 @@
 import type { TemplateResult } from "lit";
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { mockConfig } from "../../../../demo/src/stubs/config";
-import { mockTags } from "../../../../demo/src/stubs/tags";
 import { mockAuth } from "../../../../demo/src/stubs/auth";
+import { mockConfig } from "../../../../demo/src/stubs/config";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { mockTags } from "../../../../demo/src/stubs/tags";
+import "../../../../src/components/ha-formfield";
 import type { Trigger } from "../../../../src/data/automation";
-import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
+import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
+import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
 import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
+import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
 import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
+import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
+import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
+import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
+import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
 import { HaSunTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
 import { HaTagTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
 import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
 import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
 import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
 import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
-import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
-import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
-import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
-import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
-import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation";
-import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
+import type { HomeAssistant } from "../../../../src/types";
+import "../../components/demo-black-white-row";
 
 const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
   {

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

@@ -0,0 +1,65 @@
+---
+title: Badge
+subtitle: Lovelace dashboard badge
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Badge `<ha-badge>`
+
+The badge component is a small component that displays a number or status information. It is used in the lovelace dashboard on the top.
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-badge>
+    simple badge
+  </ha-badge>
+
+  <ha-badge label="Info">
+    With a label
+  </ha-badge>
+
+  <ha-badge type="button">
+    Type button
+  </ha-badge>
+</div>
+
+```html
+<ha-badge> simple badge </ha-badge>
+
+<ha-badge label="Info"> With a label </ha-badge>
+
+<ha-badge type="button"> Type button </ha-badge>
+```
+
+### API
+
+**Slots**
+
+- default slot is the content of the badge
+  - no default
+- `icon` set the icon of the badge
+  - no default
+
+**Properties/Attributes**
+
+| Name     | Type                    | Default     | Description                                                  |
+| -------- | ----------------------- | ----------- | ------------------------------------------------------------ |
+| type     | `"badge"` or `"button"` | `"badge"`   | If it's button it shows a ripple effect                      |
+| label    | string                  | `undefined` | Text label for the badge, only visible if `iconOnly = false` |
+| iconOnly | boolean                 | `false`     | Only show label                                              |
+
+**CSS Custom Properties**
+
+- `--ha-badge-size` (default `36px`)
+- `--ha-badge-border-radius` (default `calc(var(--ha-badge-size, 36px) / 2)`)
+- `--ha-badge-font-size` (default `var(--ha-font-size-s)`)
+- `--ha-badge-icon-size` (default `18px`)

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

@@ -0,0 +1,129 @@
+import { mdiButtonCursor, mdiHome } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-badge";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+const badges: {
+  type?: "badge" | "button";
+  label?: string;
+  iconOnly?: boolean;
+  slot?: TemplateResult;
+  iconSlot?: TemplateResult;
+}[] = [
+  {
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "badge",
+    label: "Badge",
+    iconSlot: html`<ha-svg-icon slot="icon" .path=${mdiHome}></ha-svg-icon>`,
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "button",
+    label: "Button",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+    slot: html`<span>Button</span>`,
+  },
+  {
+    type: "button",
+    label: "Label only",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+  },
+  {
+    type: "button",
+    label: "Label",
+    slot: html`<span>Button no label</span>`,
+  },
+  {
+    label: "Icon only",
+    iconOnly: true,
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiHomeAssistant}
+    ></ha-svg-icon>`,
+  },
+];
+
+@customElement("demo-components-ha-badge")
+export class DemoHaBadge extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
+              <div class="card-content">
+                ${badges.map(
+                  (badge) => html`
+                    <ha-badge
+                      .type=${badge.type || undefined}
+                      .label=${badge.label}
+                      .iconOnly=${badge.iconOnly || false}
+                    >
+                      ${badge.iconSlot} ${badge.slot}
+                    </ha-badge>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      gap: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-badge": DemoHaBadge;
+  }
+}

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

@@ -6,22 +6,23 @@ import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
+import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
-import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
-import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -643,9 +644,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
   }
 
   static styles = css`
-    ha-settings-row {
-      --paper-item-body-two-line-min-height: 0;
-    }
     .options {
       max-width: 800px;
       margin: 16px auto;

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

@@ -18,7 +18,7 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
 
 ## Documentation
 
-This element is based on sholace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
+This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
 
 <a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
 
@@ -28,3 +28,7 @@ In your theme settings use this without the prefixed `--`.
 
 - `--ha-tooltip-border-radius` (Default: 4px)
 - `--ha-tooltip-arrow-size` (Default: 8px)
+- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
+- `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
+- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
+- `--sl-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)

gallery/src/pages/date-time/date-time-numeric.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/date-time-seconds.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/date-time-short-year.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/date-time-short.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/date-time.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeDateTime extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTime extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/date.ts

@@ -1,8 +1,8 @@
-import "@material/mwc-list/mwc-list";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { formatDateNumeric } from "../../../../src/common/datetime/format_date";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -27,7 +27,7 @@ export class DemoDateTimeDate extends LitElement {
     };
     const date = new Date();
     return html`
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -86,7 +86,7 @@ export class DemoDateTimeDate extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/time-seconds.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/time-weekday.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatTimeWeekday } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/date-time/time.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list/mwc-list";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatTime } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
+import "../../../../src/components/ha-list";
 import type { FrontendLocaleData } from "../../../../src/data/translation";
 import {
   DateFormat,
@@ -49,7 +49,7 @@ export class DemoDateTimeTime extends LitElement {
         @value-changed=${this.handleValueChanged}
       >
       </ha-control-select>
-      <mwc-list>
+      <ha-list>
         <div class="container header">
           <div>Language</div>
           <div class="center">Default (lang)</div>
@@ -96,7 +96,7 @@ export class DemoDateTimeTime extends LitElement {
             </div>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 

gallery/src/pages/lovelace/todo-list-card.ts

@@ -1,11 +1,11 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
+import { mockTodo } from "../../../../demo/src/stubs/todo";
+import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
-import { getEntity } from "../../../../src/fake_data/entity";
-import { mockTodo } from "../../../../demo/src/stubs/todo";
-import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
   getEntity("todo", "shopping_list", "2", {

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

@@ -1,5 +1,5 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
+
 import { mdiDotsVertical } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,6 +11,7 @@ import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-list-item";
 import "../../../src/components/search-input";
 import type { HassioAddonRepository } from "../../../src/data/hassio/addon";
 import { reloadHassioAddons } from "../../../src/data/hassio/addon";
@@ -89,17 +90,17 @@ export class HassioAddonStore extends LitElement {
             .path=${mdiDotsVertical}
             slot="trigger"
           ></ha-icon-button>
-          <mwc-list-item>
+          <ha-list-item>
             ${this.supervisor.localize("store.check_updates")}
-          </mwc-list-item>
-          <mwc-list-item>
+          </ha-list-item>
+          <ha-list-item>
             ${this.supervisor.localize("store.repositories")}
-          </mwc-list-item>
+          </ha-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)
-            ? html`<mwc-list-item>
+            ? html`<ha-list-item>
                 ${this.supervisor.localize("store.registries")}
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
         </ha-button-menu>
         ${repos.length === 0

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

@@ -1,12 +1,11 @@
-import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-select";
 import type {
   HassioAddonDetails,
@@ -29,6 +28,8 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _error?: string;
 
   @state() private _inputDevices?: HassioHardwareAudioDevice[];
@@ -48,7 +49,7 @@ class HassioAddonAudio extends LitElement {
         <div class="card-content">
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""}
+            : nothing}
           ${this._inputDevices &&
           html`<ha-select
             .label=${this.supervisor.localize(
@@ -59,12 +60,13 @@ class HassioAddonAudio extends LitElement {
             fixedMenuPosition
             naturalMenuWidth
             .value=${this._selectedInput!}
+            .disabled=${this.disabled}
           >
             ${this._inputDevices.map(
               (item) => html`
-                <mwc-list-item .value=${item.device || ""}>
+                <ha-list-item .value=${item.device || ""}>
                   ${item.name}
-                </mwc-list-item>
+                </ha-list-item>
               `
             )}
           </ha-select>`}
@@ -78,18 +80,22 @@ class HassioAddonAudio extends LitElement {
             fixedMenuPosition
             naturalMenuWidth
             .value=${this._selectedOutput!}
+            .disabled=${this.disabled}
           >
             ${this._outputDevices.map(
               (item) => html`
-                <mwc-list-item .value=${item.device || ""}
-                  >${item.name}</mwc-list-item
+                <ha-list-item .value=${item.device || ""}
+                  >${item.name}</ha-list-item
                 >
               `
             )}
           </ha-select>`}
         </div>
         <div class="card-actions">
-          <ha-progress-button @click=${this._saveSettings}>
+          <ha-progress-button
+            .disabled=${this.disabled}
+            @click=${this._saveSettings}
+          >
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
@@ -171,6 +177,10 @@ class HassioAddonAudio extends LitElement {
   }
 
   private async _saveSettings(ev: CustomEvent): Promise<void> {
+    if (this.disabled) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
     button.progress = true;
 

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

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-spinner";
 import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
@@ -7,6 +7,7 @@ import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
+import "../info/hassio-addon-system-managed";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -19,6 +20,11 @@ class HassioAddonConfigDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, attribute: "control-enabled" })
+  public controlEnabled = false;
+
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`<ha-spinner></ha-spinner>`;
@@ -29,6 +35,16 @@ class HassioAddonConfigDashboard extends LitElement {
 
     return html`
       <div class="content">
+        ${this.addon.system_managed &&
+        (hasConfiguration || this.addon.network || this.addon.audio)
+          ? html`
+              <hassio-addon-system-managed
+                .supervisor=${this.supervisor}
+                .narrow=${this.narrow}
+                .hideButton=${this.controlEnabled}
+              ></hassio-addon-system-managed>
+            `
+          : nothing}
         ${hasConfiguration || this.addon.network || this.addon.audio
           ? html`
               ${hasConfiguration
@@ -37,27 +53,33 @@ class HassioAddonConfigDashboard extends LitElement {
                       .hass=${this.hass}
                       .addon=${this.addon}
                       .supervisor=${this.supervisor}
+                      .disabled=${this.addon.system_managed &&
+                      !this.controlEnabled}
                     ></hassio-addon-config>
                   `
-                : ""}
+                : nothing}
               ${this.addon.network
                 ? html`
                     <hassio-addon-network
                       .hass=${this.hass}
                       .addon=${this.addon}
                       .supervisor=${this.supervisor}
+                      .disabled=${this.addon.system_managed &&
+                      !this.controlEnabled}
                     ></hassio-addon-network>
                   `
-                : ""}
+                : nothing}
               ${this.addon.audio
                 ? html`
                     <hassio-addon-audio
                       .hass=${this.hass}
                       .addon=${this.addon}
                       .supervisor=${this.supervisor}
+                      .disabled=${this.addon.system_managed &&
+                      !this.controlEnabled}
                     ></hassio-addon-audio>
                   `
-                : ""}
+                : nothing}
             `
           : this.supervisor.localize("addon.configuration.no_configuration")}
       </div>

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

@@ -1,6 +1,4 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
-import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -16,6 +14,7 @@ import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -61,6 +60,8 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _configHasChanged = false;
 
   @state() private _valid = true;
@@ -176,7 +177,7 @@ class HassioAddonConfig extends LitElement {
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
-              <mwc-list-item .disabled=${!this._canShowSchema}>
+              <ha-list-item .disabled=${!this._canShowSchema || this.disabled}>
                 ${this._yamlMode
                   ? this.supervisor.localize(
                       "addon.configuration.options.edit_in_ui"
@@ -184,10 +185,13 @@ class HassioAddonConfig extends LitElement {
                   : this.supervisor.localize(
                       "addon.configuration.options.edit_in_yaml"
                     )}
-              </mwc-list-item>
-              <mwc-list-item class="warning">
+              </ha-list-item>
+              <ha-list-item
+                class=${!this.disabled ? "warning" : ""}
+                .disabled=${this.disabled}
+              >
                 ${this.supervisor.localize("common.reset_defaults")}
-              </mwc-list-item>
+              </ha-list-item>
             </ha-button-menu>
           </div>
         </div>
@@ -195,6 +199,7 @@ class HassioAddonConfig extends LitElement {
         <div class="card-content">
           ${showForm
             ? html`<ha-form
+                .disabled=${this.disabled}
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
@@ -208,7 +213,7 @@ class HassioAddonConfig extends LitElement {
                       )
                 )}
               ></ha-form>`
-            : html` <ha-yaml-editor
+            : html`<ha-yaml-editor
                 @value-changed=${this._configChanged}
                 .yamlSchema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
@@ -244,7 +249,9 @@ class HassioAddonConfig extends LitElement {
         <div class="card-actions right">
           <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !this._valid}
+            .disabled=${this.disabled ||
+            !this._configHasChanged ||
+            !this._valid}
           >
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
@@ -346,6 +353,10 @@ class HassioAddonConfig extends LitElement {
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
+    if (this.disabled || !this._configHasChanged || !this._valid) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
     const options: Record<string, unknown> = this._yamlMode
       ? this._editor?.value
@@ -407,7 +418,7 @@ class HassioAddonConfig extends LitElement {
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
-        mwc-list-item[disabled] {
+        ha-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
         .header {

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

@@ -6,6 +6,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import type {
@@ -28,6 +29,8 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @property({ type: Boolean }) public disabled = false;
+
   @state() private _showOptional = false;
 
   @state() private _configHasChanged = false;
@@ -65,9 +68,10 @@ class HassioAddonNetwork extends LitElement {
           </p>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""}
+            : nothing}
 
           <ha-form
+            .disabled=${this.disabled}
             .data=${this._config}
             @value-changed=${this._configChanged}
             .computeLabel=${this._computeLabel}
@@ -92,14 +96,18 @@ class HassioAddonNetwork extends LitElement {
               >
               </ha-switch>
             </ha-formfield>`
-          : ""}
+          : nothing}
         <div class="card-actions">
-          <ha-progress-button class="warning" @click=${this._resetTapped}>
+          <ha-progress-button
+            class="warning"
+            .disabled=${this.disabled}
+            @click=${this._resetTapped}
+          >
             ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
           <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged}
+            .disabled=${!this._configHasChanged || this.disabled}
           >
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
@@ -155,6 +163,10 @@ class HassioAddonNetwork extends LitElement {
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
+    if (this.disabled) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
     const data: HassioAddonSetOptionParams = {
       network: null,
@@ -186,6 +198,10 @@ class HassioAddonNetwork extends LitElement {
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
+    if (!this._configHasChanged || this.disabled) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
 
     this._error = undefined;

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

@@ -52,6 +52,9 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @state()
+  private _controlEnabled = false;
+
   @state() private _error?: string;
 
   private _backPath = new URLSearchParams(window.parent.location.search).get(
@@ -134,11 +137,17 @@ class HassioAddonDashboard extends LitElement {
           .hass=${this.hass}
           .supervisor=${this.supervisor}
           .addon=${this.addon}
+          .controlEnabled=${this._controlEnabled}
+          @system-managed-take-control=${this._enableControl}
         ></hassio-addon-router>
       </hass-tabs-subpage>
     `;
   }
 
+  private _enableControl() {
+    this._controlEnabled = true;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -23,6 +23,9 @@ class HassioAddonRouter extends HassRouterPage {
     | HassioAddonDetails
     | StoreAddonDetails;
 
+  @property({ type: Boolean, attribute: "control-enabled" })
+  public controlEnabled = false;
+
   protected routerOptions: RouterOptions = {
     defaultPage: "info",
     showLoading: true,
@@ -48,6 +51,7 @@ class HassioAddonRouter extends HassRouterPage {
     el.supervisor = this.supervisor;
     el.addon = this.addon;
     el.narrow = this.narrow;
+    el.controlEnabled = this.controlEnabled;
   }
 }
 

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

@@ -21,6 +21,9 @@ class HassioAddonInfoDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
+  @property({ type: Boolean, attribute: "control-enabled" })
+  public controlEnabled = false;
+
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`<ha-spinner></ha-spinner>`;
@@ -34,6 +37,7 @@ class HassioAddonInfoDashboard extends LitElement {
           .hass=${this.hass}
           .supervisor=${this.supervisor}
           .addon=${this.addon}
+          .controlEnabled=${this.controlEnabled}
         ></hassio-addon-info>
       </div>
     `;

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

@@ -1,8 +1,6 @@
-import "@material/mwc-button";
 import {
   mdiCheckCircle,
   mdiChip,
-  mdiPlayCircle,
   mdiCircleOffOutline,
   mdiCursorDefaultClickOutline,
   mdiDocker,
@@ -19,27 +17,30 @@ import {
   mdiNumeric6,
   mdiNumeric7,
   mdiNumeric8,
+  mdiPlayCircle,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } 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 { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
 import "../../../../src/components/buttons/ha-progress-button";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/chips/ha-chip-set";
 import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/chips/ha-chip-set";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
-import "../../../../src/components/ha-formfield";
 import type { HaSwitch } from "../../../../src/components/ha-switch";
 import type {
   AddonCapability,
@@ -81,10 +82,11 @@ import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
+import { showSystemManagedDialog } from "../../dialogs/system-managed/show-dialog-system-managed";
 import { hassioStyle } from "../../resources/hassio-style";
 import "../../update-available/update-available-card";
 import { addonArchIsSupported, extractChangelog } from "../../util/addon";
-import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
+import "./hassio-addon-system-managed";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -117,6 +119,9 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ type: Boolean, attribute: "control-enabled" })
+  public controlEnabled = false;
+
   @state() private _metrics?: HassioStats;
 
   @state() private _error?: string;
@@ -155,6 +160,9 @@ class HassioAddonInfo extends LitElement {
         )}`,
       },
     ];
+
+    const systemManaged = this._isSystemManaged(this.addon);
+
     return html`
       ${this.addon.update_available
         ? html`
@@ -166,7 +174,7 @@ class HassioAddonInfo extends LitElement {
               @update-complete=${this._updateComplete}
             ></update-available-card>
           `
-        : ""}
+        : nothing}
       ${"protected" in this.addon && !this.addon.protected
         ? html`
             <ha-alert
@@ -178,22 +186,31 @@ class HassioAddonInfo extends LitElement {
               ${this.supervisor.localize(
                 "addon.dashboard.protection_mode.content"
               )}
-              <mwc-button
+              <ha-button
                 slot="action"
                 .label=${this.supervisor.localize(
                   "addon.dashboard.protection_mode.enable"
                 )}
                 @click=${this._protectionToggled}
               >
-              </mwc-button>
+              </ha-button>
             </ha-alert>
           `
-        : ""}
+        : nothing}
+      ${systemManaged
+        ? html`
+            <hassio-addon-system-managed
+              .supervisor=${this.supervisor}
+              .narrow=${this.narrow}
+              .hideButton=${this.controlEnabled}
+            ></hassio-addon-system-managed>
+          `
+        : nothing}
 
       <ha-card outlined>
         <div class="card-content">
           <div class="addon-header">
-            ${!this.narrow ? this.addon.name : ""}
+            ${!this.narrow ? this.addon.name : nothing}
             <div class="addon-version light-color">
               ${this.addon.version
                 ? html`
@@ -266,7 +283,7 @@ class HassioAddonInfo extends LitElement {
                     </ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
 
             <ha-assist-chip
               filled
@@ -301,7 +318,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.full_access
               ? html`
                   <ha-assist-chip
@@ -317,7 +334,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.homeassistant_api
               ? html`
                   <ha-assist-chip
@@ -336,7 +353,7 @@ class HassioAddonInfo extends LitElement {
                     ></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this._computeHassioApi
               ? html`
                   <ha-assist-chip
@@ -355,7 +372,7 @@ class HassioAddonInfo extends LitElement {
                     ></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.docker_api
               ? html`
                   <ha-assist-chip
@@ -371,7 +388,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.host_pid
               ? html`
                   <ha-assist-chip
@@ -387,7 +404,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.apparmor !== "default"
               ? html`
                   <ha-assist-chip
@@ -404,7 +421,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.auth_api
               ? html`
                   <ha-assist-chip
@@ -420,7 +437,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.ingress
               ? html`
                   <ha-assist-chip
@@ -439,7 +456,7 @@ class HassioAddonInfo extends LitElement {
                     ></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
             ${this.addon.signed
               ? html`
                   <ha-assist-chip
@@ -455,7 +472,24 @@ class HassioAddonInfo extends LitElement {
                     <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
                   </ha-assist-chip>
                 `
-              : ""}
+              : nothing}
+            ${systemManaged
+              ? html`
+                  <ha-assist-chip
+                    filled
+                    @click=${this._showSystemManagedDialog}
+                    id="system_managed"
+                    .label=${capitalizeFirstLetter(
+                      this.supervisor.localize("addon.system_managed.badge")
+                    )}
+                  >
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiHomeAssistant}
+                    ></ha-svg-icon>
+                  </ha-assist-chip>
+                `
+              : nothing}
           </ha-chip-set>
 
           <div class="description light-color">
@@ -479,7 +513,7 @@ class HassioAddonInfo extends LitElement {
                       src="/api/hassio/addons/${this.addon.slug}/logo"
                     />
                   `
-                : ""}
+                : nothing}
               ${this.addon.version
                 ? html`
                     <div
@@ -500,6 +534,7 @@ class HassioAddonInfo extends LitElement {
                           )}
                         </span>
                         <ha-switch
+                          .disabled=${systemManaged && !this.controlEnabled}
                           @change=${this._startOnBootToggled}
                           .checked=${this.addon.boot === "auto"}
                           haptic
@@ -520,13 +555,15 @@ class HassioAddonInfo extends LitElement {
                                 )}
                               </span>
                               <ha-switch
+                                .disabled=${systemManaged &&
+                                !this.controlEnabled}
                                 @change=${this._watchdogToggled}
-                                .checked=${this.addon.watchdog}
+                                .checked=${this.addon.watchdog || false}
                                 haptic
                               ></ha-switch>
                             </ha-settings-row>
                           `
-                        : ""}
+                        : nothing}
                       ${this.addon.auto_update ||
                       this.hass.userData?.showAdvanced
                         ? html`
@@ -542,13 +579,15 @@ class HassioAddonInfo extends LitElement {
                                 )}
                               </span>
                               <ha-switch
+                                .disabled=${systemManaged &&
+                                !this.controlEnabled}
                                 @change=${this._autoUpdateToggled}
                                 .checked=${this.addon.auto_update}
                                 haptic
                               ></ha-switch>
                             </ha-settings-row>
                           `
-                        : ""}
+                        : nothing}
                       ${!this._computeCannotIngressSidebar && this.addon.ingress
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
@@ -563,13 +602,15 @@ class HassioAddonInfo extends LitElement {
                                 )}
                               </span>
                               <ha-switch
+                                .disabled=${systemManaged &&
+                                !this.controlEnabled}
                                 @change=${this._panelToggled}
                                 .checked=${this.addon.ingress_panel}
                                 haptic
                               ></ha-switch>
                             </ha-settings-row>
                           `
-                        : ""}
+                        : nothing}
                       ${this._computeUsesProtectedOptions
                         ? html`
                             <ha-settings-row ?three-line=${this.narrow}>
@@ -584,16 +625,18 @@ class HassioAddonInfo extends LitElement {
                                 )}
                               </span>
                               <ha-switch
+                                .disabled=${systemManaged &&
+                                !this.controlEnabled}
                                 @change=${this._protectionToggled}
                                 .checked=${this.addon.protected}
                                 haptic
                               ></ha-switch>
                             </ha-settings-row>
                           `
-                        : ""}
+                        : nothing}
                     </div>
                   `
-                : ""}
+                : nothing}
             </div>
             <div>
               ${this.addon.version && this.addon.state === "started"
@@ -612,12 +655,12 @@ class HassioAddonInfo extends LitElement {
                         ></supervisor-metric>
                       `
                     )}`
-                : ""}
+                : nothing}
             </div>
           </div>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-            : ""}
+            : nothing}
           ${!this.addon.version && addonStoreInfo && !this.addon.available
             ? !addonArchIsSupported(
                 this.supervisor.info.supported_arch,
@@ -641,7 +684,7 @@ class HassioAddonInfo extends LitElement {
                     )}
                   </ha-alert>
                 `
-            : ""}
+            : nothing}
         </div>
         <div class="card-actions">
           <div>
@@ -651,6 +694,7 @@ class HassioAddonInfo extends LitElement {
                     <ha-progress-button
                       class="warning"
                       @click=${this._stopClicked}
+                      .disabled=${systemManaged && !this.controlEnabled}
                     >
                       ${this.supervisor.localize("addon.dashboard.stop")}
                     </ha-progress-button>
@@ -688,26 +732,27 @@ class HassioAddonInfo extends LitElement {
                           target="_blank"
                           rel="noopener"
                         >
-                          <mwc-button>
+                          <ha-button>
                             ${this.supervisor.localize(
                               "addon.dashboard.open_web_ui"
                             )}
-                          </mwc-button>
+                          </ha-button>
                         </a>
                       `
-                    : ""}
+                    : nothing}
                   ${this._computeShowIngressUI
                     ? html`
-                        <mwc-button @click=${this._openIngress}>
+                        <ha-button @click=${this._openIngress}>
                           ${this.supervisor.localize(
                             "addon.dashboard.open_web_ui"
                           )}
-                        </mwc-button>
+                        </ha-button>
                       `
-                    : ""}
+                    : nothing}
                   <ha-progress-button
                     class="warning"
                     @click=${this._uninstallClicked}
+                    .disabled=${systemManaged && !this.controlEnabled}
                   >
                     ${this.supervisor.localize("addon.dashboard.uninstall")}
                   </ha-progress-button>
@@ -720,8 +765,8 @@ class HassioAddonInfo extends LitElement {
                           ${this.supervisor.localize("addon.dashboard.rebuild")}
                         </ha-progress-button>
                       `
-                    : ""}`
-              : ""}
+                    : nothing}`
+              : nothing}
           </div>
         </div>
       </ha-card>
@@ -737,7 +782,7 @@ class HassioAddonInfo extends LitElement {
               </div>
             </ha-card>
           `
-        : ""}
+        : nothing}
     `;
   }
 
@@ -822,6 +867,13 @@ class HassioAddonInfo extends LitElement {
     });
   }
 
+  private _showSystemManagedDialog() {
+    showSystemManagedDialog(this, {
+      addon: this.addon as HassioAddonDetails,
+      supervisor: this.supervisor,
+    });
+  }
+
   private get _computeIsRunning(): boolean {
     return (this.addon as HassioAddonDetails)?.state === "started";
   }
@@ -1014,6 +1066,10 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _stopClicked(ev: CustomEvent): Promise<void> {
+    if (this._isSystemManaged(this.addon) && !this.controlEnabled) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
     button.progress = true;
 
@@ -1125,6 +1181,10 @@ class HassioAddonInfo extends LitElement {
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {
+    if (this._isSystemManaged(this.addon) && !this.controlEnabled) {
+      return;
+    }
+
     const button = ev.currentTarget as any;
     button.progress = true;
     let removeData = false;
@@ -1179,6 +1239,11 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
+  private _isSystemManaged = memoizeOne(
+    (addon: HassioAddonDetails | StoreAddonDetails) =>
+      "system_managed" in addon && addon.system_managed
+  );
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1201,7 +1266,7 @@ class HassioAddonInfo extends LitElement {
         ha-card.warning .card-content {
           color: white;
         }
-        ha-card.warning mwc-button {
+        ha-card.warning ha-button {
           --mdc-theme-primary: white !important;
         }
         .warning {
@@ -1246,7 +1311,7 @@ class HassioAddonInfo extends LitElement {
         ha-svg-icon.stopped {
           color: var(--error-color);
         }
-        protection-enable mwc-button {
+        protection-enable ha-button {
           --mdc-theme-primary: white;
         }
         .description a {
@@ -1328,7 +1393,7 @@ class HassioAddonInfo extends LitElement {
           align-self: end;
         }
 
-        ha-alert mwc-button {
+        ha-alert ha-button {
           --mdc-theme-primary: var(--primary-text-color);
         }
 

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

@@ -0,0 +1,60 @@
+import "@material/mwc-button";
+import type { TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+@customElement("hassio-addon-system-managed")
+class HassioAddonSystemManaged extends LitElement {
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ type: Boolean, attribute: "hide-button" }) public hideButton =
+    false;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-alert
+        alert-type="warning"
+        .title=${this.supervisor.localize("addon.system_managed.title")}
+        .narrow=${this.narrow}
+      >
+        ${this.supervisor.localize("addon.system_managed.description")}
+        ${!this.hideButton
+          ? html`
+              <ha-button slot="action" @click=${this._takeControl}>
+                ${this.supervisor.localize("addon.system_managed.take_control")}
+              </ha-button>
+            `
+          : nothing}
+      </ha-alert>
+    `;
+  }
+
+  private _takeControl() {
+    fireEvent(this, "system-managed-take-control");
+  }
+
+  static styles = css`
+    ha-alert {
+      display: block;
+      margin-bottom: 16px;
+    }
+    ha-button {
+      white-space: nowrap;
+    }
+  `;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-system-managed": HassioAddonSystemManaged;
+  }
+
+  interface HASSDomEvents {
+    "system-managed-take-control": undefined;
+  }
+}

hassio/src/backups/hassio-backups.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
-import "@material/mwc-list/mwc-list-item";
+
 import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -18,6 +18,7 @@ import type {
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-svg-icon";
 import type { HassioBackup } from "../../../src/data/hassio/backup";
 import {
@@ -32,6 +33,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
+import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
@@ -42,7 +44,6 @@ import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-bac
 import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
-import "../../../src/layouts/hass-loading-screen";
 
 type BackupItem = HassioBackup & {
   secondary: string;
@@ -211,16 +212,16 @@ export class HassioBackups extends LitElement {
             .path=${mdiDotsVertical}
             slot="trigger"
           ></ha-icon-button>
-          <mwc-list-item>
+          <ha-list-item>
             ${this.supervisor.localize("common.reload")}
-          </mwc-list-item>
-          <mwc-list-item>
+          </ha-list-item>
+          <ha-list-item>
             ${this.supervisor.localize("dialog.backup_location.title")}
-          </mwc-list-item>
+          </ha-list-item>
           ${atLeastVersion(this.hass.config.version, 0, 116)
-            ? html`<mwc-list-item>
+            ? html`<ha-list-item>
                 ${this.supervisor.localize("backup.upload_backup")}
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
         </ha-button-menu>
 

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

@@ -85,7 +85,7 @@ class HassioCardContent extends LitElement {
     }
     ha-svg-icon.hassupdate,
     ha-svg-icon.backup {
-      color: var(--paper-item-icon-color);
+      color: var(--state-icon-color);
     }
     ha-svg-icon.not_available {
       color: var(--error-color);

hassio/src/dashboard/hassio-update.ts

@@ -130,7 +130,7 @@ export class HassioUpdate extends LitElement {
           color: var(--primary-text-color);
         }
         .update-heading {
-          font-size: var(--paper-font-subhead_-_font-size);
+          font-size: var(--ha-font-size-l);
           font-weight: 500;
           margin-bottom: 0.5em;
           color: var(--primary-text-color);

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

@@ -1,5 +1,5 @@
 import type { ActionDetail } from "@material/mwc-list";
-import "@material/mwc-list/mwc-list-item";
+
 import { mdiClose, mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -8,15 +8,17 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/ha-md-dialog";
-import "../../../../src/components/ha-dialog-header";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";
+import "../../../../src/components/ha-dialog-header";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-list-item";
+import "../../../../src/components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
+import "../../../../src/components/ha-spinner";
 import { getSignedPath } from "../../../../src/data/auth";
 import type { HassioBackupDetail } from "../../../../src/data/hassio/backup";
 import {
@@ -36,7 +38,6 @@ import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
-import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -121,15 +122,15 @@ class HassioBackupDialog
                   .path=${mdiDotsVertical}
                   slot="trigger"
                 ></ha-icon-button>
-                <mwc-list-item
+                <ha-list-item
                   >${this._dialogParams.supervisor.localize(
                     "backup.download_backup"
-                  )}</mwc-list-item
+                  )}</ha-list-item
                 >
-                <mwc-list-item class="error"
+                <ha-list-item class="error"
                   >${this._dialogParams.supervisor.localize(
                     "backup.delete_backup_title"
-                  )}</mwc-list-item
+                  )}</ha-list-item
                 >
               </ha-button-menu>`
             : nothing}

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

@@ -1,12 +1,12 @@
-import "@material/mwc-list/mwc-list-item";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-spinner";
-import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-list-item";
+import "../../../../src/components/ha-select";
+import "../../../../src/components/ha-spinner";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -95,8 +95,8 @@ class HassioDatadiskDialog extends LitElement {
                     >
                       ${this.devices.map(
                         (device) =>
-                          html`<mwc-list-item .value=${device}
-                            >${device}</mwc-list-item
+                          html`<ha-list-item .value=${device}
+                            >${device}</ha-list-item
                           >`
                       )}
                     </ha-select>

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

@@ -16,23 +16,14 @@ import type { HomeAssistant } from "../../../../src/types";
 import type { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
 
 const _filterDevices = memoizeOne(
-  (
-    showAdvanced: boolean,
-    hardware: HassioHardwareInfo,
-    filter: string,
-    language: string
-  ) =>
+  (hardware: HassioHardwareInfo, filter: string, language: string) =>
     hardware.devices
       .filter(
         (device) =>
-          (showAdvanced ||
-            ["tty", "gpio", "input"].includes(device.subsystem)) &&
-          (device.by_id?.toLowerCase().includes(filter) ||
-            device.name.toLowerCase().includes(filter) ||
-            device.dev_path.toLocaleLowerCase().includes(filter) ||
-            JSON.stringify(device.attributes)
-              .toLocaleLowerCase()
-              .includes(filter))
+          device.by_id?.toLowerCase().includes(filter) ||
+          device.name.toLowerCase().includes(filter) ||
+          device.dev_path.toLocaleLowerCase().includes(filter) ||
+          JSON.stringify(device.attributes).toLocaleLowerCase().includes(filter)
       )
       .sort((a, b) => stringCompare(a.name, b.name, language))
 );
@@ -60,7 +51,6 @@ class HassioHardwareDialog extends LitElement {
     }
 
     const devices = _filterDevices(
-      this.hass.userData?.showAdvanced || false,
       this._dialogParams.hardware,
       (this._filter || "").toLowerCase(),
       this.hass.locale.language
@@ -180,7 +170,7 @@ class HassioHardwareDialog extends LitElement {
           padding: 16px;
           overflow: auto;
           line-height: 1.45;
-          font-family: var(--code-font-family, monospace);
+          font-family: var(--ha-font-family-code);
         }
         code {
           font-size: 85%;

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

@@ -38,6 +38,7 @@ class HassioMarkdownDialog extends LitElement {
         open
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this.title)}
+        hideactions
       >
         <ha-markdown
           .content=${this.content || ""}

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

@@ -1,8 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-tab";
-import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -10,14 +6,16 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
+import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -39,6 +37,7 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioNetworkDialogParams } from "./show-dialog-network";
+import "../../../../src/components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -116,19 +115,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<mwc-tab-bar
-                .activeIndex=${this._curTabIndex}
-                @MDCTabBar:activated=${this._handleTabActivated}
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
-                  (device) =>
-                    html`<mwc-tab
+                  (device, index) =>
+                    html`<sl-tab
+                      slot="nav"
                       .id=${device.interface}
-                      .label=${device.interface}
-                      dialogInitialFocus
+                      .panel=${index.toString()}
+                      .active=${this._curTabIndex === index}
                     >
-                    </mwc-tab>`
+                      ${device.interface}
+                    </sl-tab>`
                 )}
-              </mwc-tab-bar>`
+              </sl-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -169,12 +168,12 @@ export class DialogHassioNetwork
                 this._accessPoints.accesspoints &&
                 this._accessPoints.accesspoints.length !== 0
                   ? html`
-                      <mwc-list>
+                      <ha-list>
                         ${this._accessPoints.accesspoints
                           .filter((ap) => ap.ssid)
                           .map(
                             (ap) => html`
-                              <mwc-list-item
+                              <ha-list-item
                                 twoline
                                 @click=${this._selectAP}
                                 .activated=${ap.ssid ===
@@ -189,10 +188,10 @@ export class DialogHassioNetwork
                                   )}:
                                   ${ap.signal}
                                 </span>
-                              </mwc-list-item>
+                              </ha-list-item>
                             `
                           )}
-                      </mwc-list>
+                      </ha-list>
                     `
                   : ""}
                 ${this._wifiConfiguration
@@ -485,8 +484,8 @@ export class DialogHassioNetwork
         return;
       }
     }
-    this._curTabIndex = ev.detail.index;
-    this._interface = { ...this._interfaces[ev.detail.index] };
+    this._curTabIndex = Number(ev.detail.name);
+    this._interface = { ...this._interfaces[this._curTabIndex] };
   }
 
   private _handleRadioValueChanged(ev: CustomEvent): void {
@@ -560,11 +559,6 @@ export class DialogHassioNetwork
           flex-shrink: 0;
         }
 
-        mwc-tab-bar {
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
         ha-dialog {
           --dialog-content-position: static;
           --dialog-content-padding: 0;
@@ -634,9 +628,17 @@ export class DialogHassioNetwork
         ha-textfield {
           padding: 0 14px;
         }
-        mwc-list-item {
+        ha-list-item {
           --mdc-list-side-padding: 10px;
         }
+
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
       `,
     ];
   }

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

@@ -183,9 +183,6 @@ class HassioRepositoriesDialog extends LitElement {
         ha-dialog.button-left {
           --justify-action-buttons: flex-start;
         }
-        paper-icon-item {
-          cursor: pointer;
-        }
         .form {
           color: var(--primary-text-color);
         }

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -0,0 +1,192 @@
+import { mdiClose, mdiPuzzle, mdiSwapHorizontal } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { atLeastVersion } from "../../../../src/common/config/version";
+import "../../../../src/components/ha-dialog-header";
+import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-icon-next";
+import "../../../../src/components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../src/components/ha-md-dialog";
+import "../../../../src/components/ha-md-list";
+import "../../../../src/components/ha-md-list-item";
+import "../../../../src/components/ha-svg-icon";
+import {
+  getConfigEntry,
+  type ConfigEntry,
+} from "../../../../src/data/config_entries";
+import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+import { haStyle } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { brandsUrl } from "../../../../src/util/brands-url";
+import type { SystemManagedDialogParams } from "./show-dialog-system-managed";
+
+@customElement("dialog-system-managed")
+class HassioSystemManagedDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _supervisor?: Supervisor;
+
+  @state() private _addon?: HassioAddonDetails;
+
+  @state() private _open = false;
+
+  @state() private _configEntry?: ConfigEntry;
+
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+  public async showDialog(
+    dialogParams: SystemManagedDialogParams
+  ): Promise<void> {
+    this._addon = dialogParams.addon;
+    this._supervisor = dialogParams.supervisor;
+    this._open = true;
+    this._loadConfigEntry();
+  }
+
+  private _dialogClosed() {
+    this._addon = undefined;
+    this._supervisor = undefined;
+    this._configEntry = undefined;
+    this._open = false;
+  }
+
+  public closeDialog() {
+    this._dialog?.close();
+    return true;
+  }
+
+  protected render() {
+    if (!this._addon || !this._open || !this._supervisor) {
+      return nothing;
+    }
+
+    const addonImage =
+      atLeastVersion(this.hass.config.version, 0, 105) && this._addon.icon
+        ? `/api/hassio/addons/${this._addon.slug}/icon`
+        : undefined;
+
+    return html`
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span slot="title">${this._addon?.name}</span>
+        </ha-dialog-header>
+        <div slot="content">
+          <div class="icons">
+            <ha-svg-icon
+              class="primary"
+              .path=${mdiHomeAssistant}
+            ></ha-svg-icon>
+            <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
+            ${addonImage
+              ? html`<img src=${addonImage} alt=${this._addon.name} />`
+              : html`<ha-svg-icon .path=${mdiPuzzle}></ha-svg-icon>`}
+          </div>
+          ${this._supervisor.localize("addon.system_managed.title")}.<br />
+          ${this._supervisor.localize("addon.system_managed.description")}
+          ${this._configEntry
+            ? html`
+                <h3>
+                  ${this._supervisor.localize(
+                    "addon.system_managed.managed_by"
+                  )}:
+                </h3>
+                <ha-md-list>
+                  <ha-md-list-item
+                    type="link"
+                    href=${`/config/integrations/integration/${this._configEntry.domain}`}
+                  >
+                    <img
+                      slot="start"
+                      class="integration-icon"
+                      alt=${this._configEntry.title}
+                      src=${brandsUrl({
+                        domain: this._configEntry.domain,
+                        type: "icon",
+                        darkOptimized: this.hass.themes?.darkMode,
+                      })}
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                      @error=${this._onImageError}
+                      @load=${this._onImageLoad}
+                    />
+                    ${this._configEntry.title}
+                    <ha-icon-next slot="end"></ha-icon-next>
+                  </ha-md-list-item>
+                </ha-md-list>
+              `
+            : nothing}
+        </div>
+      </ha-md-dialog>
+    `;
+  }
+
+  private _onImageLoad(ev) {
+    ev.target.style.visibility = "initial";
+  }
+
+  private _onImageError(ev) {
+    ev.target.style.visibility = "hidden";
+  }
+
+  private async _loadConfigEntry() {
+    if (this._addon?.system_managed_config_entry) {
+      try {
+        const { config_entry } = await getConfigEntry(
+          this.hass,
+          this._addon.system_managed_config_entry
+        );
+        this._configEntry = config_entry;
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+      }
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .icons {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 16px;
+          --mdc-icon-size: 48px;
+          margin-bottom: 32px;
+        }
+        .icons img {
+          width: 48px;
+        }
+        .icons .primary {
+          color: var(--primary-color);
+        }
+        .actions {
+          display: flex;
+          justify-content: space-between;
+        }
+        .integration-icon {
+          width: 24px;
+        }
+        ha-md-list-item {
+          --md-list-item-leading-space: 4px;
+          --md-list-item-trailing-space: 4px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-system-managed": HassioSystemManagedDialog;
+  }
+}

hassio/src/dialogs/system-managed/show-dialog-system-managed.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import type { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import type { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface SystemManagedDialogParams {
+  addon: HassioAddonDetails;
+  supervisor: Supervisor;
+}
+
+export const showSystemManagedDialog = (
+  element: HTMLElement,
+  dialogParams: SystemManagedDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-system-managed",
+    dialogImport: () => import("./dialog-system-managed"),
+    dialogParams,
+  });
+};

hassio/src/entrypoint.ts

@@ -1,9 +1,6 @@
 import "./hassio-main";
 
-import("../../src/resources/ha-style");
-import("@polymer/polymer/lib/utils/settings").then(
-  ({ setCancelSyntheticClickEvents }) => setCancelSyntheticClickEvents(false)
-);
+import("../../src/resources/append-ha-style");
 
 const styleEl = document.createElement("style");
 styleEl.textContent = `

hassio/src/resources/hassio-style.ts

@@ -12,12 +12,11 @@ export const hassioStyle = css`
   h1 {
     font-size: 2em;
     margin-bottom: 8px;
-    font-family: var(--paper-font-headline_-_font-family);
-    -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
-    font-size: var(--paper-font-headline_-_font-size);
-    font-weight: var(--paper-font-headline_-_font-weight);
-    letter-spacing: var(--paper-font-headline_-_letter-spacing);
-    line-height: var(--paper-font-headline_-_line-height);
+    font-family: var(--ha-font-family-body);
+    -webkit-font-smoothing: var(--ha-font-smoothing);
+    font-size: var(--ha-font-size-2xl);
+    font-weight: var(--ha-font-weight-normal);
+    line-height: var(--ha-line-height-condensed);
     padding-left: 8px;
     padding-inline-start: 8px;
     padding-inline-end: initial;

hassio/src/system/hassio-core-info.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
+
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -197,9 +197,6 @@ class HassioCoreInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        mwc-list-item ha-svg-icon {
-          color: var(--secondary-text-color);
-        }
         a {
           text-decoration: none;
         }

hassio/src/system/hassio-host-info.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
+
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -10,6 +10,7 @@ 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-list-item";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-settings-row";
 import {
@@ -188,31 +189,31 @@ class HassioHostInfo extends LitElement {
               .path=${mdiDotsVertical}
               slot="trigger"
             ></ha-icon-button>
-            <mwc-list-item
+            <ha-list-item
               .action=${"hardware"}
               @click=${this._handleMenuAction}
             >
               ${this.supervisor.localize("system.host.hardware")}
-            </mwc-list-item>
+            </ha-list-item>
             ${this.supervisor.host.features.includes("haos")
               ? html`
-                  <mwc-list-item
+                  <ha-list-item
                     .action=${"import_from_usb"}
                     @click=${this._handleMenuAction}
                   >
                     ${this.supervisor.localize("system.host.import_from_usb")}
-                  </mwc-list-item>
+                  </ha-list-item>
                   ${this.supervisor.host.features.includes("os_agent") &&
                   atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0)
                     ? html`
-                        <mwc-list-item
+                        <ha-list-item
                           .action=${"move_datadisk"}
                           @click=${this._handleMenuAction}
                         >
                           ${this.supervisor.localize(
                             "system.host.move_datadisk"
                           )}
-                        </mwc-list-item>
+                        </ha-list-item>
                       `
                     : ""}
                 `
@@ -438,7 +439,7 @@ class HassioHostInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        mwc-list-item ha-svg-icon {
+        ha-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }
         a {

hassio/src/system/hassio-supervisor-log.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
+
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,6 +8,7 @@ import "../../../src/components/ha-alert";
 import "../../../src/components/ha-ansi-to-html";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-select";
+import "../../../src/components/ha-list-item";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -80,9 +81,9 @@ class HassioSupervisorLog extends LitElement {
               >
                 ${logProviders.map(
                   (provider) => html`
-                    <mwc-list-item .value=${provider.key}>
+                    <ha-list-item .value=${provider.key}>
                       ${provider.name}
-                    </mwc-list-item>
+                    </ha-list-item>
                   `
                 )}
               </ha-select>

hassio/src/update-available/update-available-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-list/mwc-list-item";
 import {
   css,
   type CSSResultGroup,

landing-page/src/entrypoint.js

@@ -1,3 +1,3 @@
 import "./ha-landing-page";
 
-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");

landing-page/src/ha-landing-page.ts

@@ -2,6 +2,8 @@ import "@material/mwc-linear-progress";
 import { type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../src/components/ha-alert";
+import "../../src/components/ha-fade-in";
+import "../../src/components/ha-spinner";
 import { haStyle } from "../../src/resources/styles";
 import "../../src/onboarding/onboarding-welcome-links";
 import "./components/landing-page-network";
@@ -40,6 +42,14 @@ class HaLandingPage extends LandingPageBaseElement {
   render() {
     const networkIssue = this._networkInfo && !this._networkInfo.host_internet;
 
+    if (!this.localize) {
+      return html`
+        <ha-fade-in>
+          <ha-spinner size="large"></ha-spinner>
+        </ha-fade-in>
+      `;
+    }
+
     return html`
       <ha-card>
         <div class="card-content">
@@ -229,6 +239,12 @@ class HaLandingPage extends LandingPageBaseElement {
         margin-inline-end: 16px;
         margin-inline-start: initial;
       }
+      ha-fade-in {
+        min-height: calc(100vh - 64px - 88px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     `,
   ];
 }

landing-page/src/landing-page-base-element.ts

@@ -6,23 +6,23 @@ import {
   type LandingPageKeys,
   type LocalizeFunc,
 } from "../../src/common/translations/localize";
+import { computeDirectionStyles } from "../../src/common/util/compute_rtl";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
+import { translationMetadata } from "../../src/resources/translations-metadata";
+import type { HassBaseEl } from "../../src/state/hass-base-mixin";
+import themesMixin from "../../src/state/themes-mixin";
 import type { Constructor, Resources } from "../../src/types";
 import {
   getLocalLanguage,
   getTranslation,
 } from "../../src/util/common-translation";
-import { computeDirectionStyles } from "../../src/common/util/compute_rtl";
-import themesMixin from "../../src/state/themes-mixin";
-import { translationMetadata } from "../../src/resources/translations-metadata";
-import type { HassBaseEl } from "../../src/state/hass-base-mixin";
 
 export class LandingPageBaseElement extends themesMixin(
   ProvideHassLitMixin(LitElement) as unknown as Constructor<HassBaseEl>
 ) {
   // Initialized to empty will prevent undefined errors if called before connected to DOM.
   @property({ attribute: false })
-  public localize: LocalizeFunc<LandingPageKeys> = () => "";
+  public localize?: LocalizeFunc<LandingPageKeys>;
 
   // Use browser language setup before login.
   @property() public language?: string = getLocalLanguage();

package.json

@@ -26,17 +26,17 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.26.10",
+    "@babel/runtime": "7.27.1",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.18.6",
-    "@codemirror/commands": "6.8.0",
+    "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.0",
-    "@codemirror/legacy-modes": "6.5.0",
+    "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.10",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.4",
+    "@codemirror/view": "6.36.7",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.17.4",
+    "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
     "@formatjs/intl-durationformat": "0.7.4",
     "@formatjs/intl-getcanonicallocales": "2.5.5",
@@ -45,17 +45,18 @@
     "@formatjs/intl-numberformat": "8.15.4",
     "@formatjs/intl-pluralrules": "5.4.4",
     "@formatjs/intl-relativetimeformat": "11.4.11",
-    "@fullcalendar/core": "6.1.15",
-    "@fullcalendar/daygrid": "6.1.15",
-    "@fullcalendar/interaction": "6.1.15",
-    "@fullcalendar/list": "6.1.15",
-    "@fullcalendar/luxon3": "6.1.15",
-    "@fullcalendar/timegrid": "6.1.15",
+    "@fullcalendar/core": "6.1.17",
+    "@fullcalendar/daygrid": "6.1.17",
+    "@fullcalendar/interaction": "6.1.17",
+    "@fullcalendar/list": "6.1.17",
+    "@fullcalendar/luxon3": "6.1.17",
+    "@fullcalendar/timegrid": "6.1.17",
     "@lezer/highlight": "1.2.1",
-    "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.8",
     "@lit-labs/observers": "2.0.5",
     "@lit-labs/virtualizer": "2.1.0",
+    "@lit/context": "1.1.5",
+    "@lit/reactive-element": "2.1.0",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -65,36 +66,31 @@
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-fab": "0.27.0",
     "@material/mwc-floating-label": "0.27.0",
-    "@material/mwc-formfield": "0.27.0",
+    "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-icon-button": "0.27.0",
     "@material/mwc-linear-progress": "0.27.0",
-    "@material/mwc-list": "0.27.0",
+    "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/mwc-menu": "0.27.0",
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-select": "0.27.0",
     "@material/mwc-snackbar": "0.27.0",
     "@material/mwc-switch": "0.27.0",
-    "@material/mwc-tab": "0.27.0",
-    "@material/mwc-tab-bar": "0.27.0",
     "@material/mwc-textarea": "0.27.0",
     "@material/mwc-textfield": "0.27.0",
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.2.0",
+    "@material/web": "2.3.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
-    "@polymer/paper-item": "3.0.1",
-    "@polymer/paper-listbox": "3.0.1",
-    "@polymer/paper-tabs": "3.1.0",
-    "@polymer/polymer": "3.5.2",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@shoelace-style/shoelace": "2.20.1",
+    "@swc/helpers": "0.5.17",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.8.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.1",
-    "@vaadin/vaadin-themable-mixin": "24.7.1",
+    "@vaadin/combo-box": "24.7.5",
+    "@vaadin/vaadin-themable-mixin": "24.7.5",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -103,7 +99,7 @@
     "barcode-detector": "3.0.1",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.41.0",
+    "core-js": "3.42.0",
     "cropperjs": "1.6.2",
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
@@ -111,22 +107,22 @@
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
     "echarts": "5.6.0",
-    "element-internals-polyfill": "3.0.1",
+    "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
     "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
-    "home-assistant-js-websocket": "9.4.0",
+    "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.1",
     "intl-messageformat": "10.7.16",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
-    "lit": "2.8.0",
-    "lit-html": "2.8.0",
-    "luxon": "3.5.0",
-    "marked": "15.0.7",
+    "lit": "3.3.0",
+    "lit-html": "3.3.0",
+    "luxon": "3.6.1",
+    "marked": "15.0.11",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -135,7 +131,7 @@
     "qrcode": "1.5.4",
     "roboto-fontface": "0.10.0",
     "rrule": "2.8.1",
-    "sortablejs": "patch:sortablejs@npm%3A1.15.3#~/.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch",
+    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
@@ -154,20 +150,18 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.26.10",
+    "@babel/core": "7.27.1",
     "@babel/helper-define-polyfill-provider": "0.6.4",
-    "@babel/plugin-proposal-decorators": "7.25.9",
-    "@babel/plugin-transform-runtime": "7.26.10",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-typescript": "7.26.0",
-    "@bundle-stats/plugin-webpack-filter": "4.19.1",
-    "@lokalise/node-api": "14.2.0",
-    "@octokit/auth-oauth-device": "7.1.4",
-    "@octokit/plugin-retry": "7.2.0",
+    "@babel/plugin-transform-runtime": "7.27.1",
+    "@babel/preset-env": "7.27.1",
+    "@bundle-stats/plugin-webpack-filter": "4.20.0",
+    "@lokalise/node-api": "14.5.0",
+    "@octokit/auth-oauth-device": "7.1.5",
+    "@octokit/plugin-retry": "7.2.1",
     "@octokit/rest": "21.1.1",
-    "@rsdoctor/rspack-plugin": "1.0.0",
-    "@rspack/cli": "1.2.8",
-    "@rspack/core": "1.2.8",
+    "@rsdoctor/rspack-plugin": "1.0.2",
+    "@rspack/cli": "1.3.8",
+    "@rspack/core": "1.3.8",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.21",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -179,39 +173,39 @@
     "@types/leaflet-draw": "1.0.11",
     "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
-    "@types/luxon": "3.4.2",
+    "@types/luxon": "3.6.2",
     "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.5",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.0.9",
+    "@vitest/coverage-v8": "3.1.2",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.23.0",
+    "eslint": "9.26.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.1",
+    "eslint-config-prettier": "10.1.2",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-lit": "2.0.0",
+    "eslint-plugin-lit": "2.1.1",
     "eslint-plugin-lit-a11y": "4.1.4",
     "eslint-plugin-unused-imports": "4.1.4",
-    "eslint-plugin-wc": "3.0.0",
+    "eslint-plugin-wc": "3.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.0",
-    "glob": "11.0.1",
+    "glob": "11.0.2",
     "gulp": "5.0.0",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "26.0.0",
+    "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "15.5.0",
+    "lint-staged": "15.5.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -220,29 +214,28 @@
     "prettier": "3.5.3",
     "rspack-manifest-plugin": "5.0.3",
     "serve": "14.2.4",
-    "sinon": "19.0.4",
+    "sinon": "20.0.0",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.8.2",
-    "typescript-eslint": "8.27.0",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.31.1",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.0.9",
+    "vitest": "3.1.2",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
   },
-  "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
-    "@polymer/polymer": "patch:@polymer/polymer@3.5.2#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "2.8.0",
-    "lit-html": "2.8.0",
+    "lit": "3.3.0",
+    "lit-html": "3.3.0",
     "clean-css": "5.3.3",
-    "@lit/reactive-element": "1.6.3",
-    "@fullcalendar/daygrid": "6.1.15",
+    "@lit/reactive-element": "2.1.0",
+    "@fullcalendar/daygrid": "6.1.17",
     "globals": "16.0.0",
-    "tslib": "2.8.1"
+    "tslib": "2.8.1",
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.7.0"
+  "packageManager": "yarn@4.9.1"
 }

public/static/images/form/view_header_badges_wrap_scroll.svg

@@ -0,0 +1,17 @@
+<svg width="94" height="24" viewBox="0 0 94 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1349_5726)">
+<rect width="94" height="24" rx="8" fill="white"/>
+<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="black" fill-opacity="0.32"/>
+<path d="M24.5 13C24.5 14.6569 25.8431 16 27.5 16H33.5C35.1569 16 36.5 14.6569 36.5 13V11C36.5 9.34315 35.1569 8 33.5 8H27.5C25.8431 8 24.5 9.34315 24.5 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M41 13C41 14.6569 42.3431 16 44 16H50C51.6569 16 53 14.6569 53 13V11C53 9.34315 51.6569 8 50 8H44C42.3431 8 41 9.34315 41 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M57.5 13C57.5 14.6569 58.8431 16 60.5 16H66.5C68.1569 16 69.5 14.6569 69.5 13V11C69.5 9.34315 68.1569 8 66.5 8H60.5C58.8431 8 57.5 9.34315 57.5 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M74 13C74 14.6569 75.3431 16 77 16H83C84.6569 16 86 14.6569 86 13V11C86 9.34315 84.6569 8 83 8H77C75.3431 8 74 9.34315 74 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M90 13C90 14.6569 91.3431 16 93 16H99C100.657 16 102 14.6569 102 13V11C102 9.34315 100.657 8 99 8H93C91.3431 8 90 9.34315 90 11V13Z" fill="black" fill-opacity="0.12"/>
+</g>
+<rect x="0.5" y="0.5" width="93" height="23" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_1349_5726">
+<rect width="94" height="24" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/form/view_header_badges_wrap_scroll_dark.svg

@@ -0,0 +1,17 @@
+<svg width="94" height="24" viewBox="0 0 94 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1349_5798)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V16C94 20.4183 90.4183 24 86 24H8C3.58172 24 0 20.4183 0 16V8Z" fill="#1C1C1C"/>
+<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="white" fill-opacity="0.48"/>
+<path d="M24.5 12C24.5 14.2091 26.2909 16 28.5 16H32.5C34.7091 16 36.5 14.2091 36.5 12C36.5 9.79086 34.7091 8 32.5 8H28.5C26.2909 8 24.5 9.79086 24.5 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M41 12C41 14.2091 42.7909 16 45 16H49C51.2091 16 53 14.2091 53 12C53 9.79086 51.2091 8 49 8H45C42.7909 8 41 9.79086 41 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M57.5 12C57.5 14.2091 59.2909 16 61.5 16H65.5C67.7091 16 69.5 14.2091 69.5 12C69.5 9.79086 67.7091 8 65.5 8H61.5C59.2909 8 57.5 9.79086 57.5 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M74 12C74 14.2091 75.7909 16 78 16H82C84.2091 16 86 14.2091 86 12C86 9.79086 84.2091 8 82 8H78C75.7909 8 74 9.79086 74 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M90 12C90 14.2091 91.7909 16 94 16H98C100.209 16 102 14.2091 102 12V12C102 9.79086 100.209 8 98 8H94C91.7909 8 90 9.79086 90 12V12Z" fill="white" fill-opacity="0.24"/>
+</g>
+<path d="M1.34748 20.4449C0.772837 19.5866 0.359906 18.6109 0.152272 17.5613L0.642766 17.4643C0.549158 16.9911 0.5 16.5015 0.5 16V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V16C93.5 16.5015 93.4508 16.9911 93.3572 17.4643L93.8477 17.5613C93.6401 18.6109 93.2272 19.5866 92.6525 20.4449L92.237 20.1668C91.6893 20.9849 90.9849 21.6893 90.1668 22.237L90.4449 22.6525C89.5866 23.2272 88.6108 23.6401 87.5613 23.8477L87.4643 23.3572C86.9911 23.4508 86.5015 23.5 86 23.5H84.05V24H80.15V23.5H76.25V24H72.35V23.5H68.45V24H64.55V23.5H60.65V24H56.75V23.5H52.85V24H48.95V23.5H45.05V24H41.15V23.5H37.25V24H33.35V23.5H29.45V24H25.55V23.5H21.65V24H17.75V23.5H13.85V24H9.95V23.5H8C7.49847 23.5 7.00892 23.4508 6.53574 23.3572L6.4387 23.8477C5.38915 23.6401 4.41341 23.2272 3.55507 22.6525L3.83323 22.237C3.01513 21.6893 2.31067 20.9849 1.76296 20.1668L1.34748 20.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
+<defs>
+<clipPath id="clip0_1349_5798">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V16C94 20.4183 90.4183 24 86 24H8C3.58172 24 0 20.4183 0 16V8Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/form/view_header_badges_wrap_wrap.svg

@@ -0,0 +1,11 @@
+<svg width="94" height="40" viewBox="0 0 94 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="40" rx="8" fill="white"/>
+<rect x="0.5" y="0.5" width="93" height="39" rx="7.5" stroke="black" stroke-opacity="0.12" stroke-dasharray="4 4"/>
+<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="black" fill-opacity="0.32"/>
+<path d="M24.5 13C24.5 14.6569 25.8431 16 27.5 16H33.5C35.1569 16 36.5 14.6569 36.5 13V11C36.5 9.34315 35.1569 8 33.5 8H27.5C25.8431 8 24.5 9.34315 24.5 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M41 13C41 14.6569 42.3431 16 44 16H50C51.6569 16 53 14.6569 53 13V11C53 9.34315 51.6569 8 50 8H44C42.3431 8 41 9.34315 41 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M57.5 13C57.5 14.6569 58.8431 16 60.5 16H66.5C68.1569 16 69.5 14.6569 69.5 13V11C69.5 9.34315 68.1569 8 66.5 8H60.5C58.8431 8 57.5 9.34315 57.5 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M74 13C74 14.6569 75.3431 16 77 16H83C84.6569 16 86 14.6569 86 13V11C86 9.34315 84.6569 8 83 8H77C75.3431 8 74 9.34315 74 11V13Z" fill="black" fill-opacity="0.12"/>
+<path d="M8 29C8 30.6569 9.34315 32 11 32H17C18.6569 32 20 30.6569 20 29V27C20 25.3431 18.6569 24 17 24H11C9.34315 24 8 25.3431 8 27V29Z" fill="black" fill-opacity="0.12"/>
+<path d="M24.5 29C24.5 30.6569 25.8431 32 27.5 32H33.5C35.1569 32 36.5 30.6569 36.5 29V27C36.5 25.3431 35.1569 24 33.5 24H27.5C25.8431 24 24.5 25.3431 24.5 27V29Z" fill="black" fill-opacity="0.12"/>
+</svg>

public/static/images/form/view_header_badges_wrap_wrap_dark.svg

@@ -0,0 +1,11 @@
+<svg width="94" height="40" viewBox="0 0 94 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H86C90.4183 0 94 3.58172 94 8V32C94 36.4183 90.4183 40 86 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#1C1C1C"/>
+<path d="M1.34748 36.4449C0.772837 35.5866 0.359906 34.6109 0.152272 33.5613L0.642766 33.4643C0.549158 32.9911 0.5 32.5015 0.5 32V30H0V26H0.5V22H0V18H0.5V14H0V10H0.5V8C0.5 7.49847 0.549158 7.00892 0.642766 6.53574L0.152272 6.4387C0.359906 5.38915 0.772837 4.41341 1.34748 3.55508L1.76296 3.83324C2.31067 3.01513 3.01513 2.31067 3.83323 1.76296L3.55507 1.34748C4.41341 0.772837 5.38915 0.359906 6.4387 0.152272L6.53574 0.642766C7.00892 0.549158 7.49847 0.5 8 0.5H9.94999V0H13.85V0.5H17.75V0H21.65V0.5H25.55V0H29.45V0.5H33.35V0H37.25V0.5H41.15V0H45.05V0.5H48.95V0H52.85V0.5H56.75V0H60.65V0.5H64.55V0H68.45V0.5H72.35V0H76.25V0.5H80.15V0H84.05V0.5H86C86.5015 0.5 86.9911 0.549158 87.4643 0.642766L87.5613 0.152273C88.6108 0.359907 89.5866 0.772837 90.4449 1.34747L90.1668 1.76296C90.9849 2.31067 91.6893 3.01513 92.237 3.83323L92.6525 3.55507C93.2272 4.41341 93.6401 5.38915 93.8477 6.4387L93.3572 6.53574C93.4508 7.00892 93.5 7.49847 93.5 8V10H94V14H93.5V18H94V22H93.5V26H94V30H93.5V32C93.5 32.5015 93.4508 32.9911 93.3572 33.4643L93.8477 33.5613C93.6401 34.6109 93.2272 35.5866 92.6525 36.4449L92.237 36.1668C91.6893 36.9849 90.9849 37.6893 90.1668 38.237L90.4449 38.6525C89.5866 39.2272 88.6108 39.6401 87.5613 39.8477L87.4643 39.3572C86.9911 39.4508 86.5015 39.5 86 39.5H84.05V40H80.15V39.5H76.25V40H72.35V39.5H68.45V40H64.55V39.5H60.65V40H56.75V39.5H52.85V40H48.95V39.5H45.05V40H41.15V39.5H37.25V40H33.35V39.5H29.45V40H25.55V39.5H21.65V40H17.75V39.5H13.85V40H9.95V39.5H8C7.49847 39.5 7.00892 39.4508 6.53574 39.3572L6.4387 39.8477C5.38915 39.6401 4.41341 39.2272 3.55508 38.6525L3.83323 38.237C3.01513 37.6893 2.31067 36.9849 1.76296 36.1668L1.34748 36.4449Z" stroke="white" stroke-opacity="0.24" stroke-dasharray="4 4"/>
+<path d="M8 12C8 14.2091 9.79086 16 12 16H16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8H12C9.79086 8 8 9.79086 8 12Z" fill="white" fill-opacity="0.48"/>
+<path d="M24.5 12C24.5 14.2091 26.2909 16 28.5 16H32.5C34.7091 16 36.5 14.2091 36.5 12C36.5 9.79086 34.7091 8 32.5 8H28.5C26.2909 8 24.5 9.79086 24.5 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M41 12C41 14.2091 42.7909 16 45 16H49C51.2091 16 53 14.2091 53 12C53 9.79086 51.2091 8 49 8H45C42.7909 8 41 9.79086 41 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M57.5 12C57.5 14.2091 59.2909 16 61.5 16H65.5C67.7091 16 69.5 14.2091 69.5 12C69.5 9.79086 67.7091 8 65.5 8H61.5C59.2909 8 57.5 9.79086 57.5 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M74 12C74 14.2091 75.7909 16 78 16H82C84.2091 16 86 14.2091 86 12C86 9.79086 84.2091 8 82 8H78C75.7909 8 74 9.79086 74 12Z" fill="white" fill-opacity="0.24"/>
+<path d="M8 28C8 30.2091 9.79086 32 12 32H16C18.2091 32 20 30.2091 20 28C20 25.7909 18.2091 24 16 24H12C9.79086 24 8 25.7909 8 28Z" fill="white" fill-opacity="0.24"/>
+<path d="M24.5 28C24.5 30.2091 26.2909 32 28.5 32H32.5C34.7091 32 36.5 30.2091 36.5 28C36.5 25.7909 34.7091 24 32.5 24H28.5C26.2909 24 24.5 25.7909 24.5 28Z" fill="white" fill-opacity="0.24"/>
+</svg>

public/static/images/z-wave-add-node/long-range.svg

@@ -0,0 +1,15 @@
+<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8284 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 37.9999L37.5 39.4999L76.9105 39.4999V37.9999V36.4999L37.5 36.4999L37.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M30.8239 22.3365L38.8239 38.8365L30.3239 50.3365" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>
+<mask id="mask0_2_779" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4462 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_2_779)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
+</g>
+<path d="M85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999C82 36.343 83.3431 34.9999 85 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>
+<circle cx="39" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
+</svg>

public/static/images/z-wave-add-node/long-range_dark.svg

@@ -0,0 +1,15 @@
+<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.824 22.3365L38.824 38.8365L30.324 50.3365" stroke="white" stroke-opacity="0.24" stroke-width="3" stroke-linecap="round"/>
+<mask id="mask0_1180_4955" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4462 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_1180_4955)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
+</g>
+<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8283 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 39.4999L76.9105 39.4999V36.4999L37.5 36.4999L37.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M82 37.9999C82 36.343 83.3431 34.9999 85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="white" fill-opacity="0.48"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="white" fill-opacity="0.48"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="white" stroke-opacity="0.24" stroke-width="3" stroke-linecap="round"/>
+<circle cx="39" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
+</svg>

public/static/images/z-wave-add-node/mesh.svg

@@ -0,0 +1,19 @@
+<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<circle cx="39" cy="36" r="34" fill="white"/>
+<circle cx="39" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_2_810)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
+</g>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
+</svg>

public/static/images/z-wave-add-node/mesh_dark.svg

@@ -0,0 +1,18 @@
+<svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<circle cx="39" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_2_810)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
+</g>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
+</svg>

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250327.0"
+version      = "20250430.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/auth/ha-authorize.ts

@@ -265,7 +265,10 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       );
     }
 
-    if (window.innerWidth > 450) {
+    if (
+      window.innerWidth > 450 &&
+      !matchMedia("(prefers-reduced-motion)").matches
+    ) {
       import("../resources/particles");
     }
 

src/auth/ha-pick-auth-provider.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-list";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-next";
+import "../components/ha-list";
 import "../components/ha-list-item";
 import type { AuthProvider } from "../data/auth";
 
@@ -29,7 +29,7 @@ export class HaPickAuthProvider extends LitElement {
           >${this.localize("ui.panel.page-authorize.pick_auth_provider")}</span
         >
       </h3>
-      <mwc-list>
+      <ha-list>
         ${this.authProviders.map(
           (provider) => html`
             <ha-list-item
@@ -43,7 +43,7 @@ export class HaPickAuthProvider extends LitElement {
             </ha-list-item>
           `
         )}
-      </mwc-list>
+      </ha-list>
     `;
   }
 
@@ -77,7 +77,7 @@ export class HaPickAuthProvider extends LitElement {
       background: var(--card-background-color);
       padding: 0 15px;
     }
-    mwc-list {
+    ha-list {
       margin: 16px -16px 0;
       --mdc-list-side-padding: 24px;
     }

src/common/color/convert-color.ts

@@ -144,7 +144,7 @@ export function theme2hex(themeColor: string): string {
     return themeColor;
   }
 
-  const rgbFromColorName = colors[themeColor];
+  const rgbFromColorName = colors[themeColor.toLowerCase()];
   if (rgbFromColorName) {
     return rgb2hex(rgbFromColorName);
   }

src/common/controllers/drag-scroll-controller.ts

@@ -0,0 +1,175 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import type { LitElement } from "lit";
+
+/**
+ * The config options for a DragScrollController.
+ */
+export interface DragScrollControllerConfig {
+  selector: string;
+  enabled?: boolean;
+  trackScroll?: boolean;
+}
+
+export class DragScrollController implements ReactiveController {
+  public mouseIsDown = false;
+
+  public scrolled = false;
+
+  public scrolling = false;
+
+  public scrollStartX = 0;
+
+  public scrollLeft = 0;
+
+  public scrolledStart = false;
+
+  public scrolledEnd = false;
+
+  private _host: ReactiveControllerHost & LitElement;
+
+  private _selector: string;
+
+  private _scrollContainer?: HTMLElement | null;
+
+  private _enabled = true;
+
+  private _trackScroll = false;
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+
+  public set enabled(value: boolean) {
+    if (value === this._enabled) {
+      return;
+    }
+    this._enabled = value;
+    if (this._enabled) {
+      this._attach();
+    } else {
+      this._detach();
+    }
+    this._host.requestUpdate();
+  }
+
+  constructor(
+    host: ReactiveControllerHost & LitElement,
+    { selector, enabled, trackScroll }: DragScrollControllerConfig
+  ) {
+    this._selector = selector;
+    this._host = host;
+    this._trackScroll = trackScroll ?? false;
+    this.enabled = enabled ?? true;
+    host.addController(this);
+  }
+
+  hostUpdated() {
+    if (!this.enabled || this._scrollContainer) {
+      return;
+    }
+    this._attach();
+  }
+
+  hostDisconnected() {
+    this._detach();
+  }
+
+  private _attach() {
+    this._scrollContainer = this._host.renderRoot?.querySelector(
+      this._selector
+    );
+    if (this._scrollContainer) {
+      this._scrollContainer.addEventListener("mousedown", this._mouseDown);
+      if (this._trackScroll) {
+        this._scrollContainer.addEventListener("scroll", this._onScroll);
+        this.scrolledStart = this._scrollContainer.scrollLeft > 0;
+        this.scrolledEnd =
+          this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth <
+          this._scrollContainer.scrollWidth;
+        this._host.requestUpdate();
+      }
+    }
+  }
+
+  private _detach() {
+    window.removeEventListener("mousemove", this._mouseMove);
+    window.removeEventListener("mouseup", this._mouseUp);
+    if (this._scrollContainer) {
+      this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
+      this._scrollContainer.removeEventListener("scroll", this._onScroll);
+      this._scrollContainer = undefined;
+    }
+    this.scrolled = false;
+    this.scrolling = false;
+    this.scrolledStart = false;
+    this.scrolledEnd = false;
+    this.mouseIsDown = false;
+    this.scrollStartX = 0;
+    this.scrollLeft = 0;
+  }
+
+  private _onScroll = (event: Event) => {
+    const oldScrolledStart = this.scrolledStart;
+    const oldScrolledEnd = this.scrolledEnd;
+
+    const container = event.currentTarget as HTMLElement;
+    this.scrolledStart = container.scrollLeft > 0;
+    this.scrolledEnd =
+      container.scrollLeft + container.offsetWidth < container.scrollWidth;
+    if (
+      this.scrolledStart !== oldScrolledStart ||
+      this.scrolledEnd !== oldScrolledEnd
+    ) {
+      this._host.requestUpdate();
+    }
+  };
+
+  private _mouseDown = (event: MouseEvent) => {
+    const scrollContainer = this._scrollContainer;
+
+    if (!scrollContainer) {
+      return;
+    }
+
+    this.scrollStartX = event.pageX - scrollContainer.offsetLeft;
+    this.scrollLeft = scrollContainer.scrollLeft;
+    this.mouseIsDown = true;
+    this.scrolled = false;
+
+    window.addEventListener("mousemove", this._mouseMove);
+    window.addEventListener("mouseup", this._mouseUp, { once: true });
+  };
+
+  private _mouseUp = () => {
+    this.mouseIsDown = false;
+    this.scrolling = false;
+    this._host.requestUpdate();
+    window.removeEventListener("mousemove", this._mouseMove);
+  };
+
+  private _mouseMove = (event: MouseEvent) => {
+    if (!this.mouseIsDown) {
+      return;
+    }
+
+    const scrollContainer = this._scrollContainer;
+
+    if (!scrollContainer) {
+      return;
+    }
+
+    const x = event.pageX - scrollContainer.offsetLeft;
+    const scroll = x - this.scrollStartX;
+
+    if (!this.scrolled) {
+      this.scrolled = Math.abs(scroll) > 1;
+      this.scrolling = this.scrolled;
+      this._host.requestUpdate();
+    }
+
+    scrollContainer.scrollLeft = this.scrollLeft - scroll;
+  };
+}

src/common/datetime/calc_date.ts

@@ -6,6 +6,10 @@ import {
   differenceInMilliseconds,
   differenceInMonths,
   endOfMonth,
+  startOfDay,
+  endOfDay,
+  differenceInDays,
+  addDays,
 } from "date-fns";
 import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import type { HassConfig } from "home-assistant-js-websocket";
@@ -100,6 +104,32 @@ export const shiftDateRange = (
       locale,
       config
     );
+  } else if (
+    calcDateProperty(
+      startDate,
+      (date) => startOfDay(date).getMilliseconds() === date.getMilliseconds(),
+      locale,
+      config
+    ) &&
+    calcDateProperty(
+      endDate,
+      (date) => endOfDay(date).getMilliseconds() === date.getMilliseconds(),
+      locale,
+      config
+    )
+  ) {
+    const difference =
+      ((calcDateDifferenceProperty(
+        endDate,
+        startDate,
+        differenceInDays,
+        locale,
+        config
+      ) as number) +
+        1) *
+      (forward ? 1 : -1);
+    start = calcDate(startDate, addDays, locale, config, difference);
+    end = calcDate(endDate, addDays, locale, config, difference);
   } else {
     const difference =
       ((calcDateDifferenceProperty(

src/common/datetime/calc_date_range.ts

@@ -84,12 +84,12 @@ export const calcDateRange = (
     case "now-7d":
       return [
         calcDate(today, subDays, hass.locale, hass.config, 7),
-        calcDate(today, subDays, hass.locale, hass.config, 1),
+        calcDate(today, subDays, hass.locale, hass.config, 0),
       ];
     case "now-30d":
       return [
         calcDate(today, subDays, hass.locale, hass.config, 30),
-        calcDate(today, subDays, hass.locale, hass.config, 1),
+        calcDate(today, subDays, hass.locale, hass.config, 0),
       ];
     case "now-12m":
       return [

src/common/decorators/restore-scroll.ts

@@ -1,46 +1,65 @@
-import type { LitElement } from "lit";
-import type { ClassElement } from "../../types";
+import type { ReactiveElement } from "lit";
 import { throttle } from "../util/throttle";
 
 const throttleReplaceState = throttle((value) => {
   history.replaceState({ scrollPosition: value }, "");
 }, 300);
 
-export const restoreScroll =
-  (selector: string): any =>
-  (element: ClassElement) => ({
-    kind: "method",
-    placement: "prototype",
-    key: element.key,
-    descriptor: {
-      set(this: LitElement, value: number) {
-        throttleReplaceState(value);
-        this[`__${String(element.key)}`] = value;
-      },
-      get(this: LitElement) {
-        return (
-          this[`__${String(element.key)}`] || history.state?.scrollPosition
-        );
-      },
-      enumerable: true,
-      configurable: true,
-    },
-    finisher(cls: typeof LitElement) {
-      const connectedCallback = cls.prototype.connectedCallback;
-      cls.prototype.connectedCallback = function () {
-        connectedCallback.call(this);
-        const scrollPos = this[element.key];
-        if (scrollPos) {
-          this.updateComplete.then(() => {
-            const target = this.renderRoot.querySelector(selector);
-            if (!target) {
-              return;
-            }
-            setTimeout(() => {
-              target.scrollTop = scrollPos;
-            }, 0);
-          });
-        }
+export function restoreScroll(selector: string) {
+  return <ElemClass extends ReactiveElement>(
+    proto: ElemClass,
+    propertyKey: string
+  ) => {
+    if (typeof propertyKey === "object") {
+      throw new Error("This decorator does not support this compilation type.");
+    }
+
+    const connectedCallback = proto.connectedCallback;
+    proto.connectedCallback = function () {
+      connectedCallback.call(this);
+
+      const scrollPos = this[propertyKey];
+
+      if (scrollPos) {
+        this.updateComplete.then(() => {
+          const target = this.renderRoot.querySelector(selector);
+          if (!target) {
+            return;
+          }
+          setTimeout(() => {
+            target.scrollTop = scrollPos;
+          }, 0);
+        });
+      }
+    };
+
+    const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey);
+    let newDescriptor: PropertyDescriptor;
+    if (descriptor === undefined) {
+      newDescriptor = {
+        get(this: ReactiveElement) {
+          return (
+            this[`__${String(propertyKey)}`] || history.state?.scrollPosition
+          );
+        },
+        set(this: ReactiveElement, value) {
+          throttleReplaceState(value);
+          this[`__${String(propertyKey)}`] = value;
+        },
+        configurable: true,
+        enumerable: true,
       };
-    },
-  });
+    } else {
+      const oldSetter = descriptor.set;
+      newDescriptor = {
+        ...descriptor,
+        set(this: ReactiveElement, value) {
+          throttleReplaceState(value);
+          this[`__${String(propertyKey)}`] = value;
+          oldSetter?.call(this, value);
+        },
+      };
+    }
+    Object.defineProperty(proto, propertyKey, newDescriptor);
+  };
+}