Add logbook to security dashboard

Safe area: main content and onboarding (#26813 )
* foundation: define --safe-area-content-inset-*; adjust drawer width; apply top inset to pre-login templates * Set default for var * Update demo template * Set default to avoid issues * Allow for left and right insets or 560px * Remove
2026-05-18 23:27:09 +00:00 · 2025-09-07 11:04:11 -04:00 · 2025-09-07 13:25:29 +03:00 · 2025-09-06 14:59:59 +00:00 · 2025-09-06 16:49:58 +02:00 · 2025-09-05 22:39:01 -04:00
233 changed files with 14487 additions and 5569 deletions
@@ -21,7 +21,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

@@ -56,7 +56,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

@@ -24,7 +24,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -58,7 +58,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -76,7 +76,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -100,7 +100,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -22,7 +22,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: dev

@@ -57,7 +57,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
        with:
          ref: master

@@ -16,7 +16,7 @@ jobs:
      url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
        uses: actions/setup-node@v4.4.0
@@ -21,7 +21,7 @@ jobs:
    if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Setup Node
        uses: actions/setup-node@v4.4.0
@@ -20,7 +20,7 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@v5
@@ -23,7 +23,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
        uses: actions/setup-python@v5
@@ -90,7 +90,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -119,7 +119,7 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0
      - name: Setup Node
        uses: actions/setup-node@v4.4.0
        with:
@@ -9,7 +9,7 @@ jobs:
  check-authorization:
    runs-on: ubuntu-latest
    # Only run if this is a Task issue type (from the issue form)
-    if: github.event.issue.issue_type == 'Task'
+    if: github.event.issue.type.name == 'Task'
    steps:
      - name: Check if user is authorized
        uses: actions/github-script@v7
@@ -14,7 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.2.2
+        uses: actions/checkout@v5.0.0

      - name: Upload Translations
        run: |
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
@@ -14,5 +14,5 @@
  "name": "Home Assistant Cast",
  "short_name": "HA Cast",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    const media = loadRequestData.media;
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
  loadRequestData.media.contentId =
    "https://cast.home-assistant.io/images/google-nest-hub.png";
  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };

 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
  // @ts-ignore
  (ev: ReceivedMessage<HassMessage>) => {
    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
      playerManager.stop();
    } else {
      showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    if (
      loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
 );

 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
@@ -75,5 +75,5 @@
  "name": "Home Assistant Demo",
  "short_name": "HA Demo",
  "start_url": "/?homescreen=1",
-  "theme_color": "#03A9F4"
+  "theme_color": "#009ac7"
 }
@@ -68,7 +68,7 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -1,10 +1,11 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
+import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";

@customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -21,11 +22,13 @@ class DemoMoreInfo extends LitElement {
      <div class="root">
        <div id="card">
          <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
+            ${!computeShowNewMoreInfo(state)
+              ? html`<state-card-content
+                  .stateObj=${state}
+                  .hass=${this.hass}
+                  in-dialog
+                ></state-card-content>`
+              : nothing}

            <more-info-content
              .hass=${this.hass}
@@ -1106,7 +1106,7 @@ export default {
      friendly_name: "Philips Hue",
      entity_picture: null,
      description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
      submit_caption: "I have pressed the button",
    },
    last_changed: "2018-07-19T10:44:46.515160+00:00",
@@ -18,7 +18,6 @@ import { HaDeviceAction } from "../../../../src/panels/config/automation/action/
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
 import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
@@ -32,7 +31,6 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
  { name: "Service", actions: [HaServiceAction.defaultConfig] },
  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
@@ -101,11 +101,14 @@ const ENTITIES = [
      ClimateEntityFeature.FAN_MODE +
      ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
  }),
