Add inital form data to hui-form-editor

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -24,7 +24,6 @@ body:
           required: true
         - label: I have tried a different browser to see if it is related to my browser.
           required: true
-        - label: I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.
   - type: markdown
     attributes:
       value: |

.github/labeler.yml

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

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
+        run: ./node_modules/.bin/gulp build-translations build-locale-data
       - name: Run Tests
         run: yarn run test
   build:
@@ -75,7 +75,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -99,7 +99,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v4.1.1
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -63,7 +63,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v4.1.1
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.1
+        uses: actions/setup-node@v4.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

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

.github/workflows/release.yaml

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

build-scripts/bundle.cjs

@@ -1,7 +1,6 @@
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
-const { dependencies } = require("../package.json");
 
 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
@@ -91,7 +90,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: latestBuild ? false : "usage",
-        corejs: latestBuild ? false : dependencies["core-js"],
+        corejs: latestBuild ? false : "3.33",
         bugfixes: true,
         shippedProposals: true,
       },
@@ -141,7 +140,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     // Import helpers and regenerator from runtime package
     [
       "@babel/plugin-transform-runtime",
-      { version: dependencies["@babel/runtime"] },
+      { version: require("../package.json").dependencies["@babel/runtime"] },
     ],
     // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],

gallery/src/data/demo_states.js

@@ -509,7 +509,7 @@ export default {
       away_mode: "on",
       aux_heat: "off",
       unit_of_measurement: "°C",
-      friendly_name: "HVAC",
+      friendly_name: "Hvac",
       supported_features: 3833,
     },
     last_changed: "2018-07-19T10:44:46.200650+00:00",

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

@@ -35,18 +35,6 @@ const ENTITIES = [
     friendly_name: "Nest",
     supported_features: 43,
   }),
-  getEntity("climate", "sensibo", "fan_only", {
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    hvac_modes: ["fan_only", "off"],
-    friendly_name: "Sensibo purifier",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    supported_features: 9,
-  }),
   getEntity("climate", "unavailable", "unavailable", {
     supported_features: 43,
   }),
@@ -69,23 +57,6 @@ const CONFIGS = [
   entity: climate.nest
     `,
   },
-  {
-    heading: "Fan only example",
-    config: `
-- type: thermostat
-  entity: climate.sensibo
-  features:
-    - type: climate-hvac-modes
-      hvac_modes:
-        - fan_only
-        - 'off'
-    - type: climate-fan-modes
-      style: icons
-      fan_modes:
-        - low
-        - high
-    `,
-  },
   {
     heading: "Unavailable",
     config: `

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

@@ -31,21 +31,6 @@ const ENTITIES = [
     max_temp: 30,
     supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
   }),
