Add cli to package.json

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

.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

build-scripts/gulp/gallery.js

@@ -3,6 +3,9 @@ import { glob } from "glob";
 import gulp from "gulp";
 import yaml from "js-yaml";
 import { marked } from "marked";
+import ts from "typescript";
+import { create } from "@custom-elements-manifest/analyzer";
+import { litPlugin } from "@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js";
 import path from "path";
 import paths from "../paths.cjs";
 import "./clean.js";
@@ -13,6 +16,28 @@ import "./service-worker.js";
 import "./translations.js";
 import "./rspack.js";
 
+gulp.task("generate-component-docs", async function generateComponentDocs() {
+  const filePaths = ["src/components/ha-alert.ts"];
+
+  const modules = await Promise.all(
+    filePaths.map(async (file) => {
+      const filePath = path.resolve(file);
+      console.log(`Reading ${file} -> ${filePath}`);
+      const source = fs.readFileSync(filePath).toString();
+
+      return ts.createSourceFile(file, source, ts.ScriptTarget.ES2015, true);
+    })
+  );
+
+  const manifest = create({
+    modules,
+    plugins: litPlugin(),
+    context: { dev: true },
+  });
+
+  console.log(manifest);
+});
+
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
   const files = await glob(path.resolve(pageDir, "**/*"));

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;

custom-elements.json