-  getEntity("fan", "fan_direction", "on", {
+  getEntity("fan", "fan_demo", "on", {
    friendly_name: "Ceiling fan",
    device_class: "fan",
    direction: "reverse",
-    supported_features: [FanEntityFeature.DIRECTION],
+    supported_features:
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED +
+      FanEntityFeature.OSCILLATE,
  }),
 ];

@@ -272,11 +275,29 @@ const CONFIGS = [
    heading: "Fan direction feature",
    config: `
 - type: tile
-  entity: fan.fan_direction
+  entity: fan.fan_demo
  features:
  - type: fan-direction
    `,
  },
+  {
+    heading: "Fan speed feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-speed
+    `,
+  },
+  {
+    heading: "Fan oscillate feature",
+    config: `
+- type: tile
+  entity: fan.fan_demo
+  features:
+  - type: fan-oscillate
+    `,
+  },
 ];

@customElement("demo-lovelace-tile-card")
@@ -0,0 +1,3 @@
+---
+title: Fan
+---
@@ -0,0 +1,50 @@
+import type { PropertyValues, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { FanEntityFeature } from "../../../../src/data/fan";
+
+const ENTITIES = [
+  getEntity("fan", "fan", "on", {
+    friendly_name: "Fan",
+    device_class: "fan",
+    supported_features:
+      FanEntityFeature.OSCILLATE +
+      FanEntityFeature.DIRECTION +
+      FanEntityFeature.SET_SPEED,
+  }),
+];
+
+@customElement("demo-more-info-fan")
+class DemoMoreInfoFan extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-fan": DemoMoreInfoFan;
+  }
+}
@@ -19,8 +19,9 @@
        height: auto;
        padding: 32px 0;
      }
+
      .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: content-box;
@@ -1,6 +1,6 @@
 export default {
  "*.?(c|m){js,ts}": [
-    "eslint --flag unstable_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
+    "eslint --flag v10_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
    "prettier --cache --write",
    "lit-analyzer --quiet",
  ],
@@ -8,8 +8,8 @@
  "version": "1.0.0",
  "scripts": {
    "build": "script/build_frontend",
-    "lint:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
-    "format:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
+    "lint:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
+    "format:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
    "lint:prettier": "prettier . --cache --check",
    "format:prettier": "prettier . --cache --write",
    "lint:types": "tsc",
@@ -27,15 +27,15 @@
  "type": "module",
  "dependencies": {
    "@awesome.me/webawesome": "3.0.0-beta.4",
-    "@babel/runtime": "7.28.2",
+    "@babel/runtime": "7.28.3",
    "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/autocomplete": "6.18.7",
    "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.2",
+    "@codemirror/language": "6.11.3",
    "@codemirror/legacy-modes": "6.5.1",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.1",
+    "@codemirror/view": "6.38.2",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -80,7 +80,7 @@
    "@material/mwc-top-app-bar": "0.27.0",
    "@material/mwc-top-app-bar-fixed": "0.27.0",
    "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.3.0",
+    "@material/web": "2.4.0",
    "@mdi/js": "7.4.47",
    "@mdi/svg": "7.4.47",
    "@replit/codemirror-indentation-markers": "6.5.3",
@@ -89,8 +89,8 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.8.5",
-    "@vaadin/vaadin-themable-mixin": "24.8.5",
+    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.6",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -99,7 +99,7 @@
    "barcode-detector": "3.0.5",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
-    "core-js": "3.45.0",
+    "core-js": "3.45.1",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
    "date-fns": "4.1.0",
@@ -112,7 +112,7 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.9",
+    "hls.js": "1.6.11",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@@ -123,7 +123,7 @@
    "lit": "3.3.1",
    "lit-html": "3.3.1",
    "luxon": "3.7.1",
-    "marked": "16.1.2",
+    "marked": "16.2.1",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -149,28 +149,28 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.28.0",
+    "@babel/core": "7.28.3",
    "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.0",
-    "@babel/preset-env": "7.28.0",
-    "@bundle-stats/plugin-webpack-filter": "4.21.2",
-    "@lokalise/node-api": "15.0.0",
+    "@babel/plugin-transform-runtime": "7.28.3",
+    "@babel/preset-env": "7.28.3",
+    "@bundle-stats/plugin-webpack-filter": "4.21.3",
+    "@lokalise/node-api": "15.2.1",
    "@octokit/auth-oauth-device": "8.0.1",
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.2.1",
-    "@rspack/cli": "1.4.11",
-    "@rspack/core": "1.4.11",
+    "@rsdoctor/rspack-plugin": "1.2.3",
+    "@rspack/core": "1.5.2",
+    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.0",
+    "@types/culori": "4.0.1",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
    "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.12",
-    "@types/leaflet.markercluster": "1.5.5",
+    "@types/leaflet-draw": "1.0.13",
+    "@types/leaflet.markercluster": "1.5.6",
    "@types/lodash.merge": "4.6.9",
    "@types/luxon": "3.7.1",
    "@types/mocha": "10.0.10",
@@ -184,14 +184,14 @@
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.33.0",
+    "eslint": "9.34.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.32.0",
    "eslint-plugin-lit": "2.1.1",
    "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.1.4",
+    "eslint-plugin-unused-imports": "4.2.0",
    "eslint-plugin-wc": "3.0.1",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.1",
@@ -204,7 +204,7 @@
    "husky": "9.1.7",
    "jsdom": "26.1.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -218,7 +218,7 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.2",
-    "typescript-eslint": "8.39.0",
+    "typescript-eslint": "8.42.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
@@ -235,7 +235,7 @@
    "globals": "16.3.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@vaadin/vaadin-themable-mixin": "24.8.5"
+    "@vaadin/vaadin-themable-mixin": "24.8.6"
  },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.9.4"
 }
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_40067)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="#1C1C1C"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M6 32C6 28.6863 8.68629 26 12 26C15.3137 26 18 28.6863 18 32C18 35.3137 15.3137 38 12 38C8.68629 38 6 35.3137 6 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M54.6666 28C54.6666 23.5817 58.2483 20 62.6666 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3333 44H62.6666C58.2484 44 54.6666 40.4183 54.6666 36V28Z" fill="#1C1C1C"/>
+<path d="M62.6666 20.5H97.3336C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3336 43.5H62.6666C58.5245 43.5 55.1666 40.1421 55.1666 36V28C55.1666 23.8579 58.5245 20.5 62.6666 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M60.6666 32C60.6666 28.6863 63.3529 26 66.6666 26C69.9803 26 72.6666 28.6863 72.6666 32C72.6666 35.3137 69.9803 38 66.6666 38C63.3529 38 60.6666 35.3137 60.6666 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M78.6666 31C78.6666 29.3431 80.0098 28 81.6666 28H94.3333C95.9901 28 97.3333 29.3431 97.3333 31V33C97.3333 34.6569 95.9901 36 94.3333 36H81.6666C80.0098 36 78.6666 34.6569 78.6666 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="#1C1C1C"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M115.333 32C115.333 28.6863 118.02 26 121.333 26C124.647 26 127.333 28.6863 127.333 32C127.333 35.3137 124.647 38 121.333 38C118.02 38 115.333 35.3137 115.333 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M133.333 31C133.333 29.3431 134.677 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.677 36 133.333 34.6569 133.333 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="#1C1C1C"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask0_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_40067)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="#1C1C1C"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask1_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_40067)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="#1C1C1C"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask2_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_40067)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="#1C1C1C"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask3_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_40067)">
+<rect x="129.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_40067)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_40067)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_40067)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_40067)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_40067">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_39984)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="white"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="6" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M54.6667 28C54.6667 23.5817 58.2484 20 62.6667 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3334 44H62.6667C58.2484 44 54.6667 40.4183 54.6667 36V28Z" fill="white"/>
+<path d="M62.6667 20.5H97.3337C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3337 43.5H62.6667C58.5246 43.5 55.1667 40.1421 55.1667 36V28C55.1667 23.8579 58.5246 20.5 62.6667 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="60.6667" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M78.6667 31C78.6667 29.3431 80.0098 28 81.6667 28H94.3334C95.9902 28 97.3334 29.3431 97.3334 31V33C97.3334 34.6569 95.9902 36 94.3334 36H81.6667C80.0098 36 78.6667 34.6569 78.6667 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="white"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="115.333" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M133.333 31C133.333 29.3431 134.676 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.676 36 133.333 34.6569 133.333 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="white"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask0_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_39984)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="white"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask1_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_39984)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="white"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask2_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_39984)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="white"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask3_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_39984)">
+<rect x="129.5" y="72" width="24" height="24" fill="#18BCF2"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_39984)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_39984)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_39984)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_39984)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_39984">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250730.0"
+version      = "20250903.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -28,7 +28,10 @@ export const computeEntityEntryName = (
  hass: HomeAssistant
 ): string | undefined => {
  const name =
-    entry.name || ("original_name" in entry ? entry.original_name : undefined);
+    entry.name ||
+    ("original_name" in entry && entry.original_name != null
+      ? String(entry.original_name)
+      : undefined);

  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;

@@ -67,10 +67,7 @@ export const generateEntityFilter = (
    }

    if (floors) {
-      if (!floor) {
-        return false;
-      }
-      if (!floors) {
+      if (!floor || !floors.has(floor.floor_id)) {
        return false;
      }
    }
@@ -14,6 +14,7 @@ export type LocalizeKeys =
  | `ui.card.weather.attributes.${string}`
  | `ui.card.weather.cardinal_direction.${string}`
  | `ui.card.lawn_mower.actions.${string}`
+  | `ui.common.${string}`
  | `ui.components.calendar.event.rrule.${string}`
  | `ui.components.selectors.file.${string}`
  | `ui.components.logbook.messages.detected_device_classes.${string}`
@@ -26,6 +27,7 @@ export type LocalizeKeys =
  | `ui.dialogs.unsupported.reasons.${string}`
  | `ui.panel.config.${string}.${"caption" | "description"}`
  | `ui.panel.config.dashboard.${string}`
+  | `ui.panel.config.storage.segments.${string}`
  | `ui.panel.config.zha.${string}`
  | `ui.panel.config.zwave_js.${string}`
  | `ui.panel.lovelace.card.${string}`
@@ -39,6 +39,7 @@ export type CustomLegendOption = ECOption["legend"] & {
  type: "custom";
  data?: {
    id?: string;
+    secondaryIds?: string[]; // Other dataset IDs that should be controlled by this legend item.
    name: string;
    itemStyle?: Record<string, any>;
  }[];
@@ -181,6 +182,10 @@ export class HaChartBase extends LitElement {
      return;
    }
    let chartOptions: ECOption = {};
+    if (changedProps.has("options")) {
+      // Separate 'if' from below since this must updated before _getSeries()
+      this._updateHiddenStatsFromOptions(this.options);
+    }
    if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
      chartOptions.series = this._getSeries();
    }
@@ -451,14 +456,7 @@ export class HaChartBase extends LitElement {
        });
      }

-      const legend = ensureArray(this.options?.legend || [])[0] as
-        | LegendComponentOption
-        | undefined;
-      Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
-        if (selected === false) {
-          this._hiddenDatasets.add(stat);
-        }
-      });
+      this._updateHiddenStatsFromOptions(this.options);

      this.chart.setOption({
        ...this._createOptions(),
@@ -469,6 +467,42 @@ export class HaChartBase extends LitElement {
    }
  }

+  // Return an array of all IDs associated with the legend item of the primaryId
+  private _getAllIdsFromLegend(
+    options: ECOption | undefined,
+    primaryId: string
+  ): string[] {
+    if (!options) return [primaryId];
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+
+    let customLegendItem;
+    if (legend?.type === "custom") {
+      customLegendItem = (legend as CustomLegendOption).data?.find(
+        (li) => typeof li === "object" && li.id === primaryId
+      );
+    }
+
+    return [primaryId, ...(customLegendItem?.secondaryIds || [])];
+  }
+
+  // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
+  // No known need to remove items at this time.
+  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
+    if (!options) return;
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+    Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
+      if (selected === false) {
+        this._getAllIdsFromLegend(options, stat).forEach((id) =>
+          this._hiddenDatasets.add(id)
+        );
+      }
+    });
+  }
+
  private _getDataZoomConfig(): DataZoomComponentOption | undefined {
    const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
      | XAXisOption
@@ -844,10 +878,14 @@ export class HaChartBase extends LitElement {
    }
    const id = ev.currentTarget?.id;
    if (this._hiddenDatasets.has(id)) {
-      this._hiddenDatasets.delete(id);
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.delete(i)
+      );
      fireEvent(this, "dataset-unhidden", { id });
    } else {
-      this._hiddenDatasets.add(id);
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.add(i)
+      );
      fireEvent(this, "dataset-hidden", { id });
    }
    this.requestUpdate("_hiddenDatasets");
@@ -18,7 +18,6 @@ export interface Node {
  value: number;
  index: number; // like z-index but for x/y
  label?: string;
-  tooltip?: string;
  color?: string;
  passThrough?: boolean;
 }
@@ -101,7 +101,7 @@ export class StateHistoryChartTimeline extends LitElement {
        fill: api.value(4) as string,
      },
    };
-    const text = api.value(3) as string;
+    const text = (api.value(3) as string).replaceAll("\n", " ");
    const textWidth = measureTextWidth(text, 12);
    const LABEL_PADDING = 4;
    if (textWidth < rectShape.width - LABEL_PADDING * 2) {
@@ -97,9 +97,6 @@ class HaAlert extends LitElement {
      content: "";
      border-radius: 4px;
    }
-    .icon {
-      z-index: 1;
-    }
    .icon.no-title {
      align-self: center;
    }
@@ -122,10 +119,11 @@ class HaAlert extends LitElement {
    .main-content {
      overflow-wrap: anywhere;
      word-break: break-word;
+      line-height: normal;
      margin-left: 8px;
      margin-right: 0;
      margin-inline-start: 8px;
-      margin-inline-end: 0;
+      margin-inline-end: 8px;
    }
    .title {
      margin-top: 2px;
@@ -3,11 +3,15 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-import { STATE_ATTRIBUTES } from "../data/entity_attributes";
+import {
+  STATE_ATTRIBUTES,
+  STATE_ATTRIBUTES_DOMAIN_CLASS,
+} from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-attribute-value";
 import "./ha-expansion-panel";
+import { computeStateDomain } from "../common/entity/compute_state_domain";

@customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -22,7 +26,12 @@ class HaAttributes extends LitElement {
  private get _filteredAttributes() {
    return this._computeDisplayAttributes(
      STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : []
+        this.extraFilters ? this.extraFilters.split(",") : [],
+        (this.stateObj &&
+          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
+            this.stateObj.attributes?.device_class
+          ]) ||
+          []
      )
    );
  }
@@ -1,7 +1,7 @@
 import { mdiChevronUp } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";

@@ -16,12 +16,20 @@ export class HaAutomationRow extends LitElement {
  @property({ type: Boolean, reflect: true })
  public selected = false;

+  @property({ type: Boolean, reflect: true, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  @property({ type: Boolean, reflect: true, attribute: "building-block" })
  public buildingBlock = false;

+  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
+
+  @query(".row")
+  private _rowElement?: HTMLDivElement;
+
  protected render(): TemplateResult {
    return html`
      <div
@@ -66,15 +74,69 @@ export class HaAutomationRow extends LitElement {
    if (ev.defaultPrevented) {
      return;
    }
-    if (ev.key !== "Enter" && ev.key !== " ") {
+
+    if (
+      ev.key !== "Enter" &&
+      ev.key !== " " &&
+      !(
+        (this.sortSelected || ev.altKey) &&
+        !(ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
+        (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+      ) &&
+      !(
+        (ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
+        !ev.altKey &&
+        (ev.key === "c" ||
+          ev.key === "x" ||
+          ev.key === "Delete" ||
+          ev.key === "Backspace")
+      )
+    ) {
      return;
    }
    ev.preventDefault();
    ev.stopPropagation();

+    if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+      if (ev.key === "ArrowUp") {
+        fireEvent(this, "move-up");
+        return;
+      }
+      fireEvent(this, "move-down");
+      return;
+    }
+    if (this.sortSelected && (ev.key === "Enter" || ev.key === " ")) {
+      fireEvent(this, "stop-sort-selection");
+      return;
+    }
+
+    if (ev.ctrlKey || ev.metaKey) {
+      if (ev.key === "c") {
+        fireEvent(this, "copy-row");
+        return;
+      }
+      if (ev.key === "x") {
+        fireEvent(this, "cut-row");
+        return;
+      }
+
+      if (ev.key === "Delete" || ev.key === "Backspace") {
+        fireEvent(this, "delete-row");
+        return;
+      }
+    }
+
    this.click();
  }

+  public focus() {
+    requestAnimationFrame(() => {
+      this._rowElement?.focus();
+    });
+  }
+
  static styles = css`
    :host {
      display: block;
@@ -97,6 +159,7 @@ export class HaAutomationRow extends LitElement {
    .expand-button {
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--ha-color-on-neutral-quiet);
+      margin-left: -8px;
    }
    :host([building-block]) .leading-icon-wrapper {
      background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -134,6 +197,22 @@ export class HaAutomationRow extends LitElement {
      overflow-wrap: anywhere;
      margin: 0 12px;
    }
+    :host([sort-selected]) .row {
+      outline: solid;
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
+    }
+    .row:hover {
+      background-color: rgba(var(--rgb-primary-text-color), 0.04);
+    }
+    :host([highlight]) .row {
+      background-color: rgba(var(--rgb-primary-color), 0.08);
+    }
+    :host([highlight]) .row:hover {
+      background-color: rgba(var(--rgb-primary-color), 0.16);
+    }
  `;
 }

@@ -144,5 +223,9 @@ declare global {

  interface HASSDomEvents {
    "toggle-collapsed": undefined;
+    "stop-sort-selection": undefined;
+    "copy-row": undefined;
+    "cut-row": undefined;
+    "delete-row": undefined;
  }
 }
@@ -0,0 +1,272 @@
+import { css, html, LitElement } from "lit";
+import { customElement, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../common/dom/fire_event";
+
+const ANIMATION_DURATION_MS = 300;
+
+/**
+ * A bottom sheet component that slides up from the bottom of the screen.
+ *
+ * The bottom sheet provides a draggable interface that allows users to resize
+ * the sheet by dragging the handle at the top. It supports both mouse and touch
+ * interactions and automatically closes when dragged below a 20% of screen height.
+ *
+ * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
+ *
+ * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
+ * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
+ * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
+ */
+@customElement("ha-bottom-sheet")
+export class HaBottomSheet extends LitElement {
+  @query("dialog") private _dialog!: HTMLDialogElement;
+
+  private _dragging = false;
+
+  private _dragStartY = 0;
+
+  private _initialSize = 0;
+
+  @state() private _dialogMaxViewpointHeight = 70;
+
+  @state() private _dialogMinViewpointHeight = 55;
+
+  @state() private _dialogViewportHeight?: number;
+
+  render() {
+    return html`<dialog
+      open
+      @transitionend=${this._handleTransitionEnd}
+      style=${styleMap({
+        height: this._dialogViewportHeight
+          ? `${this._dialogViewportHeight}vh`
+          : "auto",
+        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        minHeight: `${this._dialogMinViewpointHeight}vh`,
+      })}
+    >
+      <div class="handle-wrapper">
+        <div
+          @mousedown=${this._handleMouseDown}
+          @touchstart=${this._handleTouchStart}
+          class="handle"
+        ></div>
+      </div>
+      <slot></slot>
+    </dialog>`;
+  }
+
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this._openSheet();
+  }
+
+  private _openSheet() {
+    requestAnimationFrame(() => {
+      // trigger opening animation
+      this._dialog.classList.add("show");
+    });
+  }
+
+  public closeSheet() {
+    requestAnimationFrame(() => {
+      this._dialog.classList.remove("show");
+    });
+  }
+
+  private _handleTransitionEnd() {
+    if (this._dialog.classList.contains("show")) {
+      // after show animation is done
+      // - set the height to the natural height, to prevent content shift when switch content
+      // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh
+      this._dialogViewportHeight =
+        (this._dialog.offsetHeight / window.innerHeight) * 100;
+      this._dialogMaxViewpointHeight = 90;
+      this._dialogMinViewpointHeight = 20;
+    } else {
+      // after close animation is done close dialog element and fire closed event
+      this._dialog.close();
+      fireEvent(this, "bottom-sheet-closed");
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // register event listeners for drag handling
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+    document.addEventListener("touchmove", this._handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", this._handleTouchEnd);
+    document.addEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // unregister event listeners for drag handling
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    document.removeEventListener("touchmove", this._handleTouchMove);
+    document.removeEventListener("touchend", this._handleTouchEnd);
+    document.removeEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  private _handleMouseDown = (ev: MouseEvent) => {
+    this._startDrag(ev.clientY);
+  };
+
+  private _handleTouchStart = (ev: TouchEvent) => {
+    // Prevent the browser from interpreting this as a scroll/PTR gesture.
+    ev.preventDefault();
+    this._startDrag(ev.touches[0].clientY);
+  };
+
+  private _startDrag(clientY: number) {
+    this._dragging = true;
+    this._dragStartY = clientY;
+    this._initialSize = (this._dialog.offsetHeight / window.innerHeight) * 100;
+    document.body.style.setProperty("cursor", "grabbing");
+  }
+
+  private _handleMouseMove = (ev: MouseEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    this._updateSize(ev.clientY);
+  };
+
+  private _handleTouchMove = (ev: TouchEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    ev.preventDefault(); // Prevent scrolling
+    this._updateSize(ev.touches[0].clientY);
+  };
+
+  private _updateSize(clientY: number) {
+    const deltaY = this._dragStartY - clientY;
+    const viewportHeight = window.innerHeight;
+    const deltaVh = (deltaY / viewportHeight) * 100;
+
+    // Calculate new size and clamp between 10vh and 90vh
+    let newSize = this._initialSize + deltaVh;
+    newSize = Math.max(10, Math.min(90, newSize));
+
+    // on drag down and below 20vh
+    if (newSize < 20 && deltaY < 0) {
+      this._endDrag();
+      this.closeSheet();
+      return;
+    }
+
+    this._dialogViewportHeight = newSize;
+  }
+
+  private _handleMouseUp = () => {
+    this._endDrag();
+  };
+
+  private _handleTouchEnd = () => {
+    this._endDrag();
+  };
+
+  private _endDrag() {
+    if (!this._dragging) {
+      return;
+    }
+    this._dragging = false;
+    document.body.style.removeProperty("cursor");
+  }
+
+  static styles = css`
+    .handle-wrapper {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding-bottom: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: grab;
+      touch-action: none;
+    }
+    .handle-wrapper .handle {
+      height: 20px;
+      width: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 7;
+      padding-bottom: 76px;
+    }
+    .handle-wrapper .handle::after {
+      content: "";
+      border-radius: 8px;
+      height: 4px;
+      background: var(--divider-color, #e0e0e0);
+      width: 80px;
+    }
+    .handle-wrapper .handle:active::after {
+      cursor: grabbing;
+    }
+    dialog {
+      height: auto;
+      max-height: 70vh;
+      min-height: 30vh;
+      background-color: var(
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
+      );
+      display: flex;
+      flex-direction: column;
+      top: 0;
+      inset-inline-start: 0;
+      position: fixed;
+      width: calc(100% - 4px);
+      max-width: 100%;
+      border: none;
+      box-shadow: var(--wa-shadow-l);
+      padding: 0;
+      margin: 0;
+      top: auto;
+      inset-inline-end: auto;
+      bottom: 0;
+      inset-inline-start: 0;
+      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
+      border-top-left-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      border-top-right-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      transform: translateY(100%);
+      transition: transform ${ANIMATION_DURATION_MS}ms ease;
+      border-top-width: var(--ha-bottom-sheet-border-width);
+      border-right-width: var(--ha-bottom-sheet-border-width);
+      border-left-width: var(--ha-bottom-sheet-border-width);
+      border-bottom-width: 0;
+      border-style: var(--ha-bottom-sheet-border-style);
+      border-color: var(--ha-bottom-sheet-border-color);
+    }
+
+    dialog.show {
+      transform: translateY(0);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-bottom-sheet": HaBottomSheet;
+  }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
+}
@@ -148,6 +148,10 @@ export class HaDialog extends DialogBase {
        white-space: nowrap;
        display: block;
        padding-left: 4px;
+        padding-right: 4px;
+        margin-right: 12px;
+        margin-inline-end: 12px;
+        margin-inline-start: initial;
      }
      .header_button {
        text-decoration: none;
@@ -1,8 +1,8 @@
-import SlAnimation from "@shoelace-style/shoelace/dist/components/animation/animation.component";
+import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";

@customElement("ha-fade-in")
-export class HaFadeIn extends SlAnimation {
+export class HaFadeIn extends WaAnimation {
  @property() public name = "fadeIn";

  @property() public fill: FillMode = "both";
@@ -329,9 +329,8 @@ export class HaFilterFloorAreas extends LitElement {
        }
        .subdir {
          margin-inline-end: 8px;
-          opacity: .6;
+          opacity: 0.6;
        }
-        .
      `,
    ];
  }
@@ -6,8 +6,9 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
 import type { IntegrationManifest } from "../data/integration";
-import { fetchIntegrationManifests } from "../data/integration";
+import { fetchIntegrationManifests, domainToName } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
@@ -63,7 +64,12 @@ export class HaFilterIntegrations extends LitElement {
                multi
              >
                ${repeat(
-                  this._integrations(this._manifests, this._filter, this.value),
+                  this._integrations(
+                    this.hass.localize,
+                    this._manifests,
+                    this._filter,
+                    this.value
+                  ),
                  (i) => i.domain,
                  (integration) =>
                    html`<ha-check-list-item
@@ -79,7 +85,7 @@ export class HaFilterIntegrations extends LitElement {
                        .domain=${integration.domain}
                        brand-fallback
                      ></ha-domain-icon>
-                      ${integration.name || integration.domain}
+                      ${integration.name}
                    </ha-check-list-item>`
                )}
              </ha-list> `
@@ -108,11 +114,21 @@ export class HaFilterIntegrations extends LitElement {

  protected async firstUpdated() {
    this._manifests = await fetchIntegrationManifests(this.hass);
+    this.hass.loadBackendTranslation("title");
  }

  private _integrations = memoizeOne(
-    (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
+    (
+      localize: LocalizeFunc,
+      manifest: IntegrationManifest[],
+      filter: string | undefined,
+      _value
+    ) =>
      manifest
+        .map((mnfst) => ({
+          ...mnfst,
+          name: domainToName(localize, mnfst.domain, mnfst),
+        }))
        .filter(
          (mnfst) =>
            (!mnfst.integration_type ||
@@ -124,11 +140,7 @@ export class HaFilterIntegrations extends LitElement {
              mnfst.domain.toLowerCase().includes(filter))
        )
        .sort((a, b) =>
-          stringCompare(
-            a.name || a.domain,
-            b.name || b.domain,
-            this.hass.locale.language
-          )
+          stringCompare(a.name, b.name, this.hass.locale.language)
        )
  );

@@ -393,10 +393,13 @@ export class HaItemDisplayEditor extends LitElement {
      --md-list-item-one-line-container-height: 48px;
    }
    ha-md-list-item.drag-selected {
-      box-shadow:
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
      border-radius: 8px;
+      outline: solid;
+      outline-color: rgba(var(--rgb-accent-color), 0.6);
+      outline-offset: -2px;
+      outline-width: 2px;
+      background-color: rgba(var(--rgb-accent-color), 0.08);
    }
    ha-md-list-item ha-icon-button {
      margin-left: -12px;
@@ -16,9 +16,23 @@ export class HaMdButtonMenu extends LitElement {

  @property() public positioning?: "fixed" | "absolute" | "popover";

+  @property({ attribute: "anchor-corner" }) public anchorCorner:
+    | "start-start"
+    | "start-end"
+    | "end-start"
+    | "end-end" = "end-start";
+
+  @property({ attribute: "menu-corner" }) public menuCorner:
+    | "start-start"
+    | "start-end"
+    | "end-start"
+    | "end-end" = "start-start";
+
  @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
    false;

+  @property({ type: Boolean }) public quick = false;
+
  @query("ha-md-menu", true) private _menu!: HaMdMenu;

  public get items() {
@@ -39,8 +53,11 @@ export class HaMdButtonMenu extends LitElement {
        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
      </div>
      <ha-md-menu
+        .quick=${this.quick}
        .positioning=${this.positioning}
        .hasOverflow=${this.hasOverflow}
+        .anchorCorner=${this.anchorCorner}
+        .menuCorner=${this.menuCorner}
        @opening=${this._handleOpening}
        @closing=${this._handleClosing}
      >
@@ -159,6 +159,7 @@ export class HaMdDialog extends Dialog {
        --md-dialog-headline-size: var(--ha-font-size-xl);
        --md-dialog-supporting-text-size: var(--ha-font-size-m);
        --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
+        --md-divider-color: var(--divider-color);
      }

      :host([type="alert"]) {
@@ -1,4 +1,4 @@
-import { mdiStar } from "@mdi/js";
+import { mdiInformationOutline, mdiStar } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -71,6 +71,17 @@ export class HaNetwork extends LitElement {
        <span slot="description" data-for="auto_configure">
          ${this.hass.localize("ui.panel.config.network.adapter.detected")}:
          ${format_auto_detected_interfaces(this.networkConfig.adapters)}
+          ${!configured_adapters.length
+            ? html`<div class="info-text">
+                <ha-svg-icon
+                  .path=${mdiInformationOutline}
+                  class="info-icon"
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.network.adapter.auto_configure_manual_hint"
+                )}
+              </div>`
+            : nothing}
        </span>
      </ha-settings-row>
      ${configured_adapters.length || this._expanded
@@ -171,6 +182,21 @@ export class HaNetwork extends LitElement {
        span[slot="description"] {
          cursor: pointer;
        }
+
+        .info-text {
+          display: flex;
+          align-items: center;
+          margin-top: 8px;
+          color: var(--secondary-text-color);
+        }
+
+        .info-icon {
+          width: 18px;
+          height: 18px;
+          color: var(--info-color, var(--primary-color));
+          margin-right: 8px;
+          flex-shrink: 0;
+        }
      `,
    ];
  }
@@ -1,12 +1,21 @@
-import ProgressRing from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component";
-import progressRingStyles from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.styles";
+import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring";
 import { css } from "lit";
+import type { CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
+import { StateSet } from "../resources/polyfills/stateset";

@customElement("ha-progress-ring")
 export class HaProgressRing extends ProgressRing {
  @property() public size?: "tiny" | "small" | "medium" | "large";

+  attachInternals() {
+    const internals = super.attachInternals();
+    Object.defineProperty(internals, "states", {
+      value: new StateSet(this, internals.states),
+    });
+    return internals;
+  }
+
  public updated(changedProps) {
    super.updated(changedProps);

@@ -31,24 +40,26 @@ export class HaProgressRing extends ProgressRing {
    }
  }

-  static override styles = [
-    progressRingStyles,
-    css`
-      :host {
-        --indicator-color: var(
-          --ha-progress-ring-indicator-color,
-          var(--primary-color)
-        );
-        --track-color: var(
-          --ha-progress-ring-divider-color,
-          var(--divider-color)
-        );
-        --track-width: 4px;
-        --speed: 3.5s;
-        --size: var(--ha-progress-ring-size, 48px);
-      }
-    `,
-  ];
+  static get styles(): CSSResultGroup {
+    return [
+      ProgressRing.styles,
+      css`
+        :host {
+          --indicator-color: var(
+            --ha-progress-ring-indicator-color,
+            var(--primary-color)
+          );
+          --track-color: var(
+            --ha-progress-ring-divider-color,
+            var(--divider-color)
+          );
+          --track-width: 4px;
+          --speed: 3.5s;
+          --size: var(--ha-progress-ring-size, 48px);
+        }
+      `,
+    ];
+  }
 }

 declare global {
@@ -3,6 +3,7 @@ import {
  mdiDevices,
  mdiPaletteSwatch,
  mdiTextureBox,
+  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -266,7 +267,9 @@ export class HaRelatedItems extends LitElement {
                  <a href="/config/devices/device/${relatedDeviceId}">
                    <ha-list-item hasMeta graphic="icon">
                      <ha-svg-icon
-                        .path=${mdiDevices}
+                        .path=${device.entry_type === "service"
+                          ? mdiTransitConnectionVariant
+                          : mdiDevices}
                        slot="graphic"
                      ></ha-svg-icon>
                      ${device.name_by_user || device.name}
@@ -0,0 +1,152 @@
+import type { TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import "./ha-tooltip";
+
+export interface Segment {
+  value: number;
+  color: string;
+  label?: TemplateResult | string;
+}
+
+@customElement("ha-segmented-bar")
+class HaSegmentedBar extends LitElement {
+  @property({ attribute: false }) public segments!: Segment[];
+
+  @property({ type: String }) public heading!: string;
+
+  @property({ type: String }) public description?: string;
+
+  @property({ type: Boolean, attribute: "hide-legend" })
+  public hideLegend = false;
+
+  @property({ type: Boolean, attribute: "hide-tooltip" })
+  public hideTooltip = false;
+
+  protected render(): TemplateResult {
+    const totalValue = this.segments.reduce(
+      (acc, segment) => acc + segment.value,
+      0
+    );
+    return html`
+      <div class="container">
+        <div class="heading">
+          <div class="title">
+            <span>${this.heading}</span>
+            <span>${this.description}</span>
+          </div>
+          <slot name="extra"></slot>
+        </div>
+        <div class="bar">
+          ${this.segments.map((segment) => {
+            const bar = html`<div
+              style=${styleMap({
+                width: `${(segment.value / totalValue) * 100}%`,
+                backgroundColor: segment.color,
+              })}
+            ></div>`;
+            return this.hideTooltip && !segment.label
+              ? bar
+              : html`
+                  <ha-tooltip>
+                    <span slot="content">${segment.label}</span>
+                    ${bar}
+                  </ha-tooltip>
+                `;
+          })}
+        </div>
+        ${this.hideLegend
+          ? nothing
+          : html`
+              <ul class="legend">
+                ${this.segments.map((segment) =>
+                  segment.label
+                    ? html`
+                        <li>
+                          <div
+                            class="bullet"
+                            style=${styleMap({
+                              backgroundColor: segment.color,
+                            })}
+                          ></div>
+                          <span class="label">${segment.label}</span>
+                        </li>
+                      `
+                    : nothing
+                )}
+              </ul>
+            `}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    .container {
+      width: 100%;
+    }
+    .heading {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+    }
+    .heading .title {
+      flex: 1;
+    }
+    .heading .title span {
+      color: var(--secondary-text-color);
+      line-height: var(--ha-line-height-expanded);
+      margin-right: 8px;
+    }
+    .heading .title span:first-child {
+      color: var(--primary-text-color);
+    }
+    .bar {
+      display: flex;
+      overflow: hidden;
+      border-radius: var(--ha-bar-border-radius, 4px);
+      width: 100%;
+      height: 12px;
+      margin: 2px 0;
+      background-color: var(
+        --ha-bar-background-color,
+        var(--secondary-background-color)
+      );
+    }
+    .bar div {
+      height: 100%;
+    }
+    .bar div:hover {
+      opacity: 0.8;
+    }
+    .legend {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin: 12px 0;
+      padding: 0;
+      list-style: none;
+    }
+    .legend li {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: var(--ha-font-size-s);
+    }
+    .legend li .bullet {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+    .spacer {
+      flex: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-segmented-bar": HaSegmentedBar;
+  }
+}
@@ -1,7 +1,7 @@
 import { consume, ContextProvider } from "@lit/context";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fullEntitiesContext } from "../../data/context";
 import {
@@ -13,6 +13,7 @@ import { migrateAutomationAction } from "../../data/script";
 import type { ActionSelector } from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import "../../panels/config/automation/action/ha-automation-action";
+import type HaAutomationAction from "../../panels/config/automation/action/ha-automation-action";
 import type { HomeAssistant } from "../../types";

@customElement("ha-selector-action")
@@ -35,6 +36,9 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {

  @state() private _entitiesContext;

+  @query("ha-automation-action")
+  private _actionElement?: HaAutomationAction;
+
  protected hassSubscribeRequiredHostProps = ["_entitiesContext"];

  private _actions = memoizeOne((action: Action | undefined) => {
@@ -61,6 +65,14 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
    ];
  }

+  public expandAll() {
+    this._actionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._actionElement?.collapseAll();
+  }
+
  protected render() {
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -77,12 +89,12 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
  static styles = css`
    ha-automation-action {
      display: block;
-      margin-bottom: 16px;
    }
    label {
      display: block;
      margin-bottom: 4px;
      font-weight: var(--ha-font-weight-medium);
+      color: var(--secondary-text-color);
    }
  `;
 }
@@ -1,8 +1,9 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import type { Condition } from "../../data/automation";
 import type { ConditionSelector } from "../../data/selector";
 import "../../panels/config/automation/condition/ha-automation-condition";
+import type HaAutomationCondition from "../../panels/config/automation/condition/ha-automation-condition";
 import type { HomeAssistant } from "../../types";

@customElement("ha-selector-condition")
@@ -19,6 +20,9 @@ export class HaConditionSelector extends LitElement {

  @property({ type: Boolean, reflect: true }) public disabled = false;

+  @query("ha-automation-condition")
+  private _conditionElement?: HaAutomationCondition;
+
  protected render() {
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -32,6 +36,14 @@ export class HaConditionSelector extends LitElement {
    `;
  }

+  public expandAll() {
+    this._conditionElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._conditionElement?.collapseAll();
+  }
+
  static styles = css`
    ha-automation-condition {
      display: block;
@@ -41,6 +53,7 @@ export class HaConditionSelector extends LitElement {
      display: block;
      margin-bottom: 4px;
      font-weight: var(--ha-font-weight-medium);
+      color: var(--secondary-text-color);
    }
  `;
 }
@@ -18,6 +18,7 @@ import "../ha-alert";
 import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
+import { ensureArray } from "../../common/array/ensure-array";

 const MANUAL_SCHEMA = [
  { name: "media_content_id", required: false, selector: { text: {} } },
@@ -44,9 +45,25 @@ export class HaMediaSelector extends LitElement {

  @property({ type: Boolean, reflect: true }) public required = true;

+  @property({ attribute: false }) public context?: {
+    filter_entity?: string | string[];
+  };
+
  @state() private _thumbnailUrl?: string | null;

+  private _contextEntities: string[] | undefined;
+
+  private get _hasAccept(): boolean {
+    return !!this.selector?.media?.accept?.length;
+  }
+
  willUpdate(changedProps: PropertyValues<this>) {
+    if (changedProps.has("context")) {
+      if (!this._hasAccept) {
+        this._contextEntities = ensureArray(this.context?.filter_entity);
+      }
+    }
+
    if (changedProps.has("value")) {
      const thumbnail = this.value?.metadata?.thumbnail;
      const oldThumbnail = (changedProps.get("value") as this["value"])
@@ -79,24 +96,23 @@ export class HaMediaSelector extends LitElement {
  }

  protected render() {
-    const stateObj = this.value?.entity_id
-      ? this.hass.states[this.value.entity_id]
-      : undefined;
+    const entityId = this._getActiveEntityId();
+
+    const stateObj = entityId ? this.hass.states[entityId] : undefined;

    const supportsBrowse =
-      !this.value?.entity_id ||
+      !entityId ||
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

-    const hasAccept = this.selector?.media?.accept?.length;
-
    return html`
-      ${hasAccept
+      ${this._hasAccept ||
+      (this._contextEntities && this._contextEntities.length <= 1)
        ? nothing
        : html`
            <ha-entity-picker
              .hass=${this.hass}
-              .value=${this.value?.entity_id}
+              .value=${entityId}
              .label=${this.label ||
              this.hass.localize(
                "ui.components.selectors.media.pick_media_player"
@@ -104,8 +120,10 @@ export class HaMediaSelector extends LitElement {
              .disabled=${this.disabled}
              .helper=${this.helper}
              .required=${this.required}
+              .hideClearIcon=${!!this._contextEntities}
              .includeDomains=${INCLUDE_DOMAINS}
-              allow-custom-entity
+              .includeEntities=${this._contextEntities}
+              .allowCustomEntity=${!this._contextEntities}
              @value-changed=${this._entityChanged}
            ></ha-entity-picker>
          `}
@@ -121,6 +139,7 @@ export class HaMediaSelector extends LitElement {
              .data=${this.value || EMPTY_FORM}
              .schema=${MANUAL_SCHEMA}
              .computeLabel=${this._computeLabelCallback}
+              .computeHelper=${this._computeHelperCallback}
            ></ha-form>
          `
        : html`
@@ -133,7 +152,7 @@ export class HaMediaSelector extends LitElement {
                : this.value.metadata?.title || this.value.media_content_id}
              @click=${this._pickMedia}
              @keydown=${this._handleKeyDown}
-              class=${this.disabled || (!this.value?.entity_id && !hasAccept)
+              class=${this.disabled || (!entityId && !this._hasAccept)
                ? "disabled"
                : ""}
            >
@@ -193,21 +212,38 @@ export class HaMediaSelector extends LitElement {
  ): string =>
    this.hass.localize(`ui.components.selectors.media.${schema.name}`);

+  private _computeHelperCallback = (
+    schema: SchemaUnion<typeof MANUAL_SCHEMA>
+  ): string =>
+    this.hass.localize(`ui.components.selectors.media.${schema.name}_detail`);
+
  private _entityChanged(ev: CustomEvent) {
    ev.stopPropagation();
-    fireEvent(this, "value-changed", {
-      value: {
-        entity_id: ev.detail.value,
-        media_content_id: "",
-        media_content_type: "",
-      },
-    });
+    if (!this._hasAccept && this.context?.filter_entity) {
+      fireEvent(this, "value-changed", {
+        value: {
+          media_content_id: "",
+          media_content_type: "",
+          metadata: {
+            browse_entity_id: ev.detail.value,
+          },
+        },
+      });
+    } else {
+      fireEvent(this, "value-changed", {
+        value: {
+          entity_id: ev.detail.value,
+          media_content_id: "",
+          media_content_type: "",
+        },
+      });
+    }
  }

  private _pickMedia() {
    showMediaBrowserDialog(this, {
      action: "pick",
-      entityId: this.value?.entity_id,
+      entityId: this._getActiveEntityId(),
      navigateIds: this.value?.metadata?.navigateIds,
      accept: this.selector.media?.accept,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
@@ -225,6 +261,9 @@ export class HaMediaSelector extends LitElement {
                media_content_type: id.media_content_type,
                media_content_id: id.media_content_id,
              })),
+              ...(!this._hasAccept && this.context?.filter_entity
+                ? { browse_entity_id: this._getActiveEntityId() }
+                : {}),
            },
          },
        });
@@ -232,6 +271,15 @@ export class HaMediaSelector extends LitElement {
    });
  }

+  private _getActiveEntityId(): string | undefined {
+    const metaId = this.value?.metadata?.browse_entity_id;
+    return (
+      this.value?.entity_id ||
+      (metaId && this._contextEntities?.includes(metaId) && metaId) ||
+      this._contextEntities?.[0]
+    );
+  }
+
  private _handleKeyDown(ev: KeyboardEvent) {
    if (ev.key === "Enter" || ev.key === " ") {
      ev.preventDefault();
@@ -8,7 +8,6 @@ import type {
  LocalizeKeys,
 } from "../../common/translations/localize";
 import type { HomeAssistant } from "../../types";
-import "../ha-alert";
 import "../ha-form/ha-form";

 const SELECTOR_DEFAULTS = {
@@ -156,6 +155,8 @@ export class HaSelectorSelector extends LitElement {

  @property({ type: Boolean, reflect: true }) public disabled = false;

+  @property({ type: Boolean }) public narrow = false;
+
  @property({ type: Boolean, reflect: true }) public required = true;

  private _yamlMode = false;
@@ -172,10 +173,10 @@ export class HaSelectorSelector extends LitElement {
      [
        {
          name: "type",
+          required: true,
          selector: {
            select: {
              mode: "dropdown",
-              required: true,
              options: Object.keys(SELECTOR_SCHEMAS)
                .concat("manual")
                .map((key) => ({
@@ -228,17 +229,17 @@ export class HaSelectorSelector extends LitElement {

    const schema = this._schema(type, this.hass.localize);

-    return html`<ha-card>
-      <div class="card-content">
-        <p>${this.label ? this.label : ""}</p>
-        <ha-form
-          .hass=${this.hass}
-          .data=${data}
-          .schema=${schema}
-          .computeLabel=${this._computeLabelCallback}
-          @value-changed=${this._valueChanged}
-        ></ha-form></div
-    ></ha-card>`;
+    return html`<div>
+      <p>${this.label ? this.label : ""}</p>
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+        .narrow=${this.narrow}
+      ></ha-form>
+    </div>`;
  }

  private _valueChanged(ev: CustomEvent) {
@@ -285,23 +286,6 @@ export class HaSelectorSelector extends LitElement {
    ) || schema.name;

  static styles = css`
-    :host {
-      --expansion-panel-summary-padding: 0 16px;
-    }
-    ha-alert {
-      display: block;
-      margin-bottom: 16px;
-    }
-    ha-card {
-      margin: 0 0 16px 0;
-    }
-    ha-card.disabled {
-      pointer-events: none;
-      color: var(--disabled-text-color);
-    }
-    .card-content {
-      padding: 0px 16px 16px 16px;
-    }
    .title {
      font-size: var(--ha-font-size-l);
      padding-top: 16px;
@@ -15,6 +15,7 @@ declare global {
    "item-added": {
      index: number;
      data: any;
+      item: any;
    };
    "item-removed": {
      index: number;
@@ -180,6 +181,7 @@ export class HaSortable extends LitElement {
    fireEvent(this, "item-added", {
      index: evt.newIndex,
      data: evt.item.sortableData,
+      item: evt.item,
    });
  };

@@ -38,7 +38,7 @@ class MediaManageButton extends LitElement {
      return nothing;
    }
    return html`
-      <ha-button appearance="plain" size="small" @click=${this._manage}>
+      <ha-button appearance="filled" size="small" @click=${this._manage}>
        <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
        ${this.hass.localize(
          "ui.components.media-browser.file_management.manage"
@@ -91,6 +91,15 @@ export const isService = (key: string | undefined): boolean | undefined =>
 export const getService = (key: string): string =>
  key.substring(SERVICE_PREFIX.length);

+export const COLLAPSIBLE_ACTION_ELEMENTS = [
+  "ha-automation-action-choose",
+  "ha-automation-action-condition",
+  "ha-automation-action-if",
+  "ha-automation-action-parallel",
+  "ha-automation-action-repeat",
+  "ha-automation-action-sequence",
+];
+
 export const ACTION_BUILDING_BLOCKS = [
  "choose",
  "if",
@@ -7,10 +7,10 @@ import { navigate } from "../common/navigate";
 import { createSearchParam } from "../common/url/search-params";
 import type { Context, HomeAssistant } from "../types";
 import type { BlueprintInput } from "./blueprint";
-import type { DeviceCondition, DeviceTrigger } from "./device_automation";
-import type { Action, MODES } from "./script";
-import { migrateAutomationAction } from "./script";
 import { CONDITION_BUILDING_BLOCKS } from "./condition";
+import type { DeviceCondition, DeviceTrigger } from "./device_automation";
+import type { Action, Field, MODES } from "./script";
+import { migrateAutomationAction } from "./script";

 export const AUTOMATION_DEFAULT_MODE: (typeof MODES)[number] = "single";
 export const AUTOMATION_DEFAULT_MAX = 10;
@@ -513,6 +513,14 @@ export const isCondition = (config: unknown): boolean => {
  return "condition" in condition && typeof condition.condition === "string";
 };

+export const isScriptField = (config: unknown): boolean => {
+  if (!config || typeof config !== "object") {
+    return false;
+  }
+  const field = config as Record<string, unknown>;
+  return "field" in field && typeof field.field === "object";
+};
+
 export const subscribeTrigger = (
  hass: HomeAssistant,
  onChange: (result: {
@@ -546,3 +554,81 @@ export interface AutomationClipboard {
  condition?: Condition;
  action?: Action;
 }
+
+export interface BaseSidebarConfig {
+  delete: () => void;
+  close: (focus?: boolean) => void;
+}
+
+export interface TriggerSidebarConfig extends BaseSidebarConfig {
+  save: (value: Trigger) => void;
+  rename: () => void;
+  disable: () => void;
+  duplicate: () => void;
+  cut: () => void;
+  copy: () => void;
+  toggleYamlMode: () => void;
+  config: Trigger;
+  yamlMode: boolean;
+  uiSupported: boolean;
+}
+
+export interface ConditionSidebarConfig extends BaseSidebarConfig {
+  save: (value: Condition) => void;
+  rename: () => void;
+  disable: () => void;
+  test: () => void;
+  duplicate: () => void;
+  cut: () => void;
+  copy: () => void;
+  toggleYamlMode: () => void;
+  config: Condition;
+  yamlMode: boolean;
+  uiSupported: boolean;
+}
+
+export interface ActionSidebarConfig extends BaseSidebarConfig {
+  save: (value: Action) => void;
+  rename: () => void;
+  disable: () => void;
+  duplicate: () => void;
+  cut: () => void;
+  copy: () => void;
+  run: () => void;
+  toggleYamlMode: () => void;
+  config: {
+    action: Action;
+  };
+  yamlMode: boolean;
+  uiSupported: boolean;
+}
+
+export interface OptionSidebarConfig extends BaseSidebarConfig {
+  rename: () => void;
+  duplicate: () => void;
+  defaultOption?: boolean;
+}
+
+export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
+  save: (value: Field) => void;
+  config: {
+    field: Field;
+    selector: boolean;
+    key: string;
+    excludeKeys: string[];
+  };
+  toggleYamlMode: () => void;
+  yamlMode: boolean;
+}
+
+export type SidebarConfig =
+  | TriggerSidebarConfig
+  | ConditionSidebarConfig
+  | ActionSidebarConfig
+  | OptionSidebarConfig
+  | ScriptFieldSidebarConfig;
+
+export interface ShowAutomationEditorParams {
+  data?: Partial<AutomationConfig>;
+  expanded?: boolean;
+}
@@ -378,7 +378,17 @@ const tryDescribeTrigger = (

  // Tag Trigger
  if (trigger.trigger === "tag") {
-    return hass.localize(`${triggerTranslationBaseKey}.tag.description.full`);
+    const entity = Object.values(hass.states).find(
+      (state) =>
+        state.entity_id.startsWith("tag.") &&
+        state.attributes.tag_id === trigger.tag_id
+    );
+    return entity
+      ? hass.localize(
+          `${triggerTranslationBaseKey}.tag.description.known_tag`,
+          { tag_name: computeStateName(entity) }
+        )
+      : hass.localize(`${triggerTranslationBaseKey}.tag.description.full`);
  }

  // Time Trigger
@@ -24,11 +24,14 @@ export interface BluetoothConnectionData extends DataTableRowData {
  source: string;
 }

+export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
+
 export interface BluetoothScannerDetails {
  source: string;
  connectable: boolean;
  name: string;
  adapter: string;
+  scanner_type?: HaScannerType;
 }

 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -55,6 +58,13 @@ export interface BluetoothAllocationsData {
  allocated: string[];
 }

+export interface BluetoothScannerState {
+  source: string;
+  adapter: string;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
+}
+
 export const subscribeBluetoothScannersDetailsUpdates = (
  conn: Connection,
  store: Store<BluetoothScannersDetails>
@@ -170,3 +180,20 @@ export const subscribeBluetoothConnectionAllocations = (
    params
  );
 };
+
+export const subscribeBluetoothScannerState = (
+  conn: Connection,
+  callbackFunction: (scannerState: BluetoothScannerState) => void,
+  configEntryId?: string
+): Promise<() => Promise<void>> => {
+  const params: { type: string; config_entry_id?: string } = {
+    type: "bluetooth/subscribe_scanner_state",
+  };
+  if (configEntryId) {
+    params.config_entry_id = configEntryId;
+  }
+  return conn.subscribeMessage<BluetoothScannerState>(
+    (scannerState) => callbackFunction(scannerState),
+    params
+  );
+};
@@ -52,3 +52,9 @@ export const CONDITION_GROUPS: AutomationElementGroup = {
 } as const;

 export const CONDITION_BUILDING_BLOCKS = ["and", "or", "not"];
+
+export const COLLAPSIBLE_CONDITION_ELEMENTS = [
+  "ha-automation-condition-and",
+  "ha-automation-condition-not",
+  "ha-automation-condition-or",
+];
@@ -42,6 +42,19 @@ export const getSubEntries = (hass: HomeAssistant, entry_id: string) =>
    entry_id,
  });

+export const updateSubEntry = (
+  hass: HomeAssistant,
+  entry_id: string,
+  subentry_id: string,
+  updatedValues: SubEntryMutableParams
+) =>
+  hass.callWS({
+    type: "config_entries/subentries/update",
+    entry_id,
+    subentry_id,
+    ...updatedValues,
+  });
+
 export const deleteSubEntry = (
  hass: HomeAssistant,
  entry_id: string,
@@ -60,6 +73,8 @@ export type ConfigEntryMutableParams = Partial<
  >
 >;

+export type SubEntryMutableParams = Partial<Pick<SubEntry, "title">>;
+
 // https://github.com/home-assistant/core/blob/2286dea636fda001f03433ba14d7adbda43979e5/homeassistant/config_entries.py#L81
 export const ERROR_STATES: ConfigEntry["state"][] = [
  "migration_error",
@@ -97,6 +97,7 @@ export interface DataEntryFlowStepMenu {
  step_id: string;
  /** If array, use value to lookup translations in strings.json */
  menu_options: string[] | Record<string, string>;
+  sort?: boolean;
  description_placeholders?: Record<string, string>;
  translation_domain?: string;
 }
@@ -1,6 +1,7 @@
 import { formatDurationDigital } from "../common/datetime/format_duration";
 import type { FrontendLocaleData } from "./translation";

+// These attributes are hidden from the more-info window for all entities.
 export const STATE_ATTRIBUTES = [
  "entity_id",
  "assumed_state",
@@ -26,6 +27,14 @@ export const STATE_ATTRIBUTES = [
  "available_tones",
 ];

+// These attributes are hidden from the more-info window for entities of the
+// matching domain and device_class.
+export const STATE_ATTRIBUTES_DOMAIN_CLASS = {
+  sensor: {
+    enum: ["options"],
+  },
+};
+
 export const TEMPERATURE_ATTRIBUTES = new Set([
  "temperature",
  "current_temperature",
@@ -1 +1 @@
-export const strokeWidth = 5;
+export const strokeWidth = 2;
@@ -44,6 +44,14 @@ export interface DatadiskList {
  disks: Datadisk[];
 }

+export interface HostDisksUsage {
+  total_bytes?: number;
+  used_bytes: number;
+  id: string;
+  label: string;
+  children?: HostDisksUsage[];
+}
+
 export const fetchHassioHostInfo = async (
  hass: HomeAssistant
 ): Promise<HassioHostInfo> => {
@@ -180,3 +188,21 @@ export const listDatadisks = async (
    await hass.callApi<HassioResponse<DatadiskList>>("GET", "/os/datadisk/list")
  );
 };
+
+export const fetchHostDisksUsage = async (hass: HomeAssistant) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS<HostDisksUsage>({
+      type: "supervisor/api",
+      endpoint: "/host/disks/default/usage",
+      method: "get",
+      timeout: 3600, // seconds. This can take a while
+    });
+  }
+
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HostDisksUsage>>(
+      "GET",
+      "hassio/host/disks/default/usage"
+    )
+  );
+};
@@ -1,6 +1,7 @@
 import type { HASSDomEvent } from "../../common/dom/fire_event";

 export interface ActionHandlerOptions {
+  hasTap?: boolean;
  hasHold?: boolean;
  hasDoubleClick?: boolean;
  disabled?: boolean;
@@ -2,6 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import { firstWeekday } from "../common/datetime/first_weekday";

 export interface RecorderInfo {
  backlog: number | null;
@@ -108,7 +109,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
  };
 }

-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;

 export interface StatisticsUnitConfiguration {
  energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -211,7 +212,14 @@ export const fetchStatistic = (
              : period.fixed_period.end,
        }
      : undefined,
-    calendar: period.calendar,
+    calendar: period.calendar
+      ? {
+          ...(period.calendar.period === "week"
+            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
+            : {}),
+          ...period.calendar,
+        }
+      : undefined,
    rolling_window: period.rolling_window,
  });

@@ -11,8 +11,6 @@ import {
  union,
  array,
  assign,
-  literal,
-  is,
  boolean,
  refine,
 } from "superstruct";
@@ -68,17 +66,6 @@ export const serviceActionStruct: Describe<ServiceActionWithTemplate> = assign(
  })
 );

-const playMediaActionStruct: Describe<PlayMediaAction> = assign(
-  baseActionStruct,
-  object({
-    action: literal("media_player.play_media"),
-    target: optional(object({ entity_id: optional(string()) })),
-    entity_id: optional(string()),
-    data: object({ media_content_id: string(), media_content_type: string() }),
-    metadata: object(),
-  })
-);
-
 export interface ScriptEntity extends HassEntityBase {
  attributes: HassEntityAttributeBase & {
    last_triggered: string;
@@ -182,14 +169,6 @@ export interface WaitForTriggerAction extends BaseAction {
  continue_on_timeout?: boolean;
 }

-export interface PlayMediaAction extends BaseAction {
-  action: "media_player.play_media";
-  target?: { entity_id?: string };
-  entity_id?: string;
-  data: { media_content_id: string; media_content_type: string };
-  metadata: Record<string, unknown>;
-}
-
 export interface RepeatAction extends BaseAction {
  repeat: CountRepeat | WhileRepeat | UntilRepeat | ForEachRepeat;
 }
@@ -266,7 +245,6 @@ export type NonConditionAction =
  | ChooseAction
  | IfAction
  | VariablesAction
-  | PlayMediaAction
  | StopAction
  | SequenceAction
  | ParallelAction
@@ -291,7 +269,6 @@ export interface ActionTypes {
  wait_for_trigger: WaitForTriggerAction;
  variables: VariablesAction;
  service: ServiceAction;
-  play_media: PlayMediaAction;
  stop: StopAction;
  sequence: SequenceAction;
  parallel: ParallelAction;
@@ -398,11 +375,6 @@ export const getActionType = (action: Action): ActionType => {
    return "set_conversation_response";
  }
  if ("action" in action || "service" in action) {
-    if ("metadata" in action) {
-      if (is(action, playMediaActionStruct)) {
-        return "play_media";
-      }
-    }
    return "service";
  }
  return "unknown";
@@ -443,6 +415,31 @@ export const migrateAutomationAction = (
    delete action.scene;
  }

+  // legacy play media
+  if (
+    typeof action === "object" &&
+    action !== null &&
+    "action" in action &&
+    action.action === "media_player.play_media" &&
+    "data" in action &&
+    ((action.data as any)?.media_content_id ||
+      (action.data as any)?.media_content_type)
+  ) {
+    const oldData = { ...(action.data as any) };
+    const media = {
+      media_content_id: oldData.media_content_id,
+      media_content_type: oldData.media_content_type,
+      metadata: { ...(action.metadata || {}) },
+    };
+    delete action.metadata;
+    delete oldData.media_content_id;
+    delete oldData.media_content_type;
+    action.data = {
+      ...oldData,
+      media,
+    };
+  }
+
  if (typeof action === "object" && action !== null && "sequence" in action) {
    for (const sequenceAction of (action as SequenceAction).sequence) {
      migrateAutomationAction(sequenceAction);
@@ -26,7 +26,6 @@ import type {
  EventAction,
  IfAction,
  ParallelAction,
-  PlayMediaAction,
  RepeatAction,
  SequenceAction,
  SetConversationResponseAction,
@@ -303,27 +302,6 @@ const tryDescribeAction = <T extends ActionType>(
    });
  }

-  if (actionType === "play_media") {
-    const config = action as PlayMediaAction;
-    const entityId = config.target?.entity_id || config.entity_id;
-    const mediaStateObj = entityId ? hass.states[entityId] : undefined;
-    return hass.localize(
-      `${actionTranslationBaseKey}.play_media.description.full`,
-      {
-        hasMedia:
-          config.metadata.title || config.data.media_content_id
-            ? "true"
-            : "false",
-        media:
-          (config.metadata.title as string | undefined) ||
-          config.data.media_content_id,
-        hasMediaPlayer:
-          mediaStateObj || entityId !== undefined ? "true" : "false",
-        mediaPlayer: mediaStateObj ? computeStateName(mediaStateObj) : entityId,
-      }
-    );
-  }
-
  if (actionType === "wait_for_trigger") {
    const config = action as WaitForTriggerAction;
    const triggers = ensureArray(config.wait_for_trigger);
@@ -323,6 +323,7 @@ export interface MediaSelectorValue {
    media_class?: string;
    children_media_class?: string | null;
    navigateIds?: { media_content_type: string; media_content_id: string }[];
+    browse_entity_id?: string;
  };
 }

@@ -0,0 +1 @@
+export const SELECTOR_SELECTOR_BUILDING_BLOCKS = ["condition", "action"];
@@ -12,6 +12,7 @@ export interface Zone {
 }

 export interface HomeZoneMutableParams {
+  name?: string;
  latitude: number;
  longitude: number;
  radius: number;
@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
      );
    },

+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
    renderLoadingDescription(hass, reason, handler, step) {
      if (reason !== "loading_flow" && reason !== "loading_step") {
        return "";
@@ -137,6 +137,12 @@ export interface FlowConfig {
    option: string
  ): string;

+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
  renderLoadingDescription(
    hass: HomeAssistant,
    loadingReason: LoadingReason,
@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
        );
      },

+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
      renderLoadingDescription(hass, reason) {
        return (
          hass.localize(`component.${configEntry.domain}.options.loading`) ||
@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
      );
    },

+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
    renderLoadingDescription(hass, reason, handler, step) {
      if (reason !== "loading_flow" && reason !== "loading_step") {
        return "";
@@ -1,5 +1,5 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { stringCompare } from "../../common/string/compare";

@customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -17,9 +18,18 @@ class StepFlowMenu extends LitElement {

  @property({ attribute: false }) public step!: DataEntryFlowStepMenu;

+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this.hass.localize !== changedProps.get("hass")?.localize
+    );
+  }
+
  protected render(): TemplateResult {
    let options: string[];
    let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};

    if (Array.isArray(this.step.menu_options)) {
      options = this.step.menu_options;
@@ -30,10 +40,36 @@ class StepFlowMenu extends LitElement {
          this.step,
          option
        );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
      }
    } else {
      options = Object.keys(this.step.menu_options);
      translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
+    }
+
+    if (this.step.sort) {
+      options = options.sort((a, b) =>
+        stringCompare(
+          translations[a]!,
+          translations[b]!,
+          this.hass.locale.language
+        )
+      );
    }

    const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +82,18 @@ class StepFlowMenu extends LitElement {
      <div class="options">
        ${options.map(
          (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
              <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
              <ha-icon-next slot="meta"></ha-icon-next>
            </ha-list-item>
          `
@@ -73,11 +119,10 @@ class StepFlowMenu extends LitElement {
    css`
      .options {
        margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
      }
      .content {
        padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
      }
      .content + .options {
        margin-top: 8px;
@@ -0,0 +1,106 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-icon";
+import "../../components/ha-md-list";
+import "../../components/ha-md-list-item";
+import "../../components/ha-svg-icon";
+import type { HomeAssistant } from "../../types";
+import type { HassDialog } from "../make-dialog-manager";
+import type { ListItemsDialogParams } from "./show-list-items-dialog";
+
+@customElement("dialog-list-items")
+export class ListItemsDialog
+  extends LitElement
+  implements HassDialog<ListItemsDialogParams>
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _params?: ListItemsDialogParams;
+
+  public async showDialog(params: ListItemsDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _itemClicked(ev: CustomEvent): void {
+    const item = (ev.currentTarget as any).item;
+    if (!item) return;
+    item.action();
+    this._dialogClosed();
+  }
+
+  protected render() {
+    if (!this._params || !this.hass) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        .heading=${createCloseHeading(this.hass, this._params.title ?? " ")}
+        @closed=${this._dialogClosed}
+        hideActions
+      >
+        <div class="container">
+          <ha-md-list>
+            ${this._params.items.map(
+              (item) => html`
+                <ha-md-list-item
+                  type="button"
+                  @click=${this._itemClicked}
+                  .item=${item}
+                >
+                  ${item.iconPath
+                    ? html`
+                        <ha-svg-icon
+                          .path=${item.iconPath}
+                          slot="start"
+                          class="item-icon"
+                        ></ha-svg-icon>
+                      `
+                    : item.icon
+                      ? html`
+                          <ha-icon
+                            icon=${item.icon}
+                            slot="start"
+                            class="item-icon"
+                          ></ha-icon>
+                        `
+                      : nothing}
+                  <span class="headline">${item.label}</span>
+                  ${item.description
+                    ? html`
+                        <span class="supporting-text">${item.description}</span>
+                      `
+                    : nothing}
+                </ha-md-list-item>
+              `
+            )}
+          </ha-md-list>
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  static styles = css`
+    ha-dialog {
+      /* Place above other dialogs */
+      --dialog-z-index: 104;
+      --dialog-content-padding: 0;
+      --md-list-item-leading-space: 24px;
+      --md-list-item-trailing-space: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-list-items": ListItemsDialog;
+  }
+}
@@ -0,0 +1,24 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+interface ListItem {
+  icon?: string;
+  iconPath?: string;
+  label: string;
+  description?: string;
+  action: () => any;
+}
+
+export interface ListItemsDialogParams {
+  title?: string;
+  items: ListItem[];
+}
+
+export const showListItemsDialog = (
+  element: HTMLElement,
+  params: ListItemsDialogParams
+) =>
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-list-items",
+    dialogImport: () => import("./dialog-list-items"),
+    dialogParams: params,
+  });
@@ -3,11 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
+import "../../components/ha-dialog-header";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
-import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
-import "../../components/ha-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
@@ -52,7 +52,7 @@ class DialogBox extends LitElement {
      return nothing;
    }

-    const confirmPrompt = this._params.confirmation || this._params.prompt;
+    const confirmPrompt = this._params.confirmation || !!this._params.prompt;

    const dialogTitle =
      this._params.title ||
@@ -62,7 +62,7 @@ class DialogBox extends LitElement {
    return html`
      <ha-md-dialog
        open
-        .disableCancelAction=${confirmPrompt || false}
+        .disableCancelAction=${confirmPrompt}
        @closed=${this._dialogClosed}
        type="alert"
        aria-labelledby="dialog-box-title"
@@ -100,23 +100,22 @@ class DialogBox extends LitElement {
            : ""}
        </div>
        <div slot="actions">
-          ${confirmPrompt &&
-          html`
-            <ha-button
-              @click=${this._dismiss}
-              ?dialogInitialFocus=${!this._params.prompt &&
-              this._params.destructive}
-              appearance="plain"
-            >
-              ${this._params.dismissText
-                ? this._params.dismissText
-                : this.hass.localize("ui.common.cancel")}
-            </ha-button>
-          `}
+          ${confirmPrompt
+            ? html`
+                <ha-button
+                  @click=${this._dismiss}
+                  ?autofocus=${!this._params.prompt && this._params.destructive}
+                  appearance="plain"
+                >
+                  ${this._params.dismissText
+                    ? this._params.dismissText
+                    : this.hass.localize("ui.common.cancel")}
+                </ha-button>
+              `
+            : nothing}
          <ha-button
            @click=${this._confirm}
-            ?dialogInitialFocus=${!this._params.prompt &&
-            !this._params.destructive}
+            ?autofocus=${!this._params.prompt && !this._params.destructive}
            variant=${this._params.destructive ? "danger" : "brand"}
          >
            ${this._params.confirmText
@@ -6,7 +6,9 @@ import memoizeOne from "memoize-one";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -292,106 +294,101 @@ class MoreInfoWeather extends LitElement {
            </div>
          `
        : nothing}
-      ${forecast
-        ? html`
-            <div class="section">
-              ${this.hass.localize("ui.card.weather.forecast")}:
-            </div>
-            ${supportedForecasts.length > 1
-              ? html`<sl-tab-group
-                  @sl-tab-show=${this._handleForecastTypeChanged}
+
+      <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
+      ${supportedForecasts?.length > 1
+        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
+            ${supportedForecasts.map(
+              (forecastType) =>
+                html`<sl-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                >
-                  ${supportedForecasts.map(
-                    (forecastType) =>
-                      html`<sl-tab
-                        slot="nav"
-                        .panel=${forecastType}
-                        .active=${this._forecastType === forecastType}
-                      >
-                        ${this.hass!.localize(
-                          `ui.card.weather.${forecastType}`
-                        )}
-                      </sl-tab>`
-                  )}
-                </sl-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
+                </sl-tab>`
+            )}
+          </sl-tab-group>`
+        : nothing}
+      <div class="forecast">
+        ${forecast?.length
+          ? forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`
+                    <div>
                      <div>
-                        <div>
-                          ${dayNight
+                        ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                            ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
                                ${formatDateWeekdayShort(
                                  new Date(item.datetime),
                                  this.hass!.locale,
                                  this.hass!.config
                                )}
-                                <div class="daynight">
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
-                          ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
-                            `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
+                              `}
                      </div>
-                    `
-                  : nothing
-              )}
-            </div>
-          `
-        : nothing}
+                      ${this._showValue(item.condition)
+                        ? html`
+                            <div class="forecast-image-icon">
+                              ${getWeatherStateIcon(
+                                item.condition!,
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
+                            </div>
+                          `
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
      ${this.stateObj.attributes.attribution
        ? html`
            <div class="attribution">
@@ -589,6 +586,10 @@ class MoreInfoWeather extends LitElement {
        .forecast-icon {
          --mdc-icon-size: 40px;
        }
+
+        .forecast ha-spinner {
+          height: 120px;
+        }
      `,
    ];
  }
@@ -8,6 +8,7 @@ import {
  mdiPencil,
  mdiPencilOff,
  mdiPencilOutline,
+  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -311,6 +312,8 @@ export class MoreInfoDialog extends LitElement {
    const isAdmin = this.hass.user!.is_admin;

    const deviceId = this._getDeviceId();
+    const deviceType =
+      (deviceId && this.hass.devices[deviceId].entry_type) || "device";

    const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
    const isSpecificInitialView =
@@ -434,11 +437,18 @@ export class MoreInfoDialog extends LitElement {
                                @request-selected=${this._goToDevice}
                              >
                                ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.device_info"
+                                  "ui.dialogs.more_info_control.device_or_service_info",
+                                  {
+                                    type: this.hass.localize(
+                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
+                                    ),
+                                  }
                                )}
                                <ha-svg-icon
                                  slot="graphic"
-                                  .path=${mdiDevices}
+                                  .path=${deviceType === "service"
+                                    ? mdiTransitConnectionVariant
+                                    : mdiDevices}
                                ></ha-svg-icon>
                              </ha-list-item>
                            `
@@ -840,7 +840,9 @@ export class QuickBar extends LitElement {
    const additionalItems = [
      {
        path: "",
-        primaryText: this.hass.localize("ui.panel.config.info.shortcuts"),
+        primaryText: this.hass.localize(
+          "ui.dialogs.quick-bar.commands.navigation.shortcuts"
+        ),
        action: () => showShortcutsDialog(this),
        iconPath: mdiKeyboard,
      },
@@ -856,7 +858,9 @@ export class QuickBar extends LitElement {

  private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
    return Object.keys(this.hass.panels)
-      .filter((panelKey) => panelKey !== "_my_redirect")
+      .filter(
+        (panelKey) => panelKey !== "_my_redirect" && panelKey !== "hassio"
+      )
      .map((panelKey) => {
        const panel = this.hass.panels[panelKey];
        const translationKey = getPanelNameTranslationKey(panel);
@@ -1,121 +1,148 @@
+import { mdiAppleKeyboardCommand } from "@mdi/js";
 import { css, 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 type { HomeAssistant } from "../../types";
-import { haStyleDialog } from "../../resources/styles";
-import "../../components/ha-alert";
-import "../../components/chips/ha-assist-chip";
 import type { LocalizeKeys } from "../../common/translations/localize";
+import "../../components/ha-alert";
+import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { isMac } from "../../util/is_mac";

 interface Text {
-  type: "text";
-  key: LocalizeKeys;
+  textTranslationKey: LocalizeKeys;
 }

-type ShortcutString = string | { key: LocalizeKeys };
+interface LocalizedShortcut {
+  shortcutTranslationKey: LocalizeKeys;
+}
+
+type ShortcutString = string | LocalizedShortcut;

 interface Shortcut {
-  type: "shortcut";
  shortcut: ShortcutString[];
-  key: LocalizeKeys;
+  descriptionTranslationKey: LocalizeKeys;
 }

 interface Section {
-  key: LocalizeKeys;
+  titleTranslationKey: LocalizeKeys;
  items: (Text | Shortcut)[];
 }

+const CTRL_CMD = "__CTRL_CMD__";
+
 const _SHORTCUTS: Section[] = [
  {
-    key: "ui.dialogs.shortcuts.searching.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.searching.title",
    items: [
-      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
      {
-        type: "shortcut",
+        textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page",
+      },
+      {
        shortcut: ["C"],
-        key: "ui.dialogs.shortcuts.searching.search_command",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_command",
      },
      {
-        type: "shortcut",
        shortcut: ["E"],
-        key: "ui.dialogs.shortcuts.searching.search_entities",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_entities",
      },
      {
-        type: "shortcut",
        shortcut: ["D"],
-        key: "ui.dialogs.shortcuts.searching.search_devices",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_devices",
      },
      {
-        type: "text",
-        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+        textTranslationKey:
+          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
      },
      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
-        key: "ui.dialogs.shortcuts.searching.search_in_table",
+        shortcut: [CTRL_CMD, "F"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.searching.search_in_table",
      },
    ],
  },
  {
-    key: "ui.dialogs.shortcuts.assist.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.assist.title",
    items: [
      {
-        type: "shortcut",
        shortcut: ["A"],
-        key: "ui.dialogs.shortcuts.assist.open_assist",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist",
      },
    ],
  },
  {
-    key: "ui.dialogs.shortcuts.automation_script.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title",
    items: [
      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
-        key: "ui.dialogs.shortcuts.automation_script.paste",
+        shortcut: [CTRL_CMD, "C"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.copy",
      },
      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
-        key: "ui.dialogs.shortcuts.automation_script.save",
+        shortcut: [CTRL_CMD, "X"],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
      },
-    ],
-  },
-  {
-    key: "ui.dialogs.shortcuts.charts.title",
-    items: [
      {
-        type: "shortcut",
        shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
        ],
-        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.delete",
      },
      {
-        type: "shortcut",
-        shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
-        ],
-        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+        shortcut: [CTRL_CMD, "V"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.paste",
      },
      {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
-        key: "ui.dialogs.shortcuts.charts.double_click",
+        shortcut: [CTRL_CMD, "S"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.save",
      },
    ],
  },
  {
-    key: "ui.dialogs.shortcuts.other.title",
+    titleTranslationKey: "ui.dialogs.shortcuts.charts.title",
+    items: [
+      {
+        shortcut: [
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+      },
+      {
+        shortcut: [
+          CTRL_CMD,
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.scroll_wheel",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+      },
+      {
+        shortcut: [
+          {
+            shortcutTranslationKey:
+              "ui.dialogs.shortcuts.shortcuts.double_click",
+          },
+        ],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click",
+      },
+    ],
+  },
+  {
+    titleTranslationKey: "ui.dialogs.shortcuts.other.title",
    items: [
      {
-        type: "shortcut",
        shortcut: ["M"],
-        key: "ui.dialogs.shortcuts.other.my_link",
+        descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link",
      },
    ],
  },
@@ -137,17 +164,28 @@ class DialogShortcuts extends LitElement {
  }

  private _renderShortcut(
-    shortcuts: ShortcutString[],
-    translationKey: LocalizeKeys
+    shortcutKeys: ShortcutString[],
+    descriptionKey: LocalizeKeys
  ) {
-    const keys = shortcuts.map((shortcut) =>
-      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
-    );
-
    return html`
      <div class="shortcut">
-        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
-        ${this.hass.localize(translationKey)}
+        ${shortcutKeys.map(
+          (shortcutKey) =>
+            html`<span
+              >${shortcutKey === CTRL_CMD
+                ? isMac
+                  ? html`<ha-svg-icon
+                      .path=${mdiAppleKeyboardCommand}
+                    ></ha-svg-icon>`
+                  : this.hass.localize("ui.panel.config.automation.editor.ctrl")
+                : typeof shortcutKey === "string"
+                  ? shortcutKey
+                  : this.hass.localize(
+                      shortcutKey.shortcutTranslationKey
+                    )}</span
+            >`
+        )}
+        ${this.hass.localize(descriptionKey)}
      </div>
    `;
  }
@@ -171,16 +209,18 @@ class DialogShortcuts extends LitElement {
        <div class="content">
          ${_SHORTCUTS.map(
            (section) => html`
-              <h3>${this.hass.localize(section.key)}</h3>
+              <h3>${this.hass.localize(section.titleTranslationKey)}</h3>
              <div class="items">
                ${section.items.map((item) => {
-                  if (item.type === "text") {
-                    return html`<p>${this.hass.localize(item.key)}</p>`;
+                  if ("shortcut" in item) {
+                    return this._renderShortcut(
+                      (item as Shortcut).shortcut,
+                      (item as Shortcut).descriptionTranslationKey
+                    );
                  }
-                  if (item.type === "shortcut") {
-                    return this._renderShortcut(item.shortcut, item.key);
-                  }
-                  return nothing;
+                  return html`<p>
+                    ${this.hass.localize((item as Text).textTranslationKey)}
+                  </p>`;
                })}
              </div>
            `
@@ -232,6 +272,10 @@ class DialogShortcuts extends LitElement {
      .items p {
        margin-bottom: 8px;
      }
+
+      ha-svg-icon {
+        width: 12px;
+      }
    `,
  ];
 }
@@ -112,7 +112,9 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
          this.assistConfiguration.available_wake_words.length > 1
            ? html`<div class="row">
                <ha-select
-                  .label=${"Wake word"}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.voice_assistants.assistants.pipeline.detail.form.wake_word_id"
+                  )}
                  @closed=${stopPropagation}
                  fixedMenuPosition
                  naturalMenuWidth
@@ -144,7 +146,9 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
          ${pipelineEntity
            ? html`<div class="row">
                <ha-select
-                  .label=${"Assistant"}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.voice_assistants.assistants.pipeline.devices.pipeline"
+                  )}
                  @closed=${stopPropagation}
                  .value=${pipelineEntity?.state}
                  fixedMenuPosition
@@ -441,6 +441,35 @@ class WaterHeaterEntity extends Entity {
  }
 }

+class FanEntity extends Entity {
+  static CAPABILITY_ATTRIBUTES = new Set([
+    ...CAPABILITY_ATTRIBUTES,
+    "direction",
+    "oscillating",
+    "percentage",
+  ]);
+
+  public async handleService(domain, service, data) {
+    if (domain !== this.domain) {
+      return;
+    }
+
+    if (["turn_on", "turn_off"].includes(service)) {
+      this.update(service === "turn_on" ? "on" : "off");
+    } else if (
+      ["set_direction", "oscillate", "set_percentage"].includes(service)
+    ) {
+      const { entity_id, ...toSet } = data;
+      this.update(this.state, {
+        ...this.attributes,
+        ...toSet,
+      });
+    } else {
+      super.handleService(domain, service, data);
+    }
+  }
+}
+
 class GroupEntity extends Entity {
  public async handleService(domain, service, data) {
    if (!["homeassistant", this.domain].includes(domain)) {
@@ -463,6 +492,7 @@ const TYPES = {
  alarm_control_panel: AlarmControlPanelEntity,
  climate: ClimateEntity,
  cover: CoverEntity,
+  fan: FanEntity,
  group: GroupEntity,
  input_boolean: ToggleEntity,
  input_number: InputNumberEntity,
@@ -35,6 +35,7 @@
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
      }

      .header img {
@@ -44,7 +44,7 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -19,8 +19,9 @@
        height: auto;
        padding: 32px 0;
      }
+
      .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: content-box;
@@ -32,6 +33,7 @@
        justify-content: flex-start;
        margin-bottom: 32px;
        margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
      }

      .header img {
@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      --mdc-drawer-width: 56px;
      --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
    }
    :host([expanded]) {
      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
    :host([modal]) {
      --mdc-drawer-width: unset;
      --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
    }
    partial-panel-resolver,
    ha-sidebar {
@@ -11,23 +11,54 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
  class extends superClass {
    private _keydownEvent = (event: KeyboardEvent) => {
      const supportedShortcuts = this.supportedShortcuts();
-      if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        event.key in supportedShortcuts
+      ) {
        event.preventDefault();
        supportedShortcuts[event.key]();
+        return;
+      }
+
+      const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
+      if (event.key in supportedSingleKeyShortcuts) {
+        event.preventDefault();
+        supportedSingleKeyShortcuts[event.key]();
      }
    };

+    private _listenersAdded = false;
+
    public connectedCallback() {
      super.connectedCallback();
-      window.addEventListener("keydown", this._keydownEvent);
+      this.addKeyboardShortcuts();
    }

    public disconnectedCallback() {
-      window.removeEventListener("keydown", this._keydownEvent);
+      this.removeKeyboardShortcuts();
      super.disconnectedCallback();
    }

+    public addKeyboardShortcuts() {
+      if (this._listenersAdded) {
+        return;
+      }
+      this._listenersAdded = true;
+      window.addEventListener("keydown", this._keydownEvent);
+    }
+
+    public removeKeyboardShortcuts() {
+      this._listenersAdded = false;
+      window.removeEventListener("keydown", this._keydownEvent);
+    }
+
    protected supportedShortcuts(): SupportedShortcuts {
      return {};
    }
+
+    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
+      return {};
+    }
  };
@@ -5,11 +5,15 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
+import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
 import { migrateAutomationAction, type Action } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
-import { editorStyles } from "../styles";
-import { getAutomationActionType } from "./ha-automation-action-row";
+import { editorStyles, indentStyle } from "../styles";
+import {
+  getAutomationActionType,
+  type ActionElement,
+} from "./ha-automation-action-row";

@customElement("ha-automation-action-editor")
 export default class HaAutomationActionEditor extends LitElement {
@@ -34,6 +38,9 @@ export default class HaAutomationActionEditor extends LitElement {

  @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;

+  @query(COLLAPSIBLE_ACTION_ELEMENTS.join(", "))
+  private _collapsibleElement?: ActionElement;
+
  protected render() {
    const yamlMode = this.yamlMode || !this.uiSupported;
    const type = getAutomationActionType(this.action);
@@ -46,6 +53,7 @@ export default class HaAutomationActionEditor extends LitElement {
            this.disabled || (this.action.enabled === false && !this.yamlMode),
          yaml: yamlMode,
          indent: this.indent,
+          card: !this.inSidebar,
        })}
      >
        ${yamlMode
@@ -89,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, "yaml-changed", {
      value: migrateAutomationAction(ev.detail.value),
    });
  }
@@ -103,7 +111,15 @@ export default class HaAutomationActionEditor extends LitElement {
    fireEvent(this, "value-changed", { value });
  }

-  static styles = editorStyles;
+  public expandAll() {
+    this._collapsibleElement?.expandAll?.();
+  }
+
+  public collapseAll() {
+    this._collapsibleElement?.collapseAll?.();
+  }
+
+  static styles = [editorStyles, indentStyle];
 }

 declare global {
@@ -5,12 +5,12 @@ import {
  mdiArrowUp,
  mdiContentCopy,
  mdiContentCut,
-  mdiContentDuplicate,
  mdiDelete,
  mdiDotsVertical,
  mdiPlay,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
 } from "@mdi/js";
@@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -41,9 +42,11 @@ import {
  YAML_ONLY_ACTION_TYPES,
 } from "../../../../data/action";
 import type {
+  ActionSidebarConfig,
  AutomationClipboard,
  Condition,
 } from "../../../../data/automation";
+import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import { validateConfig } from "../../../../data/config";
 import {
  floorsContext,
@@ -79,7 +82,6 @@ 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 { getRepeatType } from "./types/ha-automation-action-repeat";
 import "./types/ha-automation-action-sequence";
 import "./types/ha-automation-action-service";
@@ -87,7 +89,6 @@ import "./types/ha-automation-action-set_conversation_response";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
-import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";

 export const getAutomationActionType = memoizeOne(
  (action: Action | undefined) => {
@@ -95,7 +96,7 @@ export const getAutomationActionType = memoizeOne(
      return undefined;
    }
    if ("action" in action) {
-      return getActionType(action) as "action" | "play_media";
+      return getActionType(action) as "action";
    }
    if (CONDITION_BUILDING_BLOCKS.some((key) => key in action)) {
      return "condition" as const;
@@ -108,6 +109,8 @@ export const getAutomationActionType = memoizeOne(

 export interface ActionElement extends LitElement {
  action: Action;
+  expandAll?: () => void;
+  collapseAll?: () => void;
 }

 export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => {
@@ -142,13 +145,20 @@ export default class HaAutomationActionRow extends LitElement {

  @property({ type: Boolean }) public disabled = false;

+  @property({ type: Boolean }) public root = false;
+
  @property({ type: Boolean }) public first?: boolean;

  @property({ type: Boolean }) public last?: boolean;

+  @property({ type: Boolean }) public highlight?: boolean;
+
  @property({ type: Boolean, attribute: "sidebar" })
  public optionsInSidebar = false;

+  @property({ type: Boolean, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @storage({
    key: "automationClipboard",
    state: false,
@@ -175,12 +185,27 @@ export default class HaAutomationActionRow extends LitElement {

  @state() private _selected = false;

-  @state() private _collapsed = false;
+  @state() private _collapsed = true;

  @state() private _warnings?: string[];

  @query("ha-automation-action-editor")
-  private actionEditor?: HaAutomationActionEditor;
+  private _actionEditor?: HaAutomationActionEditor;
+
+  @query("ha-automation-row")
+  private _automationRowElement?: HaAutomationRow;
+
+  get selected() {
+    return this._selected;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    if (this.root) {
+      this._collapsed = false;
+    }
+  }

  protected willUpdate(changedProperties: PropertyValues) {
    if (changedProperties.has("yamlMode")) {
@@ -242,26 +267,30 @@ export default class HaAutomationActionRow extends LitElement {
            <ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
          </ha-tooltip>`
        : nothing}
+      ${!this.optionsInSidebar
+        ? html`<ha-md-button-menu
+            quick
+            slot="icons"
+            @click=${preventDefaultStopPropagation}
+            @keydown=${stopPropagation}
+            @closed=${stopPropagation}
+            positioning="fixed"
+            anchor-corner="end-end"
+            menu-corner="start-end"
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>

-      <ha-md-button-menu
-        slot="icons"
-        @click=${preventDefaultStopPropagation}
-        @keydown=${stopPropagation}
-        @closed=${stopPropagation}
-        positioning="fixed"
-      >
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        ></ha-icon-button>
-        <ha-md-menu-item .clickAction=${this._runAction}>
-          ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
-          <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
-        </ha-md-menu-item>
-
-        ${!this.optionsInSidebar
-          ? html` <ha-md-menu-item
+            <ha-md-menu-item .clickAction=${this._runAction}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.run"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
              .clickAction=${this._renameAction}
              .disabled=${this.disabled}
            >
@@ -269,59 +298,60 @@ export default class HaAutomationActionRow extends LitElement {
                "ui.panel.config.automation.editor.actions.rename"
              )}
              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-            </ha-md-menu-item>`
-          : nothing}
+            </ha-md-menu-item>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-menu-item
+              .clickAction=${this._duplicateAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.duplicate"
+              )}
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiPlusCircleMultipleOutline}
+              ></ha-svg-icon>
+            </ha-md-menu-item>

-        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-menu-item
+              .clickAction=${this._copyAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.copy"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+            </ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._duplicateAction}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.duplicate"
-          )}
-          <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
-        </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._cutAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.cut"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+            </ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._copyAction}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveUp}
+              .disabled=${this.disabled || !!this.first}
+            >
+              ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
+              <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._cutAction}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveDown}
+              .disabled=${this.disabled || !!this.last}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.move_down"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveUp}
-          .disabled=${this.disabled || !!this.first}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-          <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
-        ></ha-md-menu-item>
-
-        <ha-md-menu-item
-          .clickAction=${this._moveDown}
-          .disabled=${this.disabled || !!this.last}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_down")}
-          <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
-        ></ha-md-menu-item>
-
-        ${!this.optionsInSidebar
-          ? html`<ha-md-menu-item
+            <ha-md-menu-item
              .clickAction=${this._toggleYamlMode}
              .disabled=${!this._uiModeAvailable || !!this._warnings}
            >
@@ -329,45 +359,44 @@ export default class HaAutomationActionRow extends LitElement {
                `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
              )}
              <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-            </ha-md-menu-item>`
-          : nothing}
+            </ha-md-menu-item>

-        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-        <ha-md-menu-item
-          .clickAction=${this._onDisable}
-          .disabled=${this.disabled}
-        >
-          ${this.action.enabled === false
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.actions.enable"
-              )
-            : this.hass.localize(
-                "ui.panel.config.automation.editor.actions.disable"
+            <ha-md-menu-item
+              .clickAction=${this._onDisable}
+              .disabled=${this.disabled}
+            >
+              ${this.action.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="start"
+                .path=${this.action.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              class="warning"
+              .clickAction=${this._onDelete}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
              )}
-          <ha-svg-icon
-            slot="start"
-            .path=${this.action.enabled === false
-              ? mdiPlayCircleOutline
-              : mdiStopCircleOutline}
-          ></ha-svg-icon>
-        </ha-md-menu-item>
-        <ha-md-menu-item
-          class="warning"
-          .clickAction=${this._onDelete}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
-          <ha-svg-icon
-            class="warning"
-            slot="start"
-            .path=${mdiDelete}
-          ></ha-svg-icon>
-        </ha-md-menu-item>
-      </ha-md-button-menu>
-
+              <ha-svg-icon
+                class="warning"
+                slot="start"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+          </ha-md-button-menu>`
+        : nothing}
      ${!this.optionsInSidebar
        ? html`${this._warnings
              ? html`<ha-automation-editor-warning
@@ -413,18 +442,27 @@ export default class HaAutomationActionRow extends LitElement {
        ${this.optionsInSidebar
          ? html`<ha-automation-row
              .disabled=${this.action.enabled === false}
-              @click=${this._toggleSidebar}
              .leftChevron=${[
                ...ACTION_BUILDING_BLOCKS,
                ...ACTION_COMBINED_BLOCKS,
-              ].includes(blockType!)}
+              ].includes(blockType!) ||
+              (blockType === "condition" &&
+                CONDITION_BUILDING_BLOCKS.includes(
+                  (this.action as Condition).condition
+                ))}
              .collapsed=${this._collapsed}
              .selected=${this._selected}
-              @toggle-collapsed=${this._toggleCollapse}
+              .highlight=${this.highlight}
              .buildingBlock=${[
                ...ACTION_BUILDING_BLOCKS,
                ...ACTION_COMBINED_BLOCKS,
              ].includes(blockType!)}
+              .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
+              @copy-row=${this._copyAction}
+              @cut-row=${this._cutAction}
+              @delete-row=${this._onDelete}
              >${this._renderRow()}</ha-automation-row
            >`
          : html`
@@ -441,9 +479,9 @@ export default class HaAutomationActionRow extends LitElement {
        (blockType === "condition" &&
          CONDITION_BUILDING_BLOCKS.includes(
            (this.action as Condition).condition
-          ))) &&
-      !this._collapsed
+          )))
        ? html`<ha-automation-action-editor
+            class=${this._collapsed ? "hidden" : ""}
            .hass=${this.hass}
            .action=${this.action}
            .narrow=${this.narrow}
@@ -478,11 +516,20 @@ export default class HaAutomationActionRow extends LitElement {
    this.openSidebar(value); // refresh sidebar

    if (this._yamlMode && !this.optionsInSidebar) {
-      this.actionEditor?.yamlEditor?.setValue(value);
+      this._actionEditor?.yamlEditor?.setValue(value);
    }
  };

  private _runAction = async () => {
+    requestAnimationFrame(() => {
+      // @ts-ignore is supported in all browsers except firefox
+      if (this.scrollIntoViewIfNeeded) {
+        // @ts-ignore is supported in all browsers except firefox
+        this.scrollIntoViewIfNeeded();
+        return;
+      }
+      this.scrollIntoView();
+    });
    const validated = await validateConfig(this.hass, {
      actions: this.action,
    });
@@ -581,7 +628,7 @@ export default class HaAutomationActionRow extends LitElement {
      if (this._selected && this.optionsInSidebar) {
        this.openSidebar(value); // refresh sidebar
      } else if (this._yamlMode) {
-        this.actionEditor?.yamlEditor?.setValue(value);
+        this._actionEditor?.yamlEditor?.setValue(value);
      }
    }
  };
@@ -592,6 +639,12 @@ export default class HaAutomationActionRow extends LitElement {

  private _copyAction = () => {
    this._setClipboard();
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.copied_to_clipboard"
+      ),
+      duration: 2000,
+    });
  };

  private _cutAction = () => {
@@ -600,6 +653,12 @@ export default class HaAutomationActionRow extends LitElement {
    if (this._selected) {
      fireEvent(this, "close-sidebar");
    }
+    showToast(this, {
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.cut_to_clipboard"
+      ),
+      duration: 2000,
+    });
  };

  private _moveUp = () => {
@@ -633,17 +692,13 @@ export default class HaAutomationActionRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
      return;
    }
    this.openSidebar();
  }

  public openSidebar(action?: Action): void {
-    if (this.narrow) {
-      this.scrollIntoView();
-    }
    const sidebarAction = action ?? this.action;
    const actionType = getAutomationActionType(sidebarAction);

@@ -651,33 +706,79 @@ export default class HaAutomationActionRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameAction();
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
      },
      disable: this._onDisable,
      delete: this._onDelete,
-      config: sidebarAction,
-      type: "action",
+      copy: this._copyAction,
+      cut: this._cutAction,
+      duplicate: this._duplicateAction,
+      run: this._runAction,
+      config: {
+        action: sidebarAction,
+      },
      uiSupported: actionType ? this._uiSupported(actionType) : false,
      yamlMode: this._yamlMode,
-    });
+    } satisfies ActionSidebarConfig);
    this._selected = true;
+    this._collapsed = false;
+
+    if (this.narrow) {
+      window.setTimeout(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
+      }, 180); // duration of transition of added padding for bottom sheet
+    }
  }

  public expand() {
+    if (this.optionsInSidebar) {
+      this._collapsed = false;
+      return;
+    }
+
    this.updateComplete.then(() => {
      this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
    });
  }

+  public collapse() {
+    if (this.optionsInSidebar) {
+      this._collapsed = true;
+      return;
+    }
+
+    this.updateComplete.then(() => {
+      this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = false;
+    });
+  }
+
+  public expandAll() {
+    this.expand();
+
+    this._actionEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this.collapse();
+
+    this._actionEditor?.collapseAll();
+  }
+
  private _uiSupported = memoizeOne(
    (type: string) =>
      customElements.get(`ha-automation-action-${type}`) !== undefined
@@ -687,6 +788,10 @@ export default class HaAutomationActionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public focus() {
+    this._automationRowElement?.focus();
+  }
+
  static styles = rowStyles;
 }

@@ -1,12 +1,11 @@
 import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
@@ -24,6 +23,7 @@ import {
  VIRTUAL_ACTIONS,
  showAddAutomationElementDialog,
 } from "../show-add-automation-element-dialog";
+import { automationRowsStyles } from "../styles";
 import type HaAutomationActionRow from "./ha-automation-action-row";
 import { getAutomationActionType } from "./ha-automation-action-row";

@@ -44,7 +44,7 @@ export default class HaAutomationAction extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

-  @state() private _showReorder = false;
+  @state() private _rowSortSelected?: number;

  @state()
  @storage({
@@ -55,43 +55,34 @@ export default class HaAutomationAction extends LitElement {
  })
  public _clipboard?: AutomationClipboard;

+  @queryAll("ha-automation-action-row")
+  private _actionRowElements?: HaAutomationActionRow[];
+
  private _focusLastActionOnChange = false;

+  private _focusActionIndexOnChange?: number;
+
  private _actionKeys = new WeakMap<Action, string>();

-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-action-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
        group="actions"
        invert-swap
        @item-moved=${this._actionMoved}
        @item-added=${this._actionAdded}
        @item-removed=${this._actionRemoved}
      >
-        <div class="actions">
+        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.actions,
            (action) => this._getKey(action),
            (action, idx) => html`
              <ha-automation-action-row
+                .root=${this.root}
                .sortableData=${action}
                .index=${idx}
                .first=${idx === 0}
@@ -104,12 +95,22 @@ export default class HaAutomationAction extends LitElement {
                @move-up=${this._moveUp}
                @value-changed=${this._actionChanged}
                .hass=${this.hass}
-                ?highlight=${this.highlightedActions?.includes(action)}
+                .highlight=${this.highlightedActions?.includes(action)}
                .optionsInSidebar=${this.optionsInSidebar}
+                .sortSelected=${this._rowSortSelected === idx}
+                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                  ? html`
-                      <div class="handle" slot="icons">
+                      <div
+                        tabindex="0"
+                        class="handle ${this._rowSortSelected === idx
+                          ? "active"
+                          : ""}"
+                        slot="icons"
+                        @keydown=${this._handleDragKeydown}
+                        .index=${idx}
+                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
@@ -149,40 +150,65 @@ export default class HaAutomationAction extends LitElement {
  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);

-    if (changedProps.has("actions") && this._focusLastActionOnChange) {
-      this._focusLastActionOnChange = false;
+    if (
+      changedProps.has("actions") &&
+      (this._focusLastActionOnChange ||
+        this._focusActionIndexOnChange !== undefined)
+    ) {
+      const mode = this._focusLastActionOnChange ? "new" : "moved";

      const row = this.shadowRoot!.querySelector<HaAutomationActionRow>(
-        "ha-automation-action-row:last-of-type"
+        `ha-automation-action-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusActionIndexOnChange! + 1})`}`
      )!;
+
+      this._focusLastActionOnChange = false;
+      this._focusActionIndexOnChange = undefined;
+
      row.updateComplete.then(() => {
        // on new condition open the settings in the sidebar, except for building blocks
        const type = getAutomationActionType(row.action);
        if (
          type &&
          this.optionsInSidebar &&
-          !ACTION_BUILDING_BLOCKS.includes(type)
+          (!ACTION_BUILDING_BLOCKS.includes(type) || mode === "moved")
        ) {
          row.openSidebar();
-        } else if (!this.optionsInSidebar) {
+          if (this.narrow) {
+            row.scrollIntoView({
+              block: "start",
+              behavior: "smooth",
+            });
+          }
+        }
+
+        if (mode === "new") {
          row.expand();
        }
-        row.scrollIntoView();
-        row.focus();
+
+        if (!this.optionsInSidebar) {
+          row.focus();
+        }
      });
    }
  }

  public expandAll() {
-    const rows = this.shadowRoot!.querySelectorAll<HaAutomationActionRow>(
-      "ha-automation-action-row"
-    )!;
-    rows.forEach((row) => {
-      row.expand();
+    this._actionRowElements?.forEach((row) => {
+      row.expandAll();
+    });
+  }
+
+  public collapseAll() {
+    this._actionRowElements?.forEach((row) => {
+      row.collapseAll();
    });
  }

  private _addActionDialog() {
+    if (this.narrow) {
+      fireEvent(this, "request-close-sidebar");
+    }
+
    showAddAutomationElementDialog(this, {
      type: "action",
      add: this._addAction,
@@ -230,18 +256,30 @@ export default class HaAutomationAction extends LitElement {
    return this._actionKeys.get(action)!;
  }

-  private _moveUp(ev) {
+  private async _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationActionRow).first) {
+      const newIndex = index - 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

-  private _moveDown(ev) {
+  private async _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationActionRow).last) {
+      const newIndex = index + 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _move(oldIndex: number, newIndex: number) {
@@ -261,6 +299,9 @@ export default class HaAutomationAction extends LitElement {
  private async _actionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
+    const item = ev.detail.item as HaAutomationActionRow;
+    const selected = item.selected;
+
    let actions = [
      ...this.actions.slice(0, index),
      data,
@@ -268,6 +309,9 @@ export default class HaAutomationAction extends LitElement {
    ];
    // Add action locally to avoid UI jump
    this.actions = actions;
+    if (selected) {
+      this._focusActionIndexOnChange = actions.length === 1 ? 0 : index;
+    }
    await nextRender();
    if (this.actions !== actions) {
      // Ensure action is added even after update
@@ -276,6 +320,9 @@ export default class HaAutomationAction extends LitElement {
        data,
        ...this.actions.slice(index),
      ];
+      if (selected) {
+        this._focusActionIndexOnChange = actions.length === 1 ? 0 : index;
+      }
    }
    fireEvent(this, "value-changed", { value: actions });
  }
@@ -290,7 +337,6 @@ export default class HaAutomationAction extends LitElement {
    // Ensure action is removed even after update
    const actions = this.actions.filter((a) => a !== action);
    fireEvent(this, "value-changed", { value: actions });
-    fireEvent(this, "close-sidebar");
  }

  private _actionChanged(ev: CustomEvent) {
@@ -320,44 +366,21 @@ export default class HaAutomationAction extends LitElement {
    });
  }

-  static styles = css`
-    .actions {
-      padding: 16px 0 16px 16px;
-      margin: -16px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
+  private _handleDragKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._rowSortSelected =
+        this._rowSortSelected === undefined
+          ? (ev.target as any).index
+          : undefined;
    }
-    :host([root]) .actions {
-      padding-right: 8px;
-    }
-    .sortable-ghost {
-      background: none;
-      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
-    }
-    .sortable-drag {
-      background: none;
-    }
-    ha-automation-action-row {
-      display: block;
-      scroll-margin-top: 48px;
-    }
-    .handle {
-      padding: 12px;
-      cursor: move; /* fallback if grab cursor is unsupported */
-      cursor: grab;
-    }
-    .handle ha-svg-icon {
-      pointer-events: none;
-      height: 24px;
-    }
-    .buttons {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      order: 1;
-    }
-  `;
+  }
+
+  private _stopSortSelection() {
+    this._rowSortSelected = undefined;
+  }
+
+  static styles = automationRowsStyles;
 }

 declare global {
@@ -1,12 +1,15 @@
-import { type CSSResultGroup, LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { type CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-button";
 import type { Action, ChooseAction, Option } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../../option/ha-automation-option";
+import type HaAutomationOption from "../../option/ha-automation-option";
+import "../../option/ha-automation-option-row";
+import type HaAutomationOptionRow from "../../option/ha-automation-option-row";
+import { indentStyle } from "../../styles";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";

@@ -24,6 +27,11 @@ export class HaChooseAction extends LitElement implements ActionElement {

  @state() private _showDefault = false;

+  @query("ha-automation-option") private _optionElement?: HaAutomationOption;
+
+  @query("ha-automation-option-row")
+  private _defaultOptionRowElement?: HaAutomationOptionRow;
+
  public static get defaultConfig(): ChooseAction {
    return { choose: [{ conditions: [], sequence: [] }] };
  }
@@ -41,42 +49,29 @@ export class HaChooseAction extends LitElement implements ActionElement {
        .hass=${this.hass}
        .narrow=${this.narrow}
        .optionsInSidebar=${this.indent}
+        .showDefaultActions=${this._showDefault || !!action.default}
+        @show-default-actions=${this._addDefault}
      ></ha-automation-option>

      ${this._showDefault || action.default
        ? html`
-            <h2>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.default"
-              )}:
-            </h2>
-            <ha-automation-action
-              .actions=${ensureArray(action.default) || []}
-              .disabled=${this.disabled}
-              @value-changed=${this._defaultChanged}
-              .hass=${this.hass}
+            <ha-automation-option-row
+              .defaultActions=${(ensureArray(action.default) || []) as Action[]}
              .narrow=${this.narrow}
+              .disabled=${this.disabled}
+              .hass=${this.hass}
              .optionsInSidebar=${this.indent}
-            ></ha-automation-action>
+              @value-changed=${this._defaultChanged}
+            ></ha-automation-option-row>
          `
-        : html`
-            <div class="link-button-row">
-              <button
-                class="link"
-                @click=${this._addDefault}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.type.choose.add_default"
-                )}
-              </button>
-            </div>
-          `}
+        : nothing}
    `;
  }

-  private _addDefault() {
+  private async _addDefault() {
    this._showDefault = true;
+    await this._defaultOptionRowElement?.updateComplete;
+    this._defaultOptionRowElement?.expand();
  }

  private _optionsChanged(ev: CustomEvent) {
@@ -104,12 +99,28 @@ export class HaChooseAction extends LitElement implements ActionElement {
    fireEvent(this, "value-changed", { value: newValue });
  }

+  public expandAll() {
+    this._optionElement?.expandAll();
+    this._defaultOptionRowElement?.expandAll();
+  }
+
+  public collapseAll() {
+    this._optionElement?.collapseAll();
+    this._defaultOptionRowElement?.collapseAll();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
+      indentStyle,
      css`
-        .link-button-row {
-          padding: 14px 14px 0 14px;
+        ha-automation-option-row {
+          display: block;
+          margin-top: 24px;
+        }
+        h3 {
+          font-size: inherit;
+          font-weight: inherit;
        }
      `,
    ];
@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
@@ -14,7 +14,7 @@ import {
 } from "../../../../../data/condition";
 import type { Entries, HomeAssistant } from "../../../../../types";
 import "../../condition/ha-automation-condition-editor";
-import type { ActionElement } from "../ha-automation-action-row";
+import type HaAutomationConditionEditor from "../../condition/ha-automation-condition-editor";
 import "../../condition/types/ha-automation-condition-and";
 import "../../condition/types/ha-automation-condition-device";
 import "../../condition/types/ha-automation-condition-not";
@@ -26,6 +26,7 @@ import "../../condition/types/ha-automation-condition-template";
 import "../../condition/types/ha-automation-condition-time";
 import "../../condition/types/ha-automation-condition-trigger";
 import "../../condition/types/ha-automation-condition-zone";
+import type { ActionElement } from "../ha-automation-action-row";

@customElement("ha-automation-action-condition")
 export class HaConditionAction extends LitElement implements ActionElement {
@@ -41,6 +42,9 @@ export class HaConditionAction extends LitElement implements ActionElement {

  @property({ type: Boolean, attribute: "indent" }) public indent = false;

+  @query("ha-automation-condition-editor")
+  private _conditionEditor?: HaAutomationConditionEditor;
+
  public static get defaultConfig(): Omit<Condition, "state" | "entity_id"> {
    return { condition: "state" };
  }
@@ -146,6 +150,14 @@ export class HaConditionAction extends LitElement implements ActionElement {
      customElements.get(`ha-automation-condition-${type}`) !== undefined
  );

+  public expandAll() {
+    this._conditionEditor?.expandAll();
+  }
+
+  public collapseAll() {
+    this._conditionEditor?.collapseAll();
+  }
+
  static styles = css`
    ha-select {
      margin-bottom: 24px;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const SELECTOR_SELECTOR_BUILDING_BLOCKS = ["condition", "action"];`