Add back path to protocol config pages

* proper functionnames

* refactor _applyFilters on scenes and script page

* Apply suggestions from code review

---------

Co-authored-by: Petar Petrov <[email protected]>

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+FROM mcr.microsoft.com/devcontainers/python:1-3.14
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/ISSUE_TEMPLATE.md

@@ -67,7 +67,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   If your issue is about how an entity is shown in the UI, please add the state
   and attributes for all situations with a screenshot of the UI.
-  You can find this information at `/developer-tools/state`
+  You can find this information at `/config/developer-tools/state`
 -->
 
 ```yaml

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier

.github/workflows/codeql-analysis.yml

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

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -84,7 +84,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/[email protected]
         with:
-          abi: cp313
+          abi: cp314
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

demo/src/ha-demo.ts

@@ -9,11 +9,14 @@ import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
+import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
+import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
+import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -60,6 +63,9 @@ export class HaDemo extends HomeAssistantAppEl {
     mockPersistentNotification(hass);
     mockConfigEntries(hass);
     mockAreaRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockFloorRegistry(hass);
+    mockLabelRegistry(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",

demo/src/stubs/frontend.ts

@@ -27,4 +27,25 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
+  hass.mockWS(
+    "frontend/subscribe_system_data",
+    (_msg, currentHass, onChange) => {
+      onChange?.({
+        value: currentHass.systemData,
+      });
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  );
+  hass.mockWS("labs/subscribe", (_msg, _currentHass, onChange) => {
+    onChange?.({
+      preview_feature: _msg.preview_feature,
+      domain: _msg.domain,
+      enabled: false,
+      is_built_in: true,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
+  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
 };

demo/src/stubs/template.ts

@@ -7,8 +7,18 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
     })
   );
   hass.mockWS("render_template", (msg, _hass, onChange) => {
+    let result = msg.template;
+    // Simple variable substitution for demo purposes
+    if (msg.variables) {
+      for (const [key, value] of Object.entries(msg.variables)) {
+        result = result.replace(
+          new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g"),
+          String(value)
+        );
+      }
+    }
     onChange!({
-      result: msg.template,
+      result,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
     // eslint-disable-next-line @typescript-eslint/no-empty-function

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

@@ -169,7 +169,7 @@ const SCHEMAS: {
   {
     title: "Selectors",
     translations: {
-      addon: "App",
+      app: "App",
       entity: "Entity",
       device: "Device",
       area: "Area",
@@ -188,7 +188,7 @@ const SCHEMAS: {
       entities: "Entities",
     },
     schema: [
-      { name: "addon", selector: { addon: {} } },
+      { name: "app", selector: { app: {} } },
       { name: "entity", selector: { entity: {} } },
       {
         name: "Attribute",

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

@@ -239,7 +239,7 @@ const SCHEMAS: {
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
-      addon: { name: "App", selector: { addon: {} } },
+      app: { name: "App", selector: { app: {} } },
       number_box: {
         name: "Number Box",
         selector: {

package.json

@@ -27,14 +27,14 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.28.6",
-    "@braintree/sanitize-url": "7.1.1",
+    "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.0",
     "@codemirror/commands": "6.10.1",
     "@codemirror/language": "6.12.1",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.5.4",
-    "@codemirror/view": "6.39.11",
+    "@codemirror/view": "6.39.12",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "7.2.0",
@@ -89,7 +89,7 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vibrant/color": "4.0.0",
+    "@vibrant/color": "4.0.4",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -122,7 +122,7 @@
     "luxon": "3.7.2",
     "marked": "17.0.1",
     "memoize-one": "6.0.0",
-    "node-vibrant": "4.0.3",
+    "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
@@ -150,13 +150,13 @@
     "@babel/helper-define-polyfill-provider": "0.6.6",
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.6",
-    "@bundle-stats/plugin-webpack-filter": "4.21.8",
-    "@lokalise/node-api": "15.6.0",
+    "@bundle-stats/plugin-webpack-filter": "4.21.9",
+    "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.0",
-    "@rspack/core": "1.7.3",
+    "@rsdoctor/rspack-plugin": "1.5.1",
+    "@rspack/core": "1.7.4",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -211,11 +211,11 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.5",
     "sinon": "21.0.1",
-    "tar": "7.5.6",
+    "tar": "7.5.7",
     "terser-webpack-plugin": "5.3.16",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.53.1",
+    "typescript-eslint": "8.54.0",
     "vite-tsconfig-paths": "6.0.5",
     "vitest": "4.0.18",
     "webpack-stats-plugin": "1.1.3",
@@ -229,7 +229,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.1.0",
+    "globals": "17.2.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",
     "glob@^10.2.2": "^10.5.0"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20251229.0"
+version      = "20260128.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -12,7 +12,7 @@ readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "[email protected]"}
 ]
-requires-python = ">=3.13.0"
+requires-python = ">=3.14.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

src/common/config/filter_navigation_pages.ts

@@ -0,0 +1,29 @@
+import type { PageNavigation } from "../../layouts/hass-tabs-subpage";
+import type { HomeAssistant } from "../../types";
+import { canShowPage } from "./can_show_page";
+
+export interface NavigationFilterOptions {
+  /** Whether there are Bluetooth config entries (pre-fetched by caller) */
+  hasBluetoothConfigEntries?: boolean;
+}
+
+/**
+ * Filters navigation pages based on visibility rules.
+ * Handles special cases like Bluetooth (requires config entries)
+ * and external app configuration.
+ */
+export const filterNavigationPages = (
+  hass: HomeAssistant,
+  pages: PageNavigation[],
+  options: NavigationFilterOptions = {}
+): PageNavigation[] =>
+  pages.filter((page) => {
+    if (page.path === "#external-app-configuration") {
+      return hass.auth.external?.config.hasSettingsScreen;
+    }
+    // Only show Bluetooth page if there are Bluetooth config entries
+    if (page.component === "bluetooth") {
+      return options.hasBluetoothConfigEntries ?? false;
+    }
+    return canShowPage(hass, page);
+  });

src/common/entity/group_entities.ts

@@ -8,7 +8,9 @@ export const computeGroupEntitiesState = (states: HassEntity[]): string => {
     return UNAVAILABLE;
   }
 
-  const validState = states.filter((stateObj) => isUnavailableState(stateObj));
+  const validState = states.some(
+    (stateObj) => !isUnavailableState(stateObj.state)
+  );
 
   if (!validState) {
     return UNAVAILABLE;

src/common/keyboard/shortcuts.ts

@@ -16,6 +16,7 @@ export interface ShortcutConfig {
    * Default is false to avoid interrupting copy/paste.
    */
   allowWhenTextSelected?: boolean;
+  allowInInput?: boolean;
 }
 
 /**
@@ -29,7 +30,10 @@ function registerShortcuts(
 
   Object.entries(shortcuts).forEach(([key, config]) => {
     wrappedShortcuts[key] = (event: KeyboardEvent) => {
-      if (!canOverrideAlphanumericInput(event.composedPath())) {
+      if (
+        !config.allowInInput &&
+        !canOverrideAlphanumericInput(event.composedPath())
+      ) {
         return;
       }
       if (!config.allowWhenTextSelected && window.getSelection()?.toString()) {

src/common/util/compute_rtl.ts

@@ -34,10 +34,6 @@ export function setDirectionStyles(direction: string, element: LitElement) {
     "--float-end",
     direction === "ltr" ? "right" : "left"
   );
-  element.style.setProperty(
-    "--margin-title",
-    direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
-  );
   element.style.setProperty(
     "--scale-direction",
     direction === "ltr" ? "1" : "-1"

src/common/util/view-transition.ts

@@ -1,3 +1,15 @@
+let isViewTransitionDisabled = false;
+try {
+  isViewTransitionDisabled =
+    window.localStorage.getItem("disableViewTransition") === "true";
+} catch {
+  // ignore
+}
+
+export const setViewTransitionDisabled = (disabled: boolean): void => {
+  isViewTransitionDisabled = disabled;
+};
+
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -14,7 +26,7 @@
 export const withViewTransition = (
   callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (!document.startViewTransition) {
+  if (!document.startViewTransition || isViewTransitionDisabled) {
     callback(false);
     return Promise.resolve();
   }

src/components/chart/ha-sankey-chart.ts

@@ -58,7 +58,7 @@ export class HaSankeyChart extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

src/components/chart/ha-sunburst-chart.ts

@@ -29,7 +29,7 @@ export class HaSunburstChart extends LitElement {
 
   @property({ attribute: false }) public data?: SunburstNode;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

src/components/chart/state-history-chart-line.ts

@@ -50,16 +50,16 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -716,6 +716,18 @@ export class StateHistoryChartLine extends LitElement {
       // Add an entry for final values
       pushData(endTime, prevValues);
 
+      // For sensors, append current state if viewing recent data
+      const now = new Date();
+      // allow 1s of leeway for "now"
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      if (domain === "sensor" && isUpToNow && data.length === 1) {
+        const stateObj = this.hass.states[states.entity_id];
+        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+        if (currentValue !== null) {
+          data[0].data!.push([now, currentValue]);
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(datasets, data);
     });

src/components/chart/state-history-chart-timeline.ts

@@ -47,9 +47,9 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "hide-reset-button", type: Boolean })
   public hideResetButton?: boolean;

src/components/chart/state-history-charts.ts

@@ -60,7 +60,7 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
-  @property({ attribute: false, type: Number }) public hoursToShow?: number;
+  @property({ attribute: false }) public hoursToShow?: number;
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
@@ -73,9 +73,9 @@ export class StateHistoryCharts extends LitElement {
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 

src/components/chart/statistics-chart.ts

@@ -62,14 +62,14 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
   @property({ attribute: false }) public chartType: "line" | "bar" = "line";
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -605,6 +605,57 @@ export class StatisticsChart extends LitElement {
         }
       });
 
+      // Append current state if viewing recent data
+      const now = new Date();
+      // allow 10m of leeway for "now", because stats are 5 minute aggregated
+      const isUpToNow = now.getTime() - endTime.getTime() <= 600000;
+      if (isUpToNow) {
+        // Skip external statistics (they have ":" in the ID)
+        if (!statistic_id.includes(":")) {
+          const stateObj = this.hass.states[statistic_id];
+          if (stateObj) {
+            const currentValue = parseFloat(stateObj.state);
+            if (
+              isFinite(currentValue) &&
+              !this._hiddenStats.has(statistic_id)
+            ) {
+              // First, close out the last stat segment at prevEndTime
+              const lastEndTime = prevEndTime;
+              const lastValues = prevValues;
+              if (lastEndTime && lastValues) {
+                statDataSets.forEach((d, i) => {
+                  d.data!.push(
+                    this._transformDataValue([lastEndTime, ...lastValues[i]!])
+                  );
+                });
+              }
+              // Then push the current state at now
+              statTypes.forEach((type, i) => {
+                const val: (number | null)[] = [];
+                if (type === "sum" || type === "change") {
+                  // Skip cumulative types - need special calculation
+                  val.push(null);
+                } else if (
+                  type === bandTop &&
+                  this.chartType === "line" &&
+                  drawBands &&
+                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+                ) {
+                  // For band chart, current value is both min and max, so diff is 0
+                  val.push(0);
+                  val.push(currentValue);
+                } else {
+                  val.push(currentValue);
+                }
+                statDataSets[i].data!.push(
+                  this._transformDataValue([now, ...val])
+                );
+              });
+            }
+          }
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(totalDataSets, statDataSets);
       Array.prototype.push.apply(legendData, statLegendData);

src/components/data-table/ha-data-table.ts

@@ -130,9 +130,9 @@ export class HaDataTable extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: String }) public id = "id";
 
-  @property({ attribute: false, type: String }) public noDataText?: string;
+  @property({ attribute: false }) public noDataText?: string;
 
-  @property({ attribute: false, type: String }) public searchLabel?: string;
+  @property({ attribute: false }) public searchLabel?: string;
 
   @property({ type: Boolean, attribute: "no-label-float" })
   public noLabelFloat? = false;

src/components/device/ha-device-picker.ts

@@ -48,7 +48,7 @@ export class HaDevicePicker extends LitElement {
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show only devices with entities from specific domains.

src/components/entity/ha-entities-picker.ts

@@ -76,7 +76,7 @@ class HaEntitiesPicker extends LitElement {
   @property({ attribute: false })
   public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   @property({ type: Boolean })
   public reorder = false;

src/components/entity/ha-entity-picker.ts

@@ -58,7 +58,7 @@ export class HaEntityPicker extends LitElement {
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show entities from specific domains.

src/components/entity/ha-statistic-picker.ts

@@ -78,7 +78,7 @@ export class HaStatisticPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public statisticIds?: StatisticsMetaData[];
 
   @property({ attribute: false }) public helpMissingEntityUrl =

src/components/entity/ha-statistics-picker.ts

@@ -11,7 +11,7 @@ class HaStatisticsPicker extends LitElement {
 
   @property({ type: Array }) public value?: string[];
 
-  @property({ attribute: false, type: Array }) public statisticIds?: string[];
+  @property({ attribute: false }) public statisticIds?: string[];
 
   @property({ attribute: "statistic-types" })
   public statisticTypes?: "mean" | "sum";

src/components/ha-assist-chat.ts

@@ -36,7 +36,7 @@ export class HaAssistChat extends LitElement {
   @property({ type: Boolean, attribute: "disable-speech" })
   public disableSpeech = false;
 
-  @property({ type: Boolean, attribute: false })
+  @property({ attribute: false })
   public startListening?: boolean;
 
   @query("#message-input") private _messageInput!: HaTextField;

src/components/ha-card.ts

@@ -51,6 +51,7 @@ export class HaCard extends LitElement {
       font-weight: var(--ha-font-weight-normal);
     }
 
+    /* clean-css ignore:start */
     :host
       ::slotted(
         .card-content:not(:nth-child(1 of .card-content, .card-header))
@@ -59,6 +60,7 @@ export class HaCard extends LitElement {
       padding-top: 0;
       margin-top: calc(var(--ha-space-2) * -1);
     }
+    /* clean-css ignore:end */
 
     :host ::slotted(.card-content) {
       padding: var(--ha-space-4);

src/components/ha-code-editor.ts

@@ -13,6 +13,8 @@ import {
   mdiArrowCollapse,
   mdiArrowExpand,
   mdiContentCopy,
+  mdiBug,
+  mdiBugOutline,
   mdiFindReplace,
   mdiRedo,
   mdiUndo,
@@ -37,6 +39,7 @@ import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";
 declare global {
   interface HASSDomEvents {
     "editor-save": undefined;
+    "test-toggle": undefined;
   }
 }
 
@@ -83,6 +86,11 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "has-toolbar" })
   public hasToolbar = true;
 
+  @property({ type: Boolean, attribute: "has-test" })
+  public hasTest = false;
+
+  @property({ attribute: false }) public testing = false;
+
   @property({ type: String }) public placeholder?: string;
 
   @state() private _value = "";
@@ -214,7 +222,8 @@ export class HaCodeEditor extends ReactiveElement {
     if (
       changedProps.has("_canCopy") ||
       changedProps.has("_canUndo") ||
-      changedProps.has("_canRedo")
+      changedProps.has("_canRedo") ||
+      changedProps.has("testing")
     ) {
       this._updateToolbarButtons();
     }
@@ -362,6 +371,19 @@ export class HaCodeEditor extends ReactiveElement {
     }
 
     this._editorToolbar.items = [
+      ...(this.hasTest && !this._isFullscreen
+        ? [
+            {
+              id: "test",
+              label:
+                this.hass?.localize(
+                  `ui.components.yaml-editor.test_${this.testing ? "off" : "on"}`
+                ) || "Test",
+              path: this.testing ? mdiBugOutline : mdiBug,
+              action: (e: Event) => this._handleTestClick(e),
+            },
+          ]
+        : []),
       {
         id: "undo",
         disabled: !this._canUndo,
@@ -427,6 +449,15 @@ export class HaCodeEditor extends ReactiveElement {
     }
   };
 
+  private _handleTestClick = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!this.codemirror) {
+      return;
+    }
+    fireEvent(this, "test-toggle");
+  };
+
   private _handleUndoClick = (e: Event) => {
     e.preventDefault();
     e.stopPropagation();

src/components/ha-control-select-menu.ts

@@ -1,24 +1,31 @@
-import { SelectBase } from "@material/mwc-select/mwc-select-base";
 import { mdiMenuDown } from "@mdi/js";
-import type { PropertyValues } from "lit";
-import { css, html, nothing } from "lit";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { debounce } from "../common/util/debounce";
-import { nextRender } from "../common/util/render-status";
+import memoizeOne from "memoize-one";
+import type { HomeAssistant } from "../types";
+import "./ha-attribute-icon";
+import "./ha-dropdown";
+import "./ha-dropdown-item";
 import "./ha-icon";
-import type { HaIcon } from "./ha-icon";
-import "./ha-ripple";
 import "./ha-svg-icon";
-import type { HaSvgIcon } from "./ha-svg-icon";
-import "./ha-menu";
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  iconPath?: string;
+  icon?: string;
+  attributeIcon?: {
+    stateObj: HassEntity;
+    attribute: string;
+    attributeValue?: string;
+  };
+}
 
 @customElement("ha-control-select-menu")
-export class HaControlSelectMenu extends SelectBase {
-  @query(".select") protected mdcRoot!: HTMLElement;
-
-  @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
+export class HaControlSelectMenu extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, attribute: "show-arrow" })
   public showArrow = false;
@@ -26,95 +33,83 @@ export class HaControlSelectMenu extends SelectBase {
   @property({ type: Boolean, attribute: "hide-label" })
   public hideLabel = false;
 
-  @property() public options;
+  @property({ type: Boolean })
+  public disabled = false;
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (changedProps.get("options")) {
-      this.layoutOptions();
-      this.selectByValue(this.value);
-    }
-  }
+  @property({ type: Boolean })
+  public required = false;
+
+  @property()
+  public label?: string;
+
+  @property()
+  public value?: string;
+
+  @property({ attribute: false }) public options: SelectOption[] = [];
+
+  @query("button") private _triggerButton!: HTMLButtonElement;
 
   public override render() {
-    const classes = {
-      "select-disabled": this.disabled,
-      "select-required": this.required,
-      "select-invalid": !this.isUiValid,
-      "select-no-value": !this.selectedText,
-    };
-
-    const labelledby = this.label && !this.hideLabel ? "label" : undefined;
-    const labelAttribute =
-      this.label && this.hideLabel ? this.label : undefined;
+    if (this.disabled) {
+      return this._renderTrigger();
+    }
 
     return html`
-      <div class="select ${classMap(classes)}">
-        <input
-          class="formElement"
-          .name=${this.name}
-          .value=${this.value}
-          hidden
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-        />
-        <!-- @ts-ignore -->
-        <div
-          class="select-anchor"
-          aria-autocomplete="none"
-          role="combobox"
-          aria-expanded=${this.menuOpen}
-          aria-invalid=${!this.isUiValid}
-          aria-haspopup="listbox"
-          aria-labelledby=${ifDefined(labelledby)}
-          aria-label=${ifDefined(labelAttribute)}
-          aria-required=${this.required}
-          aria-controls="listbox"
-          @focus=${this.onFocus}
-          @blur=${this.onBlur}
-          @click=${this.onClick}
-          @keydown=${this.onKeydown}
-        >
-          ${this._renderIcon()}
-          <div class="content">
-            ${this.hideLabel
-              ? nothing
-              : html`<p id="label" class="label">${this.label}</p>`}
-            ${this.selectedText
-              ? html`<p class="value">${this.selectedText}</p>`
-              : nothing}
-          </div>
-          ${this._renderArrow()}
-          <ha-ripple .disabled=${this.disabled}></ha-ripple>
-        </div>
-        ${this.renderMenu()}
-      </div>
+      <ha-dropdown placement="bottom" @wa-show=${this._showDropdown}>
+        ${this._renderTrigger()} ${this.options.map(this._renderOption)}
+      </ha-dropdown>
     `;
   }
 
-  protected override renderMenu() {
-    const classes = this.getMenuClasses();
-    return html`<ha-menu
-      innerRole="listbox"
-      wrapFocus
-      class=${classMap(classes)}
-      activatable
-      .fullwidth=${this.fixedMenuPosition ? false : !this.naturalMenuWidth}
-      .open=${this.menuOpen}
-      .anchor=${this.anchorElement}
-      .fixed=${this.fixedMenuPosition}
-      @selected=${this.onSelected}
-      @opened=${this.onOpened}
-      @closed=${this.onClosed}
-      @items-updated=${this.onItemsUpdated}
-      @keydown=${this.handleTypeahead}
+  private _renderTrigger() {
+    const selectedText = this.getValueObject(this.options, this.value)?.label;
+
+    const classes = {
+      "select-disabled": this.disabled,
+      "select-required": this.required,
+      "select-no-value": !selectedText,
+    };
+
+    return html`<button
+      ?disabled=${this.disabled}
+      slot="trigger"
+      class="select-anchor ${classMap(classes)}"
     >
-      ${this.renderMenuContent()}
-    </ha-menu>`;
+      ${this._renderIcon()}
+      <div class="content">
+        ${this.hideLabel
+          ? nothing
+          : html`<p id="label" class="label">${this.label}</p>`}
+        ${selectedText ? html`<p class="value">${selectedText}</p>` : nothing}
+      </div>
+      ${this._renderArrow()}
+    </button>`;
   }
 
+  private _renderOption = (option: SelectOption) =>
+    html`<ha-dropdown-item
+      .value=${option.value}
+      class=${this.value === option.value ? "selected" : ""}
+      >${option.iconPath
+        ? html`<ha-svg-icon slot="icon" .path=${option.iconPath}></ha-svg-icon>`
+        : option.icon
+          ? html`<ha-icon slot="icon" .icon=${option.icon}></ha-icon>`
+          : option.attributeIcon
+            ? html`<ha-attribute-icon
+                slot="icon"
+                .hass=${this.hass}
+                .stateObj=${option.attributeIcon.stateObj}
+                .attribute=${option.attributeIcon.attribute}
+                .attributeValue=${option.attributeIcon.attributeValue}
+              ></ha-attribute-icon>`
+            : nothing}
+      ${option.label}</ha-dropdown-item
+    >`;
+
   private _renderArrow() {
-    if (!this.showArrow) return nothing;
+    if (!this.showArrow) {
+      return nothing;
+    }
 
     return html`
       <div class="icon">
@@ -124,47 +119,42 @@ export class HaControlSelectMenu extends SelectBase {
   }
 
   private _renderIcon() {
-    const index = this.mdcFoundation?.getSelectedIndex();
-    const items = this.menuElement?.items ?? [];
-    const item = index != null ? items[index] : undefined;
+    const { iconPath, icon, attributeIcon } =
+      this.getValueObject(this.options, this.value) ?? {};
     const defaultIcon = this.querySelector("[slot='icon']");
-    const icon = (item?.querySelector("[slot='graphic']") ?? null) as
-      | HaSvgIcon
-      | HaIcon
-      | null;
-
-    if (!defaultIcon && !icon) {
-      return null;
-    }
 
     return html`
       <div class="icon">
-        ${icon && icon.localName === "ha-svg-icon" && "path" in icon
-          ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
-          : icon && icon.localName === "ha-icon" && "icon" in icon
-            ? html`<ha-icon .path=${icon.icon}></ha-icon>`
-            : html`<slot name="icon"></slot>`}
+        ${iconPath
+          ? html`<ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>`
+          : icon
+            ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
+            : attributeIcon
+              ? html`<ha-attribute-icon
+                  slot="icon"
+                  .hass=${this.hass}
+                  .stateObj=${attributeIcon.stateObj}
+                  .attribute=${attributeIcon.attribute}
+                  .attributeValue=${attributeIcon.attributeValue}
+                ></ha-attribute-icon>`
+              : defaultIcon
+                ? html`<slot name="icon"></slot>`
+                : nothing}
       </div>
     `;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("translations-updated", this._translationsUpdated);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "translations-updated",
-      this._translationsUpdated
+  private _showDropdown() {
+    this.style.setProperty(
+      "--control-select-menu-width",
+      `${this._triggerButton.offsetWidth}px`
     );
   }
 
-  private _translationsUpdated = debounce(async () => {
-    await nextRender();
-    this.layoutOptions();
-  }, 500);
+  private getValueObject = memoizeOne(
+    (options: SelectOption[], value?: string) =>
+      options.find((option) => option.value === value)
+  );
 
   static override styles = [
     css`
@@ -186,6 +176,8 @@ export class HaControlSelectMenu extends SelectBase {
         -webkit-tap-highlight-color: transparent;
       }
       .select-anchor {
+        border: none;
+        text-align: left;
         height: var(--control-select-menu-height);
         padding: var(--control-select-menu-padding);
         overflow: hidden;
@@ -211,6 +203,12 @@ export class HaControlSelectMenu extends SelectBase {
         font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;
       }
+      .select-anchor:hover {
+        --control-select-menu-background-color: var(
+          --ha-color-on-neutral-quiet
+        );
+      }
+
       .content {
         display: flex;
         flex-direction: column;
@@ -230,16 +228,19 @@ export class HaControlSelectMenu extends SelectBase {
       }
 
       .label {
-        font-size: 0.85em;
+        font-size: var(--ha-font-size-s);
         letter-spacing: 0.4px;
       }
-
       .select-no-value .label {
         font-size: inherit;
         line-height: inherit;
         letter-spacing: inherit;
       }
 
+      .content .value {
+        font-size: var(--ha-font-size-m);
+      }
+
       .select-anchor:focus-visible {
         box-shadow: 0 0 0 2px var(--control-select-menu-focus-color);
       }
@@ -258,10 +259,23 @@ export class HaControlSelectMenu extends SelectBase {
         opacity: var(--control-select-menu-background-opacity);
       }
 
-      .select-disabled .select-anchor {
+      .select-disabled.select-anchor {
         cursor: not-allowed;
         color: var(--disabled-color);
       }
+      ha-dropdown-item.selected {
+        font-weight: var(--ha-font-weight-medium);
+        color: var(--primary-color);
+        background-color: var(--ha-color-fill-primary-quiet-resting);
+        --icon-primary-color: var(--primary-color);
+      }
+      ha-dropdown-item.selected:hover {
+        background-color: var(--ha-color-fill-primary-quiet-hover);
+      }
+
+      ha-dropdown::part(menu) {
+        min-width: var(--control-select-menu-width);
+      }
     `,
   ];
 }

src/components/ha-control-switch.ts

@@ -24,10 +24,10 @@ export class HaControlSwitch extends LitElement {
   @property({ type: Boolean }) public checked = false;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
-  @property({ attribute: false, type: String }) pathOn?: string;
+  @property({ attribute: false }) pathOn?: string;
 
   // SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
-  @property({ attribute: false, type: String }) pathOff?: string;
+  @property({ attribute: false }) pathOff?: string;
 
   @property({ type: String })
   public label?: string;

src/components/ha-dialog.ts

@@ -88,6 +88,9 @@ export class HaDialog extends DialogBase {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         --mdc-typography-headline6-font-size: 1.574rem;
       }
+      .mdc-dialog .mdc-dialog__scrim {
+        background-color: var(--mdc-dialog-scrim-color, none);
+      }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
         padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)

src/components/ha-dropdown-item.ts

@@ -1,9 +1,9 @@
 import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
 import "@home-assistant/webawesome/dist/components/icon/icon";
+import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 import { css, type CSSResultGroup, html } from "lit";
 import { customElement } from "lit/decorators";
 import "./ha-svg-icon";
-import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 
 /**
  * Home Assistant dropdown item component

src/components/ha-dropdown.ts

@@ -1,6 +1,9 @@
 import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
 import { css, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { HaDropdownItem } from "./ha-dropdown-item";
+
+export type HaDropdownSelectEvent = CustomEvent<{ item: HaDropdownItem }>;
 
 /**
  * Home Assistant dropdown component

src/components/ha-filter-categories.ts

@@ -31,6 +31,7 @@ import "./ha-expansion-panel";
 import "./ha-icon";
 import "./ha-list";
 import "./ha-list-item";
+import type { HaDropdownSelectEvent } from "./ha-dropdown";
 
 @customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -174,7 +175,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const categoryId = (ev.currentTarget as any).categoryId;
     const action = ev.detail.item.value;
     switch (action) {

src/components/ha-filter-domains.ts

@@ -39,9 +39,7 @@ export class HaFilterDomains extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize(
-            "ui.panel.config.entities.picker.headers.domain"
-          )}
+          ${this.hass.localize("ui.panel.config.domains.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-form/ha-form-multi_select.ts

@@ -11,8 +11,7 @@ import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-picker-field";
 
-import type { HaDropdown } from "../ha-dropdown";
-import type { HaDropdownItem } from "../ha-dropdown-item";
+import type { HaDropdown, HaDropdownSelectEvent } from "../ha-dropdown";
 import type {
   HaFormElement,
   HaFormMultiSelectData,
@@ -108,7 +107,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     `;
   }
 
-  protected _toggleItem(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  protected _toggleItem(ev: HaDropdownSelectEvent) {
     ev.preventDefault(); // keep the dropdown open
     const value = ev.detail.item.value;
     const action = (ev.detail.item as any).action;

src/components/ha-form/ha-form-optional_actions.ts

@@ -17,6 +17,7 @@ import type {
   HaFormOptionalActionsSchema,
   HaFormSchema,
 } from "./types";
+import type { HaDropdownSelectEvent } from "../ha-dropdown";
 
 const NO_ACTIONS = [];
 
@@ -142,7 +143,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     `;
   }
 
-  private _handleAddAction(ev: CustomEvent<{ item: { value: string } }>) {
+  private _handleAddAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
     this._displayActions = [...(this._displayActions ?? []), action];
   }

src/components/ha-gauge.ts

@@ -30,7 +30,7 @@ export class HaGauge extends LitElement {
   @property({ attribute: false })
   public formatOptions?: Intl.NumberFormatOptions;
 
-  @property({ attribute: false, type: String }) public valueText?: string;
+  @property({ attribute: false }) public valueText?: string;
 
   @property({ attribute: false }) public locale!: FrontendLocaleData;
 

src/components/ha-generic-picker.ts

@@ -48,7 +48,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     section?: string
   ) => (PickerComboBoxItem | string)[] | undefined;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
 
   @property({ attribute: false })

src/components/ha-hs-color-picker.ts

@@ -113,13 +113,13 @@ class HaHsColorPicker extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
-  @property({ type: Number, attribute: false })
+  @property({ attribute: false })
   public renderSize?: number;
 
   @property({ type: Array })
   public value?: [number, number];
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public colorBrightness?: number;
 
   @property({ type: Number })
@@ -131,10 +131,10 @@ class HaHsColorPicker extends LitElement {
   @property({ type: Number })
   public ww?: number;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public minKelvin?: number;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public maxKelvin?: number;
 
   @query("#canvas") private _canvas!: HTMLCanvasElement;

src/components/ha-icon-button-toolbar.ts

@@ -19,7 +19,7 @@ export interface HaIconButtonToolbarItem {
 
 @customElement("ha-icon-button-toolbar")
 export class HaIconButtonToolbar extends LitElement {
-  @property({ type: Array, attribute: false })
+  @property({ attribute: false })
   public items: (HaIconButtonToolbarItem | string)[] = [];
 
   @queryAll("ha-icon-button") private _buttons?: HaIconButton[];

src/components/ha-icon-overflow-menu.ts

@@ -3,6 +3,7 @@ import { mdiDotsVertical } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-dropdown";
@@ -39,7 +40,10 @@ export class HaIconOverflowMenu extends LitElement {
     return html`
       ${this.narrow
         ? html` <!-- Collapsed representation for small screens -->
-            <ha-dropdown @wa-show=${this._handleIconOverflowMenuOpened}>
+            <ha-dropdown
+              @wa-show=${this._handleIconOverflowMenuOpened}
+              @click=${stopPropagation}
+            >
               <ha-icon-button
                 .label=${this.hass.localize("ui.common.overflow_menu")}
                 .path=${mdiDotsVertical}

src/components/ha-icon.ts

@@ -156,6 +156,10 @@ export class HaIcon extends LitElement {
     );
     chunks[chunk] = iconPromise;
     this._setPath(iconPromise, iconName, requestedIcon);
+    // Remove chunk from cache on failure so next attempt retries
+    iconPromise.catch(() => {
+      delete chunks[chunk];
+    });
     debouncedWriteCache();
   }
 
@@ -177,11 +181,15 @@ export class HaIcon extends LitElement {
     iconName: string,
     requestedIcon: string
   ) {
-    const iconPack = await promise;
-    if (this.icon === requestedIcon) {
-      this._path = iconPack[iconName];
+    try {
+      const iconPack = await promise;
+      if (this.icon === requestedIcon) {
+        this._path = iconPack[iconName];
+      }
+      cachedIcons[iconName] = iconPack[iconName];
+    } catch (_err) {
+      // Chunk failed to load, already evicted from cache for retry
     }
-    cachedIcons[iconName] = iconPack[iconName];
   }
 
   static styles = css`

src/components/ha-markdown.ts

@@ -134,16 +134,51 @@ export class HaMarkdown extends LitElement {
     }
     table[role="presentation"] {
       --markdown-table-border-collapse: separate;
-      --markdown-table-border-width: attr(border, 0);
+      --markdown-table-border-width: 0;
       --markdown-table-padding-inline: 0;
       --markdown-table-padding-block: 0;
-      th {
-        vertical-align: attr(valign, middle);
-      }
+      th,
       td {
+        vertical-align: middle;
+      }
+    }
+    table[role="presentation"] td[valign="top"],
+    table[role="presentation"] th[valign="top"] {
+      vertical-align: top;
+    }
+    table[role="presentation"] td[valign="middle"],
+    table[role="presentation"] th[valign="middle"] {
+      vertical-align: middle;
+    }
+    table[role="presentation"] td[valign="bottom"],
+    table[role="presentation"] th[valign="bottom"] {
+      vertical-align: bottom;
+    }
+    table[role="presentation"] td[valign="baseline"],
+    table[role="presentation"] th[valign="baseline"] {
+      vertical-align: baseline;
+    }
+    @supports (border-width: attr(border px, 0)) {
+      table[role="presentation"] {
+        --markdown-table-border-width: attr(border px, 0);
+      }
+      table[role="presentation"] th,
+      table[role="presentation"] td {
         vertical-align: attr(valign, middle);
       }
     }
+    table[role="presentation"][border="0"] {
+      --markdown-table-border-width: 0;
+    }
+    table[role="presentation"][border="1"] {
+      --markdown-table-border-width: 1px;
+    }
+    table[role="presentation"][border="2"] {
+      --markdown-table-border-width: 2px;
+    }
+    table[role="presentation"][border="3"] {
+      --markdown-table-border-width: 3px;
+    }
     table {
       border-collapse: var(--markdown-table-border-collapse, collapse);
     }

src/components/ha-navigation-picker.ts

@@ -11,6 +11,7 @@ import { fetchConfig } from "../data/lovelace/config/types";
 import { getPanelIcon, getPanelTitle } from "../data/panel";
 import { findRelated, type RelatedResult } from "../data/search";
 import { PANEL_DASHBOARDS } from "../panels/config/lovelace/dashboards/ha-config-lovelace-dashboards";
+import { computeAreaPath } from "../panels/lovelace/strategies/areas/helpers/areas-strategy-helper";
 import { multiTermSortedSearch } from "../resources/fuseMultiTerm";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { ActionRelatedContext } from "../panels/lovelace/components/hui-action-editor";
@@ -25,8 +26,9 @@ import {
 type NavigationGroup = "related" | "dashboards" | "views" | "other_routes";
 
 const RELATED_SORT_PREFIX = {
-  area: "0_area",
-  device: "1_device",
+  area_view: "0_area_view",
+  area: "1_area_settings",
+  device: "2_device",
 } as const;
 
 interface NavigationItem extends PickerComboBoxItem {
@@ -437,10 +439,31 @@ export class HaNavigationPicker extends LitElement {
     for (const areaId of relatedAreaIds) {
       const area = this.hass.areas[areaId];
       const primary = area?.name ?? areaId;
+
+      // Area dashboard view
+      const viewPath = `/home/${computeAreaPath(areaId)}`;
+      relatedItems.push({
+        id: viewPath,
+        primary,
+        secondary: viewPath,
+        icon: area?.icon ?? undefined,
+        icon_path: area?.icon ? undefined : mdiTextureBox,
+        sorting_label: createSortingLabel(
+          RELATED_SORT_PREFIX.area_view,
+          primary,
+          viewPath
+        ),
+        group: "related",
+      });
+
+      // Area settings
       const path = `/config/areas/area/${areaId}`;
       relatedItems.push({
         id: path,
-        primary,
+        primary: this.hass.localize(
+          "ui.components.navigation-picker.area_settings",
+          { area: primary }
+        ),
         secondary: path,
         icon: area?.icon ?? undefined,
         icon_path: area?.icon ? undefined : mdiTextureBox,

src/components/ha-password-field.ts

@@ -89,7 +89,7 @@ export class HaPasswordField extends LitElement {
   @property({ type: Boolean }) readOnly = false;
 
   // eslint-disable-next-line lit/no-native-attributes
-  @property({ attribute: false, type: String }) autocapitalize = "";
+  @property({ attribute: false }) autocapitalize = "";
 
   @state() private _unmaskedPassword = false;
 

src/components/ha-picker-combo-box.ts

@@ -22,6 +22,7 @@ import {
 import { haStyleScrollbar } from "../resources/styles";
 import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
+import { isTouch } from "../util/is_touch";
 import "./chips/ha-chip-set";
 import "./chips/ha-filter-chip";
 import "./ha-combo-box-item";
@@ -56,6 +57,11 @@ export interface PickerComboBoxItem {
   icon?: string;
 }
 
+export interface PickerComboBoxIndexSelectedDetail {
+  index: number;
+  newTab?: boolean;
+}
+
 export const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";
 const PADDING_ID = "___padding___";
 
@@ -113,7 +119,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     section?: string
   ) => PickerComboBoxItem[] | undefined;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
 
   @property({ attribute: false })
@@ -279,6 +285,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           section === "separator"
             ? html`<div class="separator"></div>`
             : html`<ha-filter-chip
+                @mousedown=${isTouch ? undefined : this._preventBlur}
                 @click=${this._toggleSection}
                 .section-id=${section.id}
                 .selected=${this._selectedSection === section.id}
@@ -417,18 +424,19 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     return this.value || "";
   }
 
-  private _valueSelected = (ev: Event) => {
+  private _valueSelected = (ev: MouseEvent) => {
     ev.stopPropagation();
     const value = (ev.currentTarget as any).value as string;
     const index = Number((ev.currentTarget as any).index);
     const newValue = value?.trim();
+    const newTab = ev.ctrlKey || ev.metaKey;
 
-    this._fireSelectedEvents(newValue, index);
+    this._fireSelectedEvents(newValue, index, newTab);
   };
 
-  private _fireSelectedEvents(value: string, index: number) {
+  private _fireSelectedEvents(value: string, index: number, newTab = false) {
     fireEvent(this, "value-changed", { value });
-    fireEvent(this, "index-selected", { index });
+    fireEvent(this, "index-selected", { index, newTab });
   }
 
   private _clearSearch = () => {
@@ -500,6 +508,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     this._valuePinned = true;
   };
 
+  private _preventBlur(ev: Event) {
+    ev.preventDefault();
+  }
+
   private _toggleSection(ev: Event) {
     ev.stopPropagation();
     this._resetSelectedItem();
@@ -517,9 +529,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     this._items = this._getItems();
 
     // Reset scroll position when filter changes
-    if (this.virtualizerElement) {
-      this.virtualizerElement.scrollToIndex(0);
-    }
+    this.virtualizerElement?.element(0)?.scrollIntoView();
   }
 
   private _registerKeyboardShortcuts() {
@@ -529,15 +539,42 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       Home: this._selectFirstItem,
       End: this._selectLastItem,
       Enter: this._pickSelectedItem,
+      "$mod+Enter": this._pickSelectedItemNewTab,
     });
   }
 
   private _focusList() {
     if (this._selectedItemIndex === -1) {
-      this._selectNextItem();
+      this._initializeSelectedIndex();
     }
   }
 
+  /**
+   * Initialize keyboard selection to the currently selected value,
+   * or fall back to the first item when searching (skipping section titles).
+   */
+  private _initializeSelectedIndex(): void {
+    if (!this.virtualizerElement?.items?.length) {
+      return;
+    }
+    const initialIndex = this._getInitialSelectedIndex();
+    // Only initialize to first item if searching, otherwise require a selected value
+    if (initialIndex === 0 && !this._search) {
+      return;
+    }
+    let index = initialIndex;
+    // Skip section titles (strings)
+    if (typeof this.virtualizerElement.items[index] === "string") {
+      index += 1;
+    }
+    // Bounds check: ensure index is valid after skipping section title
+    if (index >= this.virtualizerElement.items.length) {
+      return;
+    }
+    this._selectedItemIndex = index;
+    this._scrollToSelectedItem();
+  }
+
   private _selectNextItem = (ev?: KeyboardEvent) => {
     ev?.stopPropagation();
     ev?.preventDefault();
@@ -556,6 +593,14 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       return;
     }
 
+    // If no item is selected yet, start from the currently selected value
+    if (this._selectedItemIndex === -1) {
+      this._initializeSelectedIndex();
+      if (this._selectedItemIndex !== -1) {
+        return;
+      }
+    }
+
     const nextIndex =
       maxItems === this._selectedItemIndex
         ? this._selectedItemIndex
@@ -647,7 +692,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       ?.querySelector(".selected")
       ?.classList.remove("selected");
 
-    this.virtualizerElement?.scrollToIndex(this._selectedItemIndex, "end");
+    this.virtualizerElement
+      ?.element(this._selectedItemIndex)
+      ?.scrollIntoView({ block: "nearest" });
 
     requestAnimationFrame(() => {
       this.virtualizerElement
@@ -657,6 +704,14 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   };
 
   private _pickSelectedItem = (ev: KeyboardEvent) => {
+    this._pickItem(ev, false);
+  };
+
+  private _pickSelectedItemNewTab = (ev: KeyboardEvent) => {
+    this._pickItem(ev, true);
+  };
+
+  private _pickItem = (ev: KeyboardEvent, newTab: boolean) => {
     ev.stopPropagation();
     if (
       this.virtualizerElement?.items?.length !== undefined &&
@@ -668,14 +723,17 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         this.virtualizerElement?.items as (PickerComboBoxItem | string)[]
       ).forEach((item, index) => {
         if (typeof item !== "string") {
-          this._fireSelectedEvents(item.id, index);
+          this._fireSelectedEvents(item.id, index, newTab);
         }
       });
       return;
     }
 
     if (this._selectedItemIndex === -1) {
-      return;
+      this._initializeSelectedIndex();
+      if (this._selectedItemIndex === -1) {
+        return;
+      }
     }
 
     // if filter button is focused
@@ -685,7 +743,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       this._selectedItemIndex
     ] as PickerComboBoxItem;
     if (item) {
-      this._fireSelectedEvents(item.id, this._selectedItemIndex);
+      this._fireSelectedEvents(item.id, this._selectedItemIndex, newTab);
     }
   };
 
@@ -891,6 +949,6 @@ declare global {
   }
 
   interface HASSDomEvents {
-    "index-selected": { index: number };
+    "index-selected": PickerComboBoxIndexSelectedDetail;
   }
 }

src/components/ha-qr-code.ts

@@ -22,7 +22,7 @@ export class HaQrCode extends LitElement {
   @property({ type: Number })
   public margin = 4;
 
-  @property({ attribute: false, type: Number })
+  @property({ attribute: false })
   public maskPattern?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
   @property({ attribute: "center-image" }) public centerImage?: string;

src/components/ha-qr-scanner.ts

@@ -14,8 +14,8 @@ import type { HomeAssistant } from "../types";
 import "./ha-alert";
 import "./ha-button";
 import "./ha-dropdown";
+import type { HaDropdownSelectEvent } from "./ha-dropdown";
 import "./ha-dropdown-item";
-import type { HaDropdownItem } from "./ha-dropdown-item";
 import "./ha-spinner";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
@@ -259,7 +259,7 @@ class HaQrScanner extends LitElement {
     this._qrCodeScanned(this._manualInput!.value);
   }
 
-  private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
     const cameraId = ev.detail?.item?.value;
     if (cameraId) {
       this._selectedCamera = cameraId;

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

@@ -1,42 +1,8 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { AddonSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-addon-picker";
+import { customElement } from "lit/decorators";
+import { HaAppSelector } from "./ha-selector-app";
 
 @customElement("ha-selector-addon")
-export class HaAddonSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: AddonSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`<ha-addon-picker
-      .hass=${this.hass}
-      .value=${this.value}
-      .label=${this.label}
-      .helper=${this.helper}
-      .disabled=${this.disabled}
-      .required=${this.required}
-    ></ha-addon-picker>`;
-  }
-
-  static styles = css`
-    ha-addon-picker {
-      width: 100%;
-    }
-  `;
-}
+export class HaAddonSelector extends HaAppSelector {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { AppSelector } from "../../data/selector";
+import type { AppSelector, AddonSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-addon-picker";
 
@@ -8,7 +8,7 @@ import "../ha-addon-picker";
 export class HaAppSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public selector!: AppSelector;
+  @property({ attribute: false }) public selector!: AppSelector | AddonSelector;
 
   @property() public value?: any;
 

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

@@ -1,11 +1,17 @@
+import type { PropertyValues } from "lit";
 import { css, html, nothing, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import "../ha-code-editor";
 import "../ha-input-helper-text";
 import "../ha-alert";
+import type { RenderTemplateResult } from "../../data/ws-templates";
+import { subscribeRenderTemplate } from "../../data/ws-templates";
+import { debounce } from "../../common/util/debounce";
+import type { TemplateSelector } from "../../data/selector";
 
 const WARNING_STRINGS = ["template:", "sensor:", "state:", "trigger: template"];
 
@@ -13,6 +19,8 @@ const WARNING_STRINGS = ["template:", "sensor:", "state:", "trigger: template"];
 export class HaTemplateSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public selector!: TemplateSelector;
+
   @property() public value?: string;
 
   @property() public label?: string;
@@ -27,6 +35,45 @@ export class HaTemplateSelector extends LitElement {
 
   @state() private warn: string | undefined = undefined;
 
+  @state() private _test = false;
+
+  @state() private _error?: string;
+
+  @state() private _errorLevel?: "ERROR" | "WARNING";
+
+  @state() private _templateResult?: RenderTemplateResult;
+
+  @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+
+  private _debounceError = debounce(
+    (error, level) => {
+      this._error = error;
+      this._errorLevel = level;
+      this._templateResult = undefined;
+    },
+    500,
+    false
+  );
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._debounceError.cancel();
+    this._unsubscribeTemplate();
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this._test) {
+      this._subscribeTemplate();
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("value") && this._test) {
+      this._subscribeTemplate();
+    }
+  }
+
   protected render() {
     return html`
       ${this.warn
@@ -61,10 +108,22 @@ export class HaTemplateSelector extends LitElement {
         autofocus
         autocomplete-entities
         autocomplete-icons
+        .hasTest=${this.selector.template?.preview !== false}
+        .testing=${this._test}
         @value-changed=${this._handleChange}
+        @test-toggle=${this._testToggle}
         dir="ltr"
         linewrap
       ></ha-code-editor>
+      ${this._test && this._error
+        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+        : this._test && this._templateResult
+          ? html`<pre class="rendered">
+${typeof this._templateResult.result === "object"
+                ? JSON.stringify(this._templateResult.result, null, 2)
+                : this._templateResult.result}</pre
+            >`
+          : nothing}
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}
             >${this.helper}</ha-input-helper-text
@@ -73,6 +132,69 @@ export class HaTemplateSelector extends LitElement {
     `;
   }
 
+  private _testToggle() {
+    this._test = !this._test;
+    if (this._test) {
+      this._subscribeTemplate();
+    } else {
+      this._unsubscribeTemplate();
+    }
+  }
+
+  private async _subscribeTemplate() {
+    await this._unsubscribeTemplate();
+
+    const template = this.value || "";
+
+    try {
+      this._unsubRenderTemplate = subscribeRenderTemplate(
+        this.hass.connection,
+        (result) => {
+          if ("error" in result) {
+            // We show the latest error, or a warning if there are no errors
+            if (result.level === "ERROR" || this._errorLevel !== "ERROR") {
+              this._debounceError(result.error, result.level);
+            }
+          } else {
+            this._debounceError.cancel();
+            this._error = undefined;
+            this._errorLevel = undefined;
+            this._templateResult = result;
+          }
+        },
+        {
+          template,
+          timeout: 3,
+          report_errors: true,
+        }
+      );
+      await this._unsubRenderTemplate;
+    } catch (err: any) {
+      this._error = err.message || "Unknown error";
+      this._errorLevel = undefined;
+      this._templateResult = undefined;
+      this._unsubRenderTemplate = undefined;
+    }
+  }
+
+  private async _unsubscribeTemplate(): Promise<void> {
+    if (!this._unsubRenderTemplate) {
+      return;
+    }
+
+    try {
+      const unsub = await this._unsubRenderTemplate;
+      unsub();
+      this._unsubRenderTemplate = undefined;
+    } catch (err: any) {
+      if (err.code === "not_found") {
+        // If we get here, the connection was probably already closed. Ignore.
+      } else {
+        throw err;
+      }
+    }
+  }
+
   private _handleChange(ev) {
     ev.stopPropagation();
     let value = ev.target.value;
@@ -90,6 +212,20 @@ export class HaTemplateSelector extends LitElement {
     p {
       margin-top: 0;
     }
+    .rendered {
+      font-family: var(--ha-font-family-code);
+      -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+      clear: both;
+      white-space: pre-wrap;
+      background-color: var(--secondary-background-color);
+      padding: var(--ha-space-2);
+      margin-top: var(--ha-space-3);
+      margin-bottom: 0;
+      direction: ltr;
+      border-radius: var(--ha-border-radius-sm);
+      overflow-wrap: break-word;
+    }
   `;
 }
 

src/components/ha-sidebar.ts

@@ -135,9 +135,7 @@ export const computePanels = memoizeOne(
     const beforeSpacer: PanelInfo[] = [];
 
     const allPanels = Object.values(panels).filter(
-      (panel) =>
-        !FIXED_PANELS.includes(panel.url_path) &&
-        panel.url_path !== "developer-tools"
+      (panel) => !FIXED_PANELS.includes(panel.url_path)
     );
 
     allPanels.forEach((panel) => {
@@ -448,14 +446,9 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
   }
 
   private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
-    return panels.map((panel) => {
-      // Check both url_path match AND if current route matches panel's iframe destination
-      const isSelected =
-        panel.url_path === selectedPanel ||
-        (panel.config?.url?.startsWith("/") &&
-          this.route.path?.startsWith(panel.config.url));
-      return this._renderPanel(panel, isSelected);
-    });
+    return panels.map((panel) =>
+      this._renderPanel(panel, panel.url_path === selectedPanel)
+    );
   }
 
   private _renderPanel(panel: PanelInfo, isSelected: boolean) {

src/components/ha-target-picker.ts

@@ -76,7 +76,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public compact = false;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show only targets with entities from specific domains.

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

@@ -42,9 +42,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);
-        padding-inline-start: 24px;
+        padding-inline-start: var(--ha-space-6);
         padding-inline-end: initial;
       }
+      :host([narrow]) .mdc-top-app-bar__title {
+        padding-inline-start: var(--ha-space-2);
+      }
     `,
   ];
 }

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

@@ -48,7 +48,7 @@ export class TopAppBarBaseBase extends BaseElement {
 
   @query(".pane .ha-scrollbar") private _paneElement?: HTMLElement;
 
-  @property({ attribute: false, type: Object })
+  @property({ attribute: false })
   get scrollTarget() {
     return this._scrollTarget || window;
   }

src/components/media-player/dialog-media-player-browse.ts

@@ -21,8 +21,8 @@ import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-dialog-header";
 import "../ha-dropdown";
+import type { HaDropdownSelectEvent } from "../ha-dropdown";
 import "../ha-dropdown-item";
-import type { HaDropdownItem } from "../ha-dropdown-item";
 import "../ha-icon-button-arrow-prev";
 import "../ha-wa-dialog";
 import "./ha-media-manage-button";
@@ -177,7 +177,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     this.classList.add("opened");
   }
 
-  private async _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private async _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
     switch (action) {
       case "auto":

src/components/tile/ha-tile-container.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { ActionHandlerOptions } from "../../data/lovelace/action_handler";
 import { actionHandler } from "../../panels/lovelace/common/directives/action-handler-directive";
 import "../ha-ripple";
@@ -14,7 +15,7 @@ export class HaTileContainer extends LitElement {
   @property({ type: Boolean })
   public vertical = false;
 
-  @property({ type: Boolean, attribute: false })
+  @property({ attribute: false })
   public interactive = false;
 
   @property({ attribute: false })
@@ -47,7 +48,11 @@ export class HaTileContainer extends LitElement {
       >
         <ha-ripple .disabled=${!this.interactive}></ha-ripple>
       </div>
-      <div class="container ${containerOrientationClass}">
+      <div
+        class="container ${containerOrientationClass}"
+        @action=${stopPropagation}
+        @click=${stopPropagation}
+      >
         <div class="content ${classMap(contentClasses)}">
           <slot name="icon"></slot>
           <slot name="info" id="info"></slot>

src/data/climate.ts

@@ -53,6 +53,7 @@ export type ClimateEntity = HassEntityBase & {
     current_humidity?: number;
     target_humidity_low?: number;
     target_humidity_high?: number;
+    target_humidity_step?: number;
     min_humidity?: number;
     max_humidity?: number;
     fan_mode?: string;

src/data/data_table_filters.ts

@@ -35,7 +35,7 @@ export const deserializeFilters = (value: DataTableFilters) => {
 
 // returns true when this filter has *selected* options and the filter's name
 // equals the given filterName
-export const isUsedFilter = (
+export const isFilterUsed = (
   key: string,
   filter: DataTableFilter,
   filterName: string
@@ -49,7 +49,7 @@ export const isUsedFilter = (
 // which has resulted in a list of items that match these selected opions
 // (this list can be empty),
 // and the filter's name equals (one of) the given filterName(s)
-export const isUsedRelatedItemsFilter = (
+export const isRelatedItemsFilterUsed = (
   key: string,
   filter: DataTableFilter,
   filterName: string | string[]

src/data/energy.ts

@@ -131,11 +131,30 @@ export interface FlowToGridSourceEnergyPreference {
   number_energy_price: number | null;
 }
 
-export interface GridPowerSourceEnergyPreference {
-  // W meter
-  stat_rate: string;
+export interface PowerConfig {
+  stat_rate?: string; // Standard single sensor
+  stat_rate_inverted?: string; // Inverted single sensor
+  stat_rate_from?: string; // Battery: discharge / Grid: consumption
+  stat_rate_to?: string; // Battery: charge / Grid: return
 }
 
+export interface GridPowerSourceEnergyPreference {
+  stat_rate: string;
+  power_config?: PowerConfig;
+}
+
+/**
+ * Input type for saving grid power sources.
+ * Core requires EITHER stat_rate (legacy) OR power_config (new format).
+ * When reading from backend, stat_rate is always populated.
+ */
+export type GridPowerSourceInput = Omit<
+  GridPowerSourceEnergyPreference,
+  "stat_rate"
+> & {
+  stat_rate?: string;
+};
+
 export interface GridSourceTypeEnergyPreference {
   type: "grid";
 
@@ -159,6 +178,7 @@ export interface BatterySourceTypeEnergyPreference {
   stat_energy_from: string;
   stat_energy_to: string;
   stat_rate?: string;
+  power_config?: PowerConfig;
 }
 export interface GasSourceTypeEnergyPreference {
   type: "gas";
@@ -491,6 +511,15 @@ const getEnergyData = async (
         "mean",
       ])
     : {};
+  // If power stats 5 minute data is selected, then also fetch hourly data which
+  // will be used to back-fill any missing data points in the 5 minute data when
+  // the requested range is beyond the limit of short term statistics.
+  const _powerStatsHour: Statistics | Promise<Statistics> =
+    powerStatIds.length && finePeriod === "5minute"
+      ? fetchStatistics(hass!, start, end, powerStatIds, "hour", powerUnits, [
+          "mean",
+        ])
+      : {};
 
   const _waterStats: Statistics | Promise<Statistics> = waterStatIds.length
     ? fetchStatistics(hass!, start, end, waterStatIds, period, waterUnits, [
@@ -599,6 +628,7 @@ const getEnergyData = async (
   const [
     energyStats,
     powerStats,
+    powerStatsHour,
     waterStats,
     energyStatsCompare,
     waterStatsCompare,
@@ -607,12 +637,44 @@ const getEnergyData = async (
   ] = await Promise.all([
     _energyStats,
     _powerStats,
+    _powerStatsHour,
     _waterStats,
     _energyStatsCompare,
     _waterStatsCompare,
     _fossilEnergyConsumption,
     _fossilEnergyConsumptionCompare,
   ]);
+
+  // Back-fill any missing power statistics from hourly data if present
+  if (Object.keys(powerStatsHour).length) {
+    powerStatIds.forEach((powerId) => {
+      if (powerId in powerStatsHour) {
+        // If we have extra hourly power statistics for an ID, we may need to
+        // insert data into statistics
+        if (powerId in powerStats && powerStats[powerId].length) {
+          // We have 5-minute data. Only insert hourly values for time periods
+          // before the first 5-minute value.
+          const powerStatFirst = powerStats[powerId][0];
+          const powerStatHour = powerStatsHour[powerId];
+          let powerStatHourLast = 0;
+          for (const powerStat of powerStatHour) {
+            if (powerStat.end > powerStatFirst.start) {
+              break;
+            }
+            powerStatHourLast++;
+          }
+          powerStats[powerId] = [
+            ...powerStatHour.slice(0, powerStatHourLast),
+            ...powerStats[powerId],
+          ];
+        } else {
+          // There was no 5-minute data, so simply insert full hourly data
+          powerStats[powerId] = powerStatsHour[powerId];
+        }
+      }
+    });
+  }
+
   const stats = { ...energyStats, ...waterStats, ...powerStats };
   if (compare) {
     statsCompare = { ...energyStatsCompare, ...waterStatsCompare };

src/data/frontend.ts

@@ -13,10 +13,13 @@ export interface SidebarFrontendUserData {
 
 export interface CoreFrontendSystemData {
   default_panel?: string;
+  onboarded_version?: string;
+  onboarded_date?: string;
 }
 
 export interface HomeFrontendSystemData {
   favorite_entities?: string[];
+  welcome_banner_dismissed?: boolean;
 }
 
 declare global {

src/data/iconsets.ts

@@ -78,14 +78,16 @@ export const findIconChunk = (icon: string): string => {
 
 export const writeCache = async (chunks: Chunks) => {
   const keys = Object.keys(chunks);
-  const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
+  const results = await Promise.allSettled(Object.values(chunks));
   const iconStore = await getStore();
   // We do a batch opening the store just once, for (considerable) performance
   iconStore("readwrite", (store) => {
-    iconsSets.forEach((icons, idx) => {
-      Object.entries(icons).forEach(([name, path]) => {
-        store.put(path, name);
-      });
+    results.forEach((result, idx) => {
+      if (result.status === "fulfilled") {
+        Object.entries(result.value).forEach(([name, path]) => {
+          store.put(path, name);
+        });
+      }
       delete chunks[keys[idx]];
     });
   });

src/data/lovelace/resource.ts

@@ -1,6 +1,10 @@
 import type { Connection } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../../types";
 
+export interface LovelaceInfo {
+  resource_mode: "yaml" | "storage";
+}
+
 export interface LovelaceResource {
   id: string;
   type: "css" | "js" | "module" | "html";
@@ -42,3 +46,8 @@ export const deleteResource = (hass: HomeAssistant, id: string) =>
     type: "lovelace/resources/delete",
     resource_id: id,
   });
+
+export const fetchLovelaceInfo = (hass: HomeAssistant): Promise<LovelaceInfo> =>
+  hass.callWS({
+    type: "lovelace/info",
+  });

src/data/panel.ts

@@ -4,7 +4,6 @@ import {
   mdiChartBox,
   mdiClipboardList,
   mdiFormatListBulletedType,
-  mdiHammer,
   mdiLightningBolt,
   mdiPlayBoxMultiple,
   mdiTooltipAccount,
@@ -16,16 +15,26 @@ import type { LocalizeKeys } from "../common/translations/localize";
 /** Panel to show when no panel is picked. */
 export const DEFAULT_PANEL = "home";
 
+export const hasLegacyOverviewPanel = (hass: HomeAssistant): boolean =>
+  Boolean(hass.panels.lovelace?.config);
+
 export const getLegacyDefaultPanelUrlPath = (): string | null => {
   const defaultPanel = window.localStorage.getItem("defaultPanel");
   return defaultPanel ? JSON.parse(defaultPanel) : null;
 };
 
-export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
-  hass.userData?.default_panel ||
-  hass.systemData?.default_panel ||
-  getLegacyDefaultPanelUrlPath() ||
-  DEFAULT_PANEL;
+export const getDefaultPanelUrlPath = (hass: HomeAssistant): string => {
+  const defaultPanel =
+    hass.userData?.default_panel ||
+    hass.systemData?.default_panel ||
+    getLegacyDefaultPanelUrlPath() ||
+    DEFAULT_PANEL;
+  // If default panel is lovelace and no old overview exists, fall back to home
+  if (defaultPanel === "lovelace" && !hasLegacyOverviewPanel(hass)) {
+    return DEFAULT_PANEL;
+  }
+  return defaultPanel;
+};
 
 export const getDefaultPanel = (hass: HomeAssistant): PanelInfo => {
   const panel = getDefaultPanelUrlPath(hass);
@@ -116,7 +125,6 @@ export const getPanelIcon = (panel: PanelInfo): string | undefined => {
 
 export const PANEL_ICON_PATHS = {
   calendar: mdiCalendar,
-  "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,

src/data/quick_bar.ts

@@ -1,22 +1,24 @@
 import {
   mdiKeyboard,
   mdiNavigationVariant,
-  mdiPuzzle,
   mdiReload,
   mdiServerNetwork,
   mdiStorePlus,
 } from "@mdi/js";
-import { canShowPage } from "../common/config/can_show_page";
+import {
+  filterNavigationPages,
+  type NavigationFilterOptions,
+} from "../common/config/filter_navigation_pages";
 import { componentsWithService } from "../common/config/components_with_service";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import { configSections } from "../panels/config/ha-panel-config";
+import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
 import type { HassioAddonInfo } from "./hassio/addon";
 import { domainToName } from "./integration";
 import { getPanelIcon, getPanelNameTranslationKey } from "./panel";
-import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 
 export interface NavigationComboBoxItem extends PickerComboBoxItem {
   path: string;
@@ -27,6 +29,7 @@ export interface NavigationComboBoxItem extends PickerComboBoxItem {
 export interface BaseNavigationCommand {
   path: string;
   primary: string;
+  secondary?: string;
   icon_path?: string;
   iconPath?: string;
   iconColor?: string;
@@ -45,11 +48,14 @@ export interface NavigationInfo extends PageNavigation {
 const generateNavigationPanelCommands = (
   localize: HomeAssistant["localize"],
   panels: HomeAssistant["panels"],
-  addons?: HassioAddonInfo[]
+  apps?: HassioAddonInfo[]
 ): BaseNavigationCommand[] =>
   Object.entries(panels)
     .filter(
-      ([panelKey]) => panelKey !== "_my_redirect" && panelKey !== "hassio"
+      ([panelKey]) =>
+        panelKey !== "_my_redirect" &&
+        panelKey !== "hassio" &&
+        panelKey !== "app"
     )
     .map(([_panelKey, panel]) => {
       const translationKey = getPanelNameTranslationKey(panel);
@@ -59,12 +65,10 @@ const generateNavigationPanelCommands = (
 
       let image: string | undefined;
 
-      if (addons) {
-        const addon = addons.find(({ slug }) => slug === panel.url_path);
-        if (addon) {
-          image = addon.icon
-            ? `/api/hassio/addons/${addon.slug}/icon`
-            : undefined;
+      if (apps) {
+        const app = apps.find(({ slug }) => slug === panel.url_path);
+        if (app) {
+          image = app.icon ? `/api/hassio/addons/${app.slug}/icon` : undefined;
         }
       }
 
@@ -98,33 +102,30 @@ const getNavigationInfoFromConfig = (
 };
 
 const generateNavigationConfigSectionCommands = (
-  hass: HomeAssistant
+  hass: HomeAssistant,
+  filterOptions: NavigationFilterOptions = {}
 ): BaseNavigationCommand[] => {
   if (!hass.user?.is_admin) {
     return [];
   }
 
   const items: NavigationInfo[] = [];
+  const allPages = Object.values(configSections).flat();
+  const visiblePages = filterNavigationPages(hass, allPages, filterOptions);
 
-  Object.values(configSections).forEach((sectionPages) => {
-    sectionPages.forEach((page) => {
-      if (!canShowPage(hass, page)) {
-        return;
-      }
+  for (const page of visiblePages) {
+    const info = getNavigationInfoFromConfig(hass.localize, page);
 
-      const info = getNavigationInfoFromConfig(hass.localize, page);
+    if (!info) {
+      continue;
+    }
+    // Add to list, but only if we do not already have an entry for the same path and component
+    if (items.some((e) => e.path === info.path)) {
+      continue;
+    }
 
-      if (!info) {
-        return;
-      }
-      // Add to list, but only if we do not already have an entry for the same path and component
-      if (items.some((e) => e.path === info.path)) {
-        return;
-      }
-
-      items.push(info);
-    });
-  });
+    items.push(info);
+  }
 
   return items;
 };
@@ -140,7 +141,7 @@ const finalizeNavigationCommands = (
     return {
       id: `navigation_${index}_${item.path}`,
       icon_path: item.iconPath || mdiNavigationVariant,
-      secondary,
+      secondary: item.secondary || secondary,
       sorting_label: `${item.primary}_${secondary}`,
       ...item,
     };
@@ -148,41 +149,42 @@ const finalizeNavigationCommands = (
 
 export const generateNavigationCommands = (
   hass: HomeAssistant,
-  addons?: HassioAddonInfo[]
+  apps?: HassioAddonInfo[],
+  filterOptions: NavigationFilterOptions = {}
 ): NavigationComboBoxItem[] => {
   const panelItems = generateNavigationPanelCommands(
     hass.localize,
     hass.panels,
-    addons
+    apps
   );
-  const sectionItems = generateNavigationConfigSectionCommands(hass);
-  const supervisorItems: BaseNavigationCommand[] = [];
+
+  const sectionItems = generateNavigationConfigSectionCommands(
+    hass,
+    filterOptions
+  );
+  const appItems: BaseNavigationCommand[] = [];
   if (hass.user?.is_admin && isComponentLoaded(hass, "hassio")) {
-    supervisorItems.push({
-      path: "/hassio/store",
+    appItems.push({
+      path: "/config/apps/available",
       icon_path: mdiStorePlus,
       primary: hass.localize(
-        "ui.dialogs.quick-bar.commands.navigation.addon_store"
+        "ui.dialogs.quick-bar.commands.navigation.app_store"
       ),
+      iconColor: "#F1C447",
     });
-    supervisorItems.push({
-      path: "/hassio/dashboard",
-      icon_path: mdiPuzzle,
-      primary: hass.localize(
-        "ui.dialogs.quick-bar.commands.navigation.addon_dashboard"
-      ),
-    });
-    if (addons) {
-      for (const addon of addons.filter((a) => a.version)) {
-        supervisorItems.push({
-          path: `/hassio/addon/${addon.slug}`,
-          image: addon.icon
-            ? `/api/hassio/addons/${addon.slug}/icon`
-            : undefined,
+    if (apps) {
+      for (const app of apps.filter((a) => a.version)) {
+        appItems.push({
+          path: `/config/app/${app.slug}`,
+          image: app.icon ? `/api/hassio/addons/${app.slug}/icon` : undefined,
           primary: hass.localize(
-            "ui.dialogs.quick-bar.commands.navigation.addon_info",
-            { addon: addon.name }
+            "ui.dialogs.quick-bar.commands.navigation.app_info",
+            { app: app.name }
           ),
+          secondary: hass.localize(
+            "ui.dialogs.quick-bar.commands.types.app_settings"
+          ),
+          iconColor: "#F1C447",
         });
       }
     }
@@ -201,7 +203,7 @@ export const generateNavigationCommands = (
   return finalizeNavigationCommands(hass.localize, [
     ...panelItems,
     ...sectionItems,
-    ...supervisorItems,
+    ...appItems,
     ...additionalItems,
   ]);
 };
@@ -265,16 +267,16 @@ const generateServerControlCommands = (
 
   return serverActions.map((action, index) => {
     const primary = hass.localize(
-      "ui.dialogs.quick-bar.commands.server_control.perform_action",
+      "ui.dialogs.quick-bar.commands.home_assistant_control.perform_action",
       {
         action: hass.localize(
-          `ui.dialogs.quick-bar.commands.server_control.${action}`
+          `ui.dialogs.quick-bar.commands.home_assistant_control.${action}`
         ),
       }
     );
 
     const secondary = hass.localize(
-      "ui.dialogs.quick-bar.commands.types.server_control"
+      "ui.dialogs.quick-bar.commands.types.home_assistant_control"
     );
 
     return {

src/data/selector.ts

@@ -85,10 +85,7 @@ export interface ActionSelector {
 }
 
 export interface AddonSelector {
-  addon: {
-    name?: string;
-    slug?: string;
-  } | null;
+  addon: AppSelector["app"];
 }
 
 export interface AppSelector {
@@ -476,7 +473,9 @@ export interface TargetSelector {
 }
 
 export interface TemplateSelector {
-  template: {} | null;
+  template: {
+    preview?: boolean;
+  } | null;
 }
 
 export interface ThemeSelector {

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -91,9 +91,11 @@ export const showConfigFlowDialog = (
 
     renderShowFormStepFieldLabel(hass, step, field, options) {
       if (field.type === "expandable") {
-        return hass.localize(
-          `component.${step.handler}.config.step.${step.step_id}.sections.${field.name}.name`,
-          step.description_placeholders
+        return (
+          hass.localize(
+            `component.${step.handler}.config.step.${step.step_id}.sections.${field.name}.name`,
+            step.description_placeholders
+          ) || field.name
         );
       }
 

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -95,9 +95,11 @@ export const showOptionsFlowDialog = (
 
       renderShowFormStepFieldLabel(hass, step, field, options) {
         if (field.type === "expandable") {
-          return hass.localize(
-            `component.${configEntry.domain}.options.step.${step.step_id}.sections.${field.name}.name`,
-            step.description_placeholders
+          return (
+            hass.localize(
+              `component.${configEntry.domain}.options.step.${step.step_id}.sections.${field.name}.name`,
+              step.description_placeholders
+            ) || field.name
           );
         }
 

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -86,9 +86,11 @@ export const showSubConfigFlowDialog = (
 
     renderShowFormStepFieldLabel(hass, step, field, options) {
       if (field.type === "expandable") {
-        return hass.localize(
-          `component.${configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.sections.${field.name}.name`,
-          step.description_placeholders
+        return (
+          hass.localize(
+            `component.${configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.sections.${field.name}.name`,
+            step.description_placeholders
+          ) || field.name
         );
       }
 

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

@@ -8,9 +8,7 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
@@ -29,6 +27,7 @@ import "../../../state-control/climate/ha-state-control-climate-temperature";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type MainControl = "temperature" | "humidity";
 
@@ -169,182 +168,112 @@ class MoreInfoClimate extends LitElement {
       </div>
       <ha-more-info-control-select-container>
         <ha-control-select-menu
+          .hass=${this.hass}
           .label=${this.hass.localize("ui.card.climate.mode")}
           .value=${stateObj.state}
           .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._handleOperationModeChanged}
-          @closed=${stopPropagation}
-        >
-          ${html`
-            <ha-svg-icon
-              slot="icon"
-              .path=${climateHvacModeIcon(stateObj.state)}
-            ></ha-svg-icon>
-          `}
-          ${stateObj.attributes.hvac_modes
+          .options=${stateObj.attributes.hvac_modes
             .concat()
             .sort(compareClimateHvacModes)
-            .map(
-              (mode) => html`
-                <ha-list-item .value=${mode} graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${climateHvacModeIcon(mode)}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityState(stateObj, mode)}
-                </ha-list-item>
-              `
-            )}
+            .map((mode) => ({
+              value: mode,
+              iconPath: climateHvacModeIcon(mode),
+              label: this.hass.formatEntityState(stateObj, mode),
+            }))}
+          @wa-select=${this._handleOperationModeChanged}
+        >
+          <ha-svg-icon
+            slot="icon"
+            .path=${climateHvacModeIcon(stateObj.state)}
+          ></ha-svg-icon>
         </ha-control-select-menu>
         ${supportPresetMode && stateObj.attributes.preset_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "preset_mode"
                 )}
                 .value=${stateObj.attributes.preset_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handlePresetmodeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handlePresetmodeChanged}
+                .options=${stateObj.attributes.preset_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "preset_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "preset_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.preset_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${stateObj.attributes.preset_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.preset_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "preset_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportFanMode && stateObj.attributes.fan_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "fan_mode"
                 )}
                 .value=${stateObj.attributes.fan_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleFanModeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleFanModeChanged}
+                .options=${stateObj.attributes.fan_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "fan_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "fan_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.fan_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="fan_mode"
-                        .attributeValue=${stateObj.attributes.fan_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.fan_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="fan_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "fan_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportSwingMode && stateObj.attributes.swing_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "swing_mode"
                 )}
                 .value=${stateObj.attributes.swing_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleSwingmodeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleSwingmodeChanged}
+                .options=${stateObj.attributes.swing_modes.map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "swing_mode",
+                    mode
+                  ),
+                  attributeIcon: {
+                    stateObj,
+                    attribute: "swing_mode",
+                    attributeValue: mode,
+                  },
+                }))}
               >
-                ${stateObj.attributes.swing_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_mode"
-                        .attributeValue=${stateObj.attributes.swing_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiArrowOscillating}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.swing_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "swing_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiArrowOscillating}
+                ></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -352,52 +281,34 @@ class MoreInfoClimate extends LitElement {
         stateObj.attributes.swing_horizontal_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   stateObj,
                   "swing_horizontal_mode"
                 )}
                 .value=${stateObj.attributes.swing_horizontal_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleSwingHorizontalmodeChanged}
-                @closed=${stopPropagation}
-              >
-                ${stateObj.attributes.swing_horizontal_mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_horizontal_mode"
-                        .attributeValue=${stateObj.attributes
-                          .swing_horizontal_mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiArrowOscillating}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.swing_horizontal_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="swing_horizontal_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj,
-                        "swing_horizontal_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
+                @wa-select=${this._handleSwingHorizontalmodeChanged}
+                .options=${stateObj.attributes.swing_horizontal_modes.map(
+                  (mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityAttributeValue(
+                      stateObj,
+                      "swing_horizontal_mode",
+                      mode
+                    ),
+                    attributeIcon: {
+                      stateObj,
+                      attribute: "swing_horizontal_mode",
+                      attributeValue: mode,
+                    },
+                  })
                 )}
+              >
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiArrowOscillating}
+                ></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -410,8 +321,8 @@ class MoreInfoClimate extends LitElement {
     this._mainControl = ev.currentTarget.control;
   }
 
-  private _handleFanModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleFanModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.fan_mode,
       newVal,
@@ -420,15 +331,15 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handleOperationModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleOperationModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(this.stateObj!.state, newVal, "set_hvac_mode", {
       hvac_mode: newVal,
     });
   }
 
-  private _handleSwingmodeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleSwingmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.swing_mode,
       newVal,
@@ -437,8 +348,8 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handleSwingHorizontalmodeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleSwingHorizontalmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.attributes.swing_horizontal_mode,
       newVal,
@@ -447,8 +358,8 @@ class MoreInfoClimate extends LitElement {
     );
   }
 
-  private _handlePresetmodeChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handlePresetmodeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value || null;
     if (newVal) {
       this._callServiceHelper(
         this.stateObj!.attributes.preset_mode,

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

@@ -9,7 +9,6 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
@@ -31,6 +30,7 @@ import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import "../components/ha-more-info-state-header";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("more-info-fan")
 class MoreInfoFan extends LitElement {
@@ -48,8 +48,8 @@ class MoreInfoFan extends LitElement {
     });
   };
 
-  private _handleDirection(ev) {
-    const newVal = ev.target.value;
+  private _handleDirection(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this.stateObj?.attributes.direction;
 
     if (!newVal || oldVal === newVal) return;
@@ -60,8 +60,8 @@ class MoreInfoFan extends LitElement {
     });
   }
 
-  private _handlePresetMode(ev) {
-    const newVal = ev.target.value;
+  private _handlePresetMode(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this._presetMode;
 
     if (!newVal || oldVal === newVal) return;
@@ -73,8 +73,8 @@ class MoreInfoFan extends LitElement {
     });
   }
 
-  private _handleOscillating(ev) {
-    const newVal = ev.target.value === "true";
+  private _handleOscillating(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value === "true";
     const oldVal = this.stateObj?.attributes.oscillating;
 
     if (oldVal === newVal) return;
@@ -176,65 +176,64 @@ class MoreInfoFan extends LitElement {
         ${supportsPresetMode && this.stateObj.attributes.preset_modes
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "preset_mode"
                 )}
                 .value=${this.stateObj.attributes.preset_mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handlePresetMode}
-                @closed=${stopPropagation}
-              >
-                ${this.stateObj.attributes.preset_mode
-                  ? html`<ha-attribute-icon
-                      slot="icon"
-                      .hass=${this.hass}
-                      .stateObj=${this.stateObj}
-                      attribute="preset_mode"
-                      .attributeValue=${this.stateObj.attributes.preset_mode}
-                    ></ha-attribute-icon>`
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${this.stateObj.attributes.preset_modes?.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${this.stateObj}
-                        attribute="preset_mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        this.stateObj!,
-                        "preset_mode",
-                        mode
-                      )}
-                    </ha-list-item>
-                  `
+                @wa-select=${this._handlePresetMode}
+                .options=${this.stateObj.attributes.preset_modes.map(
+                  (mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityAttributeValue(
+                      this.stateObj!,
+                      "preset_mode",
+                      mode
+                    ),
+                    attributeIcon: this.stateObj
+                      ? {
+                          stateObj: this.stateObj,
+                          attribute: "preset_mode",
+                          attributeValue: mode,
+                        }
+                      : undefined,
+                  })
                 )}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportsDirection
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "direction"
                 )}
                 .value=${this.stateObj.attributes.direction}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleDirection}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleDirection}
+                .options=${["forward", "reverse"].map((direction) => ({
+                  value: direction,
+                  label: this.stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        this.stateObj,
+                        "direction",
+                        direction
+                      )
+                    : direction,
+                  attributeIcon: this.stateObj
+                    ? {
+                        stateObj: this.stateObj,
+                        attribute: "direction",
+                        attributeValue: direction,
+                      }
+                    : undefined,
+                }))}
               >
                 <ha-attribute-icon
                   slot="icon"
@@ -243,40 +242,13 @@ class MoreInfoFan extends LitElement {
                   attribute="direction"
                   .attributeValue=${this.stateObj.attributes.direction}
                 ></ha-attribute-icon>
-                <ha-list-item value="forward" graphic="icon">
-                  <ha-attribute-icon
-                    slot="graphic"
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    attribute="direction"
-                    attributeValue="forward"
-                  ></ha-attribute-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "direction",
-                    "forward"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="reverse" graphic="icon">
-                  <ha-attribute-icon
-                    slot="graphic"
-                    .hass=${this.hass}
-                    .stateObj=${this.stateObj}
-                    attribute="direction"
-                    attributeValue="reverse"
-                  ></ha-attribute-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "direction",
-                    "reverse"
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}
         ${supportsOscillate
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.formatEntityAttributeName(
                   this.stateObj,
                   "oscillating"
@@ -285,37 +257,26 @@ class MoreInfoFan extends LitElement {
                   ? "true"
                   : "false"}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleOscillating}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleOscillating}
+                .options=${["true", "false"].map((val) => ({
+                  value: val,
+                  iconPath:
+                    val === "true"
+                      ? mdiArrowOscillating
+                      : mdiArrowOscillatingOff,
+                  label: this.stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        this.stateObj,
+                        "oscillating",
+                        val === "true"
+                      )
+                    : val,
+                }))}
               >
                 <ha-svg-icon
                   slot="icon"
                   .path=${mdiArrowOscillatingOff}
                 ></ha-svg-icon>
-                <ha-list-item value="true" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiArrowOscillating}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "oscillating",
-                    true
-                  )}
-                </ha-list-item>
-                <ha-list-item value="false" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiArrowOscillatingOff}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    this.stateObj,
-                    "oscillating",
-                    false
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}

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

@@ -2,7 +2,6 @@ import { mdiPower, mdiTuneVariant } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
@@ -14,6 +13,7 @@ import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 @customElement("more-info-humidifier")
 class MoreInfoHumidifier extends LitElement {
@@ -74,68 +74,48 @@ class MoreInfoHumidifier extends LitElement {
 
       <ha-more-info-control-select-container>
         <ha-control-select-menu
+          .hass=${hass}
           .label=${this.hass.localize("ui.card.humidifier.state")}
           .value=${this.stateObj.state}
           .disabled=${this.stateObj.state === UNAVAILABLE}
-          fixedMenuPosition
-          naturalMenuWidth
-          @selected=${this._handleStateChanged}
-          @closed=${stopPropagation}
+          @wa-select=${this._handleStateChanged}
+          .options=${["off", "on"].map((fanState) => ({
+            value: fanState,
+            label: this.stateObj
+              ? this.hass.formatEntityState(this.stateObj, fanState)
+              : fanState,
+          }))}
         >
           <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
-          <ha-list-item value="off">
-            ${this.hass.formatEntityState(this.stateObj, "off")}
-          </ha-list-item>
-          <ha-list-item value="on">
-            ${this.hass.formatEntityState(this.stateObj, "on")}
-          </ha-list-item>
         </ha-control-select-menu>
 
         ${supportModes
           ? html`
               <ha-control-select-menu
+                .hass=${hass}
                 .label=${hass.localize("ui.card.humidifier.mode")}
                 .value=${stateObj.attributes.mode}
                 .disabled=${this.stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleModeChanged}
-                @closed=${stopPropagation}
-              >
-                ${stateObj.attributes.mode
-                  ? html`
-                      <ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="mode"
-                        .attributeValue=${stateObj.attributes.mode}
-                      ></ha-attribute-icon>
-                    `
-                  : html`
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiTuneVariant}
-                      ></ha-svg-icon>
-                    `}
-                ${stateObj.attributes.available_modes!.map(
-                  (mode) => html`
-                    <ha-list-item .value=${mode} graphic="icon">
-                      <ha-attribute-icon
-                        slot="graphic"
-                        .hass=${this.hass}
-                        .stateObj=${stateObj}
-                        attribute="mode"
-                        .attributeValue=${mode}
-                      ></ha-attribute-icon>
-                      ${this.hass.formatEntityAttributeValue(
-                        stateObj!,
+                @wa-select=${this._handleModeChanged}
+                .options=${stateObj.attributes.available_modes?.map((mode) => ({
+                  value: mode,
+                  label: stateObj
+                    ? this.hass.formatEntityAttributeValue(
+                        stateObj,
                         "mode",
                         mode
-                      )}
-                    </ha-list-item>
-                  `
-                )}
+                      )
+                    : mode,
+                  attributeIcon: stateObj
+                    ? {
+                        stateObj,
+                        attribute: "mode",
+                        attributeValue: mode,
+                      }
+                    : undefined,
+                })) || []}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -143,8 +123,8 @@ class MoreInfoHumidifier extends LitElement {
     `;
   }
 
-  private _handleStateChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handleStateChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value || null;
     this._callServiceHelper(
       this.stateObj!.state,
       newVal,
@@ -153,8 +133,8 @@ class MoreInfoHumidifier extends LitElement {
     );
   }
 
-  private _handleModeChanged(ev) {
-    const newVal = ev.target.value || null;
+  private _handleModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._mode = newVal;
     this._callServiceHelper(
       this.stateObj!.attributes.mode,

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

@@ -9,7 +9,6 @@ import {
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
@@ -38,6 +37,7 @@ import "../components/lights/ha-more-info-light-favorite-colors";
 import "../components/lights/light-color-rgb-picker";
 import "../components/lights/light-color-temp-picker";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type MainControl = "brightness" | "color_temp" | "color";
 
@@ -253,47 +253,35 @@ class MoreInfoLight extends LitElement {
           ${supportsEffects && this.stateObj.attributes.effect_list
             ? html`
                 <ha-control-select-menu
+                  .hass=${this.hass}
                   .label=${this.hass.formatEntityAttributeName(
                     this.stateObj,
                     "effect"
                   )}
                   .value=${this.stateObj.attributes.effect}
                   .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleEffect}
-                  @closed=${stopPropagation}
-                >
-                  ${this.stateObj.attributes.effect
-                    ? html`<ha-attribute-icon
-                        slot="icon"
-                        .hass=${this.hass}
-                        .stateObj=${this.stateObj}
-                        attribute="effect"
-                        .attributeValue=${this.stateObj.attributes.effect}
-                      ></ha-attribute-icon>`
-                    : html`<ha-svg-icon
-                        slot="icon"
-                        .path=${mdiCreation}
-                      ></ha-svg-icon>`}
-                  ${this.stateObj.attributes.effect_list?.map(
-                    (effect) => html`
-                      <ha-list-item .value=${effect} graphic="icon">
-                        <ha-attribute-icon
-                          slot="graphic"
-                          .hass=${this.hass}
-                          .stateObj=${this.stateObj}
-                          attribute="effect"
-                          .attributeValue=${effect}
-                        ></ha-attribute-icon>
-                        ${this.hass.formatEntityAttributeValue(
-                          this.stateObj!,
-                          "effect",
-                          effect
-                        )}
-                      </ha-list-item>
-                    `
+                  @wa-select=${this._handleEffect}
+                  .options=${this.stateObj.attributes.effect_list.map(
+                    (effect) => ({
+                      value: effect,
+                      label: this.stateObj
+                        ? this.hass.formatEntityAttributeValue(
+                            this.stateObj,
+                            "effect",
+                            effect
+                          )
+                        : effect,
+                      attributeIcon: this.stateObj
+                        ? {
+                            stateObj: this.stateObj,
+                            attribute: "effect",
+                            attributeValue: effect,
+                          }
+                        : undefined,
+                    })
                   )}
+                >
+                  <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
                 </ha-control-select-menu>
               `
             : nothing}
@@ -317,8 +305,8 @@ class MoreInfoLight extends LitElement {
     });
   };
 
-  private _handleEffect(ev) {
-    const newVal = ev.target.value;
+  private _handleEffect(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     const oldVal = this._effect;
 
     if (!newVal || oldVal === newVal) return;

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

@@ -25,8 +25,8 @@ import { VolumeSliderController } from "../../../common/util/volume-slider";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-marquee-text";
@@ -743,7 +743,7 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _handleSourceChange(e: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSourceChange(e: HaDropdownSelectEvent) {
     const source = e.detail.item.value;
     if (!source || this.stateObj!.attributes.source === source) {
       return;
@@ -755,7 +755,7 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _handleSoundModeChange(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSoundModeChange(ev: HaDropdownSelectEvent) {
     const soundMode = ev.detail.item.value;
     if (!soundMode || this.stateObj!.attributes.sound_mode === soundMode) {
       return;

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

@@ -2,9 +2,10 @@ import { mdiAccount, mdiAccountArrowRight, mdiWaterBoiler } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-list-item";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import type { WaterHeaterEntity } from "../../../data/water_heater";
@@ -16,7 +17,6 @@ import "../../../state-control/water_heater/ha-state-control-water_heater-temper
 import type { HomeAssistant } from "../../../types";
 import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/more-info-control-style";
-import "../../../components/ha-attribute-icon";
 
 @customElement("more-info-water_heater")
 class MoreInfoWaterHeater extends LitElement {
@@ -74,32 +74,25 @@ class MoreInfoWaterHeater extends LitElement {
         ${supportOperationMode && stateObj.attributes.operation_list
           ? html`
               <ha-control-select-menu
+                .hass=${this.hass}
                 .label=${this.hass.localize("ui.card.water_heater.mode")}
                 .value=${stateObj.state}
                 .disabled=${stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleOperationModeChanged}
-                @closed=${stopPropagation}
-              >
-                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
-                ${stateObj.attributes.operation_list
+                @wa-select=${this._handleOperationModeChanged}
+                .options=${stateObj.attributes.operation_list
                   .concat()
                   .sort(compareWaterHeaterOperationMode)
-                  .map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-attribute-icon
-                          slot="graphic"
-                          .hass=${this.hass}
-                          .stateObj=${stateObj}
-                          attribute="operation_mode"
-                          .attributeValue=${mode}
-                        ></ha-attribute-icon>
-                        ${this.hass.formatEntityState(stateObj, mode)}
-                      </ha-list-item>
-                    `
-                  )}
+                  .map((mode) => ({
+                    value: mode,
+                    label: this.hass.formatEntityState(stateObj, mode),
+                    attributeIcon: {
+                      stateObj,
+                      attribute: "operation_mode",
+                      attributeValue: mode,
+                    },
+                  }))}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
               </ha-control-select-menu>
             `
           : nothing}
@@ -112,31 +105,18 @@ class MoreInfoWaterHeater extends LitElement {
                 )}
                 .value=${stateObj.attributes.away_mode}
                 .disabled=${stateObj.state === UNAVAILABLE}
-                fixedMenuPosition
-                naturalMenuWidth
-                @selected=${this._handleAwayModeChanged}
-                @closed=${stopPropagation}
+                @wa-select=${this._handleAwayModeChanged}
+                .options=${["on", "off"].map((mode) => ({
+                  value: mode,
+                  label: this.hass.formatEntityAttributeValue(
+                    stateObj,
+                    "away_mode",
+                    mode
+                  ),
+                  iconPath: mode === "on" ? mdiAccountArrowRight : mdiAccount,
+                }))}
               >
                 <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
-                <ha-list-item value="on" graphic="icon">
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiAccountArrowRight}
-                  ></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    "away_mode",
-                    "on"
-                  )}
-                </ha-list-item>
-                <ha-list-item value="off" graphic="icon">
-                  <ha-svg-icon slot="graphic" .path=${mdiAccount}></ha-svg-icon>
-                  ${this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    "away_mode",
-                    "off"
-                  )}
-                </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}
@@ -144,8 +124,8 @@ class MoreInfoWaterHeater extends LitElement {
     `;
   }
 
-  private _handleOperationModeChanged(ev) {
-    const newVal = ev.target.value;
+  private _handleOperationModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value;
     this._callServiceHelper(
       this.stateObj!.state,
       newVal,
@@ -156,8 +136,8 @@ class MoreInfoWaterHeater extends LitElement {
     );
   }
 
-  private _handleAwayModeChanged(ev) {
-    const newVal = ev.target.value === "on";
+  private _handleAwayModeChanged(ev: HaDropdownSelectEvent) {
+    const newVal = ev.detail.item.value === "on";
     const oldVal = this.stateObj!.attributes.away_mode === "on";
 
     this._callServiceHelper(oldVal, newVal, "set_away_mode", {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -25,11 +25,11 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   computeEntityEntryName,
   computeEntityName,
 } from "../../common/entity/compute_entity_name";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   getEntityContext,
   getEntityEntryContext,
@@ -37,11 +37,12 @@ import {
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { withViewTransition } from "../../common/util/view-transition";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
 import "../../components/ha-related-items";
@@ -317,7 +318,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._setView("related");
   }
 
-  private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleMenuAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail?.item?.value;
     switch (action) {
       case "device":
@@ -770,7 +771,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   }
 
   private _enlarge() {
-    this.large = !this.large;
+    withViewTransition(() => {
+      this.large = !this.large;
+    });
   }
 
   private _handleOpened() {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,8 +1,10 @@
 import { mdiDevices } from "@mdi/js";
 import Fuse from "fuse.js";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import type { NavigationFilterOptions } from "../../common/config/filter_navigation_pages";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
@@ -15,6 +17,7 @@ import "../../components/ha-icon";
 import "../../components/ha-picker-combo-box";
 import type {
   HaPickerComboBox,
+  PickerComboBoxIndexSelectedDetail,
   PickerComboBoxItem,
 } from "../../components/ha-picker-combo-box";
 import "../../components/ha-spinner";
@@ -48,8 +51,10 @@ import {
   multiTermSortedSearch,
   type FuseWeightedKey,
 } from "../../resources/fuseMultiTerm";
+import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
+import { isMac } from "../../util/is_mac";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
 import type { QuickBarParams, QuickBarSection } from "./show-dialog-quick-bar";
@@ -64,7 +69,7 @@ export class QuickBar extends LitElement {
 
   @state() private _loading = true;
 
-  @state() private _hint?: string;
+  @state() private _showHint = false;
 
   @state() private _selectedSection?: QuickBarSection;
 
@@ -80,8 +85,12 @@ export class QuickBar extends LitElement {
 
   private _addons?: HassioAddonInfo[];
 
+  private _navigationFilterOptions: NavigationFilterOptions = {};
+
   private _translationsLoaded = false;
 
+  private _itemSelected = false;
+
   // #region lifecycle
   public async showDialog(params: QuickBarParams) {
     if (!this._translationsLoaded) {
@@ -90,7 +99,7 @@ export class QuickBar extends LitElement {
     }
     this._initialize();
     this._selectedSection = params.mode;
-    this._hint = params.hint;
+    this._showHint = params.showHint ?? false;
     this._open = true;
   }
 
@@ -104,6 +113,12 @@ export class QuickBar extends LitElement {
       this._configEntryLookup = Object.fromEntries(
         configEntries.map((entry) => [entry.entry_id, entry])
       );
+      // Derive Bluetooth config entries status for navigation filtering
+      this._navigationFilterOptions = {
+        hasBluetoothConfigEntries: configEntries.some(
+          (entry) => entry.domain === "bluetooth"
+        ),
+      };
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error("Error fetching config entries for quick bar", err);
@@ -152,15 +167,28 @@ export class QuickBar extends LitElement {
     this._selectedSection = undefined;
     this._opened = false;
     this._open = false;
+    this._itemSelected = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   };
 
+  // fallback in case the closed event is not fired
+  private _dialogCloseStarted = () => {
+    setTimeout(
+      () => {
+        if (this._opened) {
+          this._dialogClosed();
+        }
+      },
+      350 // close animation timeout is 300ms
+    );
+  };
+
   // #endregion lifecycle
 
   // #region render
 
   protected render() {
-    if (!this._open) {
+    if (!this._open && !this._opened) {
       return nothing;
     }
 
@@ -210,6 +238,7 @@ export class QuickBar extends LitElement {
         hideActions
         @wa-show=${this._showTriggered}
         @wa-after-show=${this._dialogOpened}
+        @wa-hide=${this._dialogCloseStarted}
         @closed=${this._dialogClosed}
       >
         ${!this._loading && this._opened
@@ -230,9 +259,17 @@ export class QuickBar extends LitElement {
               clearable
             ></ha-picker-combo-box>`
           : nothing}
-        ${this._hint
+        ${this._showHint
           ? html`<ha-tip slot="footer" .hass=${this.hass}
-              >${this._hint}</ha-tip
+              >${this.hass.localize("ui.tips.key_shortcut_quick_search", {
+                keyboard_shortcut: html`<button
+                  class="link"
+                  @click=${this._openShortcutDialog}
+                >
+                  ${this.hass.localize("ui.tips.keyboard_shortcut")}
+                </button>`,
+                modifier: isMac ? "⌘" : "Ctrl",
+              })}</ha-tip
             >`
           : nothing}
       </ha-adaptive-dialog>
@@ -281,6 +318,9 @@ export class QuickBar extends LitElement {
                     slot="start"
                     alt=${item.primary ?? "Unknown"}
                     .src=${item.image}
+                    style=${"iconColor" in item && item.iconColor
+                      ? `background-color: ${item.iconColor}; padding: 4px; border-radius: var(--ha-border-radius-circle); width: 24px; height: 24px`
+                      : ""}
                   />
                 `
               : item.icon
@@ -393,7 +433,8 @@ export class QuickBar extends LitElement {
       if (!section || section === "navigate") {
         let navigateItems = this._generateNavigationCommandsMemoized(
           this.hass,
-          this._addons
+          this._addons,
+          this._navigationFilterOptions
         ).sort(this._sortBySortingLabel);
 
         if (filter) {
@@ -559,7 +600,11 @@ export class QuickBar extends LitElement {
   );
 
   private _generateNavigationCommandsMemoized = memoizeOne(
-    generateNavigationCommands
+    (
+      hass: HomeAssistant,
+      apps: HassioAddonInfo[] | undefined,
+      filterOptions: NavigationFilterOptions
+    ) => generateNavigationCommands(hass, apps, filterOptions)
   );
 
   private _generateActionCommandsMemoized = memoizeOne(generateActionCommands);
@@ -613,13 +658,29 @@ export class QuickBar extends LitElement {
 
   // #region interaction
 
-  private async _handleItemSelected(ev: CustomEvent<{ index: number }>) {
-    if (this._comboBox && this._comboBox.virtualizerElement) {
-      const index = ev.detail.index;
+  private _navigate(path: string, newTab = false) {
+    if (newTab) {
+      window.open(path, "_blank", "noreferrer");
+    } else {
+      navigate(path);
+    }
+  }
+
+  private async _handleItemSelected(
+    ev: CustomEvent<PickerComboBoxIndexSelectedDetail>
+  ) {
+    if (
+      !this._itemSelected &&
+      this._comboBox &&
+      this._comboBox.virtualizerElement
+    ) {
+      const { index, newTab } = ev.detail;
       const item = this._comboBox.virtualizerElement.items[
         index
       ] as PickerComboBoxItem;
 
+      this._itemSelected = true;
+
       // entity selected
       if (item && "stateObj" in item) {
         this.closeDialog();
@@ -631,15 +692,17 @@ export class QuickBar extends LitElement {
 
       // device selected
       if (item && item.id.startsWith(`device${SEPARATOR}`)) {
+        const path = `/config/devices/device/${item.id.split(SEPARATOR)[1]}`;
         this.closeDialog();
-        navigate(`/config/devices/device/${item.id.split(SEPARATOR)[1]}`);
+        this._navigate(path, newTab);
         return;
       }
 
       // area selected
       if (item && item.id.startsWith(`area${SEPARATOR}`)) {
+        const path = `/config/areas/area/${item.id.split(SEPARATOR)[1]}`;
         this.closeDialog();
-        navigate(`/config/areas/area/${item.id.split(SEPARATOR)[1]}`);
+        this._navigate(path, newTab);
         return;
       }
 
@@ -693,53 +756,65 @@ export class QuickBar extends LitElement {
           return;
         }
 
-        navigate((item as NavigationComboBoxItem).path);
+        const path = (item as NavigationComboBoxItem).path;
+        this._navigate(path, newTab);
       }
     }
   }
 
+  private _openShortcutDialog(ev: Event): void {
+    ev.preventDefault();
+    showShortcutsDialog(this);
+    this.closeDialog();
+  }
+
   // #endregion interaction
 
   // #region styles
 
-  static styles = css`
-    :host {
-      --dialog-surface-margin-top: var(--ha-space-10);
-      --ha-dialog-min-height: 620px;
-      --ha-bottom-sheet-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100vh - max(var(--safe-area-inset-top), 48px)
-      );
-      --ha-bottom-sheet-max-height: calc(
-        100dvh - max(var(--safe-area-inset-top), 48px)
-      );
-      --dialog-content-padding: 0;
-      --safe-area-inset-bottom: 0px;
-    }
+  static get styles(): CSSResultGroup {
+    return [
+      buttonLinkStyle,
+      css`
+        :host {
+          --dialog-surface-margin-top: var(--ha-space-10);
+          --ha-dialog-min-height: 620px;
+          --ha-bottom-sheet-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100vh - max(var(--safe-area-inset-top), 48px)
+          );
+          --ha-bottom-sheet-max-height: calc(
+            100dvh - max(var(--safe-area-inset-top), 48px)
+          );
+          --dialog-content-padding: 0;
+          --safe-area-inset-bottom: 0px;
+        }
 
-    ha-tip {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--secondary-text-color);
-      gap: var(--ha-space-1);
-    }
+        ha-tip {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--secondary-text-color);
+          gap: var(--ha-space-1);
+        }
 
-    ha-tip a {
-      color: var(--primary-color);
-    }
+        ha-tip a {
+          color: var(--primary-color);
+        }
 
-    @media all and (max-width: 450px), all and (max-height: 690px) {
-      ha-tip {
-        display: none;
-      }
-    }
-  `;
+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          ha-tip {
+            display: none;
+          }
+        }
+      `,
+    ];
+  }
 
   // #endregion styles
 }

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "../../common/dom/fire_event";
+import { closeDialog } from "../make-dialog-manager";
 
 export type QuickBarSection =
   | "entity"
@@ -10,7 +11,7 @@ export type QuickBarSection =
 export interface QuickBarParams {
   entityFilter?: string;
   mode?: QuickBarSection;
-  hint?: string;
+  showHint?: boolean;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");
@@ -26,3 +27,7 @@ export const showQuickBar = (
     addHistory: false,
   });
 };
+
+export const closeQuickBar = (): void => {
+  closeDialog("ha-quick-bar");
+};

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -9,8 +9,8 @@ import { formatLanguageCode } from "../../common/language/format_language";
 import "../../components/chips/ha-assist-chip";
 import "../../components/ha-dialog";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import { getLanguageOptions } from "../../components/ha-language-picker";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { fetchAssistSatelliteConfiguration } from "../../data/assist_satellite";
@@ -328,7 +328,7 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
     }
   }
 
-  private _handlePickLanguage(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handlePickLanguage(ev: HaDropdownSelectEvent) {
     this._language = ev.detail.item.value;
   }
 

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

@@ -17,8 +17,8 @@ import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../components/ha-dropdown";
 import "../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-next";
 import "../../components/ha-spinner";
@@ -215,7 +215,7 @@ export class HaVoiceCommandDialog extends LitElement {
     this._preferredPipeline = preferred_pipeline || undefined;
   }
 
-  private async _selectPipeline(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private async _selectPipeline(ev: HaDropdownSelectEvent) {
     const pipelineId = ev.detail?.item?.value;
     if (pipelineId) {
       this._pipelineId = pipelineId;

src/fake_data/demo_panels.ts

@@ -8,6 +8,14 @@ export const demoPanels: Panels = {
     config: { mode: "storage" },
     url_path: "lovelace",
   },
+  home: {
+    component_name: "home",
+    icon: "mdi:home",
+    title: "home",
+    default_visible: false,
+    config: null,
+    url_path: "home",
+  },
   "dev-state": {
     component_name: "dev-state",
     icon: null,

src/fake_data/provide_hass.ts

@@ -7,7 +7,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeFormatFunctions } from "../common/translations/entity-state";
 import { computeLocalize } from "../common/translations/localize";
 import type { EntityRegistryDisplayEntry } from "../data/entity/entity_registry";
-import { DEFAULT_PANEL } from "../data/panel";
 import {
   DateFormat,
   FirstWeekday,
@@ -268,7 +267,9 @@ export const provideHass = (
       name: "Demo User",
     },
     panelUrl: "lovelace",
-    defaultPanel: DEFAULT_PANEL,
+    systemData: {
+      default_panel: "lovelace",
+    },
     language: localLanguage,
     selectedLanguage: localLanguage,
     locale: {
@@ -367,6 +368,7 @@ export const provideHass = (
     areas: {},
     devices: {},
     entities: {},
+    floors: {},
     formatEntityState: (stateObj, state) =>
       (state !== null ? state : stateObj.state) ?? "",
     formatEntityAttributeName: (_stateObj, attribute) => attribute,

src/layouts/hass-subpage.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
@@ -27,7 +28,7 @@ class HassSubpage extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="toolbar">
+      <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <div class="toolbar-content">
           ${this.mainPage || history.state?.root
             ? html`
@@ -132,7 +133,7 @@ class HassSubpage extends LitElement {
         }
 
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           min-width: 0;
           flex-grow: 1;
@@ -143,6 +144,9 @@ class HassSubpage extends LitElement {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
 
         .content {
           position: relative;

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

@@ -30,8 +30,8 @@ import { showDataTableSettingsDialog } from "../components/data-table/show-dialo
 import "../components/ha-dialog";
 import "../components/ha-dialog-header";
 import "../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../components/ha-dropdown";
 import "../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../components/ha-dropdown-item";
 import "../components/search-input-outlined";
 import { KeyboardShortcutMixin } from "../mixins/keyboard-shortcut-mixin";
 import type { HomeAssistant, Route } from "../types";
@@ -134,7 +134,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    * String to show when there are no records in the data table.
    * @type {String}
    */
-  @property({ attribute: false, type: String }) public noDataText?: string;
+  @property({ attribute: false }) public noDataText?: string;
 
   /**
    * Hides the data table and show an empty message.
@@ -590,7 +590,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     this._sortColumn = this._sortDirection ? ev.detail.column : undefined;
   }
 
-  private _handleSortBy(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSortBy(ev: HaDropdownSelectEvent) {
     ev.preventDefault(); // keep the dropdown open
 
     const columnId = ev.detail.item.value;
@@ -609,7 +609,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     });
   }
 
-  private _handleGroupBy(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleGroupBy(ev: HaDropdownSelectEvent) {
     const group = ev.detail.item.value;
 
     if (group === "reset") {
@@ -662,7 +662,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     this._selectMode = true;
   }
 
-  private _handleSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleSelect(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
 
     if (!action) {

src/layouts/hass-tabs-subpage.ts

@@ -131,7 +131,7 @@ class HassTabsSubpage extends LitElement {
     );
     const showTabs = tabs.length > 1;
     return html`
-      <div class="toolbar">
+      <div class="toolbar ${classMap({ narrow: this.narrow })}">
         <slot name="toolbar">
           <div class="toolbar-content">
             ${this.mainPage || (!this.backPath && history.state?.root)
@@ -320,7 +320,10 @@ class HassTabsSubpage extends LitElement {
           max-height: var(--header-height);
           line-height: var(--ha-line-height-normal);
           color: var(--sidebar-text-color);
-          margin: var(--main-title-margin, var(--margin-title));
+          margin-inline-start: var(--main-title-margin, var(--ha-space-6));
+        }
+        .narrow .main-title {
+          margin-inline-start: var(--main-title-margin, var(--ha-space-2));
         }
 
         .content {

src/layouts/home-assistant.ts

@@ -106,6 +106,10 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
 
     // Navigation
     const updateRoute = (path = curPath()) => {
+      // Developer tools panel was moved to config in 2026.2
+      if (path.startsWith("/developer-tools")) {
+        path = path.replace("/developer-tools", "/config/developer-tools");
+      }
       if (this._route && path === this._route.path) {
         return;
       }

src/layouts/partial-panel-resolver.ts

@@ -14,15 +14,13 @@ import { removeLaunchScreen } from "../util/launch-screen";
 import type { RouteOptions, RouterOptions } from "./hass-router-page";
 import { HassRouterPage } from "./hass-router-page";
 
-const CACHE_URL_PATHS = ["lovelace", "developer-tools"];
+const CACHE_URL_PATHS = ["lovelace", "home", "config"];
 const COMPONENTS = {
   app: () => import("../panels/app/ha-panel-app"),
   energy: () => import("../panels/energy/ha-panel-energy"),
   calendar: () => import("../panels/calendar/ha-panel-calendar"),
   config: () => import("../panels/config/ha-panel-config"),
   custom: () => import("../panels/custom/ha-panel-custom"),
-  "developer-tools": () =>
-    import("../panels/developer-tools/ha-panel-developer-tools"),
   lovelace: () => import("../panels/lovelace/ha-panel-lovelace"),
   history: () => import("../panels/history/ha-panel-history"),
   iframe: () => import("../panels/iframe/ha-panel-iframe"),

src/onboarding/ha-onboarding.ts

@@ -25,6 +25,7 @@ import { subscribeOne } from "../common/util/subscribe-one";
 import "../components/ha-card";
 import type { AuthUrlSearchParams } from "../data/auth";
 import { hassUrl } from "../data/auth";
+import { saveFrontendSystemData } from "../data/frontend";
 import type { OnboardingResponses, OnboardingStep } from "../data/onboarding";
 import {
   fetchInstallationType,
@@ -406,6 +407,11 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
               ),
             };
 
+      await saveFrontendSystemData(this.hass!.connection, "core", {
+        onboarded_version: this.hass!.config.version,
+        onboarded_date: new Date().toISOString(),
+      });
+
       let result: OnboardingResponses["integration"];
 
       try {

src/onboarding/integration-badge.ts

@@ -13,7 +13,7 @@ class IntegrationBadge extends LitElement {
   @property({ attribute: "dark-optimized-icon", type: Boolean })
   public darkOptimizedIcon = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true })
+  @property({ attribute: false })
   public clickable = false;
 
   protected render(): TemplateResult {

src/panels/app/ha-panel-app.ts

@@ -3,6 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
@@ -116,7 +117,7 @@ class HaPanelApp extends LitElement {
       ${!this._kioskMode &&
       (this.narrow || this.hass.dockedSidebar === "always_hidden")
         ? html`
-            <div class="header">
+            <div class="header ${classMap({ narrow: this.narrow })}">
               <ha-icon-button
                 .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
                 .path=${mdiMenu}
@@ -452,10 +453,13 @@ class HaPanelApp extends LitElement {
     }
 
     .main-title {
-      margin: var(--margin-title);
+      margin-inline-start: var(--ha-space-6);
       line-height: var(--ha-line-height-condensed);
       flex-grow: 1;
     }
+    .narrow .main-title {
+      margin-inline-start: var(--ha-space-2);
+    }
 
     ha-icon-button {
       pointer-events: auto;

src/panels/climate/ha-panel-climate.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -12,8 +13,8 @@ import type { HomeAssistant } from "../../types";
 import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
-import "../lovelace/views/hui-view-container";
 import "../lovelace/views/hui-view-background";
+import "../lovelace/views/hui-view-container";
 
 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -95,7 +96,7 @@ class PanelClimate extends LitElement {
 
   protected render() {
     return html`
-      <div class="header">
+      <div class="header ${classMap({ narrow: this.narrow })}">
         <div class="toolbar">
           ${
             this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelClimate extends LitElement {
           padding: 0 4px;
         }
         .main-title {
-          margin: var(--margin-title);
+          margin-inline-start: var(--ha-space-6);
           line-height: var(--ha-line-height-normal);
           flex-grow: 1;
         }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         hui-view-container {
           position: relative;
           display: flex;

src/panels/config/apps/app-view/config/supervisor-app-config.ts

@@ -9,8 +9,8 @@ import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
 import "../../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-form/ha-form";
 import type {
   HaFormDataContainer,
@@ -347,7 +347,7 @@ class SupervisorAppConfig extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
+  private _handleAction(ev: HaDropdownSelectEvent) {
     const action = ev.detail.item.value;
 
     if (!action) {