@@ -0,0 +1,186 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/ha-alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A custom alert component for displaying messages with various alert types.",
+          "name": "HaAlert",
+          "cssProperties": [
+            {
+              "description": "The color used for \"info\" alerts.",
+              "name": "--info-color"
+            },
+            {
+              "description": "The color used for \"warning\" alerts.",
+              "name": "--warning-color"
+            },
+            {
+              "description": "The color used for \"error\" alerts.",
+              "name": "--error-color"
+            },
+            {
+              "description": "The color used for \"success\" alerts.",
+              "name": "--success-color"
+            },
+            {
+              "description": "The primary text color used in the alert.",
+              "name": "--primary-text-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the alert.",
+              "name": "issue-type"
+            },
+            {
+              "description": "The container for the alert icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container for the alert content.",
+              "name": "content"
+            },
+            {
+              "description": "The container for the alert actions.",
+              "name": "action"
+            },
+            {
+              "description": "The container for the alert title.",
+              "name": "title"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The main content of the alert.",
+              "name": ""
+            },
+            {
+              "description": "Slot for providing a custom icon for the alert.",
+              "name": "icon"
+            },
+            {
+              "description": "Slot for providing custom actions or buttons for the alert.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The title of the alert. Defaults to an empty string.",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
+              },
+              "privacy": "public",
+              "default": "\"info\"",
+              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
+              "attribute": "alert-type"
+            },
+            {
+              "kind": "field",
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
+              "attribute": "dismissable"
+            },
+            {
+              "kind": "field",
+              "name": "narrow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
+              "attribute": "narrow"
+            },
+            {
+              "kind": "method",
+              "name": "_dismissClicked",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the dismiss button is clicked.",
+              "name": "alert-dismissed-clicked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The title of the alert. Defaults to an empty string.",
+              "fieldName": "title"
+            },
+            {
+              "name": "alert-type",
+              "type": {
+                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
+              },
+              "default": "\"info\"",
+              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
+              "fieldName": "dismissable"
+            },
+            {
+              "name": "narrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
+              "fieldName": "narrow"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ha-alert",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ha-alert",
+          "declaration": {
+            "name": "HaAlert",
+            "module": "src/components/ha-alert.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

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-weight: 500;
+        font-size: var(--ha-font-size-l);
+        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-weight: bold;
+      font-size: var(--ha-font-size-xl);
+      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">
-        <div class="card-content">
-          <ha-spinner></ha-spinner></div
-      ></ha-card>
-      <ha-card header="Different spinner sizes">
-        <div class="card-content">
-          <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-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-card>`;
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <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>
+                <ha-spinner aria-label="Doing something..."></ha-spinner>
+                <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
+              </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;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 400;
+  font-family: ${haFontFamilyBody};
+  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
+  -webkit-font-smoothing: ${haFontSmoothing};
+  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

@@ -20,7 +20,9 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "analyze": "cem analyze --litelement --globs \"src/components/ha-alert.ts\" --dev",
+    "doc": "gulp generate-component-docs"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -96,7 +98,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",
@@ -111,9 +113,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",
@@ -153,15 +155,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",
-    "@bundle-stats/plugin-webpack-filter": "4.20.0",
-    "@lokalise/node-api": "14.5.0",
+    "@babel/preset-env": "7.27.2",
+    "@bundle-stats/plugin-webpack-filter": "4.20.1",
+    "@custom-elements-manifest/analyzer": "0.10.4",
+    "@custom-elements-manifest/to-markdown": "0.1.0",
+    "@lokalise/node-api": "14.7.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",
-    "@rspack/cli": "1.3.8",
-    "@rspack/core": "1.3.8",
+    "@rsdoctor/rspack-plugin": "1.1.2",
+    "@rspack/cli": "1.3.9",
+    "@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",
@@ -170,7 +174,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",
@@ -180,14 +184,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.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",
@@ -205,7 +209,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",
@@ -219,9 +223,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"
@@ -233,7 +237,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"
   },

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-weight: 400;
+          font-size: var(--ha-font-size-3xl);
+          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-weight: 400;
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-normal);
       line-height: 20px;
     }
     h3:before {

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

@@ -10,7 +10,6 @@ import type { LitElement } from "lit";
 export interface DragScrollControllerConfig {
   selector: string;
   enabled?: boolean;
-  trackScroll?: boolean;
 }
 
 export class DragScrollController implements ReactiveController {
@@ -24,10 +23,6 @@ export class DragScrollController implements ReactiveController {
 
   public scrollLeft = 0;
 
-  public scrolledStart = false;
-
-  public scrolledEnd = false;
-
   private _host: ReactiveControllerHost & LitElement;
 
   private _selector: string;
@@ -36,8 +31,6 @@ export class DragScrollController implements ReactiveController {
 
   private _enabled = true;
 
-  private _trackScroll = false;
-
   public get enabled(): boolean {
     return this._enabled;
   }
@@ -57,11 +50,10 @@ export class DragScrollController implements ReactiveController {
 
   constructor(
     host: ReactiveControllerHost & LitElement,
-    { selector, enabled, trackScroll }: DragScrollControllerConfig
+    { selector, enabled }: DragScrollControllerConfig
   ) {
     this._selector = selector;
     this._host = host;
-    this._trackScroll = trackScroll ?? false;
     this.enabled = enabled ?? true;
     host.addController(this);
   }
@@ -83,14 +75,6 @@ export class DragScrollController implements ReactiveController {
     );
     if (this._scrollContainer) {
       this._scrollContainer.addEventListener("mousedown", this._mouseDown);
-      if (this._trackScroll) {
-        this._scrollContainer.addEventListener("scroll", this._onScroll);
-        this.scrolledStart = this._scrollContainer.scrollLeft > 0;
-        this.scrolledEnd =
-          this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth <
-          this._scrollContainer.scrollWidth;
-        this._host.requestUpdate();
-      }
     }
   }
 
@@ -99,34 +83,15 @@ export class DragScrollController implements ReactiveController {
     window.removeEventListener("mouseup", this._mouseUp);
     if (this._scrollContainer) {
       this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
-      this._scrollContainer.removeEventListener("scroll", this._onScroll);
       this._scrollContainer = undefined;
     }
     this.scrolled = false;
     this.scrolling = false;
-    this.scrolledStart = false;
-    this.scrolledEnd = false;
     this.mouseIsDown = false;
     this.scrollStartX = 0;
     this.scrollLeft = 0;
   }
 
-  private _onScroll = (event: Event) => {
-    const oldScrolledStart = this.scrolledStart;
-    const oldScrolledEnd = this.scrolledEnd;
-
-    const container = event.currentTarget as HTMLElement;
-    this.scrolledStart = container.scrollLeft > 0;
-    this.scrolledEnd =
-      container.scrollLeft + container.offsetWidth < container.scrollWidth;
-    if (
-      this.scrolledStart !== oldScrolledStart ||
-      this.scrolledEnd !== oldScrolledEnd
-    ) {
-      this._host.requestUpdate();
-    }
-  };
-
   private _mouseDown = (event: MouseEvent) => {
     const scrollContainer = this._scrollContainer;
 

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

@@ -739,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

@@ -164,6 +164,8 @@ export class HaDataTable extends LitElement {
 
   @state() private _collapsedGroups: string[] = [];
 
+  @state() private _lastSelectedRowId: string | null = null;
+
   private _checkableRowsCount?: number;
 
   private _checkedRows: string[] = [];
@@ -187,6 +189,7 @@ export class HaDataTable extends LitElement {
 
   public clearSelection(): void {
     this._checkedRows = [];
+    this._lastSelectedRowId = null;
     this._checkedRowsChanged();
   }
 
@@ -194,6 +197,7 @@ export class HaDataTable extends LitElement {
     this._checkedRows = this._filteredData
       .filter((data) => data.selectable !== false)
       .map((data) => data[this.id]);
+    this._lastSelectedRowId = null;
     this._checkedRowsChanged();
   }
 
@@ -207,6 +211,7 @@ export class HaDataTable extends LitElement {
         this._checkedRows.push(id);
       }
     });
+    this._lastSelectedRowId = null;
     this._checkedRowsChanged();
   }
 
@@ -217,6 +222,7 @@ export class HaDataTable extends LitElement {
         this._checkedRows.splice(index, 1);
       }
     });
+    this._lastSelectedRowId = null;
     this._checkedRowsChanged();
   }
 
@@ -261,6 +267,7 @@ export class HaDataTable extends LitElement {
           if (this.columns[columnId].direction) {
             this.sortDirection = this.columns[columnId].direction!;
             this.sortColumn = columnId;
+            this._lastSelectedRowId = null;
 
             fireEvent(this, "sorting-changed", {
               column: columnId,
@@ -286,6 +293,7 @@ export class HaDataTable extends LitElement {
 
     if (properties.has("filter")) {
       this._debounceSearch(this.filter);
+      this._lastSelectedRowId = null;
     }
 
     if (properties.has("data")) {
@@ -296,9 +304,11 @@ export class HaDataTable extends LitElement {
 
     if (!this.hasUpdated && this.initialCollapsedGroups) {
       this._collapsedGroups = this.initialCollapsedGroups;
+      this._lastSelectedRowId = null;
       fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
     } else if (properties.has("groupColumn")) {
       this._collapsedGroups = [];
+      this._lastSelectedRowId = null;
       fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
     }
 
@@ -312,6 +322,14 @@ export class HaDataTable extends LitElement {
       this._sortFilterData();
     }
 
+    if (
+      properties.has("_filter") ||
+      properties.has("sortColumn") ||
+      properties.has("sortDirection")
+    ) {
+      this._lastSelectedRowId = null;
+    }
+
     if (properties.has("selectable") || properties.has("hiddenColumns")) {
       this._filteredData = [...this._filteredData];
     }
@@ -542,7 +560,7 @@ export class HaDataTable extends LitElement {
               >
                 <ha-checkbox
                   class="mdc-data-table__row-checkbox"
-                  @change=${this._handleRowCheckboxClick}
+                  @click=${this._handleRowCheckboxClicked}
                   .rowId=${row[this.id]}
                   .disabled=${row.selectable === false}
                   .checked=${this._checkedRows.includes(String(row[this.id]))}
@@ -724,6 +742,7 @@ export class HaDataTable extends LitElement {
           Object.entries(sorted).forEach(([groupName, rows]) => {
             groupedItems.push({
               append: true,
+              selectable: false,
               content: html`<div
                 class="mdc-data-table__cell group-header"
                 role="cell"
@@ -750,7 +769,7 @@ export class HaDataTable extends LitElement {
         }
 
         if (appendRow) {
-          items.push({ append: true, content: appendRow });
+          items.push({ append: true, selectable: false, content: appendRow });
         }
 
         if (hasFab) {
@@ -800,23 +819,84 @@ export class HaDataTable extends LitElement {
       this._checkedRows = [];
       this._checkedRowsChanged();
     }
+    this._lastSelectedRowId = null;
   }
 
-  private _handleRowCheckboxClick = (ev: Event) => {
+  private _handleRowCheckboxClicked = (ev: Event) => {
     const checkbox = ev.currentTarget as HaCheckbox;
     const rowId = (checkbox as any).rowId;
 
-    if (checkbox.checked) {
-      if (this._checkedRows.includes(rowId)) {
-        return;
+    const groupedData = this._groupData(
+      this._filteredData,
+      this.localizeFunc || this.hass.localize,
+      this.appendRow,
+      this.hasFab,
+      this.groupColumn,
+      this.groupOrder,
+      this._collapsedGroups
+    );
+
+    if (
+      groupedData.find((data) => data[this.id] === rowId)?.selectable === false
+    ) {
+      return;
+    }
+
+    const rowIndex = groupedData.findIndex((data) => data[this.id] === rowId);
+
+    if (
+      ev instanceof MouseEvent &&
+      ev.shiftKey &&
+      this._lastSelectedRowId !== null
+    ) {
+      const lastSelectedRowIndex = groupedData.findIndex(
+        (data) => data[this.id] === this._lastSelectedRowId
+      );
+
+      if (lastSelectedRowIndex > -1 && rowIndex > -1) {
+        this._checkedRows = [
+          ...this._checkedRows,
+          ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
+        ];
+      }
+    } else if (!checkbox.checked) {
+      if (!this._checkedRows.includes(rowId)) {
+        this._checkedRows = [...this._checkedRows, rowId];
       }
-      this._checkedRows = [...this._checkedRows, rowId];
     } else {
       this._checkedRows = this._checkedRows.filter((row) => row !== rowId);
     }
+
+    if (rowIndex > -1) {
+      this._lastSelectedRowId = rowId;
+    }
     this._checkedRowsChanged();
   };
 
+  private _selectRange(
+    groupedData: DataTableRowData[],
+    startIndex: number,
+    endIndex: number
+  ) {
+    const start = Math.min(startIndex, endIndex);
+    const end = Math.max(startIndex, endIndex);
+
+    const checkedRows: string[] = [];
+
+    for (let i = start; i <= end; i++) {
+      const row = groupedData[i];
+      if (
+        row &&
+        row.selectable !== false &&
+        !this._checkedRows.includes(row[this.id])
+      ) {
+        checkedRows.push(row[this.id]);
+      }
+    }
+
+    return checkedRows;
+  }
+
   private _handleRowClick = (ev: Event) => {
     if (
       ev
@@ -858,6 +938,7 @@ export class HaDataTable extends LitElement {
     if (this.filter) {
       return;
     }
+    this._lastSelectedRowId = null;
     this._debounceSearch(ev.detail.value);
   }
 
@@ -894,11 +975,13 @@ export class HaDataTable extends LitElement {
     } else {
       this._collapsedGroups = [...this._collapsedGroups, groupName];
     }
+    this._lastSelectedRowId = null;
     fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
   };
 
   public expandAllGroups() {
     this._collapsedGroups = [];
+    this._lastSelectedRowId = null;
     fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
   }
 
@@ -916,6 +999,7 @@ export class HaDataTable extends LitElement {
       delete grouped.undefined;
     }
     this._collapsedGroups = Object.keys(grouped);
+    this._lastSelectedRowId = null;
     fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
   }
 
@@ -928,12 +1012,12 @@ export class HaDataTable extends LitElement {
           height: 100%;
         }
         .mdc-data-table__content {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -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 +1132,12 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -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 +1254,12 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__header-cell {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -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 +1283,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

@@ -178,7 +178,9 @@ export class HaEntityComboBox extends LitElement {
           : nothing}
         ${item.domain_name && !showEntityId
           ? html`
-              <div slot="trailing-supporting-text">${item.domain_name}</div>
+              <div slot="trailing-supporting-text" class="domain">
+                ${item.domain_name}
+              </div>
             `
           : nothing}
       </ha-combo-box-item>
@@ -408,7 +410,9 @@ export class HaEntityComboBox extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-combo-box
+        item-id-path="id"
         item-value-path="id"
+        item-label-path="label"
         .hass=${this.hass}
         .value=${this._value}
         .label=${this.label === undefined

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

@@ -1,6 +1,13 @@
 import { mdiClose, mdiMenuDown, mdiShape } from "@mdi/js";
 import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
-import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type CSSResultGroup,
+  type PropertyValues,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -106,6 +113,12 @@ export class HaEntityPicker extends LitElement {
 
   @state() private _opened = false;
 
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    // Load title translations so it is available when the combo-box opens
+    this.hass.loadBackendTranslation("title");
+  }
+
   private _renderContent() {
     const entityId = this.value || "";
 

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

@@ -396,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")
@@ -405,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}

src/components/ha-alert.ts

@@ -25,6 +25,36 @@ declare global {
   }
 }
 
+/**
+ * A custom alert component for displaying messages with various alert types.
+ * 
+ * @element ha-alert
+ * 
+ * @property {string} title - The title of the alert. Defaults to an empty string.
+ * @property {"info" | "warning" | "error" | "success"} alertType - The type of alert to display.
+ * Defaults to "info". Determines the styling and icon used.
+ * @property {boolean} dismissable - Whether the alert can be dismissed. Defaults to `false`.
+ * If `true`, a dismiss button is displayed.
+ * @property {boolean} narrow - Whether the alert should use a narrow layout. Defaults to `false`.
+ * 
+ * @slot - The main content of the alert.
+ * @slot icon - Slot for providing a custom icon for the alert.
+ * @slot action - Slot for providing custom actions or buttons for the alert.
+ * 
+ * @fires alert-dismissed-clicked - Fired when the dismiss button is clicked.
+ * 
+ * @csspart issue-type - The container for the alert.
+ * @csspart icon - The container for the alert icon.
+ * @csspart content - The container for the alert content.
+ * @csspart action - The container for the alert actions.
+ * @csspart title - The container for the alert title.
+ * 
+ * @cssprop --info-color - The color used for "info" alerts.
+ * @cssprop --warning-color - The color used for "warning" alerts.
+ * @cssprop --error-color - The color used for "error" alerts.
+ * @cssprop --success-color - The color used for "success" alerts.
+ * @cssprop --primary-text-color - The primary text color used in the alert.
+ */
 @customElement("ha-alert")
 class HaAlert extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
@@ -35,7 +65,7 @@ class HaAlert extends LitElement {
     | "warning"
     | "error"
     | "success" = "info";
-
+    
   @property({ type: Boolean }) public dismissable = false;
 
   @property({ type: Boolean }) public narrow = false;
@@ -129,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;
-      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+      -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),
@@ -39,7 +39,7 @@ export class HaComboBoxItem extends HaMdListItem {
         font-family: var(--ha-font-family-code);
         font-size: var(--ha-font-size-xs);
       }
-      [slot="trailing-supporting-text"] {
+      ::slotted(.domain) {
         font-size: var(--ha-font-size-s);
         font-weight: var(--ha-font-weight-normal);
         line-height: var(--ha-line-height-normal);

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-weight: 500;
+      font-family: var(--ha-font-family-body);
+      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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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: 11px;
+          font-size: var(--ha-font-size-xs);
+          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-weight: 500;
+          font-size: var(--ha-font-size-s);
+          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-weight: bold;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-bold);
     }
     hr {
       border-color: var(--divider-color);

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-weight: 400;
+      font-size: var(--ha-font-size-m);
+      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,13 +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";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
@@ -407,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}
@@ -420,11 +422,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ${this._renderSpacer()}
         ${this._renderPanels(afterSpacer, selectedPanel)}
         ${this._renderExternalConfiguration()}
-        </ha-md-list>
+      </ha-md-list>
+    </ha-sortable>
     `;
   }
 
-  private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
+  private _renderPanels(
+    panels: PanelInfo[],
+    selectedPanel: string,
+    sortable = false
+  ) {
     return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
@@ -437,17 +444,26 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]
             : undefined,
-        selectedPanel
+        selectedPanel,
+        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
+    selectedPanel: string,
+    sortable = false
   ) {
     return urlPath === "config"
       ? this._renderConfiguration(title, selectedPanel)
@@ -455,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}
           >
@@ -496,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)}</div>
-      </ha-sortable>
-      ${this._renderSpacer()}${this._renderHiddenPanels()}
-    `;
-  }
-
   private _renderHiddenPanels() {
     return html`${this._hiddenPanels.length
       ? html`${this._hiddenPanels.map((url) => {
@@ -829,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)
@@ -839,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));
@@ -939,9 +949,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list-item .item-text {
+          font-family: var(--ha-font-family-body);
           display: none;
-          font-weight: 500;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
+          font-weight: var(--ha-font-weight-medium);
         }
         :host([expanded]) ha-md-list-item .item-text {
           display: block;
@@ -963,7 +974,7 @@ 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;
@@ -997,8 +1008,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         .subheader {
           color: var(--sidebar-text-color);
-          font-weight: 500;
-          font-size: 14px;
+          font-size: var(--ha-font-size-m);
+          font-weight: var(--ha-font-weight-medium);
           padding: 16px;
           white-space: nowrap;
         }
@@ -1012,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;
       }

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

@@ -16,7 +16,7 @@ export class HaTopAppBar extends TopAppBarBase {
         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,

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

@@ -268,7 +268,7 @@ export class TopAppBarBaseBase extends BaseElement {
         );
       }
       .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,
@@ -321,7 +321,7 @@ export class TopAppBarBaseBase extends BaseElement {
         overflow: auto;
       }
       .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-water_heater-state.ts

@@ -71,7 +71,7 @@ export class HaWaterHeaterState extends LitElement {
         }
 
         .state-label {
-          font-weight: bold;
+          font-weight: var(--ha-font-weight-bold);
         }
 
         .label {