Make "loading next step" look like progress step in config flows

Adjust media player cover image sizes in more info for smaller screens (#27232 )
Adjust media player cover image sizes for smaller screens
2025-09-29 06:49:43 +00:00 · 2025-09-29 09:32:59 +03:00 · 2025-09-29 08:30:12 +03:00 · 2025-09-29 08:28:24 +03:00 · 2025-09-29 07:57:45 +03:00 · 2025-09-28 13:35:48 +03:00
298 changed files with 1541 additions and 1318 deletions
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -42,7 +42,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -77,7 +77,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -43,7 +43,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -78,7 +78,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
--- a/.github/workflows/design_deployment.yaml
+++ b/.github/workflows/design_deployment.yaml
@@ -35,7 +35,7 @@ jobs:
      - name: Deploy to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
--- a/.github/workflows/design_preview.yaml
+++ b/.github/workflows/design_preview.yaml
@@ -40,7 +40,7 @@ jobs:
      - name: Deploy preview to Netlify
        id: deploy
        run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
            --json > deploy_output.json
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
--- a/.yarn/releases/yarn-4.10.3.cjs
+++ b/.yarn/releases/yarn-4.10.3.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.10.2.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/cast/src/launcher/layout/hc-cast.ts
@@ -242,7 +242,7 @@ class HcCast extends LitElement {
    }

    .question:before {
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
      position: absolute;
      top: 0;
      right: 0;
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -95,8 +95,7 @@ class HcLayout extends LitElement {
    }

    .hero {
-      border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm)
-        var(--ha-border-radius-square) var(--ha-border-radius-square);
+      border-radius: 4px 4px 0 0;
    }
    .subtitle {
      font-size: var(--ha-font-size-m);
--- a/cast/src/media/entrypoint.ts
+++ b/cast/src/media/entrypoint.ts
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

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

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

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

 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
--- a/gallery/src/ha-gallery.ts
+++ b/gallery/src/ha-gallery.ts
@@ -208,7 +208,7 @@ class HaGallery extends LitElement {
      }

      .sidebar a[active]::before {
-        border-radius: var(--ha-border-radius-lg);
+        border-radius: 12px;
        position: absolute;
        top: 0;
        right: 2px;
@@ -241,7 +241,7 @@ class HaGallery extends LitElement {
        text-align: center;
        margin: 16px;
        padding: 16px;
-        border-radius: var(--ha-border-radius-lg);
+        border-radius: 12px;
        background-color: var(--primary-background-color);
      }

--- a/gallery/src/pages/components/ha-badge.ts
+++ b/gallery/src/pages/components/ha-badge.ts
@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
    }
    .card-content {
      display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-button.ts
+++ b/gallery/src/pages/components/ha-button.ts
@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
    .card-content {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    .card-content div {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-control-button.ts
+++ b/gallery/src/pages/components/ha-control-button.ts
@@ -9,10 +9,10 @@ import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-button";
-import "../../../../src/components/ha-control-button-group";
+import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-control-button-group";

 interface Button {
  label: string;
@@ -156,17 +156,17 @@ export class DemoHaBarButton extends LitElement {
      --control-button-icon-color: var(--primary-color);
      --control-button-background-color: var(--primary-color);
      --control-button-background-opacity: 0.2;
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
      height: 100px;
      width: 100px;
    }
    .custom-group {
      --control-button-group-thickness: 100px;
-      --control-button-group-border-radius: var(--ha-border-radius-6xl);
+      --control-button-group-border-radius: 36px;
      --control-button-group-spacing: 20px;
    }
    .custom-group ha-control-button {
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
      --mdc-icon-size: 32px;
    }
    .vertical-buttons {
--- a/gallery/src/pages/components/ha-control-number-buttons.ts
+++ b/gallery/src/pages/components/ha-control-number-buttons.ts
@@ -1,10 +1,10 @@
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { repeat } from "lit/directives/repeat";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-number-buttons";
+import { repeat } from "lit/directives/repeat";
+import { ifDefined } from "lit/directives/if-defined";

 const buttons: {
  id: string;
@@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
      --control-number-buttons-background-color: #2196f3;
      --control-number-buttons-background-opacity: 0.1;
      --control-number-buttons-thickness: 100px;
-      --control-number-buttons-border-radius: var(--ha-border-radius-6xl);
+      --control-number-buttons-border-radius: 36px;
    }
  `;
 }
--- a/gallery/src/pages/components/ha-control-select-menu.ts
+++ b/gallery/src/pages/components/ha-control-select-menu.ts
@@ -131,7 +131,7 @@ export class DemoHaControlSelectMenu extends LitElement {
      --control-button-icon-color: var(--primary-color);
      --control-button-background-color: var(--primary-color);
      --control-button-background-opacity: 0.2;
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
      height: 100px;
      width: 100px;
    }
--- a/gallery/src/pages/components/ha-control-select.ts
+++ b/gallery/src/pages/components/ha-control-select.ts
@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
      --mdc-icon-size: 24px;
      --control-select-color: var(--state-fan-active-color);
      --control-select-thickness: 130px;
-      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-border-radius: 36px;
    }
    .vertical-selects {
      height: 300px;
--- a/gallery/src/pages/components/ha-control-slider.ts
+++ b/gallery/src/pages/components/ha-control-slider.ts
@@ -3,8 +3,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-slider";
+import "../../../../src/components/ha-card";

 const sliders: {
  id: string;
@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
      --control-slider-background: #ffcf4c;
      --control-slider-background-opacity: 0.2;
      --control-slider-thickness: 130px;
-      --control-slider-border-radius: var(--ha-border-radius-6xl);
+      --control-slider-border-radius: 36px;
    }
    .vertical-sliders {
      height: 300px;
--- a/gallery/src/pages/components/ha-control-switch.ts
+++ b/gallery/src/pages/components/ha-control-switch.ts
@@ -9,8 +9,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-switch";
+import "../../../../src/components/ha-card";

 const switches: {
  id: string;
@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
      --control-switch-on-color: var(--green-color);
      --control-switch-off-color: var(--red-color);
      --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-border-radius: 36px;
      --control-switch-padding: 6px;
      --mdc-icon-size: 24px;
    }
--- a/gallery/src/pages/components/ha-progress-button.ts
+++ b/gallery/src/pages/components/ha-progress-button.ts
@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
    .card-content {
      display: flex;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    .card-content div {
      display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-select-box.ts
+++ b/gallery/src/pages/components/ha-select-box.ts
@@ -131,7 +131,7 @@ export class DemoHaSelectBox extends LitElement {
      --mdc-icon-size: 24px;
      --control-select-color: var(--state-fan-active-color);
      --control-select-thickness: 130px;
-      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-border-radius: 36px;
    }

    p.title {
--- a/gallery/src/pages/components/ha-slider.ts
+++ b/gallery/src/pages/components/ha-slider.ts
@@ -79,7 +79,7 @@ export class DemoHaSlider extends LitElement {
      background-color: var(--primary-background-color);
      padding: 0 50px;
      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
    }
    ha-card {
      margin: 24px auto;
@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/gallery/src/pages/components/ha-spinner.ts
+++ b/gallery/src/pages/components/ha-spinner.ts
@@ -61,7 +61,7 @@ export class DemoHaSpinner extends LitElement {
      background-color: var(--primary-background-color);
      padding: 0 50px;
      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
    }
    ha-card {
      margin: 24px auto;
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
      display: flex;
      flex-direction: column;
      align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
  `;
 }
--- a/gallery/src/pages/misc/entity-state.ts
+++ b/gallery/src/pages/misc/entity-state.ts
@@ -5,13 +5,13 @@ import type {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { computeDomain } from "../../../../src/common/entity/compute_domain";
 import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
 import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
 import type { HomeAssistant } from "../../../../src/types";

 const SENSOR_DEVICE_CLASSES = [
@@ -434,7 +434,7 @@ export class DemoEntityState extends LitElement {
      display: block;
      height: 20px;
      width: 20px;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 10px;
      background-color: rgb(--color);
    }
  `;
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@@ -121,7 +121,7 @@ class HassioCardContent extends LitElement {
      height: 12px;
      top: 8px;
      right: 8px;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
    }
    .topbar {
      position: absolute;
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@@ -164,7 +164,7 @@ class HassioHardwareDialog extends LitElement {
        pre,
        code {
          background-color: var(--markdown-code-background-color, none);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 3px;
        }
        pre {
          padding: 16px;
--- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts
+++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
@@ -228,7 +228,7 @@ class HassioRegistriesDialog extends LitElement {
      css`
        .registry {
          border: 1px solid var(--divider-color);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          margin-top: 4px;
        }
        .action {
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -193,7 +193,7 @@ class HassioRepositoriesDialog extends LitElement {
        }
        .option {
          border: 1px solid var(--divider-color);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          margin-top: 4px;
        }
        ha-button {
--- a/hassio/src/dialogs/system-managed/dialog-system-managed.ts
+++ b/hassio/src/dialogs/system-managed/dialog-system-managed.ts
@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
          display: flex;
          justify-content: center;
          align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
          --mdc-icon-size: 48px;
          margin-bottom: 32px;
        }
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -31,7 +31,7 @@ export const hassioStyle = css`
  .card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
  }
  @media screen and (min-width: 640px) {
    .card-group {
--- a/landing-page/src/components/landing-page-logs.ts
+++ b/landing-page/src/components/landing-page-logs.ts
@@ -302,7 +302,7 @@ class LandingPageLogs extends LitElement {
        max-height: 300px;
        overflow: auto;
        border: 1px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-sm);
+        border-radius: 4px;
        padding: 4px;
      }

--- a/landing-page/src/ha-landing-page.ts
+++ b/landing-page/src/ha-landing-page.ts
@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
      ha-card .card-content {
        display: flex;
        flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
      }
      ha-alert p {
        text-align: unset;
@@ -221,7 +221,7 @@ class HaLandingPage extends LandingPageBaseElement {
      ha-language-picker {
        display: block;
        width: 200px;
-        border-radius: var(--ha-border-radius-sm);
+        border-radius: 4px;
        overflow: hidden;
        --ha-select-height: 40px;
        --mdc-select-fill-color: none;
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "@codemirror/legacy-modes": "6.5.1",
    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.2",
+    "@codemirror/view": "6.38.3",
    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
@@ -89,8 +89,8 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.0",
-    "@vaadin/vaadin-themable-mixin": "24.9.0",
+    "@vaadin/combo-box": "24.9.1",
+    "@vaadin/vaadin-themable-mixin": "24.9.1",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -111,7 +111,7 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.12",
+    "hls.js": "1.6.13",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@@ -158,10 +158,10 @@
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
    "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.5",
+    "@rspack/core": "1.5.7",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/culori": "4.0.1",
@@ -203,7 +203,7 @@
    "husky": "9.1.7",
    "jsdom": "27.0.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.2.1",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -213,11 +213,11 @@
    "rspack-manifest-plugin": "5.1.0",
    "serve": "14.2.5",
    "sinon": "21.0.0",
-    "tar": "7.4.4",
+    "tar": "7.5.1",
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "typescript-eslint": "8.44.1",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
@@ -235,5 +235,5 @@
    "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"
  },
-  "packageManager": "yarn@4.10.2"
+  "packageManager": "yarn@4.10.3"
 }
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -103,10 +103,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
          );
          box-shadow: var(--ha-card-box-shadow, none);
          box-sizing: border-box;
-          border-radius: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
+          border-radius: var(--ha-card-border-radius, 12px);
          border-width: var(--ha-card-border-width, 1px);
          border-style: solid;
          border-color: var(
@@ -135,7 +132,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
        }
        ha-language-picker {
          width: 200px;
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          overflow: hidden;
          --ha-select-height: 40px;
          --mdc-select-fill-color: none;
--- a/src/common/color/hex.ts
+++ b/src/common/color/hex.ts
@@ -1,23 +1,40 @@
+import { formatHex, parse } from "culori";
+
+/**
+ * Expands a 3-digit hex color to a 6-digit hex color.
+ * @param hex - The hex color to expand.
+ * @returns The expanded hex color.
+ * @throws If the hex color is invalid.
+ */
 export const expandHex = (hex: string): string => {
-  hex = hex.replace("#", "");
-  if (hex.length === 6) return hex;
-  let result = "";
-  for (const val of hex) {
-    result += val + val;
+  const color = parse(hex);
+  if (!color) {
+    throw new Error(`Invalid hex color: ${hex}`);
  }
-  return result;
+  const formattedColor = formatHex(color);
+  if (!formattedColor) {
+    throw new Error(`Could not format hex color: ${hex}`);
+  }
+  return formattedColor.replace("#", "");
 };

-// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+/**
+ * Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
+ * @param c1 - The first hex color.
+ * @param c2 - The second hex color.
+ * @param blend - The blend percentage (0-100).
+ * @returns The blended hex color.
+ */
 export const hexBlend = (c1: string, c2: string, blend = 50): string => {
-  let color = "";
  c1 = expandHex(c1);
  c2 = expandHex(c2);
+  let color = "";
  for (let i = 0; i <= 5; i += 2) {
    const h1 = parseInt(c1.substring(i, i + 2), 16);
    const h2 = parseInt(c2.substring(i, i + 2), 16);
-    let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
-    while (hex.length < 2) hex = "0" + hex;
+    const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
+      .toString(16)
+      .padStart(2, "0");
    color += hex;
  }
  return `#${color}`;
--- a/src/common/color/rgb.ts
+++ b/src/common/color/rgb.ts
@@ -1,28 +1,49 @@
-export const luminosity = (rgb: [number, number, number]): number => {
-  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
-  const lum: [number, number, number] = [0, 0, 0];
-  for (let i = 0; i < rgb.length; i++) {
-    const chan = rgb[i] / 255;
-    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
-  }
+import { wcagLuminance, wcagContrast } from "culori";

-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
-};
+/**
+ * Calculates the luminosity of an RGB color.
+ * @param rgb - The RGB color to calculate the luminosity of.
+ * @returns The luminosity of the color.
+ */
+export const luminosity = (rgb: [number, number, number]): number =>
+  wcagLuminance({
+    mode: "rgb",
+    r: rgb[0] / 255,
+    g: rgb[1] / 255,
+    b: rgb[2] / 255,
+  });

+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param color1 - The first color to calculate the contrast ratio of.
+ * @param color2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const rgbContrast = (
  color1: [number, number, number],
  color2: [number, number, number]
-) => {
-  const lum1 = luminosity(color1);
-  const lum2 = luminosity(color2);
-
-  if (lum1 > lum2) {
-    return (lum1 + 0.05) / (lum2 + 0.05);
-  }
-
-  return (lum2 + 0.05) / (lum1 + 0.05);
-};
+) =>
+  wcagContrast(
+    {
+      mode: "rgb",
+      r: color1[0] / 255,
+      g: color1[1] / 255,
+      b: color1[2] / 255,
+    },
+    {
+      mode: "rgb",
+      r: color2[0] / 255,
+      g: color2[1] / 255,
+      b: color2[2] / 255,
+    }
+  );

+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param rgb1 - The first color to calculate the contrast ratio of.
+ * @param rgb2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const getRGBContrastRatio = (
  rgb1: [number, number, number],
  rgb2: [number, number, number]
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -1,5 +1,5 @@
-import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { consume } from "@lit/context";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
 import { differenceInMinutes } from "date-fns";
 import type { DataZoomComponentOption } from "echarts/components";
@@ -7,16 +7,15 @@ import type { EChartsType } from "echarts/core";
 import type {
  ECElementEvent,
  LegendComponentOption,
-  LineSeriesOption,
  XAXisOption,
  YAXisOption,
+  LineSeriesOption,
 } from "echarts/types/dist/shared";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
@@ -25,9 +24,10 @@ import type { Themes } from "../../data/ws-themes";
 import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
-import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
+import { ensureArray } from "../../common/array/ensure-array";
+import "../chips/ha-assist-chip";
 import { downSampleLineData } from "./down-sample";

 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
@@ -974,7 +974,7 @@ export class HaChartBase extends LitElement {
      right: 4px;
      display: flex;
      flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
    }
    .chart-controls.small {
      top: 0;
@@ -983,7 +983,7 @@ export class HaChartBase extends LitElement {
    .chart-controls ha-icon-button,
    .chart-controls ::slotted(ha-icon-button) {
      background: var(--card-background-color);
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
      --mdc-icon-button-size: 32px;
      color: var(--primary-color);
      border: 1px solid var(--divider-color);
@@ -1011,7 +1011,7 @@ export class HaChartBase extends LitElement {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .chart-legend li {
      height: 24px;
@@ -1036,7 +1036,7 @@ export class HaChartBase extends LitElement {
    .chart-legend .bullet {
      border-width: 1px;
      border-style: solid;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
      display: block;
      height: 16px;
      width: 16px;
--- a/src/components/data-table/dialog-data-table-settings.ts
+++ b/src/components/data-table/dialog-data-table-settings.ts
@@ -290,9 +290,7 @@ export class DialogDataTableSettings extends LitElement {
          ha-dialog {
            --vertical-align-dialog: flex-start;
            --dialog-surface-margin-top: 250px;
-            --ha-dialog-border-radius: var(--ha-border-radius-4xl)
-              var(--ha-border-radius-4xl) var(--ha-border-radius-square)
-              var(--ha-border-radius-square);
+            --ha-dialog-border-radius: 28px 28px 0 0;
            --mdc-dialog-min-height: calc(100% - 250px);
            --mdc-dialog-max-height: calc(100% - 250px);
          }
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -1053,7 +1053,7 @@ export class HaDataTable extends LitElement {

        .mdc-data-table {
          background-color: var(--data-table-background-color);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          border-width: 1px;
          border-style: solid;
          border-color: var(--divider-color);
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -4,11 +4,11 @@ import Vue from "vue";
 import DateRangePicker from "vue2-daterange-picker";
 // @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
-import {
-  localizeMonths,
-  localizeWeekdays,
-} from "../common/datetime/localize_date";
 import { fireEvent } from "../common/dom/fire_event";
+import {
+  localizeWeekdays,
+  localizeMonths,
+} from "../common/datetime/localize_date";
 import { mainWindow } from "../common/dom/get_main_window";

 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -177,7 +177,7 @@ class DateRangePickerElement extends WrappedElement {
            top: auto;
            box-shadow: var(--ha-card-box-shadow, none);
            background-color: var(--card-background-color);
-            border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+            border-radius: var(--ha-card-border-radius, 12px);
            border-width: var(--ha-card-border-width, 1px);
            border-style: solid;
            border-color: var(
@@ -203,7 +203,7 @@ class DateRangePickerElement extends WrappedElement {
          .daterangepicker .calendar-table th {
            background-color: transparent;
            color: var(--secondary-text-color);
-            border-radius: var(--ha-border-radius-square);
+            border-radius: 0;
            outline: none;
            min-width: 32px;
            height: 32px;
@@ -225,13 +225,13 @@ class DateRangePickerElement extends WrappedElement {
            color: var(--text-primary-color);
          }
          .daterangepicker td.start-date.end-date {
-            border-radius: var(--ha-border-radius-circle);
+            border-radius: 50%;
          }
          .daterangepicker td.start-date {
-            border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
+            border-radius: 50% 0 0 50%;
          }
          .daterangepicker td.end-date {
-            border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
+            border-radius: 0 50% 50% 0;
          }
          .reportrange-text {
            background: none !important;
@@ -265,7 +265,7 @@ class DateRangePickerElement extends WrappedElement {
            border: 1px solid var(--primary-color);
            background-color: transparent;
            color: var(--primary-color);
-            border-radius: var(--ha-border-radius-sm);
+            border-radius: 4px;
            padding: 8px;
            cursor: pointer;
          }
@@ -321,10 +321,10 @@ class DateRangePickerElement extends WrappedElement {
              -webkit-transform: rotate(-45deg);
            }
            .daterangepicker td.start-date {
-              border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
+              border-radius: 0 50% 50% 0;
            }
            .daterangepicker td.end-date {
-              border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
+              border-radius: 50% 0 0 50%;
            }
            `;
    }
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -236,7 +236,7 @@ export class StateBadge extends LitElement {
          border-radius: var(--state-badge-with-media-image-border-radius, 8%);
        }
        :host(.has-no-radius) {
-          border-radius: var(--ha-border-radius-square);
+          border-radius: 0;
        }
        :host(:focus) {
          outline: none;
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -99,7 +99,7 @@ class HaAlert extends LitElement {
      opacity: 0.12;
      pointer-events: none;
      content: "";
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
    }
    .icon.no-title {
      align-self: center;
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
@@ -73,14 +73,18 @@ export class HaAnalytics extends LitElement {
                .checked=${this.analytics?.preferences[preference]}
                .preference=${preference}
                name=${preference}
-                ?disabled=${baseEnabled}
              >
              </ha-switch>
-              <ha-tooltip .for="switch-${preference}" placement="right">
-                ${this.localize(
-                  `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
-                )}
-              </ha-tooltip>
+              ${baseEnabled
+                ? nothing
+                : html`<ha-tooltip
+                    .for="switch-${preference}"
+                    placement="right"
+                  >
+                    ${this.localize(
+                      `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                    )}
+                  </ha-tooltip>`}
            </span>
          </ha-settings-row>
        `
--- a/src/components/ha-assist-chat.ts
+++ b/src/components/ha-assist-chat.ts
@@ -1,24 +1,24 @@
-import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, LitElement, html, nothing } from "lit";
+import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { supportsFeature } from "../common/entity/supports-feature";
+import type { HomeAssistant } from "../types";
 import {
+  type PipelineRunEvent,
  runAssistPipeline,
  type AssistPipeline,
  type ConversationChatLogAssistantDelta,
  type ConversationChatLogToolResultDelta,
-  type PipelineRunEvent,
 } from "../data/assist_pipeline";
+import { supportsFeature } from "../common/entity/supports-feature";
 import { ConversationEntityFeature } from "../data/conversation";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
+import { documentationUrl } from "../util/documentation-url";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";

 interface AssistMessage {
  who: string;
@@ -591,7 +591,7 @@ export class HaAssistChat extends LitElement {
      clear: both;
      margin: 8px 0;
      padding: 8px;
-      border-radius: var(--ha-border-radius-xl);
+      border-radius: 15px;
    }
    .message:last-child {
      margin-bottom: 0;
@@ -659,7 +659,7 @@ export class HaAssistChat extends LitElement {
    .double-bounce2 {
      width: 48px;
      height: 48px;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
      background-color: var(--primary-color);
      opacity: 0.2;
      position: absolute;
--- a/src/components/ha-badge.ts
+++ b/src/components/ha-badge.ts
@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
      flex-direction: row;
      align-items: center;
      justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      height: var(--ha-badge-size, 36px);
      min-width: var(--ha-badge-size, 36px);
      padding: 0px 12px;
@@ -122,7 +122,7 @@ export class HaBadge extends LitElement {
    ::slotted(img[slot="icon"]) {
      width: 30px;
      height: 30px;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
      object-fit: cover;
      overflow: hidden;
      margin-left: -10px;
--- a/src/components/ha-bar.ts
+++ b/src/components/ha-bar.ts
@@ -46,7 +46,7 @@ export class HaBar extends LitElement {
      fill: var(--ha-bar-primary-color, var(--primary-color));
    }
    svg {
-      border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm));
+      border-radius: var(--ha-bar-border-radius, 4px);
      height: 12px;
      width: 100%;
    }
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -337,9 +337,7 @@ export class HaBaseTimeInput extends LitElement {
    .time-input-wrap {
      display: flex;
      flex: var(--time-input-flex, unset);
-      border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm))
-        var(--mdc-shape-small, var(--ha-border-radius-sm))
-        var(--ha-border-radius-square) var(--ha-border-radius-square);
+      border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
      overflow: hidden;
      position: relative;
      direction: ltr;
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -54,9 +54,9 @@ export class HaBottomSheet extends LitElement {
      border-top-left-radius: var(--ha-border-radius-lg);
      border-top-right-radius: var(--ha-border-radius-lg);
      max-height: 90vh;
-      margin-bottom: var(--safe-area-inset-bottom);
-      margin-left: var(--safe-area-inset-left);
-      margin-right: var(--safe-area-inset-right);
+      padding-bottom: var(--safe-area-inset-bottom);
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
    }
  `;
 }
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -17,7 +17,7 @@ export class HaCard extends LitElement {
      backdrop-filter: var(--ha-card-backdrop-filter, none);
      box-shadow: var(--ha-card-box-shadow, none);
      box-sizing: border-box;
-      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      border-radius: var(--ha-card-border-radius, 12px);
      border-width: var(--ha-card-border-width, 1px);
      border-style: solid;
      border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
--- a/src/components/ha-code-editor-completion-items.ts
+++ b/src/components/ha-code-editor-completion-items.ts
@@ -45,7 +45,7 @@ export class HaCodeEditorCompletionItems extends LitElement {
      margin: 0 3px;
      padding: 3px;
      background-color: var(--markdown-code-background-color, none);
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: var(--ha-border-radius-sm, 4px);
      line-height: var(--ha-line-height-condensed);
    }
  `;
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -5,19 +5,19 @@ import type {
  CompletionResult,
  CompletionSource,
 } from "@codemirror/autocomplete";
-import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
+import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import {
-  mdiArrowCollapse,
  mdiArrowExpand,
+  mdiArrowCollapse,
  mdiContentCopy,
-  mdiRedo,
  mdiUndo,
+  mdiRedo,
 } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { css, html, ReactiveElement, render } from "lit";
+import { css, ReactiveElement, html, render } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
@@ -774,7 +774,7 @@ export class HaCodeEditor extends ReactiveElement {
      right: 8px !important;
      bottom: 8px !important;
      z-index: 6;
-      border-radius: var(--ha-border-radius-lg) !important;
+      border-radius: 12px !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
      overflow: hidden !important;
      background-color: var(
@@ -797,7 +797,7 @@ export class HaCodeEditor extends ReactiveElement {
    :host(.fullscreen) .cm-editor {
      height: 100% !important;
      max-height: 100% !important;
-      border-radius: var(--ha-border-radius-square) !important;
+      border-radius: 0 !important;
    }

    :host(:not(.hasToolbar)) .code-editor-toolbar {
--- a/src/components/ha-color-picker.ts
+++ b/src/components/ha-color-picker.ts
@@ -155,7 +155,7 @@ export class HaColorPicker extends LitElement {
      display: block;
      background-color: var(--circle-color, var(--divider-color));
      border: 1px solid var(--outline-color);
-      border-radius: var(--ha-border-radius-pill);
+      border-radius: 10px;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
--- a/src/components/ha-control-button.ts
+++ b/src/components/ha-control-button.ts
@@ -32,7 +32,7 @@ export class HaControlButton extends LitElement {
      --control-button-icon-color: var(--primary-text-color);
      --control-button-background-color: var(--disabled-color);
      --control-button-background-opacity: 0.2;
-      --control-button-border-radius: var(--ha-border-radius-md);
+      --control-button-border-radius: 10px;
      --control-button-padding: 8px;
      --mdc-icon-size: 20px;
      --ha-ripple-color: var(--secondary-text-color);
--- a/src/components/ha-control-number-buttons.ts
+++ b/src/components/ha-control-number-buttons.ts
@@ -187,7 +187,7 @@ export class HaControlNumberButton extends LitElement {
      --control-number-buttons-focus-color: var(--secondary-text-color);
      --control-number-buttons-background-color: var(--disabled-color);
      --control-number-buttons-background-opacity: 0.2;
-      --control-number-buttons-border-radius: var(--ha-border-radius-md);
+      --control-number-buttons-border-radius: 10px;
      --mdc-icon-size: 16px;
      height: var(--feature-height);
      width: 100%;
--- a/src/components/ha-control-select-menu.ts
+++ b/src/components/ha-control-select-menu.ts
@@ -174,7 +174,7 @@ export class HaControlSelectMenu extends SelectBase {
        --control-select-menu-text-color: var(--primary-text-color);
        --control-select-menu-background-color: var(--disabled-color);
        --control-select-menu-background-opacity: 0.2;
-        --control-select-menu-border-radius: var(--ha-border-radius-lg);
+        --control-select-menu-border-radius: 14px;
        --control-select-menu-height: 48px;
        --control-select-menu-padding: 6px 10px;
        --mdc-icon-size: 20px;
--- a/src/components/ha-control-slider.ts
+++ b/src/components/ha-control-slider.ts
@@ -380,7 +380,7 @@ export class HaControlSlider extends LitElement {
      --control-slider-background: var(--disabled-color);
      --control-slider-background-opacity: 0.2;
      --control-slider-thickness: 40px;
-      --control-slider-border-radius: var(--ha-border-radius-md);
+      --control-slider-border-radius: 10px;
      --control-slider-tooltip-font-size: var(--ha-font-size-m);
      height: var(--control-slider-thickness);
      width: 100%;
@@ -403,7 +403,7 @@ export class HaControlSlider extends LitElement {
      background-color: var(--clear-background-color);
      color: var(--primary-text-color);
      font-size: var(--control-slider-tooltip-font-size);
-      border-radius: var(--ha-border-radius-lg);
+      border-radius: 0.8em;
      padding: 0.2em 0.4em;
      opacity: 0;
      white-space: nowrap;
--- a/src/components/ha-control-switch.ts
+++ b/src/components/ha-control-switch.ts
@@ -157,7 +157,7 @@ export class HaControlSwitch extends LitElement {
      --control-switch-off-color: var(--disabled-color);
      --control-switch-background-opacity: 0.2;
      --control-switch-thickness: 40px;
-      --control-switch-border-radius: var(--ha-border-radius-lg);
+      --control-switch-border-radius: 12px;
      --control-switch-padding: 4px;
      --mdc-icon-size: 20px;
      height: var(--control-switch-thickness);
--- a/src/components/ha-copy-textfield.ts
+++ b/src/components/ha-copy-textfield.ts
@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
    .container {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
      margin-top: 8px;
    }

--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
    .date-range-inputs {
      display: flex;
      align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .date-range-ranges {
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -123,10 +123,7 @@ export class HaDialog extends DialogBase {
        margin-top: var(--dialog-surface-margin-top);
        min-width: var(--mdc-dialog-min-width, 100vw);
        min-height: var(--mdc-dialog-min-height, auto);
-        border-radius: var(
-          --ha-dialog-border-radius,
-          var(--ha-border-radius-3xl)
-        );
+        border-radius: var(--ha-dialog-border-radius, 24px);
        -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
        backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
        background: var(
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -144,7 +144,7 @@ export class HaExpansionPanel extends LitElement {
    .top {
      display: flex;
      align-items: center;
-      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      border-radius: var(--ha-card-border-radius, 12px);
    }

    .top.expanded {
@@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement {
      border-width: 1px;
      border-style: solid;
      border-color: var(--outline-color);
-      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      border-radius: var(--ha-card-border-radius, 12px);
    }

    .summary-icon {
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -242,7 +242,7 @@ export class HaFileUpload extends LitElement {
      align-items: center;
      border: solid 1px
        var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
-      border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm));
+      border-radius: var(--mdc-shape-small, 4px);
      height: 100%;
    }
    .row {
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -4,7 +4,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
 import { fetchBlueprints } from "../data/blueprint";
 import type { RelatedResult } from "../data/search";
@@ -15,6 +14,7 @@ import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon-button";
 import "./ha-list";
+import { deepEqual } from "../common/util/deep-equal";

@customElement("ha-filter-blueprints")
 export class HaFilterBlueprints extends LitElement {
@@ -189,7 +189,7 @@ export class HaFilterBlueprints extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -207,7 +207,7 @@ export class HaFilterBlueprints extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -12,7 +12,6 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import type { CategoryRegistryEntry } from "../data/category_registry";
 import {
  createCategoryRegistryEntry,
@@ -25,11 +24,12 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./ha-button-menu";
 import "./ha-expansion-panel";
 import "./ha-icon";
-import "./ha-list";
+import "./ha-button-menu";
 import "./ha-list-item";
+import "./ha-list";
+import { stopPropagation } from "../common/dom/stop_propagation";

@customElement("ha-filter-categories")
 export class HaFilterCategories extends SubscribeMixin(LitElement) {
@@ -284,7 +284,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -302,7 +302,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -216,7 +216,7 @@ export class HaFilterDevices extends LitElement {
        }

        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -234,7 +234,7 @@ export class HaFilterDevices extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@@ -170,7 +170,7 @@ export class HaFilterDomains extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -188,7 +188,7 @@ export class HaFilterDomains extends LitElement {
          margin-inline-end: initial;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -7,7 +7,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { stringCompare } from "../common/string/compare";
-import { deepEqual } from "../common/util/deep-equal";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
 import { haStyleScrollbar } from "../resources/styles";
@@ -18,6 +17,7 @@ import "./ha-expansion-panel";
 import "./ha-list";
 import "./ha-state-icon";
 import "./search-input-outlined";
+import { deepEqual } from "../common/util/deep-equal";

@customElement("ha-filter-entities")
 export class HaFilterEntities extends LitElement {
@@ -231,7 +231,7 @@ export class HaFilterEntities extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -249,7 +249,7 @@ export class HaFilterEntities extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -7,7 +7,6 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
-import { deepEqual } from "../common/util/deep-equal";
 import { getFloorAreaLookup } from "../data/floor_registry";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
@@ -21,6 +20,7 @@ import "./ha-icon-button";
 import "./ha-list";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";
+import { deepEqual } from "../common/util/deep-equal";

@customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
@@ -281,7 +281,7 @@ export class HaFilterFloorAreas extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -299,7 +299,7 @@ export class HaFilterFloorAreas extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -8,7 +8,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { IntegrationManifest } from "../data/integration";
-import { domainToName, fetchIntegrationManifests } from "../data/integration";
+import { fetchIntegrationManifests, domainToName } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
@@ -188,7 +188,7 @@ export class HaFilterIntegrations extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -206,7 +206,7 @@ export class HaFilterIntegrations extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -214,7 +214,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -232,7 +232,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -158,7 +158,7 @@ export class HaFilterStates extends LitElement {
          height: 0;
        }
        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
+          --ha-card-border-radius: 0;
          --expansion-panel-content-padding: 0;
        }
        .header {
@@ -176,7 +176,7 @@ export class HaFilterStates extends LitElement {
          margin-inline-end: 0;
          min-width: 16px;
          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
+          border-radius: 50%;
          font-size: var(--ha-font-size-xs);
          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
--- a/src/components/ha-form/ha-form-expandable.ts
+++ b/src/components/ha-form/ha-form-expandable.ts
@@ -120,8 +120,8 @@ export class HaFormExpandable extends LitElement implements HaFormElement {
    ha-expansion-panel {
      display: block;
      --expansion-panel-content-padding: 0;
-      border-radius: var(--ha-border-radius-md);
-      --ha-card-border-radius: var(--ha-border-radius-md);
+      border-radius: 6px;
+      --ha-card-border-radius: 6px;
    }
    ha-svg-icon,
    ha-icon {
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
        var(--form-grid-column-count, auto-fit),
        minmax(var(--form-grid-min-width, 200px), 1fr)
      );
-      grid-column-gap: 8px;
-      grid-row-gap: 24px;
+      grid-column-gap: var(--ha-space-2);
+      grid-row-gap: var(--ha-space-6);
    }
    :host > ha-form {
      display: block;
--- a/src/components/ha-form/ha-form-optional_actions.ts
+++ b/src/components/ha-form/ha-form-optional_actions.ts
@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
    :host {
      display: flex !important;
      flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
    }
    :host ha-form {
      display: block;
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
      }
      .mdc-form-field {
        align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
      }
      .mdc-form-field > label {
        direction: var(--direction);
--- a/src/components/ha-grid-size-picker.ts
+++ b/src/components/ha-grid-size-picker.ts
@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
          "row-slider preview";
        grid-template-rows: auto auto;
        grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
      }
      #columns {
        grid-area: column-slider;
@@ -264,7 +264,7 @@ export class HaGridSizeEditor extends LitElement {
        left: 0;
        background-color: var(--primary-color);
        opacity: 0.3;
-        border-radius: var(--ha-border-radius-md);
+        border-radius: 8px;
        height: calc(var(--rows, 1) * 30px);
        width: calc(var(--columns, 1) * 100% / var(--total-columns, 12));
        pointer-events: none;
--- a/src/components/ha-hs-color-picker.ts
+++ b/src/components/ha-hs-color-picker.ts
@@ -394,7 +394,7 @@ class HaHsColorPicker extends LitElement {
      width: 100%;
      height: 100%;
      object-fit: contain;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
      cursor: pointer;
    }
    svg {
--- a/src/components/ha-icon-button-group.ts
+++ b/src/components/ha-icon-button-group.ts
@@ -15,7 +15,7 @@ export class HaIconButtonGroup extends LitElement {
      flex-direction: row;
      align-items: center;
      height: 48px;
-      border-radius: var(--ha-border-radius-4xl);
+      border-radius: 28px;
      background-color: rgba(139, 145, 151, 0.1);
      box-sizing: border-box;
      width: auto;
--- a/src/components/ha-icon-button-toggle.ts
+++ b/src/components/ha-icon-button-toggle.ts
@@ -18,7 +18,7 @@ export class HaIconButtonToggle extends HaIconButton {
      opacity: 0;
      transition: opacity 180ms ease-in-out;
      background-color: var(--primary-text-color);
-      border-radius: var(--ha-border-radius-2xl);
+      border-radius: 20px;
      height: 40px;
      width: 40px;
      content: "";
--- a/src/components/ha-icon-button-toolbar.ts
+++ b/src/components/ha-icon-button-toolbar.ts
@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
      background-color: transparent;
      padding-right: 4px;
      height: var(--icon-button-toolbar-height);
-      gap: 8px;
+      gap: var(--ha-space-2);
    }

    .icon-toolbar-button {
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -394,7 +394,7 @@ export class HaItemDisplayEditor extends LitElement {
    }
    ha-md-list-item.drag-selected {
      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
      outline: solid;
      outline-color: rgba(var(--rgb-accent-color), 0.6);
      outline-offset: -2px;
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -89,7 +89,7 @@ class HaLabelBadge extends LitElement {
          display: inline-block;
          background-color: var(--ha-label-badge-color, var(--primary-color));
          color: var(--ha-label-badge-label-color, white);
-          border-radius: var(--ha-border-radius-lg);
+          border-radius: 1em;
          padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
          font-weight: var(--ha-font-weight-medium);
          overflow: hidden;
--- a/src/components/ha-label.ts
+++ b/src/components/ha-label.ts
@@ -39,7 +39,7 @@ class HaLabel extends LitElement {
          vertical-align: middle;
          height: 32px;
          padding: 0 16px;
-          border-radius: var(--ha-border-radius-xl);
+          border-radius: 18px;
          color: var(--ha-label-text-color);
          --mdc-icon-size: 12px;
          text-wrap: nowrap;
@@ -73,7 +73,7 @@ class HaLabel extends LitElement {
        :host([dense]) {
          height: 20px;
          padding: 0 12px;
-          border-radius: var(--ha-border-radius-md);
+          border-radius: 10px;
        }
        :host([dense]) ::slotted([slot="icon"]) {
          margin-right: 4px;
--- a/src/components/ha-labeled-slider.ts
+++ b/src/components/ha-labeled-slider.ts
@@ -91,7 +91,7 @@ class HaLabeledSlider extends LitElement {
      flex-grow: 1;
      align-items: center;
      background-image: var(--ha-slider-background);
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
      height: 32px;
    }

--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -61,7 +61,7 @@ export class HaMarkdown extends LitElement {
    code,
    pre {
      background-color: var(--markdown-code-background-color, none);
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 3px;
    }
    svg {
      background-color: var(--markdown-svg-background-color, none);
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -137,7 +137,7 @@ class HaMenuButton extends LitElement {
      right: 7px;
      inset-inline-end: 7px;
      inset-inline-start: initial;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
      border: 2px solid var(--app-header-background-color);
    }
  `;
--- a/src/components/ha-navigation-list.ts
+++ b/src/components/ha-navigation-list.ts
@@ -5,9 +5,9 @@ import { ifDefined } from "lit/directives/if-defined";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-next";
+import "./ha-svg-icon";
 import "./ha-md-list";
 import "./ha-md-list-item";
-import "./ha-svg-icon";

@customElement("ha-navigation-list")
 class HaNavigationList extends LitElement {
@@ -74,7 +74,7 @@ class HaNavigationList extends LitElement {
      padding: 8px;
    }
    .icon-background {
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
    }
    .icon-background ha-svg-icon {
      color: #fff;
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -96,7 +96,7 @@ export class HaPickerField extends LitElement {
        }
        ha-combo-box-item {
          background-color: var(--mdc-text-field-fill-color, whitesmoke);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          border-end-end-radius: 0;
          border-end-start-radius: 0;
          --md-list-item-one-line-container-height: 56px;
@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
          --md-list-item-bottom-space: 0px;
          --md-list-item-leading-space: 8px;
          --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
          /* Remove the default focus ring */
          --md-focus-ring-width: 0px;
          --md-focus-ring-duration: 0s;
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -354,7 +354,7 @@ class HaQrScanner extends LitElement {
    }
    canvas {
      width: 100%;
-      border-radius: var(--ha-border-radius-xl);
+      border-radius: 16px;
    }
    #canvas-container {
      position: relative;
@@ -367,7 +367,7 @@ class HaQrScanner extends LitElement {
      inset-inline-start: initial;
      background: #727272b2;
      color: white;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
    }
    .row {
      display: flex;
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -204,7 +204,7 @@ export class HaResizableBottomSheet extends LitElement {
    }
    .handle-wrapper .handle::after {
      content: "";
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
      height: 4px;
      background: var(--divider-color, #e0e0e0);
      width: 80px;
--- a/src/components/ha-segmented-bar.ts
+++ b/src/components/ha-segmented-bar.ts
@@ -39,22 +39,24 @@ class HaSegmentedBar extends LitElement {
          <slot name="extra"></slot>
        </div>
        <div class="bar">
-          ${this.segments.map((segment) => {
-            const bar = html`<div
-              style=${styleMap({
-                width: `${(segment.value / totalValue) * 100}%`,
-                backgroundColor: segment.color,
-              })}
-            ></div>`;
-            return this.hideTooltip && !segment.label
-              ? bar
-              : html`
-                  <ha-tooltip>
-                    <span slot="content">${segment.label}</span>
-                    ${bar}
-                  </ha-tooltip>
-                `;
-          })}
+          ${this.segments.map(
+            (segment, index) => html`
+              ${this.hideTooltip || !segment.label
+                ? nothing
+                : html`
+                    <ha-tooltip for="segment-${index}" placement="top">
+                      ${segment.label}
+                    </ha-tooltip>
+                  `}
+              <div
+                id="segment-${index}"
+                style=${styleMap({
+                  width: `${(segment.value / totalValue) * 100}%`,
+                  backgroundColor: segment.color,
+                })}
+              ></div>
+            `
+          )}
        </div>
        ${this.hideLegend
          ? nothing
@@ -88,7 +90,7 @@ class HaSegmentedBar extends LitElement {
    .heading {
      display: flex;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
    }
    .heading .title {
      flex: 1;
@@ -104,7 +106,7 @@ class HaSegmentedBar extends LitElement {
    .bar {
      display: flex;
      overflow: hidden;
-      border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm));
+      border-radius: var(--ha-bar-border-radius, 4px);
      width: 100%;
      height: 12px;
      margin: 2px 0;
@@ -123,7 +125,7 @@ class HaSegmentedBar extends LitElement {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
      margin: 12px 0;
      padding: 0;
      list-style: none;
@@ -131,13 +133,13 @@ class HaSegmentedBar extends LitElement {
    .legend li {
      display: flex;
      align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
      font-size: var(--ha-font-size-s);
    }
    .legend li .bullet {
      width: 12px;
      height: 12px;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
    }
    .spacer {
      flex: 1;
--- a/src/components/ha-select-box.ts
+++ b/src/components/ha-select-box.ts
@@ -1,13 +1,13 @@
-import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import "./ha-radio";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
-import { computeRTL } from "../common/util/compute_rtl";
-import type { HomeAssistant } from "../types";
-import "./ha-radio";
 import type { HaRadio } from "./ha-radio";
+import { fireEvent } from "../common/dom/fire_event";
+import type { HomeAssistant } from "../types";
+import { computeRTL } from "../common/util/compute_rtl";
+import { stopPropagation } from "../common/dom/stop_propagation";

 interface SelectBoxOptionImage {
  src: string;
@@ -116,19 +116,19 @@ export class HaSelectBox extends LitElement {
    .list {
      display: grid;
      grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
    }
    .option {
      position: relative;
      display: block;
      border: 1px solid var(--divider-color);
-      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+      border-radius: var(--ha-card-border-radius, 12px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
      overflow: hidden;
      cursor: pointer;
    }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
      position: relative;
      display: flex;
      flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
      min-width: 0;
      width: 100%;
    }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
    .option .content .text {
      display: flex;
      flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
      min-width: 0;
      flex: 1;
    }
--- a/src/components/ha-selector/ha-selector-button-toggle.ts
+++ b/src/components/ha-selector/ha-selector-button-toggle.ts
@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
      align-items: center;
    }
    @media all and (max-width: 600px) {
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
      display: flex;
      align-items: center;
      padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
    }
    ha-card .thumbnail {
      width: 40px;
@@ -329,11 +329,11 @@ export class HaMediaSelector extends LitElement {
      flex-shrink: 0;
      position: relative;
      box-sizing: border-box;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
      overflow: hidden;
    }
    ha-card .image {
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
    }
    .folder {
      --mdc-icon-size: 24px;
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                labeled
                .min=${this.selector.number!.min}
                .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                .step=${sliderStep}
                .disabled=${this.disabled}
                .required=${this.required}
                @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
              >
              </ha-slider>
            `
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -297,11 +297,11 @@ export class HaObjectSelector extends LitElement {
    return [
      css`
        ha-md-list {
-          gap: 8px;
+          gap: var(--ha-space-2);
        }
        ha-md-list-item {
          border: 1px solid var(--divider-color);
-          border-radius: var(--ha-border-radius-md);
+          border-radius: 8px;
          --ha-md-list-item-gap: 0;
          --md-list-item-top-space: 0;
          --md-list-item-bottom-space: 0;
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -13,7 +13,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { hasTemplate } from "../common/string/has-template";
 import {
  fetchIntegrationManifest,
  type IntegrationManifest,
@@ -35,10 +34,11 @@ import "./ha-checkbox";
 import "./ha-icon-button";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
-import "./ha-service-section-icon";
 import "./ha-settings-row";
 import "./ha-yaml-editor";
 import type { HaYamlEditor } from "./ha-yaml-editor";
+import "./ha-service-section-icon";
+import { hasTemplate } from "../common/string/has-template";

 const attributeFilter = (values: any[], attribute: any) => {
  if (typeof attribute === "object") {
@@ -999,7 +999,7 @@ export class HaServiceControl extends LitElement {
      direction: ltr;
    }
    ha-expansion-panel {
-      --ha-card-border-radius: var(--ha-border-radius-square);
+      --ha-card-border-radius: 0;
      --expansion-panel-summary-padding: 0 16px;
      --expansion-panel-content-padding: 0;
    }
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -784,7 +784,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          flex-shrink: 0;
          box-sizing: border-box;
          margin: 4px;
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          --md-list-item-one-line-container-height: 40px;
          --md-list-item-top-space: 0;
          --md-list-item-bottom-space: 0;
@@ -807,7 +807,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          --md-ripple-hover-color: var(--sidebar-selected-icon-color);
        }
        ha-md-list-item.selected::before {
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          position: absolute;
          top: 0;
          right: 0;
@@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          justify-content: center;
          align-items: center;
          min-width: 8px;
-          border-radius: var(--ha-border-radius-md);
+          border-radius: 10px;
          font-weight: var(--ha-font-weight-normal);
          line-height: normal;
          background-color: var(--accent-color);
@@ -869,7 +869,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          position: absolute;
          top: 4px;
          left: 26px;
-          border-radius: var(--ha-border-radius-md);
+          border-radius: 10px;
          font-size: 0.65em;
          line-height: var(--ha-line-height-expanded);
          padding: 0 4px;
@@ -902,7 +902,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          display: none;
          position: absolute;
          opacity: 0.9;
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 2px;
          white-space: nowrap;
          color: var(--sidebar-background-color);
          background-color: var(--sidebar-text-color);
--- a/src/components/ha-slider.ts
+++ b/src/components/ha-slider.ts
@@ -44,10 +44,7 @@ export class HaSlider extends Slider {
            var(--ha-line-height-condensed)
          );
          --wa-tooltip-padding: 8px;
-          --wa-tooltip-border-radius: var(
-            --ha-tooltip-border-radius,
-            var(--ha-border-radius-sm)
-          );
+          --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
          --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
          --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
          min-width: 100px;
--- a/src/components/ha-sortable.ts
+++ b/src/components/ha-sortable.ts
@@ -112,12 +112,12 @@ export class HaSortable extends LitElement {
        .sortable-ghost {
          box-shadow: 0 0 0 2px var(--primary-color);
          background: rgba(var(--rgb-primary-color), 0.25);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          opacity: 0.4;
        }

        .sortable-drag {
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
          opacity: 1;
          background: var(--card-background-color);
          box-shadow: 0px 4px 8px 3px #00000026;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Petar Petrov	e012e20669	Make "loading next step" look like progress step in config flows	2025-09-29 09:32:59 +03:00
Jan-Philipp Benecke	a0d2e7312b	Adjust media player cover image sizes in more info for smaller screens (#27232 ) Adjust media player cover image sizes for smaller screens	2025-09-29 08:30:12 +03:00
Jan-Philipp Benecke	c0a9dadcbe	Implement core spacing tokens (#27226 )	2025-09-29 08:28:24 +03:00
renovate[bot]	e1edf7fb98	Update dependency lint-staged to v16.2.1 (#27233 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 07:57:45 +03:00
Jan-Philipp Benecke	6d5c165bd2	Add tooltips for undo/redo in automation & script editors (#27224 )	2025-09-28 13:35:48 +03:00
Simon Lamon	54177a16e9	Set explicit netlify version to fix workflows (#27229 ) netlify set explicit version for fix	2025-09-28 13:34:18 +03:00
Paul Bottein	c814b8e888	Align dashboard data table with other data tables (#27206 ) * Align dashboard data table with other data tables * Update ha-config-lovelace-dashboards.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update ha-config-lovelace-dashboards.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2025-09-27 18:07:01 +03:00
renovate[bot]	33a0b32cc5	Update vaadinWebComponents monorepo to v24.9.1 (#27220 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-27 13:25:12 +02:00
renovate[bot]	7dae13bf57	Update dependency @rspack/core to v1.5.7 (#27219 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-27 13:24:59 +02:00
renovate[bot]	0a3fe6e0fb	Update dependency tar to v7.5.1 (#27216 )	2025-09-26 19:21:46 +02:00
Paul Bottein	e0348e4da7	Fix slider ticks support for number selector (#27211 )	2025-09-26 15:35:01 +02:00
Aidan Timson	d53f3ec898	Add missing translations for thread config panel (#27210 )	2025-09-26 14:09:11 +01:00
renovate[bot]	e422547d93	Update Yarn to v4.10.3 (#27209 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-26 15:33:12 +03:00
Paul Bottein	d91a3fbe85	Don't display negative durations in media player more info (#27212 ) Don't display negative value in media player more info	2025-09-26 15:28:59 +03:00
Paul Bottein	01d7130f22	Fix try tts dialog max width (#27208 )	2025-09-26 13:36:05 +02:00
Aidan Timson	c57851e4df	Migrate hex color helper functions to culori (#27184 )	2025-09-26 11:31:18 +02:00
Aidan Timson	6f1f13acb0	Migrate rgb color helper functions to culori (#27185 )	2025-09-26 11:00:08 +02:00
Jan-Philipp Benecke	a8abd00809	Refactor media player slider to use slot for position and duration display (#27205 ) * Refactor media player slider to use slot for position and duration display * Fix variable naming	2025-09-26 06:33:56 +00:00
karwosts	e053978dbe	Add dropdown mode to water heater operation feature (#27201 )	2025-09-26 08:51:03 +03:00
karwosts	6e57f726a3	Add validation issues to energy diagnostic (#27203 )	2025-09-26 08:48:21 +03:00
renovate[bot]	b7cabadbe1	Update dependency typescript-eslint to v8.44.1 (#27197 )	2025-09-25 22:09:08 +02:00
Simon Lamon	d920217374	Fix typos in media player more info (#27198 )	2025-09-25 19:02:26 +00:00
Jan-Philipp Benecke	1630263276	Round seconds in media player more info before formatting (#27196 )	2025-09-25 20:47:40 +02:00
Paul Bottein	5680c742be	Revert "Update dependency @types/chromecast-caf-receiver to v6.0.24" (#27188 )	2025-09-25 17:48:23 +02:00
Paul Bottein	2aeb9cf0ef	Revert "Update dependency @types/chromecast-caf-receiver to v6.0.24 (#26500 )" This reverts commit `4a3ed62583`.	2025-09-25 17:47:59 +02:00
Paul Bottein	c9931b3a3c	Disabled config badge (#27172 ) * Add disabled option for badge * Add disabled to struct	2025-09-25 17:45:06 +02:00
Paul Bottein	fbf7ebdfe4	Add icon option to common controls section strategy (#27180 )	2025-09-25 17:23:54 +02:00
renovate[bot]	52ccb03de5	Update dependency hls.js to v1.6.13 (#27187 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-25 17:21:23 +02:00
Paul Bottein	900236ac07	Fix storage bar not displayed (#27183 )	2025-09-25 15:56:26 +01:00
renovate[bot]	28940c930d	Update dependency @codemirror/view to v6.38.3 (#27163 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-25 15:55:35 +01:00
Paul Bottein	e278b463fd	Fix analytics switches (#27181 )	2025-09-25 15:54:11 +01:00
renovate[bot]	db2acd4e39	Update dependency @rspack/core to v1.5.6 (#27177 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-25 13:10:01 +02:00
Wendelin	6dcc52cd44	Reduce default tab padding in tab-group (#27173 )	2025-09-25 11:52:04 +01:00
Paul Bottein	981db50826	Smooth animation of the sidebar resizing handle (#27166 )	2025-09-25 10:43:04 +02:00
Paul Bottein	09683863a7	Fix safe padding for bottom sheet and add scroll lock (#27165 )	2025-09-25 10:41:05 +02:00
Norbert Rittel	8c78f931dc	Use "Add (person)" instead of "New person" / "Create" (#27161 ) * Update dialog-person-detail.ts * Update en.json	2025-09-25 10:19:25 +02:00
renovate[bot]	40ce3c1e31	Update dependency lint-staged to v16.2.0 (#27164 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-25 10:13:06 +02:00