-  getEntity("climate", "fan", "fan_only", {
-    friendly_name: "Basic fan",
-    hvac_modes: ["fan_only", "off"],
-    hvac_mode: "fan_only",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      ClimateEntityFeature.TARGET_TEMPERATURE | ClimateEntityFeature.FAN_MODE,
-  }),
   getEntity("climate", "hvac", "auto", {
     friendly_name: "Basic hvac",
     hvac_modes: ["auto", "off"],

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

@@ -1,6 +1,12 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import {
+  UPDATE_SUPPORT_BACKUP,
+  UPDATE_SUPPORT_PROGRESS,
+  UPDATE_SUPPORT_INSTALL,
+  UPDATE_SUPPORT_RELEASE_NOTES,
+} from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -9,14 +15,13 @@ import {
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { LONG_TEXT } from "../../data/text";
-import { UpdateEntityFeature } from "../../../../src/data/update";
 
 const base_attributes = {
   title: "Awesome",
   installed_version: "1.2.2",
   latest_version: "1.2.3",
   release_url: "https://home-assistant.io",
-  supported_features: UpdateEntityFeature.INSTALL,
+  supported_features: UPDATE_SUPPORT_INSTALL,
   skipped_version: null,
   in_progress: false,
   release_summary:
@@ -56,7 +61,7 @@ const ENTITIES = [
   getEntity("update", "update7", "on", {
     ...base_attributes,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.BACKUP,
+      base_attributes.supported_features + UPDATE_SUPPORT_BACKUP,
     friendly_name: "With backup support",
   }),
   getEntity("update", "update8", "on", {
@@ -68,21 +73,21 @@ const ENTITIES = [
     ...base_attributes,
     in_progress: 25,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 25 in_progress",
   }),
   getEntity("update", "update10", "on", {
     ...base_attributes,
     in_progress: 50,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 50 in_progress",
   }),
   getEntity("update", "update11", "on", {
     ...base_attributes,
     in_progress: 75,
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
     friendly_name: "With 75 in_progress",
   }),
   getEntity("update", "update12", "unavailable", {
@@ -109,19 +114,19 @@ const ENTITIES = [
     ...base_attributes,
     friendly_name: "Update with release notes",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update17", "off", {
     ...base_attributes,
     friendly_name: "Update with release notes error",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update18", "off", {
     ...base_attributes,
     friendly_name: "Update with release notes loading",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
   }),
   getEntity("update", "update19", "on", {
     ...base_attributes,
@@ -137,10 +142,9 @@ const ENTITIES = [
   getEntity("update", "update21", "on", {
     ...base_attributes,
     in_progress: true,
-    friendly_name:
+    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
-      "Update with in_progress true and  UpdateEntityFeature.PROGRESS",
     supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
   }),
 ];
 

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-select";
 import {
   extractApiErrorMessage,

package.json

@@ -25,7 +25,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.6",
+    "@babel/runtime": "7.23.5",
     "@braintree/sanitize-url": "7.0.0",
     "@codemirror/autocomplete": "6.11.1",
     "@codemirror/commands": "6.3.2",
@@ -33,7 +33,7 @@
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.5",
     "@codemirror/state": "6.3.3",
-    "@codemirror/view": "6.22.3",
+    "@codemirror/view": "6.22.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.0",
     "@formatjs/intl-displaynames": "6.6.4",
@@ -80,9 +80,9 @@
     "@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": "=1.1.1",
+    "@material/web": "=1.0.1",
-    "@mdi/js": "7.4.47",
+    "@mdi/js": "7.3.67",
-    "@mdi/svg": "7.4.47",
+    "@mdi/svg": "7.3.67",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
@@ -90,8 +90,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.2",
+    "@vaadin/combo-box": "24.2.5",
-    "@vaadin/vaadin-themable-mixin": "24.3.2",
+    "@vaadin/vaadin-themable-mixin": "24.2.5",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -101,16 +101,16 @@
     "app-datepicker": "5.1.1",
     "chart.js": "4.4.1",
     "comlink": "4.4.1",
-    "core-js": "3.34.0",
+    "core-js": "3.33.3",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
-    "element-internals-polyfill": "1.3.10",
+    "element-internals-polyfill": "1.3.9",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.4.14",
+    "hls.js": "1.4.13",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
     "intl-messageformat": "10.5.8",
@@ -119,7 +119,7 @@
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "11.1.0",
+    "marked": "11.0.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -138,7 +138,7 @@
     "unfetch": "5.0.0",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",
-    "vue": "2.7.16",
+    "vue": "2.7.15",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.0.0",
@@ -150,14 +150,14 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.6",
+    "@babel/core": "7.23.5",
-    "@babel/helper-define-polyfill-provider": "0.4.4",
+    "@babel/helper-define-polyfill-provider": "0.4.3",
-    "@babel/plugin-proposal-decorators": "7.23.6",
+    "@babel/plugin-proposal-decorators": "7.23.5",
-    "@babel/plugin-transform-runtime": "7.23.6",
+    "@babel/plugin-transform-runtime": "7.23.4",
-    "@babel/preset-env": "7.23.6",
+    "@babel/preset-env": "7.23.5",
     "@babel/preset-typescript": "7.23.3",
     "@bundle-stats/plugin-webpack-filter": "4.8.3",
-    "@koa/cors": "5.0.0",
+    "@koa/cors": "4.0.0",
     "@lokalise/node-api": "12.1.0",
     "@octokit/auth-oauth-device": "6.0.1",
     "@octokit/plugin-retry": "6.0.1",
@@ -165,7 +165,7 @@
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
-    "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-json": "6.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@types/babel__plugin-transform-runtime": "7.9.5",
@@ -184,22 +184,22 @@
     "@types/tar": "6.1.10",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.16.0",
+    "@typescript-eslint/eslint-plugin": "6.13.2",
-    "@typescript-eslint/parser": "6.16.0",
+    "@typescript-eslint/parser": "6.13.2",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "5.0.0",
+    "chai": "4.3.10",
     "del": "7.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.55.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-disable": "2.0.3",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-lit": "1.11.0",
+    "eslint-plugin-lit": "1.10.1",
     "eslint-plugin-lit-a11y": "4.1.1",
     "eslint-plugin-unused-imports": "3.0.0",
     "eslint-plugin-wc": "2.0.4",
@@ -217,25 +217,25 @@
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
     "lint-staged": "15.2.0",
-    "lit-analyzer": "2.0.2",
+    "lit-analyzer": "2.0.1",
     "lodash.template": "4.5.0",
     "magic-string": "0.30.5",
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",
-    "open": "10.0.2",
+    "open": "9.1.0",
     "pinst": "3.0.0",
-    "prettier": "3.1.1",
+    "prettier": "3.1.0",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "5.10.0",
     "serve-handler": "6.1.5",
     "sinon": "17.0.1",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
     "tar": "6.2.0",
-    "terser-webpack-plugin": "5.3.10",
+    "terser-webpack-plugin": "5.3.9",
     "ts-lit-plugin": "2.0.1",
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",
@@ -245,7 +245,7 @@
     "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
-    "webpackbar": "6.0.0",
+    "webpackbar": "5.0.2",
     "workbox-build": "7.0.0"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240103.0"
+version      = "20231208.2"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/const.ts

@@ -29,7 +29,6 @@ import {
   mdiFlash,
   mdiFlower,
   mdiFormatListBulleted,
-  mdiFormatListCheckbox,
   mdiFormTextbox,
   mdiGauge,
   mdiGoogleAssistant,
@@ -65,7 +64,6 @@ import {
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
-  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherRainy,
   mdiWeatherWindy,
@@ -130,7 +128,6 @@ export const FIXED_DOMAIN_ICONS = {
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,
-  weather: mdiWeatherPartlyCloudy,
   zone: mdiMapMarkerRadius,
 };
 
@@ -169,7 +166,6 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
-  shopping_List: mdiFormatListCheckbox,
   signal_strength: mdiWifi,
   sound_pressure: mdiEarHearing,
   speed: mdiSpeedometer,

src/common/datetime/localize_date.ts

@@ -1,31 +0,0 @@
-import memoizeOne from "memoize-one";
-
-export const localizeWeekdays = memoizeOne(
-  (language: string, short: boolean): string[] => {
-    const days: string[] = [];
-    const format = new Intl.DateTimeFormat(language, {
-      weekday: short ? "short" : "long",
-      timeZone: "UTC",
-    });
-    for (let i = 0; i < 7; i++) {
-      const date = new Date(Date.UTC(1970, 0, 1 + 3 + i));
-      days.push(format.format(date));
-    }
-    return days;
-  }
-);
-
-export const localizeMonths = memoizeOne(
-  (language: string, short: boolean): string[] => {
-    const months: string[] = [];
-    const format = new Intl.DateTimeFormat(language, {
-      month: short ? "short" : "long",
-      timeZone: "UTC",
-    });
-    for (let i = 0; i < 12; i++) {
-      const date = new Date(Date.UTC(1970, 0 + i, 1));
-      months.push(format.format(date));
-    }
-    return months;
-  }
-);

src/common/entity/domain_icon.ts

@@ -28,12 +28,10 @@ import {
   mdiLockAlert,
   mdiLockClock,
   mdiLockOpen,
-  mdiMeterGas,
   mdiMotionSensor,
   mdiPackage,
   mdiPackageDown,
   mdiPackageUp,
-  mdiPipeValve,
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRestart,
@@ -276,16 +274,6 @@ export const domainIconWithoutDefault = (
           : mdiPackageUp
         : mdiPackage;
 
-    case "valve":
-      switch (stateObj?.attributes.device_class) {
-        case "water":
-          return mdiPipeValve;
-        case "gas":
-          return mdiMeterGas;
-        default:
-          return mdiPipeValve;
-      }
-
     case "water_heater":
       return compareState === "off" ? mdiWaterBoilerOff : mdiWaterBoiler;
 

src/common/entity/state_active.ts

@@ -42,8 +42,6 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
       return compareState !== "standby";
     case "vacuum":
       return !["idle", "docked", "paused"].includes(compareState);
-    case "valve":
-      return compareState !== "closed";
     case "plant":
       return compareState === "problem";
     case "group":

src/common/entity/state_color.ts

@@ -37,7 +37,6 @@ const STATE_COLORED_DOMAIN = new Set([
   "timer",
   "update",
   "vacuum",
-  "valve",
   "water_heater",
 ]);
 

src/components/chart/statistics-chart.ts

@@ -101,8 +101,7 @@ export class StatisticsChart extends LitElement {
       changedProps.has("unit") ||
       changedProps.has("period") ||
       changedProps.has("chartType") ||
-      changedProps.has("logarithmicScale") ||
+      changedProps.has("logarithmicScale")
-      changedProps.has("hideLegend")
     ) {
       this._createOptions();
     }

src/components/date-range-picker.ts

@@ -5,10 +5,6 @@ import DateRangePicker from "vue2-daterange-picker";
 // @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
 import { fireEvent } from "../common/dom/fire_event";
-import {
-  localizeWeekdays,
-  localizeMonths,
-} from "../common/datetime/localize_date";
 
 // Set the current date to the left picker instead of the right picker because the right is hidden
 const CustomDateRangePicker = Vue.extend({
@@ -67,10 +63,6 @@ const Component = Vue.extend({
       type: Boolean,
       default: false,
     },
-    language: {
-      type: String,
-      default: "en",
-    },
   },
   render(createElement) {
     // @ts-expect-error
@@ -85,8 +77,6 @@ const Component = Vue.extend({
         ranges: this.ranges ? {} : false,
         "locale-data": {
           firstDay: this.firstDay,
-          daysOfWeek: localizeWeekdays(this.language, true),
-          monthNames: localizeMonths(this.language, false),
         },
       },
       model: {
@@ -155,8 +145,6 @@ class DateRangePickerElement extends WrappedElement {
             );
             color: var(--primary-text-color);
             min-width: initial !important;
-            max-height: var(--date-range-picker-max-height);
-            overflow-y: auto;
           }
           .daterangepicker:before {
             display: none;
@@ -174,7 +162,7 @@ class DateRangePickerElement extends WrappedElement {
             color: var(--secondary-text-color);
             border-radius: 0;
             outline: none;
-            min-width: 32px;
+            width: 32px;
             height: 32px;
           }
           .daterangepicker td.off,
@@ -250,9 +238,6 @@ class DateRangePickerElement extends WrappedElement {
           }
           .daterangepicker .drp-calendar.left {
             padding: 8px;
-            width: unset;
-            max-width: unset;
-            min-width: 270px;
           }
           .daterangepicker.show-calendar .ranges {
             margin-top: 0;

src/components/ha-area-picker.ts

@@ -446,7 +446,6 @@ export class HaAreaPicker extends LitElement {
       cancel: () => {
         this._setValue(undefined);
         this._suggestion = undefined;
-        this.comboBox.setInputValue("");
       },
     });
   }

src/components/ha-big-number.ts

@@ -86,7 +86,6 @@ export class HaBigNumber extends LitElement {
         .value .decimal {
           font-size: 0.42em;
           line-height: 1.33;
-          min-height: 1.33em;
         }
         .value .unit {
           font-size: 0.33em;

src/components/ha-check-list-item.ts

@@ -3,15 +3,9 @@ import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
 import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
 import { styles } from "@material/mwc-list/mwc-list-item.css";
 import { customElement } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-check-list-item")
 export class HaCheckListItem extends CheckListItemBase {
-  async onChange(event) {
-    super.onChange(event);
-    fireEvent(this, event.type);
-  }
-
   static override styles = [
     styles,
     controlStyles,
@@ -28,15 +22,6 @@ export class HaCheckListItem extends CheckListItemBase {
         margin-inline-start: 0px;
         direction: var(--direction);
       }
-      .mdc-deprecated-list-item__meta {
-        flex-shrink: 0;
-        direction: var(--direction);
-        margin-inline-start: auto;
-        margin-inline-end: 0;
-      }
-      .mdc-deprecated-list-item__graphic {
-        margin-top: var(--check-list-item-graphic-margin-top);
-      }
     `,
   ];
 }

src/components/ha-combo-box.ts

@@ -180,7 +180,7 @@ export class HaComboBox extends LitElement {
           ></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
+          helper=${ifDefined(this.helper)}
           helperPersistent
         >
           <slot name="icon" slot="leadingIcon"></slot>

src/components/ha-date-input.ts

@@ -18,8 +18,7 @@ export interface datePickerDialogParams {
   max?: string;
   locale?: string;
   firstWeekday?: number;
-  canClear?: boolean;
+  onChange: (value: string) => void;
-  onChange: (value: string | undefined) => void;
 }
 
 const showDatePickerDialog = (
@@ -50,8 +49,6 @@ export class HaDateInput extends LitElement {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) public canClear?: boolean;
-
   render() {
     return html`<ha-textfield
       .label=${this.label}
@@ -61,7 +58,6 @@ export class HaDateInput extends LitElement {
       helperPersistent
       readonly
       @click=${this._openDialog}
-      @keydown=${this._keyDown}
       .value=${this.value
         ? formatDateNumeric(
             new Date(`${this.value.split("T")[0]}T00:00:00`),
@@ -86,23 +82,13 @@ export class HaDateInput extends LitElement {
       min: this.min || "1970-01-01",
       max: this.max,
       value: this.value,
-      canClear: this.canClear,
       onChange: (value) => this._valueChanged(value),
       locale: this.locale.language,
       firstWeekday: firstWeekdayIndex(this.locale),
     });
   }
 
-  private _keyDown(ev: KeyboardEvent) {
+  private _valueChanged(value: string) {
-    if (!this.canClear) {
-      return;
-    }
-    if (["Backspace", "Delete"].includes(ev.key)) {
-      this._valueChanged(undefined);
-    }
-  }
-
-  private _valueChanged(value: string | undefined) {
     if (this.value !== value) {
       this.value = value;
       fireEvent(this, "change");

src/components/ha-date-range-picker.ts

@@ -253,7 +253,6 @@ export class HaDateRangePicker extends LitElement {
         opening-direction=${this.openingDirection ||
         this._calcedOpeningDirection}
         first-day=${firstWeekdayIndex(this.hass.locale)}
-        language=${this.hass.locale.language}
       >
         <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal

src/components/ha-dialog-date-picker.ts

@@ -50,15 +50,6 @@ export class HaDialogDatePicker extends LitElement {
         @datepicker-value-updated=${this._valueChanged}
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
-      ${this._params.canClear
-        ? html`<mwc-button
-            slot="secondaryAction"
-            @click=${this._clear}
-            class="warning"
-          >
-            ${this.hass.localize("ui.dialogs.date-picker.clear")}
-          </mwc-button>`
-        : nothing}
       <mwc-button slot="secondaryAction" @click=${this._setToday}>
         ${this.hass.localize("ui.dialogs.date-picker.today")}
       </mwc-button>
@@ -75,11 +66,6 @@ export class HaDialogDatePicker extends LitElement {
     this._value = ev.detail.value;
   }
 
-  private _clear() {
-    this._params?.onChange(undefined);
-    this.closeDialog();
-  }
-
   private _setToday() {
     const today = new Date();
     this._value = format(today, "yyyy-MM-dd");

src/components/ha-dialog.ts

@@ -13,15 +13,13 @@ export const createCloseHeading = (
   hass: HomeAssistant | undefined,
   title: string | TemplateResult
 ) => html`
-  <div class="header_title">
+  <div class="header_title">${title}</div>
-    <span>${title}</span>
+  <ha-icon-button
-    <ha-icon-button
+    .label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
-      .label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
+    .path=${mdiClose}
-      .path=${mdiClose}
+    dialogAction="close"
-      dialogAction="close"
+    class="header_button"
-      class="header_button"
+  ></ha-icon-button>
-    ></ha-icon-button>
-  </div>
 `;
 
 @customElement("ha-dialog")
@@ -96,12 +94,15 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__title {
         padding: 24px 24px 0 24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
       .mdc-dialog__actions {
         padding: 12px 24px 12px 24px;
       }
       .mdc-dialog__title::before {
-        content: unset;
+        display: block;
+        height: 0px;
       }
       .mdc-dialog .mdc-dialog__content {
         position: var(--dialog-content-position, relative);
@@ -125,26 +126,19 @@ export class HaDialog extends DialogBase {
         flex-direction: column;
       }
       .header_title {
-        position: relative;
+        margin-right: 32px;
-        padding-right: 40px;
+        margin-inline-end: 32px;
-        padding-inline-end: 40px;
+        margin-inline-start: initial;
-        padding-inline-start: initial;
         direction: var(--direction);
       }
-      .header_title span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: block;
-      }
       .header_button {
         position: absolute;
-        right: -8px;
+        right: 16px;
-        top: -8px;
+        top: 14px;
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: -8px;
+        inset-inline-end: 16px;
         direction: var(--direction);
       }
       .dialog-actions {

src/components/ha-labeled-slider.ts

@@ -10,9 +10,9 @@ class HaLabeledSlider extends LitElement {
 
   @property() public caption?: string;
 
-  @property({ type: Boolean }) public disabled = false;
+  @property() public disabled?: boolean;
 
-  @property({ type: Boolean }) public required = true;
+  @property() public required?: boolean;
 
   @property() public min: number = 0;
 

src/components/ha-list-item.ts

@@ -36,24 +36,16 @@ export class HaListItem extends ListItemBase {
             --mdc-list-item-graphic-margin,
             16px
           ) !important;
-          direction: var(--direction) !important;
+          direction: var(--direction);
         }
         span.material-icons:last-of-type {
           margin-inline-start: auto !important;
           margin-inline-end: 0px !important;
-          direction: var(--direction) !important;
+          direction: var(--direction);
         }
         .mdc-deprecated-list-item__meta {
           display: var(--mdc-list-item-meta-display);
           align-items: center;
-          flex-shrink: 0;
-        }
-        :host([graphic="icon"]:not([twoline]))
-          .mdc-deprecated-list-item__graphic {
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            20px
-          ) !important;
         }
         :host([multiline-secondary]) {
           height: auto;
@@ -86,15 +78,6 @@ export class HaListItem extends ListItemBase {
           pointer-events: unset;
         }
       `,
-      // safari workaround - must be explicit
-      document.dir === "rtl"
-        ? css`
-            span.material-icons:first-of-type,
-            span.material-icons:last-of-type {
-              direction: rtl !important;
-            }
-          `
-        : css``,
     ];
   }
 }

src/components/ha-markdown-element.ts

@@ -95,15 +95,6 @@ class HaMarkdownElement extends ReactiveElement {
           }
           node.firstElementChild!.replaceWith(alertNote);
         }
-      } else if (
-        node instanceof HTMLElement &&
-        ["ha-alert", "ha-qr-code", "ha-icon", "ha-svg-icon"].includes(
-          node.localName
-        )
-      ) {
-        import(
-          /* webpackInclude: /(ha-alert)|(ha-qr-code)|(ha-icon)|(ha-svg-icon)/ */ `./${node.localName}`
-        );
       }
     }
   }

src/components/ha-markdown.ts

@@ -2,6 +2,11 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./ha-markdown-element";
 
+// Import components that are allwoed to be defined.
+import "./ha-alert";
+import "./ha-icon";
+import "./ha-svg-icon";
+
 @customElement("ha-markdown")
 export class HaMarkdown extends LitElement {
   @property() public content?;

src/components/ha-qr-code.ts

@@ -1,114 +0,0 @@
-import { LitElement, PropertyValues, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import QRCode from "qrcode";
-
-@customElement("ha-qr-code")
-export class HaQrCode extends LitElement {
-  @property() public data?: string;
-
-  @property({ attribute: "error-correction-level" })
-  public errorCorrectionLevel: "low" | "medium" | "quartile" | "high" =
-    "medium";
-
-  @property({ type: Number })
-  public width = 4;
-
-  @property({ type: Number })
-  public scale = 4;
-
-  @property({ type: Number })
-  public margin = 4;
-
-  @property({ type: Number }) public maskPattern?:
-    | 0
-    | 1
-    | 2
-    | 3
-    | 4
-    | 5
-    | 6
-    | 7;
-
-  @property({ attribute: "center-image" }) public centerImage?: string;
-
-  @state() private _error?: string;
-
-  @query("canvas") private _canvas?: HTMLCanvasElement;
-
-  protected willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
-    if (
-      (changedProperties.has("data") ||
-        changedProperties.has("scale") ||
-        changedProperties.has("width") ||
-        changedProperties.has("margin") ||
-        changedProperties.has("maskPattern") ||
-        changedProperties.has("errorCorrectionLevel")) &&
-      this._error
-    ) {
-      this._error = undefined;
-    }
-  }
-
-  updated(changedProperties: PropertyValues) {
-    const canvas = this._canvas;
-    if (
-      canvas &&
-      this.data &&
-      (changedProperties.has("data") ||
-        changedProperties.has("scale") ||
-        changedProperties.has("width") ||
-        changedProperties.has("margin") ||
-        changedProperties.has("maskPattern") ||
-        changedProperties.has("errorCorrectionLevel") ||
-        changedProperties.has("centerImage"))
-    ) {
-      const computedStyles = getComputedStyle(this);
-
-      QRCode.toCanvas(canvas, this.data, {
-        errorCorrectionLevel: this.errorCorrectionLevel,
-        width: this.width,
-        scale: this.scale,
-        margin: this.margin,
-        maskPattern: this.maskPattern,
-        color: {
-          light: computedStyles.getPropertyValue("--card-background-color"),
-          dark: computedStyles.getPropertyValue("--primary-text-color"),
-        },
-      }).catch((err) => {
-        this._error = err.message;
-      });
-
-      if (this.centerImage) {
-        const context = this._canvas!.getContext("2d");
-        const imageObj = new Image();
-        imageObj.src = this.centerImage;
-        imageObj.onload = () => {
-          context?.drawImage(
-            imageObj,
-            canvas.width * 0.375,
-            canvas.height * 0.375,
-            canvas.width / 4,
-            canvas.height / 4
-          );
-        };
-      }
-    }
-  }
-
-  render() {
-    if (!this.data) {
-      return nothing;
-    }
-    if (this._error) {
-      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
-    }
-    return html`<canvas></canvas>`;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
-}

src/components/ha-selector/ha-selector-number.ts

@@ -43,22 +43,6 @@ export class HaNumberSelector extends LitElement {
       this.selector.number?.min === undefined ||
       this.selector.number?.max === undefined;
 
-    let sliderStep;
-
-    if (!isBox) {
-      sliderStep = this.selector.number!.step ?? 1;
-      if (sliderStep === "any") {
-        sliderStep = 1;
-        // divide the range of the slider by 100 steps
-        const step =
-          (this.selector.number!.max! - this.selector.number!.min!) / 100;
-        // biggest step size is 1, round the step size to a division of 1
-        while (sliderStep > step) {
-          sliderStep /= 10;
-        }
-      }
-    }
-
     return html`
       <div class="input">
         ${!isBox
@@ -68,10 +52,12 @@ export class HaNumberSelector extends LitElement {
                 : ""}
               <ha-slider
                 labeled
-                .min=${this.selector.number!.min}
+                .min=${this.selector.number?.min}
-                .max=${this.selector.number!.max}
+                .max=${this.selector.number?.max}
                 .value=${this.value ?? ""}
-                .step=${sliderStep}
+                .step=${this.selector.number?.step === "any"
+                  ? undefined
+                  : this.selector.number?.step ?? 1}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}

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

@@ -70,15 +70,15 @@ const SELECTOR_SCHEMAS = {
   number: [
     {
       name: "min",
-      selector: { number: { mode: "box", step: "any" } },
+      selector: { number: { mode: "box" } },
     },
     {
       name: "max",
-      selector: { number: { mode: "box", step: "any" } },
+      selector: { number: { mode: "box" } },
     },
     {
       name: "step",
-      selector: { number: { mode: "box", step: "any" } },
+      selector: { number: { mode: "box" } },
     },
   ] as const,
   object: [] as const,

src/components/ha-service-control.ts

@@ -4,14 +4,7 @@ import {
   HassServices,
   HassServiceTarget,
 } from "home-assistant-js-websocket";
-import {
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  nothing,
-} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../common/array/ensure-array";
@@ -90,8 +83,6 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean }) public showAdvanced?: boolean;
 
-  @property({ type: Boolean, reflect: true }) public hidePicker?: boolean;
-
   @state() private _value!: this["value"];
 
   @state() private _checkedKeys = new Set();
@@ -372,14 +363,12 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
-    return html`${this.hidePicker
+    return html`<ha-service-picker
-        ? nothing
+        .hass=${this.hass}
-        : html`<ha-service-picker
+        .value=${this._value?.service}
-            .hass=${this.hass}
+        .disabled=${this.disabled}
-            .value=${this._value?.service}
+        @value-changed=${this._serviceChanged}
-            .disabled=${this.disabled}
+      ></ha-service-picker>
-            @value-changed=${this._serviceChanged}
-          ></ha-service-picker>`}
       <div class="description">
         ${description ? html`<p>${description}</p>` : ""}
         ${this._manifest
@@ -533,14 +522,6 @@ export class HaServiceControl extends LitElement {
         defaultValue = field.selector.constant?.value;
       }
 
-      if (
-        defaultValue == null &&
-        field?.selector &&
-        "boolean" in field.selector
-      ) {
-        defaultValue = false;
-      }
-
       if (defaultValue != null) {
         data = {
           ...this._value?.data,
@@ -746,9 +727,6 @@ export class HaServiceControl extends LitElement {
         margin: var(--service-control-padding, 0 16px);
         padding: 16px 0;
       }
-      :host([hidePicker]) p {
-        padding-top: 0;
-      }
       .checkbox-spacer {
         width: 32px;
       }

src/components/ha-settings-row.ts

@@ -35,12 +35,7 @@ export class HaSettingsRow extends LitElement {
         align-items: center;
       }
       .body {
-        padding-top: 8px;
+        padding: 8px 16px 8px 0;
-        padding-bottom: 8px;
-        padding-left: 0;
-        padding-inline-start: 0;
-        padding-right: 16x;
-        padding-inline-end: 16px;
         overflow: hidden;
         display: var(--layout-vertical_-_display);
         flex-direction: var(--layout-vertical_-_flex-direction);

src/components/ha-slider.ts

@@ -11,7 +11,6 @@ export class HaSlider extends MdSlider {
       :host {
         --md-sys-color-primary: var(--primary-color);
         --md-sys-color-outline: var(--outline-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;
         --md-slider-handle-height: 14px;
         min-width: 100px;

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -280,8 +280,6 @@ export abstract class TopAppBarBaseBase extends BaseElement {
       }
       #title {
         border-right: 1px solid rgba(255, 255, 255, 0.12);
-        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
-        border-inline-start: initial;
         box-sizing: border-box;
         flex: 0 0 var(--sidepane-width, 250px);
         width: var(--sidepane-width, 250px);
@@ -292,8 +290,6 @@ export abstract class TopAppBarBaseBase extends BaseElement {
       }
       .pane {
         border-right: 1px solid var(--divider-color);
-        border-inline-end: 1px solid var(--divider-color);
-        border-inline-start: initial;
         box-sizing: border-box;
         display: flex;
         flex: 0 0 var(--sidepane-width, 250px);

src/components/ha-valve-controls.ts

@@ -1,102 +0,0 @@
-import { mdiStop, mdiValveClosed, mdiValveOpen } from "@mdi/js";
-import { CSSResultGroup, LitElement, html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { supportsFeature } from "../common/entity/supports-feature";
-import {
-  ValveEntity,
-  ValveEntityFeature,
-  canClose,
-  canOpen,
-  canStop,
-} from "../data/valve";
-import type { HomeAssistant } from "../types";
-import "./ha-icon-button";
-
-@customElement("ha-valve-controls")
-class HaValveControls extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj!: ValveEntity;
-
-  protected render() {
-    if (!this.stateObj) {
-      return nothing;
-    }
-
-    return html`
-      <div class="state">
-        <ha-icon-button
-          class=${classMap({
-            hidden: !supportsFeature(this.stateObj, ValveEntityFeature.OPEN),
-          })}
-          .label=${this.hass.localize("ui.card.valve.open_valve")}
-          @click=${this._onOpenTap}
-          .disabled=${!canOpen(this.stateObj)}
-          .path=${mdiValveOpen}
-        >
-        </ha-icon-button>
-        <ha-icon-button
-          class=${classMap({
-            hidden: !supportsFeature(this.stateObj, ValveEntityFeature.STOP),
-          })}
-          .label=${this.hass.localize("ui.card.valve.stop_valve")}
-          @click=${this._onStopTap}
-          .disabled=${!canStop(this.stateObj)}
-          .path=${mdiStop}
-        ></ha-icon-button>
-        <ha-icon-button
-          class=${classMap({
-            hidden: !supportsFeature(this.stateObj, ValveEntityFeature.CLOSE),
-          })}
-          .label=${this.hass.localize("ui.card.valve.close_valve")}
-          @click=${this._onCloseTap}
-          .disabled=${!canClose(this.stateObj)}
-          .path=${mdiValveClosed}
-        >
-        </ha-icon-button>
-      </div>
-    `;
-  }
-
-  private _onOpenTap(ev): void {
-    ev.stopPropagation();
-    this.hass.callService("valve", "open_valve", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
-  private _onCloseTap(ev): void {
-    ev.stopPropagation();
-    this.hass.callService("valve", "close_valve", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
-  private _onStopTap(ev): void {
-    ev.stopPropagation();
-    this.hass.callService("valve", "stop_valve", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-      }
-      .state {
-        white-space: nowrap;
-      }
-      .hidden {
-        visibility: hidden !important;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-valve-controls": HaValveControls;
-  }
-}

src/components/media-player/ha-browse-media-tts.ts

@@ -62,7 +62,7 @@ class BrowseMediaTTS extends LitElement {
           this.hass.localize(
             "ui.components.media-browser.tts.example_message",
             {
-              name: this.hass.user?.name || "Alice",
+              name: this.hass.user?.name || "",
             }
           )}
         >

src/components/trace/ha-trace-path-details.ts

@@ -1,12 +1,5 @@
 import { dump } from "js-yaml";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -25,12 +18,6 @@ import { traceTabStyles } from "./trace-tab-styles";
 import { HomeAssistant } from "../../types";
 import type { NodeInfo } from "./hat-script-graph";
 
-const TRACE_PATH_TABS = [
-  "step_config",
-  "changed_variables",
-  "logbook",
-] as const;
-
 @customElement("ha-trace-path-details")
 export class HaTracePathDetails extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -47,7 +34,7 @@ export class HaTracePathDetails extends LitElement {
 
   @property() public trackedNodes!: Record<string, any>;
 
-  @state() private _view: (typeof TRACE_PATH_TABS)[number] = "step_config";
+  @state() private _view: "config" | "changed_variables" | "logbook" = "config";
 
   protected render(): TemplateResult {
     return html`
@@ -56,21 +43,23 @@ export class HaTracePathDetails extends LitElement {
       </div>
 
       <div class="tabs top">
-        ${TRACE_PATH_TABS.map(
+        ${[
-          (view) => html`
+          ["config", "Step Config"],
+          ["changed_variables", "Changed Variables"],
+          ["logbook", "Related logbook entries"],
+        ].map(
+          ([view, label]) => html`
             <button
               .view=${view}
               class=${classMap({ active: this._view === view })}
               @click=${this._showTab}
             >
-              ${this.hass!.localize(
+              ${label}
-                `ui.panel.config.automation.trace.tabs.${view}`
-              )}
             </button>
           `
         )}
       </div>
-      ${this._view === "step_config"
+      ${this._view === "config"
         ? this._renderSelectedConfig()
         : this._view === "changed_variables"
           ? this._renderChangedVars()
@@ -82,9 +71,7 @@ export class HaTracePathDetails extends LitElement {
     const paths = this.trace.trace;
 
     if (!this.selected?.path) {
-      return this.hass!.localize(
+      return "Select a node on the left for more information.";
-        "ui.panel.config.automation.trace.path.choose"
-      );
     }
 
     // HACK: default choice node is not part of paths. We filter them out here by checking parent.
@@ -95,16 +82,12 @@ export class HaTracePathDetails extends LitElement {
       ] as ChooseActionTraceStep[];
 
       if (parentTraceInfo && parentTraceInfo[0]?.result?.choice === "default") {
-        return this.hass!.localize(
+        return "The default action was executed because no options matched.";
-          "ui.panel.config.automation.trace.path.default_action_executed"
-        );
       }
     }
 
     if (!(this.selected.path in paths)) {
-      return this.hass!.localize(
+      return "This node was not executed and so no further trace information is available.";
-        "ui.panel.config.automation.trace.path.no_further_execution"
-      );
     }
 
     const parts: TemplateResult[][] = [];
@@ -132,53 +115,29 @@ export class HaTracePathDetails extends LitElement {
             trace as any;
 
           if (result?.enabled === false) {
-            return html`${this.hass!.localize(
+            return html`This node was disabled and skipped during execution so
-              "ui.panel.config.automation.trace.path.disabled_step"
+            no further trace information is available.`;
-            )}`;
           }
 
           return html`
             ${curPath === this.selected.path
               ? ""
-              : html`<h2>
+              : html`<h2>${curPath.substr(this.selected.path.length + 1)}</h2>`}
-                  ${curPath.substring(this.selected.path.length + 1)}
+            ${data.length === 1 ? "" : html`<h3>Iteration ${idx + 1}</h3>`}
-                </h2>`}
+            Executed:
-            ${data.length === 1
+            ${formatDateTimeWithSeconds(
-              ? nothing
+              new Date(timestamp),
-              : html`<h3>
+              this.hass.locale,
-                  ${this.hass!.localize(
+              this.hass.config
-                    "ui.panel.config.automation.trace.path.iteration",
+            )}<br />
-                    { number: idx + 1 }
-                  )}
-                </h3>`}
-            ${this.hass!.localize(
-              "ui.panel.config.automation.trace.path.executed",
-              {
-                time: formatDateTimeWithSeconds(
-                  new Date(timestamp),
-                  this.hass.locale,
-                  this.hass.config
-                ),
-              }
-            )}
-            <br />
             ${result
-              ? html`${this.hass!.localize(
+              ? html`Result:
-                    "ui.panel.config.automation.trace.path.result"
-                  )}
                   <pre>${dump(result)}</pre>`
               : error
-                ? html`<div class="error">
+                ? html`<div class="error">Error: ${error}</div>`
-                    ${this.hass!.localize(
+                : ""}
-                      "ui.panel.config.automation.trace.path.error",
-                      {
-                        error: error,
-                      }
-                    )}
-                  </div>`
-                : nothing}
             ${Object.keys(rest).length === 0
-              ? nothing
+              ? ""
               : html`<pre>${dump(rest)}</pre>`}
           `;
         })
@@ -190,49 +149,30 @@ export class HaTracePathDetails extends LitElement {
 
   private _renderSelectedConfig() {
     if (!this.selected?.path) {
-      return nothing;
+      return "";
     }
     const config = getDataFromPath(this.trace!.config, this.selected.path);
     return config
       ? html`<ha-code-editor
-          .value=${dump(config).trimEnd()}
+          .value=${dump(config).trimRight()}
           readOnly
           dir="ltr"
         ></ha-code-editor>`
-      : this.hass!.localize(
+      : "Unable to find config";
-          "ui.panel.config.automation.trace.path.unable_to_find_config"
-        );
   }
 
   private _renderChangedVars() {
     const paths = this.trace.trace;
     const data: ActionTraceStep[] = paths[this.selected.path];
 
-    if (data === undefined) {
-      return html`<div class="padded-box">
-        ${this.hass!.localize(
-          "ui.panel.config.automation.trace.path.step_not_executed"
-        )}
-      </div>`;
-    }
-
     return html`
       <div class="padded-box">
         ${data.map(
           (trace, idx) => html`
-            ${data.length > 1
+            ${idx > 0 ? html`<p>Iteration ${idx + 1}</p>` : ""}
-              ? html`<p>
-                  ${this.hass!.localize(
-                    "ui.panel.config.automation.trace.path.iteration",
-                    { number: idx + 1 }
-                  )}
-                </p>`
-              : ""}
             ${Object.keys(trace.changed_variables || {}).length === 0
-              ? this.hass!.localize(
+              ? "No variables changed"
-                  "ui.panel.config.automation.trace.path.no_variables_changed"
+              : html`<pre>${dump(trace.changed_variables).trimRight()}</pre>`}
-                )
-              : html`<pre>${dump(trace.changed_variables).trimEnd()}</pre>`}
           `
         )}
       </div>
@@ -246,11 +186,7 @@ export class HaTracePathDetails extends LitElement {
     const index = trackedPaths.indexOf(this.selected.path);
 
     if (index === -1) {
-      return html`<div class="padded-box">
+      return html`<div class="padded-box">Node not tracked.</div>`;
-        ${this.hass!.localize(
-          "ui.panel.config.automation.trace.path.step_not_executed"
-        )}
-      </div>`;
     }
 
     let entries: LogbookEntry[];
@@ -298,9 +234,7 @@ export class HaTracePathDetails extends LitElement {
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this.hass!.localize(
+          No Logbook entries found for this step.
-            "ui.panel.config.automation.trace.path.no_logbook_entries"
-          )}
         </div>`;
   }
 

src/components/trace/hat-graph-node.ts

@@ -125,6 +125,10 @@ export class HatGraphNode extends LitElement {
       :host([notEnabled]:hover) circle {
         --stroke-clr: var(--disabled-hover-clr);
       }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
       circle,
       path.connector {
         stroke: var(--stroke-clr);

src/data/action.ts

@@ -5,8 +5,6 @@ import {
   mdiCallSplit,
   mdiCodeBraces,
   mdiDevices,
-  mdiDotsHorizontal,
-  mdiExcavator,
   mdiGestureDoubleTap,
   mdiHandBackRight,
   mdiPalette,
@@ -15,12 +13,10 @@ import {
   mdiRoomService,
   mdiShuffleDisabled,
   mdiTimerOutline,
-  mdiTools,
   mdiTrafficLight,
 } from "@mdi/js";
-import { AutomationElementGroup } from "./automation";
 
-export const ACTION_ICONS = {
+export const ACTION_TYPES = {
   condition: mdiAbTesting,
   delay: mdiTimerOutline,
   event: mdiGestureDoubleTap,
@@ -38,44 +34,6 @@ export const ACTION_ICONS = {
   variables: mdiApplicationVariableOutline,
 } as const;
 
-export const YAML_ONLY_ACTION_TYPES = new Set<keyof typeof ACTION_ICONS>([
+export const YAML_ONLY_ACTION_TYPES = new Set<keyof typeof ACTION_TYPES>([
   "variables",
 ]);
-
-export const ACTION_GROUPS: AutomationElementGroup = {
-  device_id: {},
-  helpers: {
-    icon: mdiTools,
-    members: {},
-  },
-  building_blocks: {
-    icon: mdiExcavator,
-    members: {
-      condition: {},
-      delay: {},
-      wait_template: {},
-      wait_for_trigger: {},
-      repeat: {},
-      choose: {},
-      if: {},
-      stop: {},
-      parallel: {},
-      variables: {},
-    },
-  },
-  other: {
-    icon: mdiDotsHorizontal,
-    members: {
-      event: {},
-      service: {},
-    },
-  },
-} as const;
-
-export const SERVICE_PREFIX = "__SERVICE__";
-
-export const isService = (key: string | undefined): boolean | undefined =>
-  key?.startsWith(SERVICE_PREFIX);
-
-export const getService = (key: string): string =>
-  key.substring(SERVICE_PREFIX.length);

src/data/area_registry.ts

@@ -128,7 +128,7 @@ export const areaCompare =
   (entries?: HomeAssistant["areas"], order?: string[]) =>
   (a: string, b: string) => {
     const indexA = order ? order.indexOf(a) : -1;
-    const indexB = order ? order.indexOf(b) : -1;
+    const indexB = order ? order.indexOf(b) : 1;
     if (indexA === -1 && indexB === -1) {
       const nameA = entries?.[a]?.name ?? a;
       const nameB = entries?.[b]?.name ?? b;

src/data/automation.ts

@@ -275,10 +275,6 @@ export interface ShorthandNotCondition extends ShorthandBaseCondition {
   not: Condition[];
 }
 
-export interface AutomationElementGroup {
-  [key: string]: { icon?: string; members?: AutomationElementGroup };
-}
-
 export type Condition =
   | StateCondition
   | NumericStateCondition

src/data/automation_i18n.ts

@@ -766,38 +766,48 @@ const tryDescribeCondition = (
 
   // State Condition
   if (condition.condition === "state") {
+    let base = "Confirm";
     if (!condition.entity_id) {
-      return hass.localize(
+      return `${base} state`;
-        `${conditionsTranslationBaseKey}.state.description.no_entity`
-      );
     }
 
-    let attribute = "";
     if (condition.attribute) {
       const stateObj = Array.isArray(condition.entity_id)
         ? hass.states[condition.entity_id[0]]
         : hass.states[condition.entity_id];
-      attribute = computeAttributeNameDisplay(
+      base += ` ${computeAttributeNameDisplay(
         hass.localize,
         stateObj,
         hass.entities,
         condition.attribute
-      );
+      )} of`;
     }
 
-    const entities: string[] = [];
     if (Array.isArray(condition.entity_id)) {
+      const entities: string[] = [];
       for (const entity of condition.entity_id.values()) {
         if (hass.states[entity]) {
           entities.push(computeStateName(hass.states[entity]) || entity);
         }
       }
+      if (entities.length !== 0) {
+        const entitiesString =
+          condition.match === "any"
+            ? formatListWithOrs(hass.locale, entities)
+            : formatListWithAnds(hass.locale, entities);
+        base += ` ${entitiesString} ${
+          condition.entity_id.length > 1 ? "are" : "is"
+        }`;
+      } else {
+        // no entity_id or empty array
+        base += " an entity";
+      }
     } else if (condition.entity_id) {
-      entities.push(
+      base += ` ${
         hass.states[condition.entity_id]
           ? computeStateName(hass.states[condition.entity_id])
           : condition.entity_id
-      );
+      } is`;
     }
 
     const states: string[] = [];
@@ -835,27 +845,21 @@ const tryDescribeCondition = (
       );
     }
 
-    let duration = "";
+    if (states.length === 0) {
-    if (condition.for) {
+      states.push("a state");
-      duration = describeDuration(hass.locale, condition.for) || "";
     }
 
-    return hass.localize(
+    const statesString = formatListWithOrs(hass.locale, states);
-      `${conditionsTranslationBaseKey}.state.description.full`,
+    base += ` ${statesString}`;
-      {
+
-        hasAttribute: attribute !== "" ? "true" : "false",
+    if (condition.for) {
-        attribute: attribute,
+      const duration = describeDuration(hass.locale, condition.for);
-        numberOfEntities: entities.length,
+      if (duration) {
-        entities:
+        base += ` for ${duration}`;
-          condition.match === "any"
-            ? formatListWithOrs(hass.locale, entities)
-            : formatListWithAnds(hass.locale, entities),
-        numberOfStates: states.length,
-        states: formatListWithOrs(hass.locale, states),
-        hasDuration: duration !== "" ? "true" : "false",
-        duration: duration,
       }
-    );
+    }
+
+    return base;
   }
 
   // Numeric State Condition

src/data/condition.ts

@@ -3,21 +3,16 @@ import {
   mdiClockOutline,
   mdiCodeBraces,
   mdiDevices,
-  mdiDotsHorizontal,
-  mdiExcavator,
   mdiGateOr,
   mdiIdentifier,
-  mdiMapClock,
   mdiMapMarkerRadius,
   mdiNotEqualVariant,
   mdiNumeric,
-  mdiShape,
   mdiStateMachine,
   mdiWeatherSunny,
 } from "@mdi/js";
-import { AutomationElementGroup } from "./automation";
 
-export const CONDITION_ICONS = {
+export const CONDITION_TYPES = {
   device: mdiDevices,
   and: mdiAmpersand,
   or: mdiGateOr,
@@ -30,22 +25,3 @@ export const CONDITION_ICONS = {
   trigger: mdiIdentifier,
   zone: mdiMapMarkerRadius,
 };
-
-export const CONDITION_GROUPS: AutomationElementGroup = {
-  device: {},
-  entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
-  time_location: {
-    icon: mdiMapClock,
-    members: { sun: {}, time: {}, zone: {} },
-  },
-  building_blocks: {
-    icon: mdiExcavator,
-    members: { and: {}, or: {}, not: {} },
-  },
-  other: {
-    icon: mdiDotsHorizontal,
-    members: {
-      template: {},
-    },
-  },
-} as const;

src/data/cover.ts

@@ -65,7 +65,7 @@ export function canOpen(stateObj: CoverEntity) {
     return false;
   }
   const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || (!isFullyOpen(stateObj) && !isOpening(stateObj));
+  return (!isFullyOpen(stateObj) && !isOpening(stateObj)) || assumedState;
 }
 
 export function canClose(stateObj: CoverEntity): boolean {
@@ -73,7 +73,7 @@ export function canClose(stateObj: CoverEntity): boolean {
     return false;
   }
   const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || (!isFullyClosed(stateObj) && !isClosing(stateObj));
+  return (!isFullyClosed(stateObj) && !isClosing(stateObj)) || assumedState;
 }
 
 export function canStop(stateObj: CoverEntity): boolean {
@@ -85,7 +85,7 @@ export function canOpenTilt(stateObj: CoverEntity): boolean {
     return false;
   }
   const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || !isFullyOpenTilt(stateObj);
+  return !isFullyOpenTilt(stateObj) || assumedState;
 }
 
 export function canCloseTilt(stateObj: CoverEntity): boolean {
@@ -93,7 +93,7 @@ export function canCloseTilt(stateObj: CoverEntity): boolean {
     return false;
   }
   const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || !isFullyClosedTilt(stateObj);
+  return !isFullyClosedTilt(stateObj) || assumedState;
 }
 
 export function canStopTilt(stateObj: CoverEntity): boolean {

src/data/entity_attributes.ts

@@ -75,9 +75,6 @@ export const DOMAIN_ATTRIBUTES_UNITS = {
   vacuum: {
     battery_level: "%",
   },
-  valve: {
-    current_position: "%",
-  },
   sensor: {
     battery_level: "%",
   },

src/data/integration.ts

@@ -16,9 +16,7 @@ export type IntegrationType =
   | "helper"
   | "hub"
   | "service"
-  | "hardware"
+  | "hardware";
-  | "entity"
-  | "system";
 
 export interface IntegrationManifest {
   is_built_in: boolean;

src/data/media-player.ts

@@ -90,7 +90,7 @@ export const enum MediaPlayerEntityFeature {
   TURN_ON = 128,
   TURN_OFF = 256,
   PLAY_MEDIA = 512,
-  VOLUME_STEP = 1024,
+  VOLUME_BUTTONS = 1024,
   SELECT_SOURCE = 2048,
   STOP = 4096,
   CLEAR_PLAYLIST = 8192,

src/data/script.ts

@@ -52,7 +52,6 @@ export const serviceActionStruct: Describe<ServiceAction> = assign(
     target: optional(targetStruct),
     data: optional(object()),
     response_variable: optional(string()),
-    metadata: optional(object()),
   })
 );
 
@@ -134,7 +133,6 @@ export interface ServiceAction extends BaseAction {
   target?: HassServiceTarget;
   data?: Record<string, unknown>;
   response_variable?: string;
-  metadata?: Record<string, unknown>;
 }
 
 export interface DeviceAction extends BaseAction {

src/data/script_i18n.ts

@@ -168,18 +168,6 @@ const tryDescribeAction = <T extends ActionType>(
       const service =
         hass.localize(`component.${domain}.services.${serviceName}.name`) ||
         hass.services[domain][serviceName]?.name;
-
-      if (config.metadata) {
-        return hass.localize(
-          `${actionTranslationBaseKey}.service.description.service_name`,
-          {
-            domain: domainToName(hass.localize, domain),
-            name: service || config.service,
-            targets: formatListWithAnds(hass.locale, targets),
-          }
-        );
-      }
-
       return hass.localize(
         `${actionTranslationBaseKey}.service.description.service_based_on_name`,
         {
@@ -416,9 +404,7 @@ const tryDescribeAction = <T extends ActionType>(
   if (actionType === "device_action") {
     const config = action as DeviceAction;
     if (!config.device_id) {
-      return hass.localize(
+      return "Device action";
-        `${actionTranslationBaseKey}.device_id.description.no_device`
-      );
     }
     const localized = localizeDeviceAutomationAction(
       hass,

src/data/todo.ts

@@ -18,8 +18,6 @@ export interface TodoItem {
   uid: string;
   summary: string;
   status: TodoItemStatus;
-  description?: string | null;
-  due?: string | null;
 }
 
 export const enum TodoListEntityFeature {
@@ -27,9 +25,6 @@ export const enum TodoListEntityFeature {
   DELETE_TODO_ITEM = 2,
   UPDATE_TODO_ITEM = 4,
   MOVE_TODO_ITEM = 8,
-  SET_DUE_DATE_ON_ITEM = 16,
-  SET_DUE_DATETIME_ON_ITEM = 32,
-  SET_DESCRIPTION_ON_ITEM = 64,
 }
 
 export const getTodoLists = (hass: HomeAssistant): TodoList[] =>
@@ -79,30 +74,20 @@ export const updateItem = (
   hass.callService(
     "todo",
     "update_item",
-    {
+    { item: item.uid, rename: item.summary, status: item.status },
-      item: item.uid,
-      rename: item.summary,
-      status: item.status,
-      description: item.description || null,
-      due_datetime: item.due?.includes("T") ? item.due : undefined,
-      due_date: item.due?.includes("T") ? undefined : item.due || null,
-    },
     { entity_id }
   );
 
 export const createItem = (
   hass: HomeAssistant,
   entity_id: string,
-  item: Omit<TodoItem, "uid" | "status">
+  summary: string
 ): Promise<ServiceCallResponse> =>
   hass.callService(
     "todo",
     "add_item",
     {
-      item: item.summary,
+      item: summary,
-      description: item.description || undefined,
-      due_datetime: item.due?.includes("T") ? item.due : undefined,
-      due_date: item.due?.includes("T") ? undefined : item.due,
     },
     { entity_id }
   );

src/data/trigger.ts

@@ -4,16 +4,13 @@ import {
   mdiClockOutline,
   mdiCodeBraces,
   mdiDevices,
-  mdiDotsHorizontal,
   mdiGestureDoubleTap,
-  mdiMapClock,
   mdiMapMarker,
   mdiMapMarkerRadius,
   mdiMessageAlert,
   mdiMicrophoneMessage,
   mdiNfcVariant,
   mdiNumeric,
-  mdiShape,
   mdiStateMachine,
   mdiSwapHorizontal,
   mdiWeatherSunny,
@@ -21,9 +18,8 @@ import {
 } from "@mdi/js";
 
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
-import { AutomationElementGroup } from "./automation";
 
-export const TRIGGER_ICONS = {
+export const TRIGGER_TYPES = {
   calendar: mdiCalendar,
   device: mdiDevices,
   event: mdiGestureDoubleTap,
@@ -42,26 +38,3 @@ export const TRIGGER_ICONS = {
   persistent_notification: mdiMessageAlert,
   zone: mdiMapMarkerRadius,
 };
-
-export const TRIGGER_GROUPS: AutomationElementGroup = {
-  device: {},
-  entity: { icon: mdiShape, members: { state: {}, numeric_state: {} } },
-  time_location: {
-    icon: mdiMapClock,
-    members: { calendar: {}, sun: {}, time: {}, time_pattern: {}, zone: {} },
-  },
-  other: {
-    icon: mdiDotsHorizontal,
-    members: {
-      event: {},
-      geo_location: {},
-      homeassistant: {},
-      mqtt: {},
-      conversation: {},
-      tag: {},
-      template: {},
-      webhook: {},
-      persistent_notification: {},
-    },
-  },
-} as const;

src/data/update.ts

@@ -13,13 +13,11 @@ import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../types";
 import { showToast } from "../util/toast";
 
-export enum UpdateEntityFeature {
+export const UPDATE_SUPPORT_INSTALL = 1;
-  INSTALL = 1,
+export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
-  SPECIFIC_VERSION = 2,
+export const UPDATE_SUPPORT_PROGRESS = 4;
-  PROGRESS = 4,
+export const UPDATE_SUPPORT_BACKUP = 8;
-  BACKUP = 8,
+export const UPDATE_SUPPORT_RELEASE_NOTES = 16;
-  RELEASE_NOTES = 16,
-}
 
 interface UpdateEntityAttributes extends HassEntityAttributeBase {
   auto_update: boolean | null;
@@ -37,7 +35,7 @@ export interface UpdateEntity extends HassEntityBase {
 }
 
 export const updateUsesProgress = (entity: UpdateEntity): boolean =>
-  supportsFeature(entity, UpdateEntityFeature.PROGRESS) &&
+  supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
   typeof entity.attributes.in_progress === "number";
 
 export const updateCanInstall = (
@@ -46,7 +44,7 @@ export const updateCanInstall = (
 ): boolean =>
   (entity.state === BINARY_STATE_ON ||
     (showSkipped && Boolean(entity.attributes.skipped_version))) &&
-  supportsFeature(entity, UpdateEntityFeature.INSTALL);
+  supportsFeature(entity, UPDATE_SUPPORT_INSTALL);
 
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   updateUsesProgress(entity) || !!entity.attributes.in_progress;
@@ -178,7 +176,7 @@ export const computeUpdateStateDisplay = (
   if (state === "on") {
     if (updateIsInstalling(stateObj)) {
       const supportsProgress =
-        supportsFeature(stateObj, UpdateEntityFeature.PROGRESS) &&
+        supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS) &&
         typeof attributes.in_progress === "number";
       if (supportsProgress) {
         return hass.localize("ui.card.update.installing_with_progress", {

src/data/valve.ts

@@ -1,85 +0,0 @@
-import {
-  HassEntityAttributeBase,
-  HassEntityBase,
-} from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "./entity";
-import { stateActive } from "../common/entity/state_active";
-import { HomeAssistant } from "../types";
-
-export const enum ValveEntityFeature {
-  OPEN = 1,
-  CLOSE = 2,
-  SET_POSITION = 4,
-  STOP = 8,
-}
-
-export function isFullyOpen(stateObj: ValveEntity) {
-  if (stateObj.attributes.current_position !== undefined) {
-    return stateObj.attributes.current_position === 100;
-  }
-  return stateObj.state === "open";
-}
-
-export function isFullyClosed(stateObj: ValveEntity) {
-  if (stateObj.attributes.current_position !== undefined) {
-    return stateObj.attributes.current_position === 0;
-  }
-  return stateObj.state === "closed";
-}
-
-export function isOpening(stateObj: ValveEntity) {
-  return stateObj.state === "opening";
-}
-
-export function isClosing(stateObj: ValveEntity) {
-  return stateObj.state === "closing";
-}
-
-export function canOpen(stateObj: ValveEntity) {
-  if (stateObj.state === UNAVAILABLE) {
-    return false;
-  }
-  const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || (!isFullyOpen(stateObj) && !isOpening(stateObj));
-}
-
-export function canClose(stateObj: ValveEntity): boolean {
-  if (stateObj.state === UNAVAILABLE) {
-    return false;
-  }
-  const assumedState = stateObj.attributes.assumed_state === true;
-  return assumedState || (!isFullyClosed(stateObj) && !isClosing(stateObj));
-}
-
-export function canStop(stateObj: ValveEntity): boolean {
-  return stateObj.state !== UNAVAILABLE;
-}
-
-interface ValveEntityAttributes extends HassEntityAttributeBase {
-  current_position?: number;
-  position?: number;
-}
-
-export interface ValveEntity extends HassEntityBase {
-  attributes: ValveEntityAttributes;
-}
-
-export function computeValvePositionStateDisplay(
-  stateObj: ValveEntity,
-  hass: HomeAssistant,
-  position?: number
-) {
-  const statePosition = stateActive(stateObj)
-    ? stateObj.attributes.current_position
-    : undefined;
-
-  const currentPosition = position ?? statePosition;
-
-  return currentPosition && currentPosition !== 100
-    ? hass.formatEntityAttributeValue(
-        stateObj,
-        "current_position",
-        Math.round(currentPosition)
-      )
-    : "";
-}

src/data/zha.ts

@@ -383,13 +383,11 @@ export const removeMembersFromGroup = (
 export const addGroup = (
   hass: HomeAssistant,
   groupName: string,
-  groupId?: number,
   membersToAdd?: ZHAGroupMember[]
 ): Promise<ZHAGroup> =>
   hass.callWS({
     type: "zha/group/add",
     group_name: groupName,
-    group_id: groupId,
     members: membersToAdd,
   });
 

src/dialogs/area-filter/area-filter-dialog.ts

@@ -207,8 +207,7 @@ export class DialogAreaFilter
           color: var(--disabled-text-color);
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
         }
         .actions {
           display: flex;

src/dialogs/more-info/const.ts

@@ -27,7 +27,6 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "lock",
   "siren",
   "switch",
-  "valve",
   "water_heater",
 ];
 /** Domains with separate more info dialog. */
@@ -62,7 +61,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "timer",
   "update",
   "vacuum",
-  "valve",
   "water_heater",
   "weather",
 ];

src/dialogs/more-info/controls/more-info-cover.ts

@@ -42,9 +42,7 @@ class MoreInfoCover extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("stateObj") && this.stateObj) {
-      const entityId = this.stateObj.entity_id;
+      if (!this._mode) {
-      const oldEntityId = changedProps.get("stateObj")?.entity_id;
-      if (!this._mode || entityId !== oldEntityId) {
         this._mode =
           supportsFeature(this.stateObj, CoverEntityFeature.SET_POSITION) ||
           supportsFeature(this.stateObj, CoverEntityFeature.SET_TILT_POSITION)

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -81,7 +81,7 @@ class MoreInfoMediaPlayer extends LitElement {
           : ""}
       </div>
       ${(supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ||
-        supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_STEP)) &&
+        supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_BUTTONS)) &&
       stateActive(stateObj)
         ? html`
             <div class="volume">
@@ -104,9 +104,8 @@ class MoreInfoMediaPlayer extends LitElement {
                 : ""}
               ${supportsFeature(
                 stateObj,
-                MediaPlayerEntityFeature.VOLUME_SET
+                MediaPlayerEntityFeature.VOLUME_BUTTONS
-              ) ||
+              )
-              supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_STEP)
                 ? html`
                     <ha-icon-button
                       action="volume_down"

src/dialogs/more-info/controls/more-info-update.ts

@@ -13,9 +13,13 @@ import "../../../components/ha-markdown";
 import { isUnavailableState } from "../../../data/entity";
 import {
   UpdateEntity,
-  UpdateEntityFeature,
   updateIsInstalling,
   updateReleaseNotes,
+  UPDATE_SUPPORT_BACKUP,
+  UPDATE_SUPPORT_INSTALL,
+  UPDATE_SUPPORT_PROGRESS,
+  UPDATE_SUPPORT_RELEASE_NOTES,
+  UPDATE_SUPPORT_SPECIFIC_VERSION,
 } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
 
@@ -45,7 +49,7 @@ class MoreInfoUpdate extends LitElement {
 
     return html`
       ${this.stateObj.attributes.in_progress
-        ? supportsFeature(this.stateObj, UpdateEntityFeature.PROGRESS) &&
+        ? supportsFeature(this.stateObj, UPDATE_SUPPORT_PROGRESS) &&
           typeof this.stateObj.attributes.in_progress === "number"
           ? html`<mwc-linear-progress
               .progress=${this.stateObj.attributes.in_progress / 100}
@@ -97,7 +101,7 @@ class MoreInfoUpdate extends LitElement {
             </div>
           </div>`
         : ""}
-      ${supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES) &&
+      ${supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES) &&
       !this._error
         ? !this._releaseNotes
           ? html`<div class="flex center">
@@ -113,7 +117,7 @@ class MoreInfoUpdate extends LitElement {
                 .content=${this.stateObj.attributes.release_summary}
               ></ha-markdown>`
           : ""}
-      ${supportsFeature(this.stateObj, UpdateEntityFeature.BACKUP)
+      ${supportsFeature(this.stateObj, UPDATE_SUPPORT_BACKUP)
         ? html`<hr />
             <ha-formfield
               .label=${this.hass.localize(
@@ -151,7 +155,7 @@ class MoreInfoUpdate extends LitElement {
                   )}
                 </mwc-button>
               `}
-        ${supportsFeature(this.stateObj, UpdateEntityFeature.INSTALL)
+        ${supportsFeature(this.stateObj, UPDATE_SUPPORT_INSTALL)
           ? html`
               <mwc-button
                 @click=${this._handleInstall}
@@ -170,7 +174,7 @@ class MoreInfoUpdate extends LitElement {
   }
 
   protected firstUpdated(): void {
-    if (supportsFeature(this.stateObj!, UpdateEntityFeature.RELEASE_NOTES)) {
+    if (supportsFeature(this.stateObj!, UPDATE_SUPPORT_RELEASE_NOTES)) {
       updateReleaseNotes(this.hass, this.stateObj!.entity_id)
         .then((result) => {
           this._releaseNotes = result;
@@ -182,7 +186,7 @@ class MoreInfoUpdate extends LitElement {
   }
 
   get _shouldCreateBackup(): boolean | null {
-    if (!supportsFeature(this.stateObj!, UpdateEntityFeature.BACKUP)) {
+    if (!supportsFeature(this.stateObj!, UPDATE_SUPPORT_BACKUP)) {
       return null;
     }
     const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
@@ -202,7 +206,7 @@ class MoreInfoUpdate extends LitElement {
     }
 
     if (
-      supportsFeature(this.stateObj!, UpdateEntityFeature.SPECIFIC_VERSION) &&
+      supportsFeature(this.stateObj!, UPDATE_SUPPORT_SPECIFIC_VERSION) &&
       this.stateObj!.attributes.latest_version
     ) {
       installData.version = this.stateObj!.attributes.latest_version;

src/dialogs/more-info/controls/more-info-valve.ts

@@ -1,192 +0,0 @@
-import { mdiMenu, mdiSwapVertical } from "@mdi/js";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  css,
-  html,
-  nothing,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-attributes";
-import "../../../components/ha-icon-button-group";
-import "../../../components/ha-icon-button-toggle";
-import {
-  ValveEntity,
-  ValveEntityFeature,
-  computeValvePositionStateDisplay,
-} from "../../../data/valve";
-import "../../../state-control/valve/ha-state-control-valve-buttons";
-import "../../../state-control/valve/ha-state-control-valve-position";
-import "../../../state-control/valve/ha-state-control-valve-toggle";
-import type { HomeAssistant } from "../../../types";
-import "../components/ha-more-info-state-header";
-import { moreInfoControlStyle } from "../components/more-info-control-style";
-
-type Mode = "position" | "button";
-
-@customElement("more-info-valve")
-class MoreInfoValve extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public stateObj?: ValveEntity;
-
-  @state() private _mode?: Mode;
-
-  private _setMode(ev) {
-    this._mode = ev.currentTarget.mode;
-  }
-
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("stateObj") && this.stateObj) {
-      const entityId = this.stateObj.entity_id;
-      const oldEntityId = changedProps.get("stateObj")?.entity_id;
-      if (!this._mode || entityId !== oldEntityId) {
-        this._mode = supportsFeature(
-          this.stateObj,
-          ValveEntityFeature.SET_POSITION
-        )
-          ? "position"
-          : "button";
-      }
-    }
-  }
-
-  private get _stateOverride() {
-    const stateDisplay = this.hass.formatEntityState(this.stateObj!);
-
-    const positionStateDisplay = computeValvePositionStateDisplay(
-      this.stateObj!,
-      this.hass
-    );
-
-    if (positionStateDisplay) {
-      return `${stateDisplay} ⸱ ${positionStateDisplay}`;
-    }
-    return stateDisplay;
-  }
-
-  protected render() {
-    if (!this.hass || !this.stateObj) {
-      return nothing;
-    }
-
-    const supportsPosition = supportsFeature(
-      this.stateObj,
-      ValveEntityFeature.SET_POSITION
-    );
-
-    const supportsOpenClose =
-      supportsFeature(this.stateObj, ValveEntityFeature.OPEN) ||
-      supportsFeature(this.stateObj, ValveEntityFeature.CLOSE) ||
-      supportsFeature(this.stateObj, ValveEntityFeature.STOP);
-
-    const supportsOpenCloseWithoutStop =
-      supportsFeature(this.stateObj, ValveEntityFeature.OPEN) &&
-      supportsFeature(this.stateObj, ValveEntityFeature.CLOSE) &&
-      !supportsFeature(this.stateObj, ValveEntityFeature.STOP);
-
-    return html`
-      <ha-more-info-state-header
-        .hass=${this.hass}
-        .stateObj=${this.stateObj}
-        .stateOverride=${this._stateOverride}
-      ></ha-more-info-state-header>
-      <div class="controls">
-        <div class="main-control">
-          ${
-            this._mode === "position"
-              ? html`
-                  ${supportsPosition
-                    ? html`
-                        <ha-state-control-valve-position
-                          .stateObj=${this.stateObj}
-                          .hass=${this.hass}
-                        ></ha-state-control-valve-position>
-                      `
-                    : nothing}
-                `
-              : nothing
-          }
-          ${
-            this._mode === "button"
-              ? html`
-                  ${supportsOpenCloseWithoutStop
-                    ? html`
-                        <ha-state-control-valve-toggle
-                          .stateObj=${this.stateObj}
-                          .hass=${this.hass}
-                        ></ha-state-control-valve-toggle>
-                      `
-                    : supportsOpenClose
-                      ? html`
-                          <ha-state-control-valve-buttons
-                            .stateObj=${this.stateObj}
-                            .hass=${this.hass}
-                          ></ha-state-control-valve-buttons>
-                        `
-                      : nothing}
-                `
-              : nothing
-          }
-            </div>
-          ${
-            supportsPosition && supportsOpenClose
-              ? html`
-                  <ha-icon-button-group>
-                    <ha-icon-button-toggle
-                      .label=${this.hass.localize(
-                        `ui.dialogs.more_info_control.valve.switch_mode.position`
-                      )}
-                      .selected=${this._mode === "position"}
-                      .path=${mdiMenu}
-                      .mode=${"position"}
-                      @click=${this._setMode}
-                    ></ha-icon-button-toggle>
-                    <ha-icon-button-toggle
-                      .label=${this.hass.localize(
-                        `ui.dialogs.more_info_control.valve.switch_mode.button`
-                      )}
-                      .selected=${this._mode === "button"}
-                      .path=${mdiSwapVertical}
-                      .mode=${"button"}
-                      @click=${this._setMode}
-                    ></ha-icon-button-toggle>
-                  </ha-icon-button-group>
-                `
-              : nothing
-          }
-        </div>
-      </div>
-      <ha-attributes
-        .hass=${this.hass}
-        .stateObj=${this.stateObj}
-        extra-filters="current_position,current_tilt_position"
-      ></ha-attributes>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      moreInfoControlStyle,
-      css`
-        .main-control {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        .main-control > * {
-          margin: 0 8px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "more-info-valve": MoreInfoValve;
-  }
-}

src/dialogs/more-info/state_more_info_control.ts

@@ -35,7 +35,6 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   timer: () => import("./controls/more-info-timer"),
   update: () => import("./controls/more-info-update"),
   vacuum: () => import("./controls/more-info-vacuum"),
-  valve: () => import("./controls/more-info-valve"),
   water_heater: () => import("./controls/more-info-water_heater"),
   weather: () => import("./controls/more-info-weather"),
 };

src/dialogs/update_backup/dialog-update-backup.ts

@@ -1,92 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import { createCloseHeading } from "../../components/ha-dialog";
-import { HomeAssistant } from "../../types";
-import { UpdateBackupDialogParams } from "./show-update-backup-dialog";
-
-@customElement("dialog-update-backup")
-class DialogBox extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: UpdateBackupDialogParams;
-
-  public async showDialog(params: UpdateBackupDialogParams): Promise<void> {
-    this._params = params;
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        @closed=${this._cancel}
-        defaultAction="ignore"
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.dialogs.update_backup.title")
-        )}
-      >
-        <p>${this.hass.localize("ui.dialogs.update_backup.text")}</p>
-        <ha-button @click=${this._no} slot="secondaryAction">
-          ${this.hass!.localize("ui.common.no")}
-        </ha-button>
-        <ha-button @click=${this._yes} slot="primaryAction">
-          ${this.hass.localize("ui.dialogs.update_backup.create")}
-        </ha-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _no(): void {
-    if (this._params!.submit) {
-      this._params!.submit(false);
-    }
-    this.closeDialog();
-  }
-
-  private _yes(): void {
-    if (this._params!.submit) {
-      this._params!.submit(true);
-    }
-    this.closeDialog();
-  }
-
-  private _cancel(): void {
-    this._params?.cancel?.();
-    this.closeDialog();
-  }
-
-  public closeDialog(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      p {
-        margin: 0;
-        color: var(--primary-text-color);
-      }
-      ha-dialog {
-        /* Place above other dialogs */
-        --dialog-z-index: 104;
-      }
-      @media all and (min-width: 600px) {
-        ha-dialog {
-          --mdc-dialog-min-width: 400px;
-        }
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-update-backup": DialogBox;
-  }
-}

src/dialogs/update_backup/show-update-backup-dialog.ts

@@ -1,35 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface UpdateBackupDialogParams {
-  submit?: (response: boolean) => void;
-  cancel?: () => void;
-}
-
-export const showUpdateBackupDialogParams = (
-  element: HTMLElement,
-  dialogParams: UpdateBackupDialogParams
-) =>
-  new Promise<boolean | null>((resolve) => {
-    const origCancel = dialogParams.cancel;
-    const origSubmit = dialogParams.submit;
-
-    fireEvent(element, "show-dialog", {
-      dialogTag: "dialog-update-backup",
-      dialogImport: () => import("./dialog-update-backup"),
-      dialogParams: {
-        ...dialogParams,
-        cancel: () => {
-          resolve(null);
-          if (origCancel) {
-            origCancel();
-          }
-        },
-        submit: (response: boolean) => {
-          resolve(response);
-          if (origSubmit) {
-            origSubmit(response);
-          }
-        },
-      },
-    });
-  });

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -668,12 +668,7 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-button-menu {
           --mdc-theme-on-primary: var(--text-primary-color);
           --mdc-theme-primary: var(--primary-color);
-          margin-top: -8px;
+          margin: -8px 0 0 -8px;
-          margin-bottom: 0;
-          margin-right: 0;
-          margin-inline-end: 0;
-          margin-left: -8px;
-          margin-inline-start: -8px;
         }
         ha-button-menu ha-button {
           --mdc-theme-primary: var(--secondary-text-color);
@@ -694,7 +689,7 @@ export class HaVoiceCommandDialog extends LitElement {
           height: 28px;
           margin-left: 4px;
           margin-inline-start: 4px;
-          margin-inline-end: initial;
+          margin-inline-end: 4px;
           direction: var(--direction);
         }
         ha-list-item {
@@ -703,7 +698,7 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-list-item ha-svg-icon {
           margin-left: 4px;
           margin-inline-start: 4px;
-          margin-inline-end: initial;
+          margin-inline-end: 4px;
           direction: var(--direction);
           display: block;
         }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -124,12 +124,6 @@ export class HaTabsSubpageDataTable extends LitElement {
    */
   @property({ type: String }) public noDataText?: string;
 
-  /**
-   * Hides the data table and show an empty message.
-   * @type {Boolean}
-   */
-  @property({ type: Boolean }) public empty = false;
-
   @property() public route!: Route;
 
   /**
@@ -204,61 +198,56 @@ export class HaTabsSubpageDataTable extends LitElement {
         .mainPage=${this.mainPage}
         .supervisor=${this.supervisor}
       >
-        ${this.empty
+        ${!this.hideFilterMenu
-          ? html`<div class="center">
+          ? html`
-              <slot name="empty">${this.noDataText}</slot>
+              <div slot="toolbar-icon">
-            </div>`
+                ${this.narrow
-          : html`${!this.hideFilterMenu
-                ? html`
-                    <div slot="toolbar-icon">
-                      ${this.narrow
-                        ? html`
-                            <div class="filter-menu">
-                              ${this.numHidden || this.activeFilters
-                                ? html`<span class="badge"
-                                    >${this.numHidden || "!"}</span
-                                  >`
-                                : ""}
-                              <slot name="filter-menu"></slot>
-                            </div>
-                          `
-                        : ""}<slot name="toolbar-icon"></slot>
-                    </div>
-                  `
-                : ""}
-              ${this.narrow
-                ? html`
-                    <div slot="header">
-                      <slot name="header">
-                        <div class="search-toolbar">${headerToolbar}</div>
-                      </slot>
-                    </div>
-                  `
-                : ""}
-              <ha-data-table
-                .hass=${this.hass}
-                .columns=${this.columns}
-                .data=${this.data}
-                .noDataText=${this.noDataText}
-                .filter=${this.filter}
-                .selectable=${this.selectable}
-                .hasFab=${this.hasFab}
-                .id=${this.id}
-                .dir=${computeRTLDirection(this.hass)}
-                .clickable=${this.clickable}
-                .appendRow=${this.appendRow}
-              >
-                ${!this.narrow
                   ? html`
-                      <div slot="header">
+                      <div class="filter-menu">
-                        <slot name="header">
+                        ${this.numHidden || this.activeFilters
-                          <div class="table-header">${headerToolbar}</div>
+                          ? html`<span class="badge"
-                        </slot>
+                              >${this.numHidden || "!"}</span
+                            >`
+                          : ""}
+                        <slot name="filter-menu"></slot>
                       </div>
                     `
-                  : html` <div slot="header"></div> `}
+                  : ""}<slot name="toolbar-icon"></slot>
-              </ha-data-table>`}
+              </div>
-
+            `
+          : ""}
+        ${this.narrow
+          ? html`
+              <div slot="header">
+                <slot name="header">
+                  <div class="search-toolbar">${headerToolbar}</div>
+                </slot>
+              </div>
+            `
+          : ""}
+        <ha-data-table
+          .hass=${this.hass}
+          .columns=${this.columns}
+          .data=${this.data}
+          .filter=${this.filter}
+          .selectable=${this.selectable}
+          .hasFab=${this.hasFab}
+          .id=${this.id}
+          .noDataText=${this.noDataText}
+          .dir=${computeRTLDirection(this.hass)}
+          .clickable=${this.clickable}
+          .appendRow=${this.appendRow}
+        >
+          ${!this.narrow
+            ? html`
+                <div slot="header">
+                  <slot name="header">
+                    <div class="table-header">${headerToolbar}</div>
+                  </slot>
+                </div>
+              `
+            : html` <div slot="header"></div> `}
+        </ha-data-table>
         <div slot="fab"><slot name="fab"></slot></div>
       </hass-tabs-subpage>
     `;
@@ -385,16 +374,6 @@ export class HaTabsSubpageDataTable extends LitElement {
       .filter-menu {
         position: relative;
       }
-      .center {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        box-sizing: border-box;
-        height: 100%;
-        width: 100%;
-        padding: 16px;
-      }
     `;
   }
 }

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -1,8 +1,8 @@
 import "@material/mwc-button";
-import { mdiCalendarClock } from "@mdi/js";
+import { mdiCalendarClock, mdiClose } from "@mdi/js";
 import { toDate } from "date-fns-tz";
 import { addDays, isSameDay } from "date-fns/esm";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatDateTime } from "../../common/datetime/format_date_time";
@@ -11,7 +11,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/state-info";
 import "../../components/ha-date-input";
-import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-time-input";
 import {
   CalendarEventMutableParams,
@@ -66,7 +65,15 @@ class DialogCalendarEventDetail extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${createCloseHeading(this.hass, this._data!.summary)}
+        .heading=${html`
+          <div class="header_title">${this._data!.summary}</div>
+          <ha-icon-button
+            .label=${this.hass.localize("ui.dialogs.generic.close")}
+            .path=${mdiClose}
+            dialogAction="close"
+            class="header_button"
+          ></ha-icon-button>
+        `}
       >
         <div class="content">
           ${this._error

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiClose } from "@mdi/js";
 import { formatInTimeZone, toDate } from "date-fns-tz";
 import {
   addDays,
@@ -8,7 +9,7 @@ import {
   startOfHour,
 } from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -17,24 +18,23 @@ import { supportsFeature } from "../../common/entity/supports-feature";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-input";
-import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import "../../components/ha-time-input";
 import {
   CalendarEntityFeature,
   CalendarEventMutableParams,
-  RecurrenceRange,
   createCalendarEvent,
   deleteCalendarEvent,
+  RecurrenceRange,
   updateCalendarEvent,
 } from "../../data/calendar";
-import { TimeZone } from "../../data/translation";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
+import { TimeZone } from "../../data/translation";
 
 const CALENDAR_DOMAINS = ["calendar"];
 
@@ -142,12 +142,19 @@ class DialogCalendarEventEditor extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${createCloseHeading(
+        .heading=${html`
-          this.hass,
+          <div class="header_title">
-          this.hass.localize(
+            ${isCreate
-            `ui.components.calendar.event.${isCreate ? "add" : "edit"}`
+              ? this.hass.localize("ui.components.calendar.event.add")
-          )
+              : this._summary}
-        )}
+          </div>
+          <ha-icon-button
+            .label=${this.hass.localize("ui.dialogs.generic.close")}
+            .path=${mdiClose}
+            dialogAction="close"
+            class="header_button"
+          ></ha-icon-button>
+        `}
       >
         <div class="content">
           ${this._error
@@ -577,11 +584,9 @@ class DialogCalendarEventEditor extends LitElement {
     return [
       haStyleDialog,
       css`
-        @media all and (min-width: 450px and min-height: 500px) {
+        ha-dialog {
-          ha-dialog {
+          --mdc-dialog-min-width: min(600px, 95vw);
-            --mdc-dialog-min-width: min(600px, 95vw);
+          --mdc-dialog-max-width: min(600px, 95vw);
-            --mdc-dialog-max-width: min(600px, 95vw);
-          }
         }
         state-info {
           line-height: 40px;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -29,8 +29,6 @@ import { classMap } from "lit/directives/class-map";
 import { storage } from "../../../../common/decorators/storage";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIconWithoutDefault } from "../../../../common/entity/domain_icon";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-alert";
@@ -39,7 +37,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
+import { ACTION_TYPES, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
 import { AutomationClipboard } from "../../../../data/automation";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -84,9 +82,9 @@ export const getType = (action: Action | undefined) => {
   if (["and", "or", "not"].some((key) => key in action)) {
     return "condition" as const;
   }
-  return Object.keys(ACTION_ICONS).find(
+  return Object.keys(ACTION_TYPES).find(
     (option) => option in action
-  ) as keyof typeof ACTION_ICONS;
+  ) as keyof typeof ACTION_TYPES;
 };
 
 export interface ActionElement extends LitElement {
@@ -192,13 +190,7 @@ export default class HaAutomationActionRow extends LitElement {
           <h3 slot="header">
             <ha-svg-icon
               class="action-icon"
-              .path=${type === "service" &&
+              .path=${ACTION_TYPES[type!]}
-              "service" in this.action &&
-              this.action.service
-                ? domainIconWithoutDefault(
-                    computeDomain(this.action.service as string)
-                  ) || ACTION_ICONS[type!]
-                : ACTION_ICONS[type!]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(
               describeAction(this.hass, this._entityReg, this.action)

src/panels/config/automation/action/ha-automation-action.ts

@@ -1,26 +1,57 @@
 import "@material/mwc-button";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiContentPaste,
+  mdiDrag,
+  mdiPlus,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button";
+import "../../../../components/ha-button-menu";
+import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
-import { getService, isService } from "../../../../data/action";
+import { ACTION_TYPES } from "../../../../data/action";
-import type { AutomationClipboard } from "../../../../data/automation";
+import { AutomationClipboard } from "../../../../data/automation";
 import { Action } from "../../../../data/script";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import type { SortableInstance } from "../../../../resources/sortable";
-import { HomeAssistant } from "../../../../types";
+import { Entries, HomeAssistant } from "../../../../types";
-import {
-  PASTE_VALUE,
-  showAddAutomationElementDialog,
-} from "../show-add-automation-element-dialog";
 import type HaAutomationActionRow from "./ha-automation-action-row";
 import { getType } from "./ha-automation-action-row";
+import "./types/ha-automation-action-activate_scene";
+import "./types/ha-automation-action-choose";
+import "./types/ha-automation-action-condition";
+import "./types/ha-automation-action-delay";
+import "./types/ha-automation-action-device_id";
+import "./types/ha-automation-action-event";
+import "./types/ha-automation-action-if";
+import "./types/ha-automation-action-parallel";
+import "./types/ha-automation-action-play_media";
+import "./types/ha-automation-action-repeat";
+import "./types/ha-automation-action-service";
+import "./types/ha-automation-action-stop";
+import "./types/ha-automation-action-wait_for_trigger";
+import "./types/ha-automation-action-wait_template";
+
+const PASTE_VALUE = "__paste__";
 
 @customElement("ha-automation-action")
 export default class HaAutomationAction extends LitElement {
@@ -119,27 +150,42 @@ export default class HaAutomationAction extends LitElement {
           `
         )}
       </div>
-      <div class="buttons">
+      <ha-button-menu
+        @action=${this._addAction}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
+          slot="trigger"
           outlined
           .disabled=${this.disabled}
           .label=${this.hass.localize(
             "ui.panel.config.automation.editor.actions.add"
           )}
-          @click=${this._addActionDialog}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </ha-button>
-        <ha-button
+        ${this._clipboard?.action
-          .disabled=${this.disabled}
+          ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
-          .label=${this.hass.localize(
+              ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.add_building_block"
+                "ui.panel.config.automation.editor.actions.paste"
-          )}
+              )}
-          @click=${this._addActionBuildingBlockDialog}
+              (${this.hass.localize(
-        >
+                `ui.panel.config.automation.editor.actions.type.${
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+                  getType(this._clipboard.action) || "unknown"
-        </ha-button>
+                }.label`
-      </div>
+              )})
+              <ha-svg-icon slot="graphic" .path=${mdiContentPaste}></ha-svg-icon
+            ></mwc-list-item>`
+          : nothing}
+        ${this._processedTypes(this.hass.localize).map(
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
+          `
+        )}
+      </ha-button-menu>
     `;
   }
 
@@ -167,44 +213,6 @@ export default class HaAutomationAction extends LitElement {
     }
   }
 
-  private _addActionDialog() {
-    showAddAutomationElementDialog(this, {
-      type: "action",
-      add: this._addAction,
-      clipboardItem: getType(this._clipboard?.action),
-    });
-  }
-
-  private _addActionBuildingBlockDialog() {
-    showAddAutomationElementDialog(this, {
-      type: "action",
-      add: this._addAction,
-      clipboardItem: getType(this._clipboard?.action),
-      group: "building_blocks",
-    });
-  }
-
-  private _addAction = (action: string) => {
-    let actions: Action[];
-    if (action === PASTE_VALUE) {
-      actions = this.actions.concat(deepClone(this._clipboard!.action));
-    } else if (isService(action)) {
-      actions = this.actions.concat({
-        service: getService(action),
-        metadata: {},
-      });
-    } else {
-      const elClass = customElements.get(
-        `ha-automation-action-${action}`
-      ) as CustomElementConstructor & { defaultConfig: Action };
-      actions = this.actions.concat(
-        elClass ? { ...elClass.defaultConfig } : { [action]: {} }
-      );
-    }
-    this._focusLastActionOnChange = true;
-    fireEvent(this, "value-changed", { value: actions });
-  };
-
   private async _enterReOrderMode(ev: CustomEvent) {
     if (this.nested) return;
     ev.stopPropagation();
@@ -250,6 +258,25 @@ export default class HaAutomationAction extends LitElement {
     return this._actionKeys.get(action)!;
   }
 
+  private _addAction(ev: CustomEvent<ActionDetail>) {
+    const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
+
+    let actions: Action[];
+    if (action === PASTE_VALUE) {
+      actions = this.actions.concat(deepClone(this._clipboard!.action));
+    } else {
+      const elClass = customElements.get(
+        `ha-automation-action-${action}`
+      ) as CustomElementConstructor & { defaultConfig: Action };
+
+      actions = this.actions.concat(
+        elClass ? { ...elClass.defaultConfig } : { [action]: {} }
+      );
+    }
+    this._focusLastActionOnChange = true;
+    fireEvent(this, "value-changed", { value: actions });
+  }
+
   private _moveUp(ev) {
     const index = (ev.target as any).index;
     const newIndex = index - 1;
@@ -301,6 +328,22 @@ export default class HaAutomationAction extends LitElement {
     });
   }
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string, string][] =>
+      (Object.entries(ACTION_TYPES) as Entries<typeof ACTION_TYPES>)
+        .map(
+          ([action, icon]) =>
+            [
+              action,
+              localize(
+                `ui.panel.config.automation.editor.actions.type.${action}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1], this.hass.locale.language))
+  );
+
   static get styles(): CSSResultGroup {
     return [
       sortableStyles,
@@ -320,19 +363,13 @@ export default class HaAutomationAction extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {
           pointer-events: none;
           height: 24px;
         }
-        .buttons {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-        }
       `,
     ];
   }

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -543,8 +543,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           padding: 0 16px 16px 16px;
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -7,7 +7,7 @@ import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-select";
 import type { HaSelect } from "../../../../../components/ha-select";
 import type { Condition } from "../../../../../data/automation";
-import { CONDITION_ICONS } from "../../../../../data/condition";
+import { CONDITION_TYPES } from "../../../../../data/condition";
 import { Entries, HomeAssistant } from "../../../../../types";
 import "../../condition/ha-automation-condition-editor";
 import type { ActionElement } from "../ha-automation-action-row";
@@ -55,7 +55,7 @@ export class HaConditionAction extends LitElement implements ActionElement {
 
   private _processedTypes = memoizeOne(
     (localize: LocalizeFunc): [string, string, string][] =>
-      (Object.entries(CONDITION_ICONS) as Entries<typeof CONDITION_ICONS>)
+      (Object.entries(CONDITION_TYPES) as Entries<typeof CONDITION_TYPES>)
         .map(
           ([condition, icon]) =>
             [

src/panels/config/automation/action/types/ha-automation-action-repeat.ts

@@ -9,7 +9,6 @@ import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
-import { isTemplate } from "../../../../../common/string/has-template";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -33,12 +32,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
   }
 
   private _schema = memoizeOne(
-    (
+    (localize: LocalizeFunc, type: string, reOrderMode: boolean) =>
-      localize: LocalizeFunc,
-      type: string,
-      reOrderMode: boolean,
-      template: boolean
-    ) =>
       [
         {
           name: "type",
@@ -59,9 +53,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
               {
                 name: "count",
                 required: true,
-                selector: template
+                selector: { number: { mode: "box", min: 1 } },
-                  ? ({ template: {} } as const)
-                  : ({ number: { mode: "box", min: 1 } } as const),
               },
             ] as const)
           : []),
@@ -97,13 +89,10 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     const schema = this._schema(
       this.hass.localize,
       type ?? "count",
-      this.reOrderMode,
+      this.reOrderMode
-      "count" in action && typeof action.count === "string"
-        ? isTemplate(action.count)
-        : false
     );
     const data = { ...action, type };
-    return html`<ha-form
+    return html` <ha-form
       .hass=${this.hass}
       .data=${data}
       .schema=${schema}

src/panels/config/automation/add-automation-element-dialog.ts

@@ -1,679 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
-import Fuse, { IFuseOptions } from "fuse.js";
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  css,
-  html,
-  nothing,
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { repeat } from "lit/directives/repeat";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { domainIconWithoutDefault } from "../../../common/entity/domain_icon";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
-import { stringCompare } from "../../../common/string/compare";
-import { LocalizeFunc } from "../../../common/translations/localize";
-import "../../../components/ha-dialog";
-import type { HaDialog } from "../../../components/ha-dialog";
-import "../../../components/ha-dialog-header";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-icon-button-prev";
-import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item";
-import "../../../components/search-input";
-import {
-  ACTION_GROUPS,
-  ACTION_ICONS,
-  SERVICE_PREFIX,
-  getService,
-  isService,
-} from "../../../data/action";
-import { AutomationElementGroup } from "../../../data/automation";
-import { CONDITION_GROUPS, CONDITION_ICONS } from "../../../data/condition";
-import {
-  IntegrationManifest,
-  domainToName,
-  fetchIntegrationManifests,
-} from "../../../data/integration";
-import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
-import { HassDialog } from "../../../dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
-import { brandsUrl } from "../../../util/brands-url";
-import {
-  AddAutomationElementDialogParams,
-  PASTE_VALUE,
-} from "./show-add-automation-element-dialog";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { deepEqual } from "../../../common/util/deep-equal";
-
-const TYPES = {
-  trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
-  condition: {
-    groups: CONDITION_GROUPS,
-    icons: CONDITION_ICONS,
-  },
-  action: {
-    groups: ACTION_GROUPS,
-    icons: ACTION_ICONS,
-  },
-};
-
-interface ListItem {
-  key: string;
-  name: string;
-  description: string;
-  icon?: string;
-  image?: string;
-  group: boolean;
-}
-
-interface DomainManifestLookup {
-  [domain: string]: IntegrationManifest;
-}
-
-const ENTITY_DOMAINS_OTHER = new Set([
-  "date",
-  "datetime",
-  "device_tracker",
-  "text",
-  "time",
-  "tts",
-  "update",
-  "weather",
-  "image_processing",
-]);
-
-const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
-
-@customElement("add-automation-element-dialog")
-class DialogAddAutomationElement extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: AddAutomationElementDialogParams;
-
-  @state() private _group?: string;
-
-  @state() private _prev?: string;
-
-  @state() private _filter = "";
-
-  @state() private _manifests?: DomainManifestLookup;
-
-  @state() private _domains?: Set<string>;
-
-  @query("ha-dialog") private _dialog?: HaDialog;
-
-  private _fullScreen = false;
-
-  @state() private _width?: number;
-
-  @state() private _height?: number;
-
-  public showDialog(params): void {
-    this._params = params;
-    this._group = params.group;
-    if (this._params?.type === "action") {
-      this.hass.loadBackendTranslation("services");
-      this._fetchManifests();
-      this._calculateUsedDomains();
-    }
-    this._fullScreen = matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
-  }
-
-  public closeDialog(): void {
-    if (this._params) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._height = undefined;
-    this._width = undefined;
-    this._params = undefined;
-    this._group = undefined;
-    this._prev = undefined;
-    this._filter = "";
-    this._manifests = undefined;
-    this._domains = undefined;
-  }
-
-  private _convertToItem = (
-    key: string,
-    options,
-    type: AddAutomationElementDialogParams["type"],
-    localize: LocalizeFunc
-  ): ListItem => ({
-    group: Boolean(options.members),
-    key,
-    name: localize(
-      // @ts-ignore
-      `ui.panel.config.automation.editor.${type}s.${
-        options.members ? "groups" : "type"
-      }.${key}.label`
-    ),
-    description: localize(
-      // @ts-ignore
-      `ui.panel.config.automation.editor.${type}s.${
-        options.members ? "groups" : "type"
-      }.${key}.description${options.members ? "" : ".picker"}`
-    ),
-    icon: options.icon || TYPES[type].icons[key],
-  });
-
-  private _getFilteredItems = memoizeOne(
-    (
-      type: AddAutomationElementDialogParams["type"],
-      root: AddAutomationElementDialogParams["root"],
-      group: string | undefined,
-      filter: string,
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      manifests?: DomainManifestLookup
-    ): ListItem[] => {
-      const groups: AutomationElementGroup = group
-        ? isService(group)
-          ? {}
-          : TYPES[type].groups[group].members!
-        : TYPES[type].groups;
-
-      if (type === "condition" && group === "other" && !root) {
-        groups.trigger = {};
-      }
-
-      const flattenGroups = (grp: AutomationElementGroup) =>
-        Object.entries(grp).map(([key, options]) =>
-          options.members
-            ? flattenGroups(options.members)
-            : this._convertToItem(key, options, type, localize)
-        );
-
-      const items = flattenGroups(groups).flat();
-
-      if (type === "action") {
-        items.push(...this._services(localize, services, manifests, group));
-      }
-
-      const options: IFuseOptions<ListItem> = {
-        keys: ["key", "name", "description"],
-        isCaseSensitive: false,
-        minMatchCharLength: Math.min(filter.length, 2),
-        threshold: 0.2,
-      };
-      const fuse = new Fuse(items, options);
-      return fuse.search(filter).map((result) => result.item);
-    }
-  );
-
-  private _getGroupItems = memoizeOne(
-    (
-      type: AddAutomationElementDialogParams["type"],
-      root: AddAutomationElementDialogParams["root"],
-      group: string | undefined,
-      domains: Set<string> | undefined,
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      manifests?: DomainManifestLookup
-    ): ListItem[] => {
-      if (type === "action" && isService(group)) {
-        const result = this._services(localize, services, manifests, group);
-        if (group === `${SERVICE_PREFIX}media_player`) {
-          result.unshift(this._convertToItem("play_media", {}, type, localize));
-        }
-        return result;
-      }
-
-      const groups: AutomationElementGroup = group
-        ? TYPES[type].groups[group].members!
-        : TYPES[type].groups;
-
-      if (type === "condition" && group === "other" && !root) {
-        groups.trigger = {};
-      }
-
-      const result = Object.entries(groups).map(([key, options]) =>
-        this._convertToItem(key, options, type, localize)
-      );
-
-      if (type === "action") {
-        if (!this._group) {
-          result.unshift(
-            ...this._serviceGroups(
-              localize,
-              services,
-              manifests,
-              domains,
-              undefined
-            )
-          );
-        } else if (this._group === "helpers") {
-          result.unshift(
-            ...this._serviceGroups(
-              localize,
-              services,
-              manifests,
-              domains,
-              "helper"
-            )
-          );
-        } else if (this._group === "other") {
-          result.unshift(
-            ...this._serviceGroups(
-              localize,
-              services,
-              manifests,
-              domains,
-              "other"
-            )
-          );
-        }
-      }
-
-      return result.sort((a, b) => {
-        if (a.group && b.group) {
-          return 0;
-        }
-        if (a.group && !b.group) {
-          return 1;
-        }
-        if (!a.group && b.group) {
-          return -1;
-        }
-        return stringCompare(a.name, b.name, this.hass.locale.language);
-      });
-    }
-  );
-
-  private _serviceGroups = (
-    localize: LocalizeFunc,
-    services: HomeAssistant["services"],
-    manifests: DomainManifestLookup | undefined,
-    domains: Set<string> | undefined,
-    type: "helper" | "other" | undefined
-  ): ListItem[] => {
-    if (!services || !manifests) {
-      return [];
-    }
-    const result: ListItem[] = [];
-    Object.keys(services).forEach((domain) => {
-      const manifest = manifests[domain];
-      const domainUsed = !domains ? true : domains.has(domain);
-      if (
-        (type === undefined &&
-          (ENTITY_DOMAINS_MAIN.has(domain) ||
-            (manifest?.integration_type === "entity" &&
-              domainUsed &&
-              !ENTITY_DOMAINS_OTHER.has(domain)))) ||
-        (type === "helper" && manifest?.integration_type === "helper") ||
-        (type === "other" &&
-          !ENTITY_DOMAINS_MAIN.has(domain) &&
-          (ENTITY_DOMAINS_OTHER.has(domain) ||
-            (!domainUsed && manifest?.integration_type === "entity") ||
-            !["helper", "entity"].includes(manifest?.integration_type || "")))
-      ) {
-        const icon = domainIconWithoutDefault(domain);
-        result.push({
-          group: true,
-          icon,
-          image: !icon
-            ? brandsUrl({
-                domain,
-                type: "icon",
-                darkOptimized: this.hass.themes?.darkMode,
-              })
-            : undefined,
-          key: `${SERVICE_PREFIX}${domain}`,
-          name: domainToName(localize, domain, manifest),
-          description: "",
-        });
-      }
-    });
-    return result.sort((a, b) =>
-      stringCompare(a.name, b.name, this.hass.locale.language)
-    );
-  };
-
-  private _services = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      manifests: DomainManifestLookup | undefined,
-      group?: string
-    ): ListItem[] => {
-      if (!services) {
-        return [];
-      }
-      const result: ListItem[] = [];
-
-      let domain: string | undefined;
-
-      if (isService(group)) {
-        domain = getService(group!);
-      }
-
-      const addDomain = (dmn: string) => {
-        const services_keys = Object.keys(services[dmn]);
-
-        for (const service of services_keys) {
-          const icon = domainIconWithoutDefault(dmn);
-          result.push({
-            group: false,
-            icon,
-            image: !icon
-              ? brandsUrl({
-                  domain: dmn,
-                  type: "icon",
-                  darkOptimized: this.hass.themes?.darkMode,
-                })
-              : undefined,
-            key: `${SERVICE_PREFIX}${dmn}.${service}`,
-            name: `${domain ? "" : `${domainToName(localize, dmn)}: `}${
-              this.hass.localize(`component.${dmn}.services.${service}.name`) ||
-              services[dmn][service]?.name ||
-              service
-            }`,
-            description:
-              this.hass.localize(
-                `component.${domain}.services.${service}.description`
-              ) || services[dmn][service]?.description,
-          });
-        }
-      };
-
-      if (domain) {
-        addDomain(domain);
-        return result.sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
-        );
-      }
-
-      if (group && !["helpers", "other"].includes(group)) {
-        return [];
-      }
-
-      Object.keys(services)
-        .sort()
-        .forEach((dmn) => {
-          const manifest = manifests?.[dmn];
-          if (group === "helpers" && manifest?.integration_type !== "helper") {
-            return;
-          }
-          if (
-            group === "other" &&
-            (ENTITY_DOMAINS_OTHER.has(dmn) ||
-              ["helper", "entity"].includes(manifest?.integration_type || ""))
-          ) {
-            return;
-          }
-          addDomain(dmn);
-        });
-
-      return result;
-    }
-  );
-
-  private async _fetchManifests() {
-    const manifests = {};
-    const fetched = await fetchIntegrationManifests(this.hass);
-    for (const manifest of fetched) {
-      manifests[manifest.domain] = manifest;
-    }
-    this._manifests = manifests;
-  }
-
-  private _calculateUsedDomains() {
-    const domains = new Set(Object.keys(this.hass.states).map(computeDomain));
-    if (!deepEqual(domains, this._domains)) {
-      this._domains = domains;
-    }
-  }
-
-  protected _opened(): void {
-    // Store the width and height so that when we search, box doesn't jump
-    const boundingRect =
-      this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect();
-    this._width = boundingRect?.width;
-    this._height = boundingRect?.height;
-  }
-
-  protected willUpdate(changedProperties: PropertyValues): void {
-    if (
-      this._params?.type === "action" &&
-      changedProperties.has("hass") &&
-      changedProperties.get("hass")?.states !== this.hass.states
-    ) {
-      this._calculateUsedDomains();
-    }
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    const items = this._filter
-      ? this._getFilteredItems(
-          this._params.type,
-          this._params.root,
-          this._group,
-          this._filter,
-          this.hass.localize,
-          this.hass.services,
-          this._manifests
-        )
-      : this._getGroupItems(
-          this._params.type,
-          this._params.root,
-          this._group,
-          this._domains,
-          this.hass.localize,
-          this.hass.services,
-          this._manifests
-        );
-
-    const groupName = isService(this._group)
-      ? domainToName(
-          this.hass.localize,
-          getService(this._group!),
-          this._manifests?.[getService(this._group!)]
-        )
-      : this.hass.localize(
-          // @ts-ignore
-          `ui.panel.config.automation.editor.${this._params.type}s.groups.${this._group}.label`
-        );
-
-    return html`
-      <ha-dialog
-        open
-        hideActions
-        @opened=${this._opened}
-        @closed=${this.closeDialog}
-        .heading=${true}
-      >
-        <div slot="heading">
-          <ha-dialog-header>
-            <span slot="title"
-              >${this._group
-                ? groupName
-                : this.hass.localize(
-                    `ui.panel.config.automation.editor.${this._params.type}s.add`
-                  )}</span
-            >
-            ${this._group && this._group !== this._params.group
-              ? html`<ha-icon-button-prev
-                  slot="navigationIcon"
-                  @click=${this._back}
-                ></ha-icon-button-prev>`
-              : html`<ha-icon-button
-                  .path=${mdiClose}
-                  slot="navigationIcon"
-                  dialogAction="cancel"
-                ></ha-icon-button>`}
-          </ha-dialog-header>
-          <search-input
-            dialogInitialFocus=${ifDefined(this._fullScreen ? undefined : "")}
-            .hass=${this.hass}
-            .filter=${this._filter}
-            @value-changed=${this._filterChanged}
-            .label=${groupName
-              ? this.hass.localize(
-                  "ui.panel.config.automation.editor.search_in",
-                  { group: groupName }
-                )
-              : this.hass.localize(
-                  `ui.panel.config.automation.editor.${this._params.type}s.search`
-                )}
-          ></search-input>
-        </div>
-        <mwc-list
-          dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)}
-          innerRole="listbox"
-          itemRoles="option"
-          rootTabbable
-          style=${styleMap({
-            width: this._width ? `${this._width}px` : "auto",
-            height: this._height ? `${Math.min(670, this._height)}px` : "auto",
-          })}
-        >
-          ${this._params.clipboardItem &&
-          !this._filter &&
-          (!this._group ||
-            items.find((item) => item.key === this._params!.clipboardItem))
-            ? html`<ha-list-item
-                  twoline
-                  class="paste"
-                  .value=${PASTE_VALUE}
-                  graphic="icon"
-                  hasMeta
-                  @request-selected=${this._selected}
-                >
-                  ${this.hass.localize(
-                    `ui.panel.config.automation.editor.${this._params.type}s.paste`
-                  )}
-                  <span slot="secondary"
-                    >${this.hass.localize(
-                      // @ts-ignore
-                      `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-                    )}</span
-                  >
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiContentPaste}
-                  ></ha-svg-icon
-                  ><ha-svg-icon slot="meta" .path=${mdiPlus}></ha-svg-icon>
-                </ha-list-item>
-                <li divider role="separator"></li>`
-            : ""}
-          ${repeat(
-            items,
-            (item) => item.key,
-            (item) => html`
-              <ha-list-item
-                .twoline=${Boolean(item.description)}
-                .value=${item.key}
-                .group=${item.group}
-                graphic="icon"
-                hasMeta
-                @request-selected=${this._selected}
-              >
-                ${item.name}
-                <span slot="secondary">${item.description}</span>
-                ${item.icon
-                  ? html`<ha-svg-icon
-                      slot="graphic"
-                      .path=${item.icon}
-                    ></ha-svg-icon>`
-                  : html`<img
-                      alt=""
-                      slot="graphic"
-                      src=${item.image}
-                      crossorigin="anonymous"
-                      referrerpolicy="no-referrer"
-                    />`}
-                ${item.group
-                  ? html`<ha-icon-next slot="meta"></ha-icon-next>`
-                  : html`<ha-svg-icon
-                      slot="meta"
-                      .path=${mdiPlus}
-                    ></ha-svg-icon>`}
-              </ha-list-item>
-            `
-          )}
-        </mwc-list>
-      </ha-dialog>
-    `;
-  }
-
-  private _back() {
-    this._dialog!.scrollToPos(0, 0);
-    if (this._filter) {
-      this._filter = "";
-      return;
-    }
-    if (this._prev) {
-      this._group = this._prev;
-      this._prev = undefined;
-      return;
-    }
-    this._group = undefined;
-  }
-
-  private _selected(ev) {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-    this._dialog!.scrollToPos(0, 0);
-    const item = ev.currentTarget;
-    if (item.group) {
-      this._prev = this._group;
-      this._group = item.value;
-      return;
-    }
-    this._params!.add(item.value);
-    this.closeDialog();
-  }
-
-  private _filterChanged(ev) {
-    this._filter = ev.detail.value;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --dialog-content-padding: 0;
-          --mdc-dialog-max-height: 60vh;
-        }
-        @media all and (min-width: 550px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 500px;
-          }
-        }
-        ha-icon-next {
-          width: 24px;
-        }
-        mwc-list {
-          max-height: 670px;
-          max-width: 100vw;
-        }
-        search-input {
-          display: block;
-          margin: 0 16px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "add-automation-element-dialog": DialogAddAutomationElement;
-  }
-}

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -29,7 +29,7 @@ import "../../../../components/ha-icon-button";
 import type { AutomationClipboard } from "../../../../data/automation";
 import { Condition, testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
-import { CONDITION_ICONS } from "../../../../data/condition";
+import { CONDITION_TYPES } from "../../../../data/condition";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
 import { EntityRegistryEntry } from "../../../../data/entity_registry";
@@ -123,7 +123,7 @@ export default class HaAutomationConditionRow extends LitElement {
           <h3 slot="header">
             <ha-svg-icon
               class="condition-icon"
-              .path=${CONDITION_ICONS[this.condition.condition]}
+              .path=${CONDITION_TYPES[this.condition.condition]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass, this._entityReg)

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -1,18 +1,25 @@
 import "@material/mwc-button";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiContentPaste,
+  mdiDrag,
+  mdiPlus,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
   css,
+  CSSResultGroup,
   html,
+  LitElement,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
-import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
@@ -21,15 +28,30 @@ import type {
   AutomationClipboard,
   Condition,
 } from "../../../../data/automation";
-import { sortableStyles } from "../../../../resources/ha-sortable-style";
+import type { Entries, HomeAssistant } from "../../../../types";
-import type { SortableInstance } from "../../../../resources/sortable";
-import type { HomeAssistant } from "../../../../types";
-import {
-  PASTE_VALUE,
-  showAddAutomationElementDialog,
-} from "../show-add-automation-element-dialog";
 import "./ha-automation-condition-row";
 import type HaAutomationConditionRow from "./ha-automation-condition-row";
+// Uncommenting these and this element doesn't load
+// import "./types/ha-automation-condition-not";
+// import "./types/ha-automation-condition-or";
+import { storage } from "../../../../common/decorators/storage";
+import { stringCompare } from "../../../../common/string/compare";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import type { HaSelect } from "../../../../components/ha-select";
+import { CONDITION_TYPES } from "../../../../data/condition";
+import { sortableStyles } from "../../../../resources/ha-sortable-style";
+import type { SortableInstance } from "../../../../resources/sortable";
+import "./types/ha-automation-condition-and";
+import "./types/ha-automation-condition-device";
+import "./types/ha-automation-condition-numeric_state";
+import "./types/ha-automation-condition-state";
+import "./types/ha-automation-condition-sun";
+import "./types/ha-automation-condition-template";
+import "./types/ha-automation-condition-time";
+import "./types/ha-automation-condition-trigger";
+import "./types/ha-automation-condition-zone";
+
+const PASTE_VALUE = "__paste__";
 
 @customElement("ha-automation-condition")
 export default class HaAutomationCondition extends LitElement {
@@ -175,70 +197,43 @@ export default class HaAutomationCondition extends LitElement {
           `
         )}
       </div>
-      <div class="buttons">
+      <ha-button-menu
+        @action=${this._addCondition}
+        .disabled=${this.disabled}
+        fixed
+      >
         <ha-button
+          slot="trigger"
           outlined
           .disabled=${this.disabled}
           .label=${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.add"
           )}
-          @click=${this._addConditionDialog}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </ha-button>
-        <ha-button
+        ${this._clipboard?.condition
-          .disabled=${this.disabled}
+          ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
-          .label=${this.hass.localize(
+              ${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.add_building_block"
+                "ui.panel.config.automation.editor.conditions.paste"
-          )}
+              )}
-          @click=${this._addConditionBuildingBlockDialog}
+              (${this.hass.localize(
-        >
+                `ui.panel.config.automation.editor.conditions.type.${this._clipboard.condition.condition}.label`
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+              )})
-        </ha-button>
+              <ha-svg-icon slot="graphic" .path=${mdiContentPaste}></ha-svg-icon
-      </div>
+            ></mwc-list-item>`
+          : nothing}
+        ${this._processedTypes(this.hass.localize).map(
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
+          `
+        )}
+      </ha-button-menu>
     `;
   }
 
-  private _addConditionDialog() {
-    showAddAutomationElementDialog(this, {
-      type: "condition",
-      add: this._addCondition,
-      root: !this.nested,
-      clipboardItem: this._clipboard?.condition?.condition,
-    });
-  }
-
-  private _addConditionBuildingBlockDialog() {
-    showAddAutomationElementDialog(this, {
-      type: "condition",
-      add: this._addCondition,
-      clipboardItem: this._clipboard?.condition?.condition,
-      group: "building_blocks",
-    });
-  }
-
-  private _addCondition = (value) => {
-    let conditions: Condition[];
-    if (value === PASTE_VALUE) {
-      conditions = this.conditions.concat(
-        deepClone(this._clipboard!.condition)
-      );
-    } else {
-      const condition = value as Condition["condition"];
-      const elClass = customElements.get(
-        `ha-automation-condition-${condition}`
-      ) as CustomElementConstructor & {
-        defaultConfig: Omit<Condition, "condition">;
-      };
-      conditions = this.conditions.concat({
-        condition: condition as any,
-        ...elClass.defaultConfig,
-      });
-    }
-    this._focusLastConditionOnChange = true;
-    fireEvent(this, "value-changed", { value: conditions });
-  };
-
   private async _enterReOrderMode(ev: CustomEvent) {
     if (this.nested) return;
     ev.stopPropagation();
@@ -287,6 +282,32 @@ export default class HaAutomationCondition extends LitElement {
     return this._conditionKeys.get(condition)!;
   }
 
+  private _addCondition(ev: CustomEvent<ActionDetail>) {
+    const value = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
+
+    let conditions: Condition[];
+    if (value === PASTE_VALUE) {
+      conditions = this.conditions.concat(
+        deepClone(this._clipboard!.condition)
+      );
+    } else {
+      const condition = value as Condition["condition"];
+
+      const elClass = customElements.get(
+        `ha-automation-condition-${condition}`
+      ) as CustomElementConstructor & {
+        defaultConfig: Omit<Condition, "condition">;
+      };
+
+      conditions = this.conditions.concat({
+        condition: condition as any,
+        ...elClass.defaultConfig,
+      });
+    }
+    this._focusLastConditionOnChange = true;
+    fireEvent(this, "value-changed", { value: conditions });
+  }
+
   private _moveUp(ev) {
     const index = (ev.target as any).index;
     const newIndex = index - 1;
@@ -340,6 +361,22 @@ export default class HaAutomationCondition extends LitElement {
     });
   }
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string, string][] =>
+      (Object.entries(CONDITION_TYPES) as Entries<typeof CONDITION_TYPES>)
+        .map(
+          ([condition, icon]) =>
+            [
+              condition,
+              localize(
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1], this.hass.locale.language))
+  );
+
   static get styles(): CSSResultGroup {
     return [
       sortableStyles,
@@ -359,19 +396,13 @@ export default class HaAutomationCondition extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {
           pointer-events: none;
           height: 24px;
         }
-        .buttons {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 8px;
-        }
       `,
     ];
   }

src/panels/config/automation/condition/types/ha-automation-condition-device.ts

@@ -168,7 +168,6 @@ export class HaDeviceCondition extends LitElement {
     }
 
     ha-form {
-      display: block;
       margin-top: 24px;
     }
   `;

src/panels/config/automation/ha-automation-editor.ts

@@ -486,7 +486,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       value.valid
         ? ""
         : html`${this.hass.localize(
-              `ui.panel.config.automation.editor.${key}s.name`
+              `ui.panel.config.automation.editor.${key}s.header`
             )}:
             ${value.error}<br />`
     );

src/panels/config/automation/ha-automation-picker.ts

@@ -7,19 +7,11 @@ import {
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlus,
-  mdiRobotHappy,
   mdiStopCircleOutline,
   mdiTransitConnection,
 } from "@mdi/js";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import {
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { differenceInDays } from "date-fns/esm";
@@ -303,7 +295,6 @@ class HaAutomationPicker extends LitElement {
         .activeFilters=${this._activeFilters}
         .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._automations(this.automations, this._filteredAutomations)}
-        .empty=${!this.automations.length}
         @row-click=${this._handleRowClicked}
         .noDataText=${this.hass.localize(
           "ui.panel.config.automation.picker.no_automations"
@@ -327,36 +318,6 @@ class HaAutomationPicker extends LitElement {
           @related-changed=${this._relatedFilterChanged}
         >
         </ha-button-related-filter-menu>
-        ${!this.automations.length
-          ? html`<div class="empty" slot="empty">
-              <ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
-              <h1>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_header"
-                )}
-              </h1>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_text_1"
-                )}
-              </p>
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.picker.empty_text_2",
-                  { user: this.hass.user?.name || "Alice" }
-                )}
-              </p>
-              <a
-                href=${documentationUrl(this.hass, "/docs/automation/editor/")}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <ha-button>
-                  ${this.hass.localize("ui.panel.config.common.learn_more")}
-                </ha-button>
-              </a>
-            </div>`
-          : nothing}
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -544,16 +505,7 @@ class HaAutomationPicker extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
+    return haStyle;
-      haStyle,
-      css`
-        .empty {
-          --paper-font-headline_-_font-size: 28px;
-          --mdc-icon-size: 80px;
-          max-width: 500px;
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/automation/ha-automation-trace.ts

@@ -7,14 +7,7 @@ import {
   mdiRayStartArrow,
   mdiRefresh,
 } from "@mdi/js";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
@@ -48,8 +41,6 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
-const TABS = ["details", "automation_config", "timeline", "logbook"] as const;
-
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -76,7 +67,12 @@ export class HaAutomationTrace extends LitElement {
 
   @state() private _logbookEntries?: LogbookEntry[];
 
-  @state() private _view: (typeof TABS)[number] | "blueprint" = "details";
+  @state() private _view:
+    | "details"
+    | "config"
+    | "timeline"
+    | "logbook"
+    | "blueprint" = "details";
 
   @query("hat-script-graph") private _graph?: HatScriptGraph;
 
@@ -217,15 +213,9 @@ export class HaAutomationTrace extends LitElement {
         </div>
 
         ${this._traces === undefined
-          ? html`<div class="container">
+          ? html`<div class="container">Loading…</div>`
-              ${this.hass!.localize("ui.common.loading")}
-            </div>`
           : this._traces.length === 0
-            ? html`<div class="container">
+            ? html`<div class="container">No traces found</div>`
-                ${this.hass!.localize(
-                  "ui.panel.config.automation.trace.no_traces_found"
-                )}
-              </div>`
             : this._trace === undefined
               ? ""
               : html`
@@ -240,17 +230,20 @@ export class HaAutomationTrace extends LitElement {
 
                     <div class="info">
                       <div class="tabs top">
-                        ${TABS.map(
+                        ${[
-                          (view) => html`
+                          ["details", "Step Details"],
+                          ["timeline", "Trace Timeline"],
+                          ["logbook", "Related logbook entries"],
+                          ["config", "Automation Config"],
+                        ].map(
+                          ([view, label]) => html`
                             <button
                               tabindex="0"
                               .view=${view}
                               class=${classMap({ active: this._view === view })}
                               @click=${this._showTab}
                             >
-                              ${this.hass!.localize(
+                              ${label}
-                                `ui.panel.config.automation.trace.tabs.${view}`
-                              )}
                             </button>
                           `
                         )}
@@ -264,9 +257,7 @@ export class HaAutomationTrace extends LitElement {
                                 })}
                                 @click=${this._showTab}
                               >
-                                ${this.hass!.localize(
+                                Blueprint Config
-                                  `ui.panel.config.automation.trace.tabs.blueprint_config`
-                                )}
                               </button>
                             `
                           : ""}
@@ -274,7 +265,7 @@ export class HaAutomationTrace extends LitElement {
                       ${this._selected === undefined ||
                       this._logbookEntries === undefined ||
                       trackedNodes === undefined
-                        ? nothing
+                        ? ""
                         : this._view === "details"
                           ? html`
                               <ha-trace-path-details
@@ -287,7 +278,7 @@ export class HaAutomationTrace extends LitElement {
                                 .renderedNodes=${renderedNodes!}
                               ></ha-trace-path-details>
                             `
-                          : this._view === "automation_config"
+                          : this._view === "config"
                             ? html`
                                 <ha-trace-config
                                   .hass=${this.hass}

src/panels/config/automation/manual-automation-editor.ts

@@ -1,13 +1,11 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { ensureArray } from "../../../common/array/ensure-array";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-markdown";
 import {
   Condition,
   ManualAutomationConfig,
@@ -85,13 +83,6 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
-      ${!ensureArray(this.config.trigger)?.length
-        ? html`<p>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.triggers.description"
-            )}
-          </p>`
-        : nothing}
 
       <ha-automation-trigger
         role="region"
@@ -107,9 +98,6 @@ export class HaManualAutomationEditor extends LitElement {
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.header"
           )}
-          <span class="small"
-            >(${this.hass.localize("ui.common.optional")})</span
-          >
         </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
@@ -124,14 +112,6 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
-      ${!ensureArray(this.config.condition)?.length
-        ? html`<p>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.description",
-              { user: this.hass.user?.name || "Alice" }
-            )}
-          </p>`
-        : nothing}
 
       <ha-automation-condition
         role="region"
@@ -163,13 +143,6 @@ export class HaManualAutomationEditor extends LitElement {
           </a>
         </div>
       </div>
-      ${!ensureArray(this.config.action)?.length
-        ? html`<p>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.description"
-            )}
-          </p>`
-        : nothing}
 
       <ha-automation-action
         role="region"
@@ -234,11 +207,9 @@ export class HaManualAutomationEditor extends LitElement {
           margin: 0;
         }
         p {
-          margin-top: 0;
+          margin-bottom: 0;
         }
         .header {
-          margin-top: 16px;
-
           display: flex;
           align-items: center;
         }
@@ -246,18 +217,13 @@ export class HaManualAutomationEditor extends LitElement {
           margin-top: -16px;
         }
         .header .name {
+          font-size: 20px;
           font-weight: 400;
           flex: 1;
-          margin-bottom: 16px;
         }
         .header a {
           color: var(--secondary-text-color);
         }
-        .header .small {
-          font-size: small;
-          font-weight: normal;
-          line-height: 0;
-        }
       `,
     ];
   }

src/panels/config/automation/show-add-automation-element-dialog.ts

@@ -1,23 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-
-export const PASTE_VALUE = "__paste__";
-
-export interface AddAutomationElementDialogParams {
-  type: "trigger" | "condition" | "action";
-  add: (key: string) => void;
-  clipboardItem: string | undefined;
-  root?: boolean;
-  group?: string;
-}
-const loadDialog = () => import("./add-automation-element-dialog");
-
-export const showAddAutomationElementDialog = (
-  element: HTMLElement,
-  dialogParams: AddAutomationElementDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "add-automation-element-dialog",
-    dialogImport: loadDialog,
-    dialogParams,
-  });
-};

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -37,7 +37,7 @@ import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
 import { EntityRegistryEntry } from "../../../../data/entity_registry";
-import { TRIGGER_ICONS } from "../../../../data/trigger";
+import { TRIGGER_TYPES } from "../../../../data/trigger";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -150,7 +150,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           <h3 slot="header">
             <ha-svg-icon
               class="trigger-icon"
-              .path=${TRIGGER_ICONS[this.trigger.platform]}
+              .path=${TRIGGER_TYPES[this.trigger.platform]}
             ></ha-svg-icon>
             ${describeTrigger(this.trigger, this.hass, this._entityReg)}
           </h3>

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -1,25 +1,59 @@
 import "@material/mwc-button";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import type { ActionDetail } from "@material/mwc-list";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiContentPaste,
+  mdiDrag,
+  mdiPlus,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
+import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { AutomationClipboard, Trigger } from "../../../../data/automation";
+import { TRIGGER_TYPES } from "../../../../data/trigger";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import type { SortableInstance } from "../../../../resources/sortable";
-import { HomeAssistant } from "../../../../types";
+import { Entries, HomeAssistant } from "../../../../types";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
-import {
+import "./types/ha-automation-trigger-calendar";
-  PASTE_VALUE,
+import "./types/ha-automation-trigger-conversation";
-  showAddAutomationElementDialog,
+import "./types/ha-automation-trigger-device";
-} from "../show-add-automation-element-dialog";
+import "./types/ha-automation-trigger-event";
+import "./types/ha-automation-trigger-geo_location";
+import "./types/ha-automation-trigger-homeassistant";
+import "./types/ha-automation-trigger-mqtt";
+import "./types/ha-automation-trigger-numeric_state";
+import "./types/ha-automation-trigger-persistent_notification";
+import "./types/ha-automation-trigger-state";
+import "./types/ha-automation-trigger-sun";
+import "./types/ha-automation-trigger-tag";
+import "./types/ha-automation-trigger-template";
+import "./types/ha-automation-trigger-time";
+import "./types/ha-automation-trigger-time_pattern";
+import "./types/ha-automation-trigger-webhook";
+import "./types/ha-automation-trigger-zone";
+
+const PASTE_VALUE = "__paste__";
 
 @customElement("ha-automation-trigger")
 export default class HaAutomationTrigger extends LitElement {
@@ -113,48 +147,47 @@ export default class HaAutomationTrigger extends LitElement {
             </ha-automation-trigger-row>
           `
         )}
-        <ha-button
+        <ha-button-menu
-          outlined
+          @action=${this._addTrigger}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.add"
-          )}
           .disabled=${this.disabled}
-          @click=${this._addTriggerDialog}
+          fixed
         >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+          <ha-button
-        </ha-button>
+            slot="trigger"
+            outlined
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.add"
+            )}
+            .disabled=${this.disabled}
+          >
+            <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+          </ha-button>
+          ${this._clipboard?.trigger
+            ? html` <mwc-list-item .value=${PASTE_VALUE} graphic="icon">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.paste"
+                )}
+                (${this.hass.localize(
+                  `ui.panel.config.automation.editor.triggers.type.${this._clipboard.trigger.platform}.label`
+                )})
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentPaste}
+                ></ha-svg-icon
+              ></mwc-list-item>`
+            : nothing}
+          ${this._processedTypes(this.hass.localize).map(
+            ([opt, label, icon]) => html`
+              <mwc-list-item .value=${opt} graphic="icon">
+                ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+              ></mwc-list-item>
+            `
+          )}
+        </ha-button-menu>
       </div>
     `;
   }
 
-  private _addTriggerDialog() {
-    showAddAutomationElementDialog(this, {
-      type: "trigger",
-      add: this._addTrigger,
-      clipboardItem: this._clipboard?.trigger?.platform,
-    });
-  }
-
-  private _addTrigger = (value: string) => {
-    let triggers: Trigger[];
-    if (value === PASTE_VALUE) {
-      triggers = this.triggers.concat(deepClone(this._clipboard!.trigger));
-    } else {
-      const platform = value as Trigger["platform"];
-      const elClass = customElements.get(
-        `ha-automation-trigger-${platform}`
-      ) as CustomElementConstructor & {
-        defaultConfig: Omit<Trigger, "platform">;
-      };
-      triggers = this.triggers.concat({
-        platform: platform as any,
-        ...elClass.defaultConfig,
-      });
-    }
-    this._focusLastTriggerOnChange = true;
-    fireEvent(this, "value-changed", { value: triggers });
-  };
-
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
@@ -228,6 +261,30 @@ export default class HaAutomationTrigger extends LitElement {
     return this._triggerKeys.get(action)!;
   }
 
+  private _addTrigger(ev: CustomEvent<ActionDetail>) {
+    const value = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
+
+    let triggers: Trigger[];
+    if (value === PASTE_VALUE) {
+      triggers = this.triggers.concat(deepClone(this._clipboard!.trigger));
+    } else {
+      const platform = value as Trigger["platform"];
+
+      const elClass = customElements.get(
+        `ha-automation-trigger-${platform}`
+      ) as CustomElementConstructor & {
+        defaultConfig: Omit<Trigger, "platform">;
+      };
+
+      triggers = this.triggers.concat({
+        platform: platform as any,
+        ...elClass.defaultConfig,
+      });
+    }
+    this._focusLastTriggerOnChange = true;
+    fireEvent(this, "value-changed", { value: triggers });
+  }
+
   private _moveUp(ev) {
     const index = (ev.target as any).index;
     const newIndex = index - 1;
@@ -279,6 +336,22 @@ export default class HaAutomationTrigger extends LitElement {
     });
   }
 
+  private _processedTypes = memoizeOne(
+    (localize: LocalizeFunc): [string, string, string][] =>
+      (Object.entries(TRIGGER_TYPES) as Entries<typeof TRIGGER_TYPES>)
+        .map(
+          ([action, icon]) =>
+            [
+              action,
+              localize(
+                `ui.panel.config.automation.editor.triggers.type.${action}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1], this.hass.locale.language))
+  );
+
   static get styles(): CSSResultGroup {
     return [
       sortableStyles,
@@ -298,8 +371,7 @@ export default class HaAutomationTrigger extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts

@@ -174,7 +174,6 @@ export class HaDeviceTrigger extends LitElement {
     }
 
     ha-form {
-      display: block;
       margin-top: 24px;
     }
   `;

src/panels/config/dashboard/ha-config-updates.ts

@@ -109,11 +109,9 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
               ${this.narrow && entity.attributes.in_progress
                 ? html`<ha-circular-progress
                     indeterminate
+                    size="small"
                     slot="graphic"
                     class="absolute"
-                    .ariaLabel=${this.hass.localize(
-                      "ui.panel.config.updates.update_in_progress"
-                    )}
                   ></ha-circular-progress>`
                 : ""}
               <span
@@ -133,9 +131,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                       indeterminate
                       size="small"
                       slot="meta"
-                      .ariaLabel=${this.hass.localize(
-                        "ui.panel.config.updates.update_in_progress"
-                      )}
                     ></ha-circular-progress>`
                   : html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
@@ -196,8 +191,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
         }
         ha-circular-progress.absolute {
           position: absolute;
-          width: 40px;
-          height: 40px;
         }
         state-badge.updating {
           opacity: 0.5;

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -363,8 +363,8 @@ export class HaConfigDeviceDashboard extends LitElement {
         sortable: true,
         filterable: true,
         type: "numeric",
-        width: narrow ? "105px" : "15%",
+        width: narrow ? "95px" : "15%",
-        maxWidth: "105px",
+        maxWidth: "95px",
         valueColumn: "battery_level",
         template: (device) => {
           const batteryEntityPair = device.battery_entity;

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -118,12 +118,10 @@ const OVERRIDE_DEVICE_CLASSES = {
       "carbon_monoxide",
       "moisture",
     ], // Alarm
-    ["connectivity"], // Connectivity
-    ["update"], // Update
   ],
 };
 
-const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren", "valve"];
+const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren"];
 
 const PRECISIONS = [0, 1, 2, 3, 4, 5, 6];
 

src/panels/config/entities/ha-config-entities.ts

@@ -74,7 +74,7 @@ export interface EntityRow extends StateEntity {
   entity?: HassEntity;
   unavailable: boolean;
   restored: boolean;
-  status: string | undefined;
+  status: string;
   area?: string;
   localized_platform: string;
 }
@@ -429,13 +429,7 @@ export class HaConfigEntities extends LitElement {
               ? localize("ui.panel.config.entities.picker.status.unavailable")
               : entry.disabled_by
                 ? localize("ui.panel.config.entities.picker.status.disabled")
-                : entry.hidden_by
+                : localize("ui.panel.config.entities.picker.status.ok"),
-                  ? localize("ui.panel.config.entities.picker.status.hidden")
-                  : entry.readonly
-                    ? localize(
-                        "ui.panel.config.entities.picker.status.readonly"
-                      )
-                    : undefined,
         });
       }
 

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -285,8 +285,7 @@ class HaInputSelectForm extends LitElement {
           margin-bottom: 8px;
         }
         .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: move;
-          cursor: grab;
           padding-right: 12px;
         }
         .handle ha-svg-icon {

src/panels/config/integrations/dialog-add-integration.ts

@@ -3,22 +3,21 @@ import "@material/mwc-list/mwc-list";
 import Fuse, { IFuseOptions } from "fuse.js";
 import { HassConfig } from "home-assistant-js-websocket";
 import {
+  css,
+  html,
   LitElement,
   PropertyValues,
   TemplateResult,
-  css,
-  html,
   nothing,
 } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
-  PROTOCOL_INTEGRATIONS,
   protocolIntegrationPicked,
+  PROTOCOL_INTEGRATIONS,
 } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -35,10 +34,10 @@ import {
 import {
   Brand,
   Brands,
-  Integration,
-  Integrations,
   findIntegration,
   getIntegrationDescriptions,
+  Integration,
+  Integrations,
 } from "../../../data/integrations";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import {
@@ -340,9 +339,7 @@ class AddIntegrationDialog extends LitElement {
       !("integrations" in integration) &&
       !this._flowsInProgress?.length
     ) {
-      return this.hass.localize(
+      return "What type of device is it?";
-        "ui.panel.config.integrations.what_device_type"
-      );
     }
     if (
       integration &&
@@ -350,11 +347,9 @@ class AddIntegrationDialog extends LitElement {
       !("integrations" in integration) &&
       this._flowsInProgress?.length
     ) {
-      return this.hass.localize(
+      return "Want to add these discovered devices?";
-        "ui.panel.config.integrations.confirm_add_discovered"
-      );
     }
-    return this.hass.localize("ui.panel.config.integrations.what_to_add");
+    return "What do you want to add?";
   }
 
   private _renderIntegration(
@@ -429,7 +424,8 @@ class AddIntegrationDialog extends LitElement {
   private _renderAll(integrations?: IntegrationListItem[]): TemplateResult {
     return html`<search-input
         .hass=${this.hass}
-        dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
+        autofocus
+        dialogInitialFocus
         .filter=${this._filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize(
@@ -438,9 +434,7 @@ class AddIntegrationDialog extends LitElement {
         @keypress=${this._maybeSubmit}
       ></search-input>
       ${integrations
-        ? html`<mwc-list
+        ? html`<mwc-list>
-            dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
-          >
             <lit-virtualizer
               scroller
               class="ha-scrollbar"