Merge branch 'dev' of github.com:home-assistant/frontend into auto-jsdoc-markdown

.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch

@@ -1,18 +0,0 @@
-diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
-index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
---- a/dist/hls.light.mjs
-+++ b/dist/hls.light.mjs
-@@ -20523,9 +20523,9 @@ class Hls {
- }
- Hls.defaultConfig = void 0;
- 
--var KeySystemFormats = empty.KeySystemFormats;
--var KeySystems = empty.KeySystems;
--var SubtitleStreamController = empty.SubtitleStreamController;
--var TimelineController = empty.TimelineController;
-+var KeySystemFormats = empty;
-+var KeySystems = empty;
-+var SubtitleStreamController = empty;
-+var TimelineController = empty;
- export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
- //# sourceMappingURL=hls.light.mjs.map

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

@@ -302,7 +302,7 @@ export class HcConnect extends LitElement {
     }
     .error {
       color: red;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .error a {

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

@@ -86,7 +86,7 @@ class HcLayout extends LitElement {
     .card-header {
       color: var(--ha-card-header-color, var(--primary-text-color));
       font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
       line-height: 32px;
       padding: 24px 16px 16px;
@@ -98,7 +98,7 @@ class HcLayout extends LitElement {
       border-radius: 4px 4px 0 0;
     }
     .subtitle {
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--secondary-text-color);
       line-height: initial;
     }
@@ -113,7 +113,7 @@ class HcLayout extends LitElement {
     }
 
     :host ::slotted(.section-header) {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       padding: 4px 16px;
       text-transform: uppercase;
     }
@@ -135,7 +135,7 @@ class HcLayout extends LitElement {
 
     .footer {
       text-align: center;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       padding: 8px 0 24px;
       color: var(--secondary-text-color);
     }

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

@@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
       display: block;
       height: 100vh;
       background-color: #f2f4f9;
-      font-size: 24px;
+      font-size: var(--ha-font-size-2xl);
     }
     .container {
       display: flex;

gallery/src/components/page-description.ts

@@ -42,7 +42,7 @@ class PageDescription extends HaMarkdown {
         padding-bottom: 8px;
       }
       .subtitle {
-        font-size: 18px;
+        font-size: var(--ha-font-size-l);
         line-height: 24px;
       }
       .root {

gallery/src/ha-demo-options.ts

@@ -34,7 +34,7 @@ class HaDemoOptions extends LitElement {
         height: 64px;
         padding: 0 16px;
         pointer-events: none;
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
       }
     `,
   ];

gallery/src/ha-gallery.ts

@@ -250,8 +250,8 @@ class HaGallery extends LitElement {
       }
 
       .page-footer .header {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
-        font-weight: 500;
+        font-weight: var(--ha-font-weight-medium);
         line-height: 28px;
         text-align: center;
       }

gallery/src/pages/components/ha-control-button.ts

@@ -150,7 +150,7 @@ export class DemoHaBarButton extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -86,7 +86,7 @@ export class DemoHarControlNumberButtons extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       color: #2196f3;

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

@@ -125,7 +125,7 @@ export class DemoHaControlSelectMenu extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-button-icon-color: var(--primary-color);

gallery/src/pages/components/ha-control-select.ts

@@ -181,7 +181,7 @@ export class DemoHaControlSelect extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --mdc-icon-size: 24px;

gallery/src/pages/components/ha-control-slider.ts

@@ -144,7 +144,7 @@ export class DemoHaBarSlider extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-slider-color: #ffcf4c;

gallery/src/pages/components/ha-control-switch.ts

@@ -112,7 +112,7 @@ export class DemoHaControlSwitch extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
     }
     .custom {
       --control-switch-on-color: var(--green-color);

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

@@ -105,8 +105,8 @@ export class DemoHaHsColorPicker extends LitElement {
       width: 400px;
     }
     .value {
-      font-size: 22px;
+      font-size: var(--ha-font-size-xl);
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
       margin: 0 0 12px 0;
     }
   `;

gallery/src/pages/components/ha-select-box.ts

@@ -123,7 +123,7 @@ export class DemoHaSelectBox extends LitElement {
       margin: 0;
     }
     label {
-      font-weight: 600;
+      font-weight: var(--ha-font-weight-bold);
       margin-bottom: 8px;
       display: block;
     }

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

@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-bar";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-spinner";
@@ -11,29 +12,66 @@ export class DemoHaSpinner extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
   protected render(): TemplateResult {
-    return html`<ha-card header="Basic spinner">
+    return html`
-        <div class="card-content">
+      ${["light", "dark"].map(
-          <ha-spinner></ha-spinner></div
+        (mode) => html`
-      ></ha-card>
+          <div class=${mode}>
-      <ha-card header="Different spinner sizes">
+            <ha-card header="ha-badge ${mode} demo">
               <div class="card-content">
+                <ha-spinner></ha-spinner>
                 <ha-spinner size="tiny"></ha-spinner>
                 <ha-spinner size="small"></ha-spinner>
                 <ha-spinner size="medium"></ha-spinner>
-          <ha-spinner size="large"></ha-spinner></div
+                <ha-spinner size="large"></ha-spinner>
-      ></ha-card>
-      <ha-card header="Spinner with an aria-label">
-        <div class="card-content">
                 <ha-spinner aria-label="Doing something..."></ha-spinner>
-          <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
+                <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
-      ></ha-card>`;
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
   }
 
   static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+      margin: 16px;
+      border-radius: 8px;
+    }
     ha-card {
-      max-width: 600px;
       margin: 24px auto;
     }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+    }
   `;
 }
 

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

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeDateTime extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -92,7 +92,7 @@ export class DemoDateTimeDate extends LitElement {
 
   static styles = css`
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -106,7 +106,7 @@ export class DemoDateTimeTime extends LitElement {
       margin: 12px auto;
     }
     .header {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .center {
       text-align: center;

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

@@ -428,13 +428,13 @@ class HassioAddonConfig extends LitElement {
         .header h2 {
           color: var(--ha-card-header-color, var(--primary-text-color));
           font-family: var(--ha-card-header-font-family, inherit);
-          font-size: var(--ha-card-header-font-size, 24px);
+          font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
           letter-spacing: -0.012em;
           line-height: 48px;
           padding: 12px 16px 16px;
           display: block;
           margin-block: 0px;
-          font-weight: normal;
+          font-weight: var(--ha-font-weight-normal);
         }
         .card-actions.right {
           justify-content: flex-end;

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

@@ -1280,12 +1280,12 @@ class HassioAddonInfo extends LitElement {
           padding-left: 8px;
           padding-inline-start: 8px;
           padding-inline-end: initial;
-          font-size: 24px;
+          font-size: var(--ha-font-size-2xl);
           color: var(--ha-card-header-color, var(--primary-text-color));
         }
         .addon-version {
           float: var(--float-end);
-          font-size: 15px;
+          font-size: var(--ha-font-size-l);
           vertical-align: middle;
         }
         .errors {

hassio/src/backups/hassio-backups.ts

@@ -391,7 +391,7 @@ export class HassioBackups extends LitElement {
           top: -4px;
         }
         .selected-txt {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
           padding-left: 16px;
           padding-inline-start: 16px;
           padding-inline-end: initial;
@@ -401,7 +401,7 @@ export class HassioBackups extends LitElement {
           margin-top: 20px;
         }
         .header-toolbar .selected-txt {
-          font-size: 16px;
+          font-size: var(--ha-font-size-l);
         }
         .header-toolbar .header-btns {
           margin-right: -12px;

hassio/src/dashboard/hassio-update.ts

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

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

@@ -173,7 +173,7 @@ class HassioHardwareDialog extends LitElement {
           font-family: var(--ha-font-family-code);
         }
         code {
-          font-size: 85%;
+          font-size: var(--ha-font-size-s);
           padding: 0.2em 0.4em;
         }
         search-input {

hassio/src/entrypoint.ts

@@ -1,3 +1,8 @@
+import {
+  haFontFamilyBody,
+  haFontSmoothing,
+  haMozOsxFontSmoothing,
+} from "../../src/resources/theme/typography.globals";
 import "./hassio-main";
 
 import("../../src/resources/append-ha-style");
@@ -5,10 +10,10 @@ import("../../src/resources/append-ha-style");
 const styleEl = document.createElement("style");
 styleEl.textContent = `
 body {
-  font-family: Roboto, sans-serif;
+  font-family: ${haFontFamilyBody};
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: ${haFontSmoothing};
-  font-weight: 400;
+  font-weight: var(--ha-font-weight-normal);
   margin: 0;
   padding: 0;
   height: 100vh;

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -340,12 +340,12 @@ class HassioIngressView extends LitElement {
     .header {
       display: flex;
       align-items: center;
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       height: 40px;
       padding: 0 16px;
       pointer-events: none;
       background-color: var(--app-header-background-color);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       color: var(--app-header-text-color, white);
       border-bottom: var(--app-header-border-bottom, none);
       box-sizing: border-box;

hassio/src/resources/hassio-style.ts

@@ -14,6 +14,7 @@ export const hassioStyle = css`
     margin-bottom: 8px;
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-2xl);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-condensed);

lint-staged.config.js

@@ -4,7 +4,7 @@ export default {
     "prettier --cache --write",
     "lit-analyzer --quiet",
   ],
-  "*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
+  "*.{json,css,md,markdown,html,ya?ml}": "prettier --cache --write",
   "translations/*/*.json": (files) =>
     'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
     files.join(" ") +

package.json

@@ -35,7 +35,7 @@
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.10",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.6",
+    "@codemirror/view": "6.36.7",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -97,7 +97,7 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.1",
+    "barcode-detector": "3.0.4",
     "color-name": "2.0.0",
     "comlink": "4.4.2",
     "core-js": "3.42.0",
@@ -112,9 +112,9 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
+    "hls.js": "1.6.2",
     "home-assistant-js-websocket": "9.5.0",
-    "idb-keyval": "6.2.1",
+    "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
@@ -132,7 +132,7 @@
     "qrcode": "1.5.4",
     "roboto-fontface": "0.10.0",
     "rrule": "2.8.1",
-    "sortablejs": "patch:sortablejs@npm%3A1.15.3#~/.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch",
+    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
@@ -154,17 +154,17 @@
     "@babel/core": "7.27.1",
     "@babel/helper-define-polyfill-provider": "0.6.4",
     "@babel/plugin-transform-runtime": "7.27.1",
-    "@babel/preset-env": "7.27.1",
+    "@babel/preset-env": "7.27.2",
     "@bundle-stats/plugin-webpack-filter": "4.20.0",
     "@custom-elements-manifest/analyzer": "0.10.4",
     "@custom-elements-manifest/to-markdown": "0.1.0",
-    "@lokalise/node-api": "14.5.0",
+    "@lokalise/node-api": "14.6.0",
     "@octokit/auth-oauth-device": "7.1.5",
     "@octokit/plugin-retry": "7.2.1",
     "@octokit/rest": "21.1.1",
-    "@rsdoctor/rspack-plugin": "1.0.2",
+    "@rsdoctor/rspack-plugin": "1.1.1",
-    "@rspack/cli": "1.3.8",
+    "@rspack/cli": "1.3.9",
-    "@rspack/core": "1.3.8",
+    "@rspack/core": "1.3.9",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.21",
     "@types/chromecast-caf-sender": "1.0.11",
@@ -173,7 +173,7 @@
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.17",
-    "@types/leaflet-draw": "1.0.11",
+    "@types/leaflet-draw": "1.0.12",
     "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.6.2",
@@ -183,14 +183,14 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.1.2",
+    "@vitest/coverage-v8": "3.1.3",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.25.1",
+    "eslint": "9.26.0",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.2",
+    "eslint-config-prettier": "10.1.5",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-lit": "2.1.1",
@@ -208,7 +208,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "15.5.1",
+    "lint-staged": "15.5.2",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -222,9 +222,9 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.31.1",
+    "typescript-eslint": "8.32.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.2",
+    "vitest": "3.1.3",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -236,7 +236,7 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.0",
     "@fullcalendar/daygrid": "6.1.17",
-    "globals": "16.0.0",
+    "globals": "16.1.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"
   },

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

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

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

@@ -1,19 +1,19 @@
 <svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<circle cx="47" cy="36" r="34" fill="white"/>
+<circle cx="39" cy="36" r="34" fill="white"/>
-<circle cx="47" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
+<circle cx="39" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
-<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<mask id="mask0_1110_23775" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
-<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
 </mask>
-<g mask="url(#mask0_1110_23775)">
+<g mask="url(#mask0_2_810)">
-<rect x="38" y="27" width="18" height="18" fill="#212121"/>
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
 </g>
-<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
-<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
 </svg>

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

@@ -1,19 +1,18 @@
 <svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<circle cx="47" cy="36" r="34" fill="#1C1C1C"/>
+<circle cx="39" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
-<circle cx="47" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
-<mask id="mask0_1180_4965" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
-<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
 </mask>
-<g mask="url(#mask0_1180_4965)">
+<g mask="url(#mask0_2_810)">
-<rect x="38" y="27" width="18" height="18" fill="#00AFFF"/>
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
 </g>
-<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
-<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
 </svg>

src/auth/ha-authorize.ts

@@ -93,7 +93,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           background-color: var(--primary-background-color, #fafafa);
         }
         p {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 20px;
         }
         .card-content {
@@ -151,8 +151,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           margin-inline-start: initial;
         }
         h1 {
-          font-size: 28px;
+          font-size: var(--ha-font-size-3xl);
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           margin-top: 16px;
           margin-bottom: 16px;
         }

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

@@ -57,8 +57,8 @@ export class HaPickAuthProvider extends LitElement {
       position: relative;
       z-index: 1;
       text-align: center;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
     }
     h3:before {

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

@@ -9,6 +9,7 @@ import type { LitElement } from "lit";
  */
 export interface DragScrollControllerConfig {
   selector: string;
+  enabled?: boolean;
 }
 
 export class DragScrollController implements ReactiveController {
@@ -28,19 +29,47 @@ export class DragScrollController implements ReactiveController {
 
   private _scrollContainer?: HTMLElement | null;
 
+  private _enabled = true;
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+
+  public set enabled(value: boolean) {
+    if (value === this._enabled) {
+      return;
+    }
+    this._enabled = value;
+    if (this._enabled) {
+      this._attach();
+    } else {
+      this._detach();
+    }
+    this._host.requestUpdate();
+  }
+
   constructor(
     host: ReactiveControllerHost & LitElement,
-    { selector }: DragScrollControllerConfig
+    { selector, enabled }: DragScrollControllerConfig
   ) {
     this._selector = selector;
     this._host = host;
+    this.enabled = enabled ?? true;
     host.addController(this);
   }
 
   hostUpdated() {
-    if (this._scrollContainer) {
+    if (!this.enabled || this._scrollContainer) {
       return;
     }
+    this._attach();
+  }
+
+  hostDisconnected() {
+    this._detach();
+  }
+
+  private _attach() {
     this._scrollContainer = this._host.renderRoot?.querySelector(
       this._selector
     );
@@ -49,9 +78,18 @@ export class DragScrollController implements ReactiveController {
     }
   }
 
-  hostDisconnected() {
+  private _detach() {
     window.removeEventListener("mousemove", this._mouseMove);
     window.removeEventListener("mouseup", this._mouseUp);
+    if (this._scrollContainer) {
+      this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
+      this._scrollContainer = undefined;
+    }
+    this.scrolled = false;
+    this.scrolling = false;
+    this.mouseIsDown = false;
+    this.scrollStartX = 0;
+    this.scrollLeft = 0;
   }
 
   private _mouseDown = (event: MouseEvent) => {

src/common/style/derived-css-vars.ts

@@ -2,7 +2,7 @@ import type { CSSResult } from "lit";
 
 const _extractCssVars = (
   cssString: string,
-  condition: (string) => boolean = () => true
+  condition: (string: string) => boolean = () => true
 ) => {
   const variables: Record<string, string> = {};
 

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

@@ -600,12 +600,32 @@ export class HaChartBase extends LitElement {
   }
 
   private _getSeries() {
-    if (!Array.isArray(this.data)) {
+    const series = ensureArray(this.data).filter(
-      return this.data;
-    }
-    return this.data.filter(
       (d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
     );
+    const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
+      | YAXisOption
+      | undefined;
+    if (yAxis?.type === "log") {
+      // set <=0 values to null so they render as gaps on a log graph
+      return series.map((d) =>
+        d.type === "line"
+          ? {
+              ...d,
+              data: d.data?.map((v) =>
+                Array.isArray(v)
+                  ? [
+                      v[0],
+                      typeof v[1] !== "number" || v[1] > 0 ? v[1] : null,
+                      ...v.slice(2),
+                    ]
+                  : v
+              ),
+            }
+          : d
+      );
+    }
+    return series;
   }
 
   private _getDefaultHeight() {
@@ -719,7 +739,7 @@ export class HaChartBase extends LitElement {
       max-height: 60%;
       overflow-y: auto;
       padding: 12px 0 0;
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
       color: var(--primary-text-color);
     }
     .chart-legend ul {

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

@@ -105,10 +105,41 @@ export class HaSankeyChart extends LitElement {
 
   private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
     const filteredNodes = data.nodes.filter((n) => n.value > 0);
-    const indexes = [...new Set(filteredNodes.map((n) => n.index))];
+    const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
     const depthMap = new Map<number, number>();
-    indexes.sort().forEach((index, i) => {
+    const sections: Node[][] = [];
+    indexes.forEach((index, i) => {
       depthMap.set(index, i);
+      const nodesWithIndex = filteredNodes.filter((n) => n.index === index);
+      if (nodesWithIndex.length > 0) {
+        sections.push(
+          sections.length > 0
+            ? nodesWithIndex.sort((a, b) => {
+                // sort by the order of their parents in the previous section with orphans at the end
+                const aParentIndex = this._findParentIndex(
+                  a.id,
+                  data.links,
+                  sections
+                );
+                const bParentIndex = this._findParentIndex(
+                  b.id,
+                  data.links,
+                  sections
+                );
+                if (aParentIndex === bParentIndex) {
+                  return 0;
+                }
+                if (aParentIndex === -1) {
+                  return 1;
+                }
+                if (bParentIndex === -1) {
+                  return -1;
+                }
+                return aParentIndex - bParentIndex;
+              })
+            : nodesWithIndex
+        );
+      }
     });
     const links = this._processLinks(filteredNodes, data.links);
     const sectionWidth = width / indexes.length;
@@ -117,7 +148,7 @@ export class HaSankeyChart extends LitElement {
     return {
       id: "sankey",
       type: "sankey",
-      nodes: filteredNodes.map((node) => ({
+      nodes: sections.flat().map((node) => ({
         id: node.id,
         value: node.value,
         itemStyle: {
@@ -227,6 +258,23 @@ export class HaSankeyChart extends LitElement {
     return links;
   }
 
+  private _findParentIndex(id: string, links: Link[], sections: Node[][]) {
+    const parent = links.find((l) => l.target === id)?.source;
+    if (!parent) {
+      return -1;
+    }
+    let offset = 0;
+    for (let i = sections.length - 1; i >= 0; i--) {
+      const section = sections[i];
+      const index = section.findIndex((n) => n.id === parent);
+      if (index !== -1) {
+        return offset + index;
+      }
+      offset += section.length;
+    }
+    return -1;
+  }
+
   static styles = css`
     :host {
       display: block;

src/components/chips/ha-assist-chip.ts

@@ -60,7 +60,7 @@ export class HaAssistChip extends AssistChip {
         opacity: var(--ha-assist-chip-active-container-opacity);
       }
       .label {
-        font-family: Roboto, sans-serif;
+        font-family: var(--ha-font-family-body);
       }
     `,
   ];

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

@@ -603,7 +603,7 @@ export class HaDataTable extends LitElement {
                           .map(
                             ([key2, column2], i) =>
                               html`${i !== 0
-                                ? " ⸱ "
+                                ? " · "
                                 : nothing}${column2.template
                                 ? column2.template(row)
                                 : row[key2]}`
@@ -928,12 +928,12 @@ export class HaDataTable extends LitElement {
           height: 100%;
         }
         .mdc-data-table__content {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1048,12 +1048,12 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           letter-spacing: 0.0178571429em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1170,12 +1170,12 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__header-cell {
-          font-family: Roboto, sans-serif;
+          font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.375rem;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           letter-spacing: 0.0071428571em;
           text-decoration: inherit;
           text-transform: inherit;
@@ -1199,7 +1199,7 @@ export class HaDataTable extends LitElement {
           padding-inline-start: 12px;
           padding-inline-end: initial;
           width: 100%;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           display: flex;
           align-items: center;
           cursor: pointer;

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

@@ -5,7 +5,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
@@ -30,28 +29,17 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 
-const FAKE_ENTITY: HassEntity = {
+interface EntityComboBoxItem {
-  entity_id: "",
-  state: "",
-  last_changed: "",
-  last_updated: "",
-  context: { id: "", user_id: null, parent_id: null },
-  attributes: {},
-};
-
-interface EntityComboBoxItem extends HassEntity {
   // Force empty label to always display empty value by default in the search field
+  id: string;
   label: "";
   primary: string;
   secondary?: string;
-  translated_domain?: string;
+  domain_name?: string;
-  show_entity_id?: boolean;
+  search_labels?: string[];
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
   sorting_label?: string;
   icon_path?: string;
+  stateObj?: HassEntity;
 }
 
 export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
@@ -59,22 +47,6 @@ export type HaEntityComboBoxEntityFilterFunc = (entity: HassEntity) => boolean;
 const CREATE_ID = "___create-new-entity___";
 const NO_ENTITIES_ID = "___no-entities___";
 
-const DOMAIN_STYLE = styleMap({
-  fontSize: "var(--ha-font-size-s)",
-  fontWeight: "var(--ha-font-weight-normal)",
-  lineHeight: "var(--ha-line-height-normal)",
-  alignSelf: "flex-end",
-  maxWidth: "30%",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-});
-
-const ENTITY_ID_STYLE = styleMap({
-  fontFamily: "var(--ha-font-family-code)",
-  fontSize: "var(--ha-font-size-xs)",
-});
-
 @customElement("ha-entity-combo-box")
 export class HaEntityComboBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -177,14 +149,19 @@ export class HaEntityComboBox extends LitElement {
   private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
     item,
     { index }
-  ) => html`
+  ) => {
+    const showEntityId = this.hass.userData?.showEntityIdPicker;
+
+    return html`
       <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
         ${item.icon_path
-        ? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
+          ? html`
+              <ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>
+            `
           : html`
               <state-badge
                 slot="start"
-              .stateObj=${item}
+                .stateObj=${item.stateObj}
                 .hass=${this.hass}
               ></state-badge>
             `}
@@ -192,18 +169,23 @@ export class HaEntityComboBox extends LitElement {
         ${item.secondary
           ? html`<span slot="supporting-text">${item.secondary}</span>`
           : nothing}
-      ${item.entity_id && item.show_entity_id
+        ${item.stateObj && showEntityId
-        ? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
+          ? html`
-            >${item.entity_id}</span
+              <span slot="supporting-text" class="code">
-          >`
+                ${item.stateObj.entity_id}
+              </span>
+            `
           : nothing}
-      ${item.translated_domain && !item.show_entity_id
+        ${item.domain_name && !showEntityId
-        ? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
+          ? html`
-            ${item.translated_domain}
+              <div slot="trailing-supporting-text" class="domain">
-          </div>`
+                ${item.domain_name}
+              </div>
+            `
           : nothing}
       </ha-combo-box-item>
     `;
+  };
 
   private _getItems = memoizeOne(
     (
@@ -218,7 +200,7 @@ export class HaEntityComboBox extends LitElement {
       excludeEntities: this["excludeEntities"],
       createDomains: this["createDomains"]
     ): EntityComboBoxItem[] => {
-      let states: EntityComboBoxItem[] = [];
+      let items: EntityComboBoxItem[] = [];
 
       let entityIds = Object.keys(hass.states);
 
@@ -236,9 +218,8 @@ export class HaEntityComboBox extends LitElement {
             );
 
             return {
-              ...FAKE_ENTITY,
+              id: CREATE_ID + domain,
               label: "",
-              entity_id: CREATE_ID + domain,
               primary: primary,
               secondary: this.hass.localize(
                 "ui.components.entity.entity-picker.new_entity"
@@ -251,9 +232,8 @@ export class HaEntityComboBox extends LitElement {
       if (!entityIds.length) {
         return [
           {
-            ...FAKE_ENTITY,
+            id: NO_ENTITIES_ID,
             label: "",
-            entity_id: NO_ENTITIES_ID,
             primary: this.hass!.localize(
               "ui.components.entity.entity-picker.no_entities"
             ),
@@ -289,7 +269,7 @@ export class HaEntityComboBox extends LitElement {
 
       const isRTL = computeRTL(this.hass);
 
-      states = entityIds
+      items = entityIds
         .map<EntityComboBoxItem>((entityId) => {
           const stateObj = hass!.states[entityId];
 
@@ -300,30 +280,32 @@ export class HaEntityComboBox extends LitElement {
           const deviceName = device ? computeDeviceName(device) : undefined;
           const areaName = area ? computeAreaName(area) : undefined;
 
+          const domainName = domainToName(
+            this.hass.localize,
+            computeDomain(entityId)
+          );
+
           const primary = entityName || deviceName || entityId;
           const secondary = [areaName, entityName ? deviceName : undefined]
             .filter(Boolean)
             .join(isRTL ? " ◂ " : " ▸ ");
 
-          const translatedDomain = domainToName(
-            this.hass.localize,
-            computeDomain(entityId)
-          );
-
           return {
-            ...hass!.states[entityId],
+            id: entityId,
             label: "",
             primary: primary,
-            secondary:
+            secondary: secondary,
-              secondary ||
+            domain_name: domainName,
-              this.hass.localize("ui.components.device-picker.no_area"),
+            sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
-            translated_domain: translatedDomain,
+            search_labels: [
-            sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
+              entityName,
-            entity_name: entityName || deviceName,
+              deviceName,
-            area_name: areaName,
+              areaName,
-            device_name: deviceName,
+              domainName,
-            friendly_name: friendlyName,
+              friendlyName,
-            show_entity_id: hass.userData?.showEntityIdPicker,
+              entityId,
+            ].filter(Boolean) as string[],
+            stateObj: stateObj,
           };
         })
         .sort((entityA, entityB) =>
@@ -335,41 +317,43 @@ export class HaEntityComboBox extends LitElement {
         );
 
       if (includeDeviceClasses) {
-        states = states.filter(
+        items = items.filter(
-          (stateObj) =>
+          (item) =>
             // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
+            item.id === this.value ||
-            (stateObj.attributes.device_class &&
+            (item.stateObj?.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class))
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
         );
       }
 
       if (includeUnitOfMeasurement) {
-        states = states.filter(
+        items = items.filter(
-          (stateObj) =>
+          (item) =>
             // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
+            item.id === this.value ||
-            (stateObj.attributes.unit_of_measurement &&
+            (item.stateObj?.attributes.unit_of_measurement &&
               includeUnitOfMeasurement.includes(
-                stateObj.attributes.unit_of_measurement
+                item.stateObj.attributes.unit_of_measurement
               ))
         );
       }
 
       if (entityFilter) {
-        states = states.filter(
+        items = items.filter(
-          (stateObj) =>
+          (item) =>
             // We always want to include the entity of the current value
-            stateObj.entity_id === this.value || entityFilter!(stateObj)
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
         );
       }
 
-      if (!states.length) {
+      if (!items.length) {
         return [
           {
-            ...FAKE_ENTITY,
+            id: NO_ENTITIES_ID,
             label: "",
-            entity_id: NO_ENTITIES_ID,
             primary: this.hass!.localize(
               "ui.components.entity.entity-picker.no_match"
             ),
@@ -380,10 +364,10 @@ export class HaEntityComboBox extends LitElement {
       }
 
       if (createItems?.length) {
-        states.push(...createItems);
+        items.push(...createItems);
       }
 
-      return states;
+      return items;
     }
   );
 
@@ -426,7 +410,9 @@ export class HaEntityComboBox extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-combo-box
-        item-value-path="entity_id"
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="label"
         .hass=${this.hass}
         .value=${this._value}
         .label=${this.label === undefined
@@ -478,17 +464,7 @@ export class HaEntityComboBox extends LitElement {
   }
 
   private _fuseIndex = memoizeOne((states: EntityComboBoxItem[]) =>
-    Fuse.createIndex(
+    Fuse.createIndex(["search_labels"], states)
-      [
-        "entity_name",
-        "device_name",
-        "area_name",
-        "translated_domain",
-        "friendly_name", // for backwards compatibility
-        "entity_id", // for technical search
-      ],
-      states
-    )
   );
 
   private _filterChanged(ev: CustomEvent): void {
@@ -505,9 +481,8 @@ export class HaEntityComboBox extends LitElement {
       if (results.length === 0) {
         target.filteredItems = [
           {
-            ...FAKE_ENTITY,
+            id: NO_ENTITIES_ID,
             label: "",
-            entity_id: NO_ENTITIES_ID,
             primary: this.hass!.localize(
               "ui.components.entity.entity-picker.no_match"
             ),

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

@@ -162,10 +162,7 @@ export class HaEntityPicker extends LitElement {
         slot="start"
       ></state-badge>
       <span slot="headline">${primary}</span>
-      <span slot="supporting-text">
+      <span slot="supporting-text">${secondary}</span>
-        ${secondary ||
-        this.hass.localize("ui.components.device-picker.no_area")}
-      </span>
       ${showClearIcon
         ? html`<ha-icon-button
             class="clear"

src/components/entity/ha-state-label-badge.ts

@@ -267,7 +267,7 @@ export class HaStateLabelBadge extends LitElement {
       cursor: pointer;
     }
     .big {
-      font-size: 70%;
+      font-size: var(--ha-font-size-xs);
     }
     ha-label-badge {
       --ha-label-badge-color: var(--label-badge-red);

src/components/entity/ha-statistic-combo-box.ts

@@ -1,11 +1,10 @@
-import { mdiChartLine, mdiShape } from "@mdi/js";
+import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -26,31 +25,27 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-combo-box-item";
 import "../ha-svg-icon";
 import "./state-badge";
+import { documentationUrl } from "../../util/documentation-url";
 
 type StatisticItemType = "entity" | "external" | "no_state";
 
 interface StatisticItem {
+  // Force empty label to always display empty value by default in the search field
   id: string;
+  statistic_id?: string;
   label: "";
   primary: string;
   secondary?: string;
-  show_entity_id?: boolean;
+  search_labels?: string[];
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
   sorting_label?: string;
-  state?: HassEntity;
+  icon_path?: string;
   type?: StatisticItemType;
-  iconPath?: string;
+  stateObj?: HassEntity;
 }
 
-const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
+const MISSING_ID = "___missing-entity___";
 
-const ENTITY_ID_STYLE = styleMap({
+const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];
-  fontFamily: "var(--ha-font-family-code)",
-  fontSize: "11px",
-});
 
 @customElement("ha-statistic-combo-box")
 export class HaStatisticComboBox extends LitElement {
@@ -131,37 +126,39 @@ export class HaStatisticComboBox extends LitElement {
   private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
     item,
     { index }
-  ) => html`
+  ) => {
+    const showEntityId = this.hass.userData?.showEntityIdPicker;
+    return html`
       <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
-      ${!item.state
+        ${item.icon_path
           ? html`
               <ha-svg-icon
                 style="margin: 0 4px"
                 slot="start"
-              .path=${item.iconPath}
+                .path=${item.icon_path}
               ></ha-svg-icon>
             `
-        : html`
+          : item.stateObj
+            ? html`
                 <state-badge
                   slot="start"
-              .stateObj=${item.state}
+                  .stateObj=${item.stateObj}
                   .hass=${this.hass}
                 ></state-badge>
-          `}
+              `
-
+            : nothing}
         <span slot="headline">${item.primary} </span>
         ${item.secondary
           ? html`<span slot="supporting-text">${item.secondary}</span>`
           : nothing}
-      ${item.id && item.show_entity_id
+        ${item.id && showEntityId
-        ? html`
+          ? html`<span slot="supporting-text" class="code">
-            <span slot="supporting-text" style=${ENTITY_ID_STYLE}>
+              ${item.statistic_id}
-              ${item.id}
+            </span>`
-            </span>
-          `
           : nothing}
       </ha-combo-box-item>
     `;
+  };
 
   private _getItems = memoizeOne(
     (
@@ -249,19 +246,22 @@ export class HaStatisticComboBox extends LitElement {
                 label: "",
                 type,
                 sorting_label: label,
-                iconPath: mdiShape,
+                search_labels: [label, id],
+                icon_path: mdiShape,
               });
             } else if (type === "external") {
               const domain = id.split(":")[0];
               const domainName = domainToName(this.hass.localize, domain);
               output.push({
                 id,
+                statistic_id: id,
                 primary: label,
                 secondary: domainName,
                 label: "",
                 type,
                 sorting_label: label,
-                iconPath: mdiChartLine,
+                search_labels: [label, domainName, id],
+                icon_path: mdiChartLine,
               });
             }
           }
@@ -283,17 +283,20 @@ export class HaStatisticComboBox extends LitElement {
 
         output.push({
           id,
+          statistic_id: id,
+          label: "",
           primary,
           secondary,
-          label: "",
+          stateObj: stateObj,
-          state: stateObj,
           type: "entity",
           sorting_label: [deviceName, entityName].join("_"),
-          entity_name: entityName || deviceName,
+          search_labels: [
-          area_name: areaName,
+            entityName,
-          device_name: deviceName,
+            deviceName,
-          friendly_name: friendlyName,
+            areaName,
-          show_entity_id: hass.userData?.showEntityIdPicker,
+            friendlyName,
+            id,
+          ].filter(Boolean) as string[],
         });
       });
 
@@ -323,11 +326,12 @@ export class HaStatisticComboBox extends LitElement {
       }
 
       output.push({
-        id: "__missing",
+        id: MISSING_ID,
         primary: this.hass.localize(
           "ui.components.statistic-picker.missing_entity"
         ),
         label: "",
+        icon_path: mdiHelpCircle,
       });
 
       return output;
@@ -392,6 +396,9 @@ export class HaStatisticComboBox extends LitElement {
 
     return html`
       <ha-combo-box
+        item-id-path="id"
+        item-value-path="id"
+        item-label-path="label"
         .hass=${this.hass}
         .label=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.statistic-picker.statistic")
@@ -401,9 +408,6 @@ export class HaStatisticComboBox extends LitElement {
         .disabled=${this.disabled}
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._items}
-        item-value-path="id"
-        item-id-path="id"
-        item-label-path="label"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._statisticChanged}
         @filter-changed=${this._filterChanged}
@@ -422,8 +426,12 @@ export class HaStatisticComboBox extends LitElement {
   private _statisticChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     let newValue = ev.detail.value;
-    if (newValue === "__missing") {
+    if (newValue === MISSING_ID) {
       newValue = "";
+      window.open(
+        documentationUrl(this.hass, this.helpMissingEntityUrl),
+        "_blank"
+      );
     }
 
     if (newValue !== this._value) {
@@ -436,16 +444,7 @@ export class HaStatisticComboBox extends LitElement {
   }
 
   private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
-    Fuse.createIndex(
+    Fuse.createIndex(["search_labels"], states)
-      [
-        "entity_name",
-        "device_name",
-        "area_name",
-        "friendly_name", // for backwards compatibility
-        "id", // for technical search
-      ],
-      states
-    )
   );
 
   private _filterChanged(ev: CustomEvent): void {

src/components/ha-alert.ts

@@ -159,7 +159,7 @@ class HaAlert extends LitElement {
     }
     .title {
       margin-top: 2px;
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .action mwc-button,
     .action ha-icon-button {

src/components/ha-ansi-to-html.ts

@@ -56,7 +56,7 @@ export class HaAnsiToHtml extends LitElement {
       overflow-wrap: break-word;
     }
     .bold {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     .italic {
       font-style: italic;

src/components/ha-assist-chat.ts

@@ -595,7 +595,7 @@ export class HaAssistChat extends LitElement {
     }
     .message {
       white-space: pre-line;
-      font-size: 18px;
+      font-size: var(--ha-font-size-l);
       clear: both;
       margin: 8px 0;
       padding: 8px;
@@ -604,7 +604,7 @@ export class HaAssistChat extends LitElement {
 
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .message {
-        font-size: 16px;
+        font-size: var(--ha-font-size-l);
       }
     }
 

src/components/ha-badge.ts

@@ -95,9 +95,9 @@ export class HaBadge extends LitElement {
       text-align: center;
     }
     .label {
-      font-size: 10px;
+      font-size: var(--ha-font-size-xs);
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       line-height: 10px;
       letter-spacing: 0.1px;
       color: var(--secondary-text-color);
@@ -105,7 +105,7 @@ export class HaBadge extends LitElement {
     .content {
       font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       line-height: 16px;
       letter-spacing: 0.1px;
       color: var(--primary-text-color);

src/components/ha-base-time-input.ts

@@ -381,15 +381,18 @@ export class HaBaseTimeInput extends LitElement {
       border-bottom-width: 1px;
     }
     label {
-      -moz-osx-font-smoothing: grayscale;
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
-      -webkit-font-smoothing: antialiased;
+      -webkit-font-smoothing: var(--ha-font-smoothing);
       font-family: var(
         --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
+        var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
       line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
       letter-spacing: var(
         --mdc-typography-body2-letter-spacing,
         0.0178571429em

src/components/ha-card.ts

@@ -41,14 +41,14 @@ export class HaCard extends LitElement {
     :host ::slotted(.card-header) {
       color: var(--ha-card-header-color, var(--primary-text-color));
       font-family: var(--ha-card-header-font-family, inherit);
-      font-size: var(--ha-card-header-font-size, 24px);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
       letter-spacing: -0.012em;
       line-height: 48px;
       padding: 12px 16px 16px;
       display: block;
       margin-block-start: 0px;
       margin-block-end: 0px;
-      font-weight: normal;
+      font-weight: var(--ha-font-weight-normal);
     }
 
     :host ::slotted(.card-content:not(:first-child)),

src/components/ha-climate-state.ts

@@ -154,7 +154,7 @@ class HaClimateState extends LitElement {
     }
 
     .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .unit {

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

@@ -22,12 +22,12 @@ export class HaComboBoxItem extends HaMdListItem {
       }
       [slot="headline"] {
         line-height: 22px;
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         white-space: nowrap;
       }
       [slot="supporting-text"] {
         line-height: 18px;
-        font-size: 12px;
+        font-size: var(--ha-font-size-s);
         white-space: nowrap;
       }
       ::slotted(state-badge),
@@ -35,6 +35,20 @@ export class HaComboBoxItem extends HaMdListItem {
         width: 32px;
         height: 32px;
       }
+      ::slotted(.code) {
+        font-family: var(--ha-font-family-code);
+        font-size: var(--ha-font-size-xs);
+      }
+      ::slotted(.domain) {
+        font-size: var(--ha-font-size-s);
+        font-weight: var(--ha-font-weight-normal);
+        line-height: var(--ha-line-height-normal);
+        align-self: flex-end;
+        max-width: 30%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     `,
   ];
 }

src/components/ha-control-button.ts

@@ -58,8 +58,8 @@ export class HaControlButton extends LitElement {
       padding: var(--control-button-padding);
       box-sizing: border-box;
       line-height: inherit;
-      font-family: Roboto;
+      font-family: var(--ha-font-family-body);
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       outline: none;
       overflow: hidden;
       background: none;

src/components/ha-control-number-buttons.ts

@@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
       color: var(--primary-text-color);
       -webkit-tap-highlight-color: transparent;
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       transition: color 180ms ease-in-out;
     }
     :host([disabled]) {

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

@@ -179,7 +179,7 @@ export class HaControlSelectMenu extends SelectBase {
         --control-select-menu-padding: 6px 10px;
         --mdc-icon-size: 20px;
         --ha-ripple-color: var(--secondary-text-color);
-        font-size: 14px;
+        font-size: var(--ha-font-size-m);
         line-height: 1.4;
         width: auto;
         color: var(--primary-text-color);
@@ -208,7 +208,7 @@ export class HaControlSelectMenu extends SelectBase {
         width: 100%;
         user-select: none;
         font-style: normal;
-        font-weight: 400;
+        font-weight: var(--ha-font-weight-normal);
         letter-spacing: 0.25px;
       }
       .content {

src/components/ha-control-select.ts

@@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
       outline: none;
       transition: box-shadow 180ms ease-in-out;
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       color: var(--primary-text-color);
       user-select: none;
       -webkit-tap-highlight-color: transparent;

src/components/ha-control-slider.ts

@@ -368,7 +368,7 @@ export class HaControlSlider extends LitElement {
       --control-slider-background-opacity: 0.2;
       --control-slider-thickness: 40px;
       --control-slider-border-radius: 10px;
-      --control-slider-tooltip-font-size: 14px;
+      --control-slider-tooltip-font-size: var(--ha-font-size-m);
       height: var(--control-slider-thickness);
       width: 100%;
       border-radius: var(--control-slider-border-radius);

src/components/ha-dialog-header.ts

@@ -53,12 +53,12 @@ export class HaDialogHeader extends LitElement {
           white-space: nowrap;
         }
         .header-title {
-          font-size: 22px;
+          font-size: var(--ha-font-size-xl);
           line-height: 28px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
         }
         .header-subtitle {
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
           line-height: 20px;
           color: var(--secondary-text-color);
         }

src/components/ha-dialog.ts

@@ -85,12 +85,12 @@ export class HaDialog extends DialogBase {
           var(--dialog-backdrop-filter, none)
         );
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         --mdc-typography-headline6-font-size: 1.574rem;
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding-bottom: max(env(safe-area-inset-bottom), 24px);
+        padding: 12px 24px max(env(safe-area-inset-bottom), 12px) 24px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -107,9 +107,6 @@ export class HaDialog extends DialogBase {
       .mdc-dialog__title:has(span) {
         padding: 12px 12px 0;
       }
-      .mdc-dialog__actions {
-        padding: 12px 24px 12px 24px;
-      }
       .mdc-dialog__title::before {
         content: unset;
       }

src/components/ha-expansion-panel.ts

@@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
       align-items: center;
       cursor: pointer;
       overflow: hidden;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
       outline: none;
     }
     #summary.noCollapse {
@@ -218,7 +218,7 @@ export class HaExpansionPanel extends LitElement {
     .secondary {
       display: block;
       color: var(--secondary-text-color);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
     }
   `;
 }

src/components/ha-file-upload.ts

@@ -294,7 +294,7 @@ export class HaFileUpload extends LitElement {
     }
     .supports {
       color: var(--secondary-text-color);
-      font-size: 12px;
+      font-size: var(--ha-font-size-s);
     }
     :host([disabled]) .secondary {
       color: var(--disabled-text-color);
@@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
       box-sizing: border-box;
     }
     .header {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
     .progress {
       color: var(--secondary-text-color);
@@ -333,7 +333,7 @@ export class HaFileUpload extends LitElement {
       background: none;
       border: none;
       padding: 0;
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
       color: var(--primary-color);
       text-decoration: underline;
       cursor: pointer;

src/components/ha-filter-blueprints.ts

@@ -208,8 +208,8 @@ export class HaFilterBlueprints extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-categories.ts

@@ -303,8 +303,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-devices.ts

@@ -232,8 +232,8 @@ export class HaFilterDevices extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-domains.ts

@@ -189,8 +189,8 @@ export class HaFilterDomains extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-entities.ts

@@ -246,8 +246,8 @@ export class HaFilterEntities extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-floor-areas.ts

@@ -303,8 +303,8 @@ export class HaFilterFloorAreas extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-integrations.ts

@@ -195,8 +195,8 @@ export class HaFilterIntegrations extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-labels.ts

@@ -233,8 +233,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

src/components/ha-filter-states.ts

@@ -177,8 +177,8 @@ export class HaFilterStates extends LitElement {
           min-width: 16px;
           box-sizing: border-box;
           border-radius: 50%;
-          font-weight: 400;
+          font-size: var(--ha-font-size-xs);
-          font-size: 11px;
+          font-weight: var(--ha-font-weight-normal);
           background-color: var(--primary-color);
           line-height: 16px;
           text-align: center;

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

@@ -71,7 +71,10 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
       box-sizing: border-box;
       color: var(--secondary-text-color);
       font-size: 0.875rem;
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
     }
   `;
 }

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

@@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
       display: block;
     }
     .label {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
   `;
 }

src/components/ha-header-bar.ts

@@ -46,7 +46,7 @@ export class HaHeaderBar extends LitElement {
           flex: none;
         }
         .mdc-top-app-bar__title {
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           padding-inline-start: 24px;
           padding-inline-end: initial;
         }

src/components/ha-heading-badge.ts

@@ -34,7 +34,7 @@ export class HaBadge extends LitElement {
       align-items: center;
       gap: 3px;
       color: var(--ha-heading-badge-text-color, var(--secondary-text-color));
-      font-size: var(--ha-heading-badge-font-size, 14px);
+      font-size: var(--ha-heading-badge-font-size, var(--ha-font-size-m));
       font-weight: var(--ha-heading-badge-font-weight, 400);
       line-height: var(--ha-heading-badge-line-height, 20px);
       letter-spacing: 0.1px;

src/components/ha-humidifier-state.ts

@@ -103,7 +103,7 @@ class HaHumidifierState extends LitElement {
     }
 
     .state-label {
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
 
     .unit {

src/components/ha-label-badge.ts

@@ -91,7 +91,7 @@ class HaLabelBadge extends LitElement {
           color: var(--ha-label-badge-label-color, white);
           border-radius: 1em;
           padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           overflow: hidden;
           text-transform: uppercase;
           text-overflow: ellipsis;
@@ -102,7 +102,10 @@ class HaLabelBadge extends LitElement {
           margin-top: 1em;
           font-size: var(--ha-label-badge-title-font-size, 0.9em);
           width: var(--ha-label-badge-title-width, 5em);
-          font-weight: var(--ha-label-badge-title-font-weight, 400);
+          font-weight: var(
+            --ha-label-badge-title-font-weight,
+            var(--ha-font-weight-normal)
+          );
           overflow: hidden;
           text-overflow: ellipsis;
           line-height: normal;

src/components/ha-label.ts

@@ -32,8 +32,8 @@ class HaLabel extends LitElement {
           display: inline-flex;
           flex-direction: row;
           align-items: center;
-          font-size: 12px;
+          font-size: var(--ha-font-size-s);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
           line-height: 16px;
           letter-spacing: 0.1px;
           vertical-align: middle;

src/components/ha-markdown.ts

@@ -64,7 +64,7 @@ export class HaMarkdown extends LitElement {
       color: var(--markdown-svg-color, none);
     }
     code {
-      font-size: 85%;
+      font-size: var(--ha-font-size-s);
       padding: 0.2em 0.4em;
     }
     pre code {
@@ -85,8 +85,8 @@ export class HaMarkdown extends LitElement {
       line-height: initial;
     }
     h2 {
-      font-size: 1.5em;
+      font-size: var(--ha-font-size-xl);
-      font-weight: bold;
+      font-weight: var(--ha-font-weight-bold);
     }
     hr {
       border-color: var(--divider-color);

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

@@ -6,6 +6,13 @@ import { customElement } from "lit/decorators";
 
 @customElement("ha-outlined-icon-button")
 export class HaOutlinedIconButton extends IconButton {
+  protected override getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      outlined: true,
+    };
+  }
+
   static override styles = [
     css`
       .icon-button {

src/components/ha-outlined-text-field.ts

@@ -37,7 +37,7 @@ export class HaOutlinedTextField extends OutlinedTextField {
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
       .input {
-        font-family: Roboto, sans-serif;
+        font-family: var(--ha-font-family-body);
       }
     `,
   ];

src/components/ha-select-box.ts

@@ -154,8 +154,8 @@ export class HaSelectBox extends LitElement {
     }
     .option .content .text .label {
       color: var(--primary-text-color);
-      font-size: 14px;
+      font-size: var(--ha-font-size-m);
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
       overflow: hidden;
       white-space: nowrap;
@@ -164,7 +164,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text .description {
       color: var(--secondary-text-color);
       font-size: 13px;
-      font-weight: 400;
+      font-weight: var(--ha-font-weight-normal);
       line-height: 16px;
     }
     img {

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

@@ -45,7 +45,7 @@ export class HaActionSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
   `;
 }

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

@@ -62,7 +62,10 @@ export class HaBooleanSelector extends LitElement {
       box-sizing: border-box;
       color: var(--secondary-text-color);
       font-size: 0.875rem;
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
+      );
     }
   `;
 }

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

@@ -36,7 +36,7 @@ export class HaConditionSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
   `;
 }

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

@@ -11,6 +11,7 @@ import type { SchemaUnion } from "../ha-form/types";
 import type { MarkerLocation } from "../map/ha-locations-editor";
 import "../map/ha-locations-editor";
 import "../ha-form/ha-form";
+import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("ha-selector-location")
 export class HaLocationSelector extends LitElement {
@@ -27,7 +28,7 @@ export class HaLocationSelector extends LitElement {
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   private _schema = memoizeOne(
-    (radius?: boolean, radius_readonly?: boolean) =>
+    (localize: LocalizeFunc, radius?: boolean, radius_readonly?: boolean) =>
       [
         {
           name: "",
@@ -36,12 +37,12 @@ export class HaLocationSelector extends LitElement {
             {
               name: "latitude",
               required: true,
-              selector: { number: { step: "any" } },
+              selector: { number: { step: "any", unit_of_measurement: "°" } },
             },
             {
               name: "longitude",
               required: true,
-              selector: { number: { step: "any" } },
+              selector: { number: { step: "any", unit_of_measurement: "°" } },
             },
           ],
         },
@@ -52,7 +53,16 @@ export class HaLocationSelector extends LitElement {
                 required: true,
                 default: 1000,
                 disabled: !!radius_readonly,
-                selector: { number: { min: 0, step: 1, mode: "box" } as const },
+                selector: {
+                  number: {
+                    min: 0,
+                    step: 1,
+                    mode: "box",
+                    unit_of_measurement: localize(
+                      "ui.components.selectors.location.radius_meters"
+                    ),
+                  } as const,
+                },
               } as const,
             ]
           : []),
@@ -84,6 +94,7 @@ export class HaLocationSelector extends LitElement {
       <ha-form
         .hass=${this.hass}
         .schema=${this._schema(
+          this.hass.localize,
           this.selector.location?.radius,
           this.selector.location?.radius_readonly
         )}

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

@@ -247,7 +247,7 @@ export class HaMediaSelector extends LitElement {
       --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
     }
     .title {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       padding-top: 16px;
       overflow: hidden;
       text-overflow: ellipsis;

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

@@ -290,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
       padding: 0px 16px 16px 16px;
     }
     .title {
-      font-size: 16px;
+      font-size: var(--ha-font-size-l);
       padding-top: 16px;
       overflow: hidden;
       text-overflow: ellipsis;

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

@@ -45,7 +45,7 @@ export class HaTriggerSelector extends LitElement {
     label {
       display: block;
       margin-bottom: 4px;
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
   `;
 }

src/components/ha-service-control.ts

@@ -83,7 +83,7 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean, reflect: true }) public narrow = false;
+  @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: "show-advanced", type: Boolean }) public showAdvanced =
     false;
@@ -895,6 +895,9 @@ export class HaServiceControl extends LitElement {
     ha-settings-row {
       padding: var(--service-control-padding, 0 16px);
     }
+    ha-settings-row[narrow] {
+      padding-bottom: 8px;
+    }
     ha-settings-row {
       --settings-row-content-width: 100%;
       --settings-row-prefix-display: contents;
@@ -916,7 +919,7 @@ export class HaServiceControl extends LitElement {
       margin: var(--service-control-padding, 0 16px);
       padding: 16px 0;
     }
-    :host([hidePicker]) p {
+    :host([hide-picker]) p {
       padding-top: 0;
     }
     .checkbox-spacer {

src/components/ha-settings-row.ts

@@ -66,11 +66,15 @@ export class HaSettingsRow extends LitElement {
       padding-top: 4px;
       font-family: var(
         --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
+        var(--mdc-typography-font-family, var(--ha-font-family-body))
+      );
+      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
+      -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+      font-weight: var(
+        --mdc-typography-body2-font-weight,
+        var(--ha-font-weight-normal)
       );
-      -webkit-font-smoothing: antialiased;
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
       line-height: normal;
       color: var(--secondary-text-color);
     }

src/components/ha-sidebar.ts

@@ -24,9 +24,10 @@ import {
   customElement,
   eventOptions,
   property,
-  state,
   query,
+  state,
 } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { storage } from "../common/decorators/storage";
 import { fireEvent } from "../common/dom/fire_event";
@@ -45,14 +46,13 @@ import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
+import "./ha-md-list";
+import "./ha-md-list-item";
+import type { HaMdListItem } from "./ha-md-list-item";
 import "./ha-menu-button";
 import "./ha-sortable";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
-import "./ha-md-list";
-import "./ha-md-list-item";
-import type { HaMdListItem } from "./ha-md-list-item";
-import { showPromptDialog } from "../dialogs/generic/show-dialog-box";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
@@ -408,6 +408,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
     // prettier-ignore
     return html`
+    <ha-sortable .disabled=${!this.editMode} draggable-selector=".draggable" @item-moved=${this._panelMoved}>
       <ha-md-list
         class="ha-scrollbar"
         @focusin=${this._listboxFocusIn}
@@ -422,15 +423,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ${this._renderPanels(afterSpacer, selectedPanel)}
         ${this._renderExternalConfiguration()}
       </ha-md-list>
+    </ha-sortable>
     `;
   }
 
   private _renderPanels(
     panels: PanelInfo[],
     selectedPanel: string,
-    orderable = false
+    sortable = false
   ) {
-    return panels.map((panel, idx) =>
+    return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
         panel.url_path === this.hass.defaultPanel
@@ -443,18 +445,25 @@ class HaSidebar extends SubscribeMixin(LitElement) {
             ? PANEL_ICONS[panel.url_path]
             : undefined,
         selectedPanel,
-        orderable ? idx : null
+        sortable
       )
     );
   }
 
+  private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
+    return html`
+      ${this._renderPanels(beforeSpacer, selectedPanel, true)}
+      ${this._renderSpacer()}${this._renderHiddenPanels()}
+    `;
+  }
+
   private _renderPanel(
     urlPath: string,
     title: string | null,
     icon: string | null | undefined,
     iconPath: string | null | undefined,
     selectedPanel: string,
-    index: number | null
+    sortable = false
   ) {
     return urlPath === "config"
       ? this._renderConfiguration(title, selectedPanel)
@@ -462,7 +471,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           <ha-md-list-item
             .href=${this.editMode ? undefined : `/${urlPath}`}
             type="link"
-            class=${selectedPanel === urlPath ? "selected" : ""}
+            class=${classMap({
+              selected: selectedPanel === urlPath,
+              draggable: this.editMode && sortable,
+            })}
             @mouseenter=${this._itemMouseEnter}
             @mouseleave=${this._itemMouseLeave}
           >
@@ -470,18 +482,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
               ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
               : html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
             <span class="item-text" slot="headline">${title}</span>
-            ${index != null
-              ? html`<ha-icon-button
-                  @click=${this._changePosition}
-                  .label=${this.hass!.localize("ui.sidebar.change_position")}
-                  class="hide-panel"
-                  slot="end"
-                  .index=${index}
-                  .title=${title}
-                >
-                  <div class="position-badge">${index + 1}</div>
-                </ha-icon-button>`
-              : nothing}
             ${this.editMode
               ? html`<ha-icon-button
                   .label=${this.hass.localize("ui.sidebar.hide_panel")}
@@ -499,10 +499,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _panelMoved(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
-    this._panelMove(oldIndex, newIndex);
-  }
 
-  private _panelMove(oldIndex: number, newIndex: number) {
     const [beforeSpacer] = computePanels(
       this.hass.panels,
       this.hass.defaultPanel,
@@ -518,15 +515,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     this._panelOrder = panelOrder;
   }
 
-  private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
-    return html`
-      <ha-sortable .disabled=${!this.editMode} @item-moved=${this._panelMoved}
-        ><div>${this._renderPanels(beforeSpacer, selectedPanel, true)}</div>
-      </ha-sortable>
-      ${this._renderSpacer()}${this._renderHiddenPanels()}
-    `;
-  }
-
   private _renderHiddenPanels() {
     return html`${this._hiddenPanels.length
       ? html`${this._hiddenPanels.map((url) => {
@@ -712,28 +700,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-edit-sidebar", { editMode: false });
   }
 
-  private async _changePosition(ev): Promise<void> {
-    ev.preventDefault();
-    const oldIndex = (ev.currentTarget as any).index as number;
-    const name = ((ev.currentTarget as any).title as string) || "";
-
-    const positionString = await showPromptDialog(this, {
-      title: this.hass!.localize("ui.sidebar.change_position"),
-      text: this.hass!.localize("ui.sidebar.change_position_dialog_text", {
-        name,
-      }),
-      inputType: "number",
-      inputMin: "1",
-      placeholder: String(oldIndex + 1),
-    });
-
-    if (!positionString) return;
-    const position = parseInt(positionString);
-    if (isNaN(position)) return;
-    const newIndex = Math.max(0, position - 1);
-    this._panelMove(oldIndex, newIndex);
-  }
-
   private async _hidePanel(ev: Event) {
     ev.preventDefault();
     const panel = (ev.currentTarget as any).panel;
@@ -873,7 +839,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           padding: 0 4px;
           border-bottom: 1px solid transparent;
           white-space: nowrap;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           color: var(
             --sidebar-menu-button-text-color,
             var(--primary-text-color)
@@ -883,7 +849,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
             --sidebar-menu-button-background-color,
             inherit
           );
-          font-size: 20px;
+          font-size: var(--ha-font-size-xl);
           align-items: center;
           padding-left: calc(4px + env(safe-area-inset-left));
           padding-inline-start: calc(4px + env(safe-area-inset-left));
@@ -896,8 +862,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           color: var(--sidebar-icon-color);
         }
         .title {
-          margin-left: 19px;
+          margin-left: 3px;
-          margin-inline-start: 19px;
+          margin-inline-start: 3px;
           margin-inline-end: initial;
           width: 100%;
           display: none;
@@ -983,10 +949,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list-item .item-text {
+          font-family: var(--ha-font-family-body);
           display: none;
-          max-width: 100%;
+          font-size: var(--ha-font-size-m);
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
-          font-size: 14px;
         }
         :host([expanded]) ha-md-list-item .item-text {
           display: block;
@@ -1008,26 +974,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           align-items: center;
           min-width: 8px;
           border-radius: 10px;
-          font-weight: 400;
+          font-weight: var(--ha-font-weight-normal);
           line-height: normal;
           background-color: var(--accent-color);
           padding: 2px 6px;
           color: var(--text-accent-color, var(--text-primary-color));
         }
 
-        .position-badge {
-          display: block;
-          width: 24px;
-          line-height: 24px;
-          box-sizing: border-box;
-          border-radius: 50%;
-          font-weight: 500;
-          text-align: center;
-          font-size: 14px;
-          background-color: var(--app-header-edit-background-color, #455a64);
-          color: var(--app-header-edit-text-color, white);
-        }
-
         ha-svg-icon + .badge {
           position: absolute;
           top: 4px;
@@ -1055,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         .subheader {
           color: var(--sidebar-text-color);
-          font-weight: 500;
+          font-size: var(--ha-font-size-m);
-          font-size: 14px;
+          font-weight: var(--ha-font-weight-medium);
           padding: 16px;
           white-space: nowrap;
         }
@@ -1070,7 +1023,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           color: var(--sidebar-background-color);
           background-color: var(--sidebar-text-color);
           padding: 4px;
-          font-weight: 500;
+          font-weight: var(--ha-font-weight-medium);
         }
 
         .menu ha-icon-button {

src/components/ha-tip.ts

@@ -38,7 +38,7 @@ class HaTip extends LitElement {
     }
 
     .prefix {
-      font-weight: 500;
+      font-weight: var(--ha-font-weight-medium);
     }
   `;
 }

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

@@ -16,7 +16,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: 400;
+        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
         color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
         background-color: var(
           --app-header-background-color,
@@ -24,7 +24,7 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         );
       }
       .mdc-top-app-bar__title {
-        font-size: 20px;
+        font-size: var(--ha-font-size-xl);
         padding-inline-start: 24px;
         padding-inline-end: initial;
       }