Refactor state function

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -56,12 +56,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@v4.2.4
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -100,9 +100,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@v3

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -21,10 +21,10 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@v6.0.1
         with:
           sync-labels: true

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
+      - uses: dessant/lock-threads@v5.0.1
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"

.github/workflows/nightly.yaml

@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
+        uses: actions/setup-python@v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
+        uses: relative-ci/agent-action@v3.0.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
+      - uses: release-drafter/release-drafter@v6.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -23,10 +23,10 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
+        uses: actions/setup-python@v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: |
             dist/*.whl
@@ -73,7 +73,6 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
         uses: home-assistant/wheels@2025.07.0
         with:
@@ -91,9 +90,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -108,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -120,9 +119,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -137,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/restrict-task-creation.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.issue.type.name == 'Task'
     steps:
       - name: Check if user is authorized
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@v8
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
+        uses: actions/stale@v10.0.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v5.0.0
 
       - name: Upload Translations
         run: |

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.10.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

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;

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);

gallery/src/data/media_players.ts

@@ -17,10 +17,6 @@ export const createMediaPlayerEntities = () => [
       new Date().getTime() - 23000
     ).toISOString(),
     volume_level: 0.5,
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    source: "AirPlay",
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
   }),
   getEntity("media_player", "music_playing", "playing", {
     friendly_name: "Playing The Music",
@@ -28,8 +24,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
-    supported_features: 784959,
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,
@@ -38,9 +34,6 @@ export const createMediaPlayerEntities = () => [
       new Date().getTime() - 23000
     ).toISOString(),
     volume_level: 0.5,
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
-    group_members: ["media_player.playing", "media_player.stream_playing"],
   }),
   getEntity("media_player", "stream_playing", "playing", {
     friendly_name: "Playing the Stream",
@@ -156,18 +149,15 @@ export const createMediaPlayerEntities = () => [
   }),
   getEntity("media_player", "receiver_on", "on", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
     volume_level: 0.63,
     is_volume_muted: false,
     source: "TV",
-    sound_mode: "Movie",
     friendly_name: "Receiver (selectable sources)",
     // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,
   }),
   getEntity("media_player", "receiver_off", "off", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
     friendly_name: "Receiver (selectable sources)",
     // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,

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);
       }
 

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 {

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;
     }
   `;
 }

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;
     }

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;

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;

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;
     }

gallery/src/pages/components/ha-marquee-text.markdown

@@ -1,37 +0,0 @@
----
-title: Marquee Text
----
-
-# Marquee Text `<ha-marquee-text>`
-
-Marquee text component scrolls text horizontally if it overflows its container. It supports pausing on hover and customizable speed and pause duration.
-
-## Implementation
-
-### Example Usage
-
-<ha-marquee-text style="width: 200px;">
-    This is a long text that will scroll horizontally if it overflows the container.
-</ha-marquee-text>
-
-```html
-<ha-marquee-text style="width: 200px;">
-  This is a long text that will scroll horizontally if it overflows the
-  container.
-</ha-marquee-text>
-```
-
-### API
-
-**Slots**
-
-- default slot: The text content to be displayed and scrolled.
-  - no default
-
-**Properties/Attributes**
-
-| Name           | Type    | Default | Description                                                                  |
-| -------------- | ------- | ------- | ---------------------------------------------------------------------------- |
-| speed          | number  | `15`    | The speed of the scrolling animation. Higher values result in faster scroll. |
-| pause-on-hover | boolean | `true`  | Whether to pause the scrolling animation when                                |
-| pause-duration | number  | `1000`  | The delay in milliseconds before the scrolling animation starts/restarts.    |

gallery/src/pages/components/ha-marquee-text.ts

@@ -1,25 +0,0 @@
-import { css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-marquee-text";
-
-@customElement("demo-components-ha-marquee-text")
-export class DemoHaMarqueeText extends LitElement {
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-marquee-text": DemoHaMarqueeText;
-  }
-}

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 {

gallery/src/pages/components/ha-slider.markdown

@@ -1,36 +0,0 @@
----
-title: Slider
-subtitle: A slider component for selecting a value from a range.
----
-
-<style>
-  .wrapper {
-    display: flex;
-    gap: 24px;
-  }
-</style>
-
-# Slider `<ha-slider>`
-
-## Implementation
-
-### Example Usage
-
-<div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
-</div>
-
-```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
-```
-
-### API
-
-This component is based on the webawesome slider component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/slider/) for more details.
-
-**CSS Custom Properties**
-
-- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.

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

@@ -1,100 +0,0 @@
-import type { TemplateResult } 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";
-import "../../../../src/components/ha-slider";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-slider")
-export class DemoHaSlider extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
-              <div class="card-content">
-                <span>Default (disabled)</span>
-                <ha-slider
-                  disabled
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Small</span>
-                <ha-slider
-                  size="small"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Medium</span>
-                <ha-slider
-                  size="medium"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-              </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: var(--ha-border-radius-md);
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-slider": DemoHaSlider;
-  }
-}

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;

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);
     }
   `;

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

@@ -11,10 +11,7 @@ import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-form/ha-form";
-import type {
-  HaFormSchema,
-  HaFormDataContainer,
-} from "../../../../src/components/ha-form/types";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-list-item";
@@ -36,7 +33,6 @@ import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
-import type { ObjectSelector, Selector } from "../../../../src/data/selector";
 
 const SUPPORTED_UI_TYPES = [
   "string",
@@ -82,124 +78,77 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  private _getTranslationEntry(
-    language: string,
-    entry: HaFormSchema,
-    options?: { path?: string[] }
-  ) {
-    let parent = this.addon.translations[language]?.configuration;
-    if (!parent) return undefined;
-    if (options?.path) {
-      for (const key of options.path) {
-        parent = parent[key]?.fields;
-        if (!parent) return undefined;
-      }
-    }
-    return parent[entry.name];
-  }
-
-  public computeLabel = (
-    entry: HaFormSchema,
-    _data: HaFormDataContainer,
-    options?: { path?: string[] }
-  ): string =>
-    this._getTranslationEntry(this.hass.language, entry, options)?.name ||
-    this._getTranslationEntry("en", entry, options)?.name ||
+  public computeLabel = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.name ||
+    this.addon.translations.en?.configuration?.[entry.name]?.name ||
     entry.name;
 
-  public computeHelper = (
-    entry: HaFormSchema,
-    options?: { path?: string[] }
-  ): string =>
-    this._getTranslationEntry(this.hass.language, entry, options)
+  public computeHelper = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
       ?.description ||
-    this._getTranslationEntry("en", entry, options)?.description ||
+    this.addon.translations.en?.configuration?.[entry.name]?.description ||
     "";
 
   private _convertSchema = memoizeOne(
     // Convert supervisor schema to selectors
-    (schema: readonly HaFormSchema[]): HaFormSchema[] =>
-      this._convertSchemaElements(schema)
+    (schema: Record<string, any>): HaFormSchema[] =>
+      schema.map((entry) =>
+        entry.type === "select"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { select: { options: entry.options } },
+            }
+          : entry.type === "string"
+            ? entry.multiple
+              ? {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: {
+                    select: { options: [], multiple: true, custom_value: true },
+                  },
+                }
+              : {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: {
+                    text: {
+                      type: entry.format
+                        ? entry.format
+                        : MASKED_FIELDS.includes(entry.name)
+                          ? "password"
+                          : "text",
+                    },
+                  },
+                }
+            : entry.type === "boolean"
+              ? {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: { boolean: {} },
+                }
+              : entry.type === "schema"
+                ? {
+                    name: entry.name,
+                    required: entry.required,
+                    selector: { object: {} },
+                  }
+                : entry.type === "float" || entry.type === "integer"
+                  ? {
+                      name: entry.name,
+                      required: entry.required,
+                      selector: {
+                        number: {
+                          mode: "box",
+                          step: entry.type === "float" ? "any" : undefined,
+                        },
+                      },
+                    }
+                  : entry
+      )
   );
 
-  private _convertSchemaElements(
-    schema: readonly HaFormSchema[]
-  ): HaFormSchema[] {
-    return schema.map((entry) => this._convertSchemaElement(entry));
-  }
-
-  private _convertSchemaElement(entry: any): HaFormSchema {
-    if (entry.type === "schema" && !entry.multiple) {
-      return {
-        name: entry.name,
-        type: "expandable",
-        required: entry.required,
-        schema: this._convertSchemaElements(entry.schema),
-      };
-    }
-    const selector = this._convertSchemaElementToSelector(entry, false);
-    if (selector) {
-      return {
-        name: entry.name,
-        required: entry.required,
-        selector,
-      };
-    }
-    return entry;
-  }
-
-  private _convertSchemaElementToSelector(
-    entry: any,
-    force: boolean
-  ): Selector | null {
-    if (entry.type === "select") {
-      return { select: { options: entry.options } };
-    }
-    if (entry.type === "string") {
-      return entry.multiple
-        ? { select: { options: [], multiple: true, custom_value: true } }
-        : {
-            text: {
-              type: entry.format
-                ? entry.format
-                : MASKED_FIELDS.includes(entry.name)
-                  ? "password"
-                  : "text",
-            },
-          };
-    }
-    if (entry.type === "boolean") {
-      return { boolean: {} };
-    }
-    if (entry.type === "schema") {
-      const fields: NonNullable<ObjectSelector["object"]>["fields"] = {};
-      for (const child_entry of entry.schema) {
-        fields[child_entry.name] = {
-          required: child_entry.required,
-          selector: this._convertSchemaElementToSelector(child_entry, true)!,
-        };
-      }
-      return {
-        object: {
-          multiple: entry.multiple,
-          fields,
-        },
-      };
-    }
-    if (entry.type === "float" || entry.type === "integer") {
-      return {
-        number: {
-          mode: "box",
-          step: entry.type === "float" ? "any" : undefined,
-        },
-      };
-    }
-    if (force) {
-      return { object: {} };
-    }
-    return null;
-  }
-
   private _filteredSchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)

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;

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;

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 {

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 {

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;
       }
 

landing-page/src/ha-landing-page.ts

@@ -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;

package.json

@@ -35,7 +35,6 @@
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
     "@codemirror/view": "6.38.2",
-    "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -89,20 +88,21 @@
     "@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.8.7",
+    "@vaadin/vaadin-themable-mixin": "24.8.7",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "barcode-detector": "3.0.5",
-    "color-name": "2.0.2",
+    "color-name": "2.0.0",
     "comlink": "4.4.2",
     "core-js": "3.45.1",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
@@ -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.11",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -122,7 +122,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.2",
-    "marked": "16.3.0",
+    "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -158,7 +158,7 @@
     "@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.2",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.24",
@@ -182,8 +182,8 @@
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
-    "del": "8.0.1",
-    "eslint": "9.36.0",
+    "del": "8.0.0",
+    "eslint": "9.35.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -193,7 +193,7 @@
     "eslint-plugin-unused-imports": "4.2.0",
     "eslint-plugin-wc": "3.0.1",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.2",
+    "fs-extra": "11.3.1",
     "glob": "11.0.3",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.0",
+    "jsdom": "26.1.0",
     "jszip": "3.10.1",
     "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
@@ -210,14 +210,14 @@
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
     "prettier": "3.6.2",
-    "rspack-manifest-plugin": "5.1.0",
+    "rspack-manifest-plugin": "5.0.3",
     "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.4.4",
+    "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
+    "typescript-eslint": "8.43.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -231,9 +231,9 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.4.0",
+    "globals": "16.3.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
   },
-  "packageManager": "yarn@4.10.2"
+  "packageManager": "yarn@4.9.4"
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250924.0"
+version      = "20250903.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

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;

src/common/datetime/calc_date.ts

@@ -11,7 +11,7 @@ import {
   differenceInDays,
   addDays,
 } from "date-fns";
-import { TZDate } from "@date-fns/tz";
+import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
@@ -22,13 +22,12 @@ const calcZonedDate = (
   fn: (date: Date, options?: any) => Date | number | boolean,
   options?
 ) => {
-  const tzDate = new TZDate(date, tz);
-  const fnResult = fn(tzDate, options);
-  if (fnResult instanceof Date) {
-    // Convert back to regular Date in the specified timezone
-    return new Date(fnResult.getTime());
+  const inputZoned = toZonedTime(date, tz);
+  const fnZoned = fn(inputZoned, options);
+  if (fnZoned instanceof Date) {
+    return fromZonedTime(fnZoned, tz) as Date;
   }
-  return fnResult;
+  return fnZoned;
 };
 
 export const calcDate = (
@@ -66,7 +65,7 @@ export const calcDateDifferenceProperty = (
     locale,
     config,
     locale.time_zone === TimeZone.server
-      ? new TZDate(startDate, config.time_zone)
+      ? toZonedTime(startDate, config.time_zone)
       : startDate
   );
 
@@ -145,36 +144,3 @@ export const shiftDateRange = (
   }
   return { start, end };
 };
-
-/**
- * @description Parses a date in browser display timezone
- * @param date - The date to parse
- * @param timezone - The timezone to parse the date in
- * @returns The parsed date as a Date object
- */
-export const parseDate = (date: string, timezone: string): Date => {
-  const tzDate = new TZDate(date, timezone);
-  return new Date(tzDate.getTime());
-};
-
-/**
- * @description Formats a date in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the date in
- * @returns The formatted date in YYYY-MM-DD format
- */
-export const formatDate = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[0];
-};
-
-/**
- * @description Formats a time in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the time in
- * @returns The formatted time in HH:mm:ss format
- */
-export const formatTime = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[1].split(".")[0];
-};

src/common/entity/color/battery_color.ts

@@ -1,15 +1,13 @@
-export const batteryStateColorProperty = (
-  state: string
-): string | undefined => {
+export const batteryStateColor = (state: string): string | undefined => {
   const value = Number(state);
   if (isNaN(value)) {
     return undefined;
   }
   if (value >= 70) {
-    return "--state-sensor-battery-high-color";
+    return "var(--state-sensor-battery-high-color)";
   }
   if (value >= 30) {
-    return "--state-sensor-battery-medium-color";
+    return "var(--state-sensor-battery-medium-color)";
   }
-  return "--state-sensor-battery-low-color";
+  return "var(--state-sensor-battery-low-color)";
 };

src/common/entity/compute_entity_name.ts

@@ -10,10 +10,9 @@ import { stripPrefixFromEntityName } from "./strip_prefix_from_entity_name";
 
 export const computeEntityName = (
   stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"]
+  hass: HomeAssistant
 ): string | undefined => {
-  const entry = entities[stateObj.entity_id] as
+  const entry = hass.entities[stateObj.entity_id] as
     | EntityRegistryDisplayEntry
     | undefined;
 
@@ -21,13 +20,12 @@ export const computeEntityName = (
     // Fall back to state name if not in the entity registry (friendly name)
     return computeStateName(stateObj);
   }
-  return computeEntityEntryName(entry, devices);
+  return computeEntityEntryName(entry, hass);
 };
 
 export const computeEntityEntryName = (
   entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
-  devices: HomeAssistant["devices"],
-  fallbackStateObj?: HassEntity
+  hass: HomeAssistant
 ): string | undefined => {
   const name =
     entry.name ||
@@ -35,14 +33,15 @@ export const computeEntityEntryName = (
       ? String(entry.original_name)
       : undefined);
 
-  const device = entry.device_id ? devices[entry.device_id] : undefined;
+  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;
 
   if (!device) {
     if (name) {
       return name;
     }
-    if (fallbackStateObj) {
-      return computeStateName(fallbackStateObj);
+    const stateObj = hass.states[entry.entity_id] as HassEntity | undefined;
+    if (stateObj) {
+      return computeStateName(stateObj);
     }
     return undefined;
   }

src/common/entity/context/get_entity_context.ts

@@ -18,12 +18,9 @@ interface EntityContext {
 
 export const getEntityContext = (
   stateObj: HassEntity,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): EntityContext => {
-  const entry = entities[stateObj.entity_id] as
+  const entry = hass.entities[stateObj.entity_id] as
     | EntityRegistryDisplayEntry
     | undefined;
 
@@ -35,7 +32,7 @@ export const getEntityContext = (
       floor: null,
     };
   }
-  return getEntityEntryContext(entry, entities, devices, areas, floors);
+  return getEntityEntryContext(entry, hass);
 };
 
 export const getEntityEntryContext = (
@@ -43,18 +40,15 @@ export const getEntityEntryContext = (
     | EntityRegistryDisplayEntry
     | EntityRegistryEntry
     | ExtEntityRegistryEntry,
-  entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"]
+  hass: HomeAssistant
 ): EntityContext => {
-  const entity = entities[entry.entity_id];
+  const entity = hass.entities[entry.entity_id];
   const deviceId = entry?.device_id;
-  const device = deviceId ? devices[deviceId] : undefined;
+  const device = deviceId ? hass.devices[deviceId] : undefined;
   const areaId = entry?.area_id || device?.area_id;
-  const area = areaId ? areas[areaId] : undefined;
+  const area = areaId ? hass.areas[areaId] : undefined;
   const floorId = area?.floor_id;
-  const floor = floorId ? floors[floorId] : undefined;
+  const floor = floorId ? hass.floors[floorId] : undefined;
 
   return {
     entity: entity,

src/common/entity/entity_filter.ts

@@ -60,13 +60,7 @@ export const generateEntityFilter = (
       }
     }
 
-    const { area, floor, device, entity } = getEntityContext(
-      stateObj,
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
+    const { area, floor, device, entity } = getEntityContext(stateObj, hass);
 
     if (entity && entity.hidden) {
       return false;

src/common/entity/state_active.ts

@@ -5,12 +5,15 @@ import { computeDomain } from "./compute_domain";
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
+  return domainStateActive(domain, compareState);
+}
 
+export function domainStateActive(domain: string, state: string) {
   if (["button", "event", "input_button", "scene"].includes(domain)) {
-    return compareState !== UNAVAILABLE;
+    return state !== UNAVAILABLE;
   }
 
-  if (isUnavailableState(compareState)) {
+  if (isUnavailableState(state)) {
     return false;
   }
 
@@ -18,40 +21,40 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   // such as "alert" where "off" is still a somewhat active state and
   // therefore gets a custom color and "idle" is instead the state that
   // matches what most other domains consider inactive.
-  if (compareState === OFF && domain !== "alert") {
+  if (state === OFF && domain !== "alert") {
     return false;
   }
 
   // Custom cases
   switch (domain) {
     case "alarm_control_panel":
-      return compareState !== "disarmed";
+      return state !== "disarmed";
     case "alert":
       // "on" and "off" are active, as "off" just means alert was acknowledged but is still active
-      return compareState !== "idle";
+      return state !== "idle";
     case "cover":
-      return compareState !== "closed";
+      return state !== "closed";
     case "device_tracker":
     case "person":
-      return compareState !== "not_home";
+      return state !== "not_home";
     case "lawn_mower":
-      return ["mowing", "error"].includes(compareState);
+      return ["mowing", "error"].includes(state);
     case "lock":
-      return compareState !== "locked";
+      return state !== "locked";
     case "media_player":
-      return compareState !== "standby";
+      return state !== "standby";
     case "vacuum":
-      return !["idle", "docked", "paused"].includes(compareState);
+      return !["idle", "docked", "paused"].includes(state);
     case "valve":
-      return compareState !== "closed";
+      return state !== "closed";
     case "plant":
-      return compareState === "problem";
+      return state === "problem";
     case "group":
-      return ["on", "home", "open", "locked", "problem"].includes(compareState);
+      return ["on", "home", "open", "locked", "problem"].includes(state);
     case "timer":
-      return compareState === "active";
+      return state === "active";
     case "camera":
-      return compareState === "streaming";
+      return state === "streaming";
   }
 
   return true;

src/common/entity/state_color.ts

@@ -1,13 +1,11 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
-import { computeCssVariable } from "../../resources/css-variables";
 import { slugify } from "../string/slugify";
-import { batteryStateColorProperty } from "./color/battery_color";
+import { batteryStateColor } from "./color/battery_color";
 import { computeDomain } from "./compute_domain";
-import { stateActive } from "./state_active";
+import { domainStateActive } from "./state_active";
 
 const STATE_COLORED_DOMAIN = new Set([
   "alarm_control_panel",
@@ -42,73 +40,20 @@ const STATE_COLORED_DOMAIN = new Set([
   "water_heater",
 ]);
 
-export const stateColorCss = (stateObj: HassEntity, state?: string) => {
-  const compareState = state !== undefined ? state : stateObj?.state;
-  if (compareState === UNAVAILABLE) {
-    return `var(--state-unavailable-color)`;
-  }
-
-  const properties = stateColorProperties(stateObj, state);
-  if (properties) {
-    return computeCssVariable(properties);
-  }
-
-  return undefined;
-};
-
-export const domainStateColorProperties = (
-  domain: string,
+export const stateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
   stateObj: HassEntity,
   state?: string
-): string[] => {
-  const compareState = state !== undefined ? state : stateObj.state;
-  const active = stateActive(stateObj, state);
-
-  return domainColorProperties(
-    domain,
-    stateObj.attributes.device_class,
-    compareState,
-    active
-  );
-};
-
-export const domainColorProperties = (
-  domain: string,
-  deviceClass: string | undefined,
-  state: string,
-  active: boolean
 ) => {
-  const properties: string[] = [];
-
-  const stateKey = slugify(state, "_");
-  const activeKey = active ? "active" : "inactive";
-
-  if (deviceClass) {
-    properties.push(`--state-${domain}-${deviceClass}-${stateKey}-color`);
-  }
-
-  properties.push(
-    `--state-${domain}-${stateKey}-color`,
-    `--state-${domain}-${activeKey}-color`,
-    `--state-${activeKey}-color`
-  );
-
-  return properties;
-};
-
-export const stateColorProperties = (
-  stateObj: HassEntity,
-  state?: string
-): string[] | undefined => {
-  const compareState = state !== undefined ? state : stateObj?.state;
   const domain = computeDomain(stateObj.entity_id);
   const dc = stateObj.attributes.device_class;
+  const compareState = state !== undefined ? state : stateObj.state;
 
   // Special rules for battery coloring
   if (domain === "sensor" && dc === "battery") {
-    const property = batteryStateColorProperty(compareState);
+    const property = batteryStateColor(compareState);
     if (property) {
-      return [property];
+      return property;
     }
   }
 
@@ -116,17 +61,52 @@ export const stateColorProperties = (
   if (domain === "group") {
     const groupDomain = computeGroupDomain(stateObj as GroupEntity);
     if (groupDomain && STATE_COLORED_DOMAIN.has(groupDomain)) {
-      return domainStateColorProperties(groupDomain, stateObj, state);
+      return domainStateColor(element, groupDomain, undefined, compareState);
     }
   }
 
   if (STATE_COLORED_DOMAIN.has(domain)) {
-    return domainStateColorProperties(domain, stateObj, state);
+    return domainStateColor(element, domain, dc, compareState);
   }
 
   return undefined;
 };
 
+export const domainStateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
+  domain: string,
+  deviceClass: string | undefined,
+  state: string
+) => {
+  const style =
+    element instanceof CSSStyleDeclaration
+      ? element
+      : getComputedStyle(element);
+
+  const stateKey = slugify(state, "_");
+
+  const active = domainStateActive(domain, state);
+  const activeKey = active ? "active" : "inactive";
+
+  const variables = [
+    `--state-${domain}-${stateKey}-color`,
+    `--state-${domain}-${activeKey}-color`,
+    `--state-${activeKey}-color`,
+  ];
+
+  if (deviceClass) {
+    variables.unshift(`--state-${domain}-${deviceClass}-${stateKey}-color`);
+  }
+
+  for (const variable of variables) {
+    const value = style.getPropertyValue(variable).trim();
+    if (value) {
+      return value;
+    }
+  }
+  return undefined;
+};
+
 export const stateColorBrightness = (stateObj: HassEntity): string => {
   if (
     stateObj.attributes.brightness &&

src/common/translations/entity-state.ts

@@ -2,12 +2,6 @@ import type { HassConfig, HassEntity } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import type { HomeAssistant } from "../../types";
 import type { LocalizeFunc } from "./localize";
-import { computeEntityName } from "../entity/compute_entity_name";
-import { computeDeviceName } from "../entity/compute_device_name";
-import { getEntityContext } from "../entity/context/get_entity_context";
-import { computeAreaName } from "../entity/compute_area_name";
-import { computeFloorName } from "../entity/compute_floor_name";
-import { ensureArray } from "../array/ensure-array";
 
 export type FormatEntityStateFunc = (
   stateObj: HassEntity,
@@ -23,28 +17,16 @@ export type FormatEntityAttributeNameFunc = (
   attribute: string
 ) => string;
 
-export type EntityNameType = "entity" | "device" | "area" | "floor";
-
-export type FormatEntityNameFunc = (
-  stateObj: HassEntity,
-  type: EntityNameType | EntityNameType[],
-  separator?: string
-) => string;
-
 export const computeFormatFunctions = async (
   localize: LocalizeFunc,
   locale: FrontendLocaleData,
   config: HassConfig,
   entities: HomeAssistant["entities"],
-  devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"],
-  floors: HomeAssistant["floors"],
   sensorNumericDeviceClasses: string[]
 ): Promise<{
   formatEntityState: FormatEntityStateFunc;
   formatEntityAttributeValue: FormatEntityAttributeValueFunc;
   formatEntityAttributeName: FormatEntityAttributeNameFunc;
-  formatEntityName: FormatEntityNameFunc;
 }> => {
   const { computeStateDisplay } = await import(
     "../entity/compute_state_display"
@@ -75,45 +57,5 @@ export const computeFormatFunctions = async (
       ),
     formatEntityAttributeName: (stateObj, attribute) =>
       computeAttributeNameDisplay(localize, stateObj, entities, attribute),
-    formatEntityName: (stateObj, type, separator = " ") => {
-      const types = ensureArray(type);
-      const namesList: (string | undefined)[] = [];
-
-      const { device, area, floor } = getEntityContext(
-        stateObj,
-        entities,
-        devices,
-        areas,
-        floors
-      );
-
-      for (const t of types) {
-        switch (t) {
-          case "entity": {
-            namesList.push(computeEntityName(stateObj, entities, devices));
-            break;
-          }
-          case "device": {
-            if (device) {
-              namesList.push(computeDeviceName(device));
-            }
-            break;
-          }
-          case "area": {
-            if (area) {
-              namesList.push(computeAreaName(area));
-            }
-            break;
-          }
-          case "floor": {
-            if (floor) {
-              namesList.push(computeFloorName(floor));
-            }
-            break;
-          }
-        }
-      }
-      return namesList.filter((name) => name !== undefined).join(separator);
-    },
   };
 };

src/common/util/order-properties.ts

@@ -1,18 +0,0 @@
-/**
- * Orders object properties according to a specified key order.
- * Properties not in the order array will be placed at the end.
- */
-export function orderProperties<T extends Record<string, any>>(
-  obj: T,
-  keys: readonly string[]
-): T {
-  const orderedEntries = keys
-    .filter((key) => key in obj)
-    .map((key) => [key, obj[key]] as const);
-
-  const extraEntries = Object.entries(obj).filter(
-    ([key]) => !keys.includes(key)
-  );
-
-  return Object.fromEntries([...orderedEntries, ...extraEntries]) as T;
-}

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;
@@ -63,9 +63,6 @@ export class HaChartBase extends LitElement {
   @property({ attribute: "small-controls", type: Boolean })
   public smallControls?: boolean;
 
-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
   // extraComponents is not reactive and should not trigger updates
   public extraComponents?: any[];
 
@@ -218,7 +215,7 @@ export class HaChartBase extends LitElement {
         </div>
         ${this._renderLegend()}
         <div class="chart-controls ${classMap({ small: this.smallControls })}">
-          ${this._isZoomed && !this.hideResetButton
+          ${this._isZoomed
             ? html`<ha-icon-button
                 class="zoom-reset"
                 .path=${mdiRestart}
@@ -356,12 +353,20 @@ export class HaChartBase extends LitElement {
 
       this.chart = echarts.init(container, "custom");
       this.chart.on("datazoom", (e: any) => {
-        this._handleDataZoomEvent(e);
+        const { start, end } = e.batch?.[0] ?? e;
+        this._isZoomed = start !== 0 || end !== 100;
+        this._zoomRatio = (end - start) / 100;
+        if (this._isTouchDevice) {
+          // zooming changes the axis pointer so we need to hide it
+          this.chart?.dispatchAction({
+            type: "hideTip",
+            from: "datazoom",
+          });
+        }
       });
       this.chart.on("click", (e: ECElementEvent) => {
         fireEvent(this, "chart-click", e);
       });
-
       if (!this.options?.dataZoom) {
         this.chart.getZr().on("dblclick", this._handleClickZoom);
       }
@@ -863,60 +868,10 @@ export class HaChartBase extends LitElement {
     });
   };
 
-  public zoom(start: number, end: number, silent = false) {
-    this.chart?.dispatchAction({
-      type: "dataZoom",
-      start,
-      end,
-      silent,
-    });
-  }
-
   private _handleZoomReset() {
     this.chart?.dispatchAction({ type: "dataZoom", start: 0, end: 100 });
   }
 
-  private _handleDataZoomEvent(e: any) {
-    const zoomData = e.batch?.[0] ?? e;
-    let start = typeof zoomData.start === "number" ? zoomData.start : 0;
-    let end = typeof zoomData.end === "number" ? zoomData.end : 100;
-
-    if (
-      start === 0 &&
-      end === 100 &&
-      zoomData.startValue !== undefined &&
-      zoomData.endValue !== undefined
-    ) {
-      const option = this.chart!.getOption();
-      const xAxis = option.xAxis?.[0] ?? option.xAxis;
-
-      if (xAxis?.min && xAxis?.max) {
-        const axisMin = new Date(xAxis.min).getTime();
-        const axisMax = new Date(xAxis.max).getTime();
-        const axisRange = axisMax - axisMin;
-
-        start = Math.max(
-          0,
-          Math.min(100, ((zoomData.startValue - axisMin) / axisRange) * 100)
-        );
-        end = Math.max(
-          0,
-          Math.min(100, ((zoomData.endValue - axisMin) / axisRange) * 100)
-        );
-      }
-    }
-
-    this._isZoomed = start !== 0 || end !== 100;
-    this._zoomRatio = (end - start) / 100;
-    if (this._isTouchDevice) {
-      this.chart?.dispatchAction({
-        type: "hideTip",
-        from: "datazoom",
-      });
-    }
-    fireEvent(this, "chart-zoom", { start, end });
-  }
-
   private _legendClick(ev: any) {
     if (!this.chart) {
       return;
@@ -983,7 +938,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);
@@ -1036,7 +991,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;
@@ -1069,9 +1024,5 @@ declare global {
     "dataset-hidden": { id: string };
     "dataset-unhidden": { id: string };
     "chart-click": ECElementEvent;
-    "chart-zoom": {
-      start: number;
-      end: number;
-    };
   }
 }

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

@@ -66,9 +66,6 @@ export class StateHistoryChartLine extends LitElement {
   @property({ attribute: "expand-legend", type: Boolean })
   public expandLegend?: boolean;
 
-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
   @state() private _chartData: LineSeriesOption[] = [];
 
   @state() private _entityIds: string[] = [];
@@ -97,9 +94,7 @@ export class StateHistoryChartLine extends LitElement {
         style=${styleMap({ height: this.height })}
         @dataset-hidden=${this._datasetHidden}
         @dataset-unhidden=${this._datasetUnhidden}
-        @chart-zoom=${this._handleDataZoom}
         .expandLegend=${this.expandLegend}
-        .hideResetButton=${this.hideResetButton}
       ></ha-chart-base>
     `;
   }
@@ -197,19 +192,6 @@ export class StateHistoryChartLine extends LitElement {
     this._hiddenStats.delete(ev.detail.id);
   }
 
-  public zoom(start: number, end: number) {
-    const chartBase = this.shadowRoot!.querySelector("ha-chart-base")!;
-    chartBase.zoom(start, end, true);
-  }
-
-  private _handleDataZoom(ev: CustomEvent) {
-    fireEvent(this, "chart-zoom-with-index", {
-      start: ev.detail.start ?? 0,
-      end: ev.detail.end ?? 100,
-      chartIndex: this.chartIndex,
-    });
-  }
-
   public willUpdate(changedProps: PropertyValues) {
     if (
       changedProps.has("data") ||

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

@@ -51,9 +51,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false, type: Number }) public chartIndex?;
 
-  @property({ attribute: "hide-reset-button", type: Boolean })
-  public hideResetButton?: boolean;
-
   @state() private _chartData: CustomSeriesOption[] = [];
 
   @state() private _chartOptions?: ECOption;
@@ -71,8 +68,6 @@ export class StateHistoryChartTimeline extends LitElement {
         .data=${this._chartData as ECOption["series"]}
         small-controls
         @chart-click=${this._handleChartClick}
-        @chart-zoom=${this._handleDataZoom}
-        .hideResetButton=${this.hideResetButton}
       ></ha-chart-base>
     `;
   }
@@ -261,19 +256,6 @@ export class StateHistoryChartTimeline extends LitElement {
     };
   }
 
-  public zoom(start: number, end: number) {
-    const chartBase = this.shadowRoot!.querySelector("ha-chart-base")!;
-    chartBase.zoom(start, end, true);
-  }
-
-  private _handleDataZoom(ev: CustomEvent) {
-    fireEvent(this, "chart-zoom-with-index", {
-      start: ev.detail.start ?? 0,
-      end: ev.detail.end ?? 100,
-      chartIndex: this.chartIndex,
-    });
-  }
-
   private _generateData() {
     const computedStyles = getComputedStyle(this);
     let stateHistory = this.data;

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

@@ -1,8 +1,7 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiRestart } from "@mdi/js";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import type {
@@ -12,10 +11,6 @@ import type {
 } from "../../data/history";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
-import type { StateHistoryChartLine } from "./state-history-chart-line";
-import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
-import "../ha-fab";
-import "../ha-svg-icon";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
 
@@ -34,11 +29,6 @@ const chunkData = (inputArray: any[], chunks: number) =>
 declare global {
   interface HASSDomEvents {
     "y-width-changed": { value: number; chartIndex: number };
-    "chart-zoom-with-index": {
-      start: number;
-      end: number;
-      chartIndex: number;
-    };
   }
 }
 
@@ -84,9 +74,6 @@ export class StateHistoryCharts extends LitElement {
   @property({ attribute: "expand-legend", type: Boolean })
   public expandLegend?: boolean;
 
-  @property({ attribute: "sync-charts", type: Boolean })
-  public syncCharts = false;
-
   private _computedStartTime!: Date;
 
   private _computedEndTime!: Date;
@@ -97,10 +84,6 @@ export class StateHistoryCharts extends LitElement {
 
   @state() private _chartCount = 0;
 
-  @state() private _hasZoomedCharts = false;
-
-  private _isSyncing = false;
-
   // @ts-ignore
   @restoreScroll(".container") private _savedScrollPos?: number;
 
@@ -132,36 +115,19 @@ export class StateHistoryCharts extends LitElement {
     // eslint-disable-next-line lit/no-this-assign-in-render
     this._chartCount = combinedItems.length;
 
-    return html`
-      ${this.virtualize
-        ? html`<div
-            class="container ha-scrollbar"
-            @scroll=${this._saveScrollPos}
+    return this.virtualize
+      ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
+          <lit-virtualizer
+            scroller
+            class="ha-scrollbar"
+            .items=${combinedItems}
+            .renderItem=${this._renderHistoryItem}
           >
-            <lit-virtualizer
-              scroller
-              class="ha-scrollbar"
-              .items=${combinedItems}
-              .renderItem=${this._renderHistoryItem}
-            >
-            </lit-virtualizer>
-          </div>`
-        : html`${combinedItems.map((item, index) =>
-            this._renderHistoryItem(item, index)
-          )}`}
-      ${this.syncCharts && this._hasZoomedCharts
-        ? html`<ha-fab
-            slot="fab"
-            class="reset-button"
-            .label=${this.hass.localize(
-              "ui.components.history_charts.zoom_reset"
-            )}
-            @click=${this._handleGlobalZoomReset}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiRestart}></ha-svg-icon>
-          </ha-fab>`
-        : nothing}
-    `;
+          </lit-virtualizer>
+        </div>`
+      : html`${combinedItems.map((item, index) =>
+          this._renderHistoryItem(item, index)
+        )}`;
   }
 
   private _renderHistoryItem: RenderItemFunction<
@@ -190,10 +156,8 @@ export class StateHistoryCharts extends LitElement {
           .maxYAxis=${this.maxYAxis}
           .fitYData=${this.fitYData}
           @y-width-changed=${this._yWidthChanged}
-          @chart-zoom-with-index=${this._handleTimelineSync}
           .height=${this.virtualize ? undefined : this.height}
           .expandLegend=${this.expandLegend}
-          ?hide-reset-button=${this.syncCharts}
         ></state-history-chart-line>
       </div> `;
     }
@@ -211,8 +175,6 @@ export class StateHistoryCharts extends LitElement {
         .chartIndex=${index}
         .clickForMoreInfo=${this.clickForMoreInfo}
         @y-width-changed=${this._yWidthChanged}
-        @chart-zoom-with-index=${this._handleTimelineSync}
-        ?hide-reset-button=${this.syncCharts}
       ></state-history-chart-timeline>
     </div> `;
   };
@@ -302,66 +264,6 @@ export class StateHistoryCharts extends LitElement {
     this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
   }
 
-  private _handleTimelineSync(
-    e: CustomEvent<HASSDomEvents["chart-zoom-with-index"]>
-  ) {
-    if (!this.syncCharts || this._isSyncing) {
-      return;
-    }
-
-    const { start, end, chartIndex } = e.detail;
-
-    this._hasZoomedCharts = start !== 0 || end !== 100;
-    this._syncZoomToAllCharts(start, end, chartIndex);
-  }
-
-  private _syncZoomToAllCharts(
-    start: number,
-    end: number,
-    sourceChartIndex?: number
-  ) {
-    this._isSyncing = true;
-
-    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      ) as unknown as (StateHistoryChartLine | StateHistoryChartTimeline)[];
-
-      chartComponents.forEach((chartComponent, index) => {
-        if (index === sourceChartIndex) {
-          return;
-        }
-
-        if ("zoom" in chartComponent) {
-          chartComponent.zoom(start, end);
-        }
-      });
-
-      this._isSyncing = false;
-    });
-  }
-
-  private _handleGlobalZoomReset() {
-    this._hasZoomedCharts = false;
-    this._isSyncing = true;
-
-    requestAnimationFrame(() => {
-      const chartComponents = this.renderRoot.querySelectorAll(
-        "state-history-chart-line, state-history-chart-timeline"
-      );
-
-      chartComponents.forEach((chartComponent: any) => {
-        const chartBase =
-          chartComponent.renderRoot?.querySelector("ha-chart-base");
-
-        if (chartBase && chartBase.chart) {
-          chartBase.zoom(0, 100);
-        }
-      });
-      this._isSyncing = false;
-    });
-  }
-
   private _isHistoryEmpty(): boolean {
     const historyDataEmpty =
       !this.historyData ||
@@ -443,12 +345,6 @@ export class StateHistoryCharts extends LitElement {
     state-history-chart-line {
       width: 100%;
     }
-    .reset-button {
-      position: fixed;
-      bottom: calc(24px + var(--safe-area-inset-bottom));
-      right: calc(24px + var(--safe-area-inset-bottom));
-      z-index: 1;
-    }
   `;
 }
 

src/components/chart/timeline-color.ts

@@ -3,7 +3,7 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { computeCssValue } from "../../resources/css-variables";
 
@@ -30,22 +30,16 @@ function computeTimelineStateColor(
     return computeCssValue("--history-unknown-color", computedStyles);
   }
 
-  const properties = stateColorProperties(stateObj, state);
+  const color = stateColor(computedStyles, stateObj, state);
 
-  if (!properties) {
-    return undefined;
-  }
-
-  const rgb = computeCssValue(properties, computedStyles);
-
-  if (!rgb) return undefined;
+  if (!color) return undefined;
 
   const domain = computeDomain(stateObj.entity_id);
   const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
   if (!shade) {
-    return rgb;
+    return color;
   }
-  return lab2hex(labBrighten(rgb2lab(hex2rgb(rgb)), shade));
+  return lab2hex(labBrighten(rgb2lab(hex2rgb(color)), shade));
 }
 
 let colorIndex = 0;

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);
           }

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);

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%;
             }
             `;
     }

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

@@ -5,8 +5,12 @@ import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
@@ -144,9 +148,11 @@ export class HaEntityPicker extends LitElement {
       `;
     }
 
-    const entityName = this.hass.formatEntityName(stateObj, "entity");
-    const deviceName = this.hass.formatEntityName(stateObj, "device");
-    const areaName = this.hass.formatEntityName(stateObj, "area");
+    const { area, device } = getEntityContext(stateObj, this.hass);
+
+    const entityName = computeEntityName(stateObj, this.hass);
+    const deviceName = device ? computeDeviceName(device) : undefined;
+    const areaName = area ? computeAreaName(area) : undefined;
 
     const isRTL = computeRTL(this.hass);
 
@@ -305,10 +311,12 @@ export class HaEntityPicker extends LitElement {
       items = entityIds.map<EntityComboBoxItem>((entityId) => {
         const stateObj = hass!.states[entityId];
 
+        const { area, device } = getEntityContext(stateObj, hass);
+
         const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = this.hass.formatEntityName(stateObj, "entity");
-        const deviceName = this.hass.formatEntityName(stateObj, "device");
-        const areaName = this.hass.formatEntityName(stateObj, "area");
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;
 
         const domainName = domainToName(
           this.hass.localize,

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

@@ -6,7 +6,11 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
 import {
@@ -255,10 +259,12 @@ export class HaStatisticPicker extends LitElement {
         }
         const id = meta.statistic_id;
 
+        const { area, device } = getEntityContext(stateObj, hass);
+
         const friendlyName = computeStateName(stateObj); // Keep this for search
-        const entityName = hass.formatEntityName(stateObj, "entity");
-        const deviceName = hass.formatEntityName(stateObj, "device");
-        const areaName = hass.formatEntityName(stateObj, "area");
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;
 
         const primary = entityName || deviceName || id;
         const secondary = [areaName, entityName ? deviceName : undefined]
@@ -331,9 +337,11 @@ export class HaStatisticPicker extends LitElement {
     const stateObj = this.hass.states[statisticId];
 
     if (stateObj) {
-      const entityName = this.hass.formatEntityName(stateObj, "entity");
-      const deviceName = this.hass.formatEntityName(stateObj, "device");
-      const areaName = this.hass.formatEntityName(stateObj, "area");
+      const { area, device } = getEntityContext(stateObj, this.hass);
+
+      const entityName = computeEntityName(stateObj, this.hass);
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
 
       const isRTL = computeRTL(this.hass);
 

src/components/entity/state-badge.ts

@@ -9,7 +9,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   stateColorBrightness,
-  stateColorCss,
+  stateColor,
 } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -148,7 +148,7 @@ export class StateBadge extends LitElement {
           // Externally provided overriding color wins over state color
           iconStyle.color = this.color;
         } else if (this._stateColor) {
-          const color = stateColorCss(stateObj);
+          const color = stateColor(this, stateObj);
           if (color) {
             iconStyle.color = color;
           }
@@ -169,7 +169,8 @@ export class StateBadge extends LitElement {
           if (stateObj.attributes.hvac_action) {
             const hvacAction = stateObj.attributes.hvac_action;
             if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-              iconStyle.color = stateColorCss(
+              iconStyle.color = stateColor(
+                this,
                 stateObj,
                 CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
               )!;
@@ -236,7 +237,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;

src/components/ha-alert.ts

@@ -86,10 +86,6 @@ class HaAlert extends LitElement {
       padding: 8px;
       display: flex;
     }
-    .icon {
-      height: var(--ha-alert-icon-size, 24px);
-      width: var(--ha-alert-icon-size, 24px);
-    }
     .issue-type::after {
       position: absolute;
       top: 0;
@@ -99,7 +95,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;

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;

src/components/ha-badge.ts

@@ -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;

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%;
     }

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;

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);
+    }
+    wa-drawer::part(body) {
+      padding-bottom: var(--safe-area-inset-bottom);
     }
   `;
 }

src/components/ha-button-toggle-group.ts

@@ -28,9 +28,6 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property({ reflect: true }) size: "small" | "medium" = "medium";
 
-  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
-  public nowrap = false;
-
   @property() public variant:
     | "brand"
     | "neutral"
@@ -74,10 +71,6 @@ export class HaButtonToggleGroup extends LitElement {
     :host {
       --mdc-icon-size: var(--button-toggle-icon-size, 20px);
     }
-
-    :host([no-wrap]) wa-button-group::part(base) {
-      flex-wrap: nowrap;
-    }
   `;
 }
 

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));

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);
     }
   `;

src/components/ha-code-editor.ts

@@ -5,32 +5,22 @@ import type {
   CompletionResult,
   CompletionSource,
 } from "@codemirror/autocomplete";
-import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import {
-  mdiArrowCollapse,
-  mdiArrowExpand,
-  mdiContentCopy,
-  mdiRedo,
-  mdiUndo,
-} from "@mdi/js";
+import { mdiArrowExpand, mdiArrowCollapse } 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";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
-import { copyToClipboard } from "../common/util/copy-clipboard";
 import type { HomeAssistant } from "../types";
-import { showToast } from "../util/toast";
-import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
-import "./ha-icon-button-toolbar";
-import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";
+import "./ha-icon-button";
+import "./ha-code-editor-completion-items";
 
 declare global {
   interface HASSDomEvents {
@@ -78,24 +68,13 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "disable-fullscreen" })
   public disableFullscreen = false;
 
-  @property({ type: Boolean, attribute: "has-toolbar" })
-  public hasToolbar = true;
-
   @state() private _value = "";
 
   @state() private _isFullscreen = false;
 
-  @state() private _canUndo = false;
-
-  @state() private _canRedo = false;
-
-  @state() private _canCopy = false;
-
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
-  private _editorToolbar?: HaIconButtonToolbar;
-
   private _iconList?: Completion[];
 
   public set value(value: string) {
@@ -140,7 +119,9 @@ export class HaCodeEditor extends ReactiveElement {
     super.disconnectedCallback();
     this.removeEventListener("keydown", stopPropagation);
     this.removeEventListener("keydown", this._handleKeyDown);
-    this._updateFullscreenState(false);
+    if (this._isFullscreen) {
+      this._toggleFullscreen();
+    }
     this.updateComplete.then(() => {
       this.codemirror!.destroy();
       delete this.codemirror;
@@ -176,7 +157,6 @@ export class HaCodeEditor extends ReactiveElement {
           this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
         ),
       });
-      this._updateToolbarButtons();
     }
     if (changedProps.has("linewrap")) {
       transactions.push({
@@ -197,25 +177,14 @@ export class HaCodeEditor extends ReactiveElement {
     if (transactions.length > 0) {
       this.codemirror.dispatch(...transactions);
     }
-    if (changedProps.has("hasToolbar")) {
-      this._updateToolbar();
-    }
     if (changedProps.has("error")) {
       this.classList.toggle("error-state", this.error);
     }
     if (changedProps.has("_isFullscreen")) {
       this.classList.toggle("fullscreen", this._isFullscreen);
-      this._updateToolbarButtons();
-    }
-    if (
-      changedProps.has("_canCopy") ||
-      changedProps.has("_canUndo") ||
-      changedProps.has("_canRedo")
-    ) {
-      this._updateToolbarButtons();
     }
     if (changedProps.has("disableFullscreen")) {
-      this._updateFullscreenState();
+      this._updateFullscreenButton();
     }
   }
 
@@ -284,7 +253,6 @@ export class HaCodeEditor extends ReactiveElement {
       }
     }
 
-    // Create the code editor
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({
         doc: this._value,
@@ -292,172 +260,77 @@ export class HaCodeEditor extends ReactiveElement {
       }),
       parent: this.renderRoot,
     });
-    this._canCopy = this._value?.length > 0;
 
-    // Update the toolbar. Creating it if required
-    this._updateToolbar();
+    this._updateFullscreenButton();
   }
 
-  private _fullscreenLabel(): string {
-    if (this._isFullscreen)
-      return (
-        this.hass?.localize("ui.components.yaml-editor.exit_fullscreen") ||
-        "Exit fullscreen"
+  private _updateFullscreenButton() {
+    const existingButton = this.renderRoot.querySelector(".fullscreen-button");
+
+    if (this.disableFullscreen) {
+      // Remove button if it exists and fullscreen is disabled
+      if (existingButton) {
+        existingButton.remove();
+      }
+      // Exit fullscreen if currently in fullscreen mode
+      if (this._isFullscreen) {
+        this._isFullscreen = false;
+      }
+      return;
+    }
+
+    // Create button if it doesn't exist
+    if (!existingButton) {
+      const button = document.createElement("ha-icon-button");
+      (button as any).path = this._isFullscreen
+        ? mdiArrowCollapse
+        : mdiArrowExpand;
+      button.setAttribute(
+        "label",
+        this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
+      );
+      button.classList.add("fullscreen-button");
+      // Use bound method to ensure proper this context
+      button.addEventListener("click", this._handleFullscreenClick);
+      this.renderRoot.appendChild(button);
+    } else {
+      // Update existing button
+      (existingButton as any).path = this._isFullscreen
+        ? mdiArrowCollapse
+        : mdiArrowExpand;
+      existingButton.setAttribute(
+        "label",
+        this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
       );
-    return (
-      this.hass?.localize("ui.components.yaml-editor.enter_fullscreen") ||
-      "Enter fullscreen"
-    );
-  }
-
-  private _fullscreenIcon(): string {
-    return this._isFullscreen ? mdiArrowCollapse : mdiArrowExpand;
-  }
-
-  private _createEditorToolbar(): HaIconButtonToolbar {
-    // Create the editor toolbar element
-    const editorToolbar = document.createElement("ha-icon-button-toolbar");
-    editorToolbar.classList.add("code-editor-toolbar");
-    editorToolbar.items = [];
-    return editorToolbar;
-  }
-
-  private _updateToolbar() {
-    // Show/Hide the toolbar if we have one.
-    this.classList.toggle("hasToolbar", this.hasToolbar);
-
-    // Update fullscreen state. Handles toolbar and fullscreen mode being disabled.
-    this._updateFullscreenState();
-
-    // If we don't have a toolbar, nothing to update
-    if (!this.hasToolbar) {
-      return;
     }
-
-    // If we don't yet have the toolbar, create it.
-    if (!this._editorToolbar) {
-      this._editorToolbar = this._createEditorToolbar();
-    }
-
-    // Ensure all toolbar buttons are correctly configured.
-    this._updateToolbarButtons();
-
-    // Render the toolbar. This must be placed as a child of the code
-    // mirror element to ensure it doesn't affect the positioning and
-    // size of codemirror.
-    this.codemirror?.dom.appendChild(this._editorToolbar);
   }
 
-  private _updateToolbarButtons() {
-    // Re-render all toolbar items.
-    if (!this._editorToolbar) {
-      return;
-    }
-
-    this._editorToolbar.items = [
-      {
-        id: "undo",
-        disabled: !this._canUndo,
-        label: this.hass?.localize("ui.common.undo") || "Undo",
-        path: mdiUndo,
-        action: (e: Event) => this._handleUndoClick(e),
-      },
-      {
-        id: "redo",
-        disabled: !this._canRedo,
-        label: this.hass?.localize("ui.common.redo") || "Redo",
-        path: mdiRedo,
-        action: (e: Event) => this._handleRedoClick(e),
-      },
-      {
-        id: "copy",
-        disabled: !this._canCopy,
-        label:
-          this.hass?.localize("ui.components.yaml-editor.copy_to_clipboard") ||
-          "Copy to Clipboard",
-        path: mdiContentCopy,
-        action: (e: Event) => this._handleClipboardClick(e),
-      },
-      {
-        id: "fullscreen",
-        disabled: this.disableFullscreen,
-        label: this._fullscreenLabel(),
-        path: this._fullscreenIcon(),
-        action: (e: Event) => this._handleFullscreenClick(e),
-      },
-    ];
-  }
-
-  private _updateFullscreenState(
-    fullscreen: boolean = this._isFullscreen
-  ): boolean {
-    // Update the current fullscreen state based on selected value. If fullscreen
-    // is disabled, or we have no toolbar, ensure we are not in fullscreen mode.
-    this._isFullscreen =
-      fullscreen && !this.disableFullscreen && this.hasToolbar;
-    // Return whether successfully in requested state
-    return this._isFullscreen === fullscreen;
-  }
-
-  private _handleClipboardClick = async (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (this.value) {
-      await copyToClipboard(this.value);
-      showToast(this, {
-        message:
-          this.hass?.localize("ui.common.copied_clipboard") ||
-          "Copied to clipboard",
-      });
-    }
-  };
-
-  private _handleUndoClick = (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.codemirror) {
-      return;
-    }
-    undo(this.codemirror);
-  };
-
-  private _handleRedoClick = (e: Event) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.codemirror) {
-      return;
-    }
-    redo(this.codemirror);
-  };
-
   private _handleFullscreenClick = (e: Event) => {
     e.preventDefault();
     e.stopPropagation();
-    this._updateFullscreenState(!this._isFullscreen);
+    this._toggleFullscreen();
   };
 
+  private _toggleFullscreen() {
+    this._isFullscreen = !this._isFullscreen;
+    this._updateFullscreenButton();
+  }
+
   private _handleKeyDown = (e: KeyboardEvent) => {
-    if (
-      (e.key === "Escape" &&
-        this._isFullscreen &&
-        this._updateFullscreenState(false)) ||
-      (e.key === "F11" && this._updateFullscreenState(true))
-    ) {
-      // If we successfully performed the action, stop it propagating further.
+    if (this._isFullscreen && e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
+      this._toggleFullscreen();
+    } else if (e.key === "F11" && !this.disableFullscreen) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._toggleFullscreen();
     }
   };
 
   private _renderInfo = (completion: Completion): CompletionInfo => {
     const key = completion.label;
-    const context = getEntityContext(
-      this.hass!.states[key],
-      this.hass!.entities,
-      this.hass!.devices,
-      this.hass!.areas,
-      this.hass!.floors
-    );
+    const context = getEntityContext(this.hass!.states[key], this.hass!);
 
     const completionInfo = document.createElement("div");
     completionInfo.classList.add("completion-info");
@@ -713,13 +586,10 @@ export class HaCodeEditor extends ReactiveElement {
   }
 
   private _onUpdate = (update: ViewUpdate): void => {
-    this._canUndo = !this.readOnly && undoDepth(update.state) > 0;
-    this._canRedo = !this.readOnly && redoDepth(update.state) > 0;
     if (!update.docChanged) {
       return;
     }
     this._value = update.state.doc.toString();
-    this._canCopy = this._value?.length > 0;
     fireEvent(this, "value-changed", { value: this._value });
   };
 
@@ -738,33 +608,39 @@ export class HaCodeEditor extends ReactiveElement {
     :host {
       position: relative;
       display: block;
-      --code-editor-toolbar-height: 28px;
     }
 
     :host(.error-state) .cm-gutters {
-      border-color: var(--error-state-color, var(--error-color)) !important;
+      border-color: var(--error-state-color, red);
     }
 
-    :host(.hasToolbar) .cm-gutters {
-      padding-top: 0;
+    .fullscreen-button {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 1;
+      color: var(--secondary-text-color);
+      background-color: var(--secondary-background-color);
+      border-radius: 50%;
+      opacity: 0.9;
+      transition: opacity 0.2s;
+      --mdc-icon-button-size: 32px;
+      --mdc-icon-size: 18px;
+      /* Ensure button is clickable on iOS */
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
     }
 
-    :host(.hasToolbar) .cm-focused .cm-gutters {
-      padding-top: 1px;
+    .fullscreen-button:hover,
+    .fullscreen-button:active {
+      opacity: 1;
     }
 
-    :host(.error-state) .cm-content {
-      border-color: var(--error-state-color, var(--error-color)) !important;
-    }
-
-    :host(.hasToolbar) .cm-content {
-      border: none;
-      border-top: 1px solid var(--secondary-text-color);
-    }
-
-    :host(.hasToolbar) .cm-focused .cm-content {
-      border-top: 2px solid var(--primary-color);
-      padding-top: 15px;
+    @media (hover: none) {
+      .fullscreen-button {
+        opacity: 0.8;
+      }
     }
 
     :host(.fullscreen) {
@@ -773,8 +649,8 @@ export class HaCodeEditor extends ReactiveElement {
       left: 8px !important;
       right: 8px !important;
       bottom: 8px !important;
-      z-index: 6;
-      border-radius: var(--ha-border-radius-lg) !important;
+      z-index: 9999 !important;
+      border-radius: 12px !important;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
       overflow: hidden !important;
       background-color: var(
@@ -790,28 +666,15 @@ export class HaCodeEditor extends ReactiveElement {
       display: block !important;
     }
 
-    :host(.hasToolbar) .cm-editor {
-      padding-top: var(--code-editor-toolbar-height);
-    }
-
     :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 {
-      display: none !important;
-    }
-
-    .code-editor-toolbar {
-      --icon-button-toolbar-height: var(--code-editor-toolbar-height);
-      --icon-button-toolbar-color: var(
-        --code-editor-gutter-color,
-        var(--secondary-background-color, whitesmoke)
-      );
-      border-top-left-radius: var(--ha-border-radius-sm);
-      border-top-right-radius: var(--ha-border-radius-sm);
+    :host(.fullscreen) .fullscreen-button {
+      top: calc(var(--safe-area-inset-top, 0px) + 8px);
+      right: calc(var(--safe-area-inset-right, 0px) + 8px);
     }
 
     .completion-info {

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;

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);

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%;

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;

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;

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);

src/components/ha-date-range-picker.ts

@@ -2,7 +2,7 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 
 import { mdiCalendar } from "@mdi/js";
 import { isThisYear } from "date-fns";
-import { TZDate } from "@date-fns/tz";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -275,8 +275,8 @@ export class HaDateRangePicker extends LitElement {
     }
 
     if (this.hass.locale.time_zone === TimeZone.server) {
-      start = new Date(new TZDate(start, this.hass.config.time_zone).getTime());
-      end = new Date(new TZDate(end, this.hass.config.time_zone).getTime());
+      start = fromZonedTime(start, this.hass.config.time_zone);
+      end = fromZonedTime(end, this.hass.config.time_zone);
     }
 
     if (
@@ -290,7 +290,7 @@ export class HaDateRangePicker extends LitElement {
 
   private _formatDate(date: Date): string {
     if (this.hass.locale.time_zone === TimeZone.server) {
-      return new TZDate(date, this.hass.config.time_zone).toISOString();
+      return toZonedTime(date, this.hass.config.time_zone).toISOString();
     }
     return date.toISOString();
   }

src/components/ha-dialog.ts

@@ -100,6 +100,8 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
+        padding-top: var(--safe-area-inset-top);
+        padding-bottom: var(--safe-area-inset-bottom);
       }
       .mdc-dialog__title {
         padding: 16px 16px 0 16px;
@@ -121,12 +123,13 @@ export class HaDialog extends DialogBase {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         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)
+        min-width: calc(
+          var(--mdc-dialog-min-width, 100vw) - var(
+              --safe-area-inset-left
+            ) - var(--safe-area-inset-right)
         );
+        min-height: var(--mdc-dialog-min-height, auto);
+        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(
@@ -141,12 +144,18 @@ export class HaDialog extends DialogBase {
 
       @media all and (max-width: 450px), all and (max-height: 500px) {
         .mdc-dialog .mdc-dialog__surface {
-          min-height: 100vh;
-          max-height: 100vh;
-          padding-top: var(--safe-area-inset-top);
-          padding-bottom: var(--safe-area-inset-bottom);
-          padding-left: var(--safe-area-inset-left);
-          padding-right: var(--safe-area-inset-right);
+          min-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+          max-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
         }
       }
 

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 {

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 {

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);

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);

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);

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);

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);

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);

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);

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);

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);

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 {

src/components/ha-grid-size-picker.ts

@@ -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;

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 {

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;

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: "";

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

@@ -1,126 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, queryAll } from "lit/decorators";
-import "./ha-icon";
-import "./ha-icon-button";
-import type { HaIconButton } from "./ha-icon-button";
-import "./ha-icon-button-group";
-import "./ha-tooltip";
-
-export interface HaIconButtonToolbarItem {
-  [key: string]: any;
-  path: string;
-  label: string;
-  id?: string;
-  disabled?: boolean;
-  tooltip?: string;
-  action?: (e: Event) => any;
-}
-
-@customElement("ha-icon-button-toolbar")
-export class HaIconButtonToolbar extends LitElement {
-  @property({ type: Array, attribute: false })
-  public items: (HaIconButtonToolbarItem | string)[] = [];
-
-  @queryAll("ha-icon-button") private _buttons?: HaIconButton[];
-
-  // Returns all toolbar buttons, or undefined if there are none.
-  // Optionally returns only those with matching selector.
-  public findToolbarButtons(selector = ""): HaIconButton[] | undefined {
-    // Search for all toolbar buttons
-    const toolbarButtons = this._buttons?.filter((button) =>
-      button.classList.contains("icon-toolbar-button")
-    );
-    if (!toolbarButtons || !toolbarButtons.length) return undefined;
-    if (!selector.length) return toolbarButtons;
-    // Filter by user class if provided
-    const classButtons = toolbarButtons.filter((button) =>
-      button.querySelector(selector)
-    );
-    return classButtons.length ? classButtons : undefined;
-  }
-
-  // Returns a toolbar button based on the provided id.
-  // Will return undefined if not found.
-  public findToolbarButtonById(id): HaIconButton | undefined {
-    // Find the specified id
-    const element = this.shadowRoot?.getElementById(id);
-    if (!element || element.localName !== "ha-icon-button") return undefined;
-    return element as HaIconButton;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-icon-button-group class="icon-toolbar-buttongroup">
-        ${this.items.map((item) =>
-          typeof item === "string"
-            ? html`<div class="icon-toolbar-divider" role="separator"></div>`
-            : html`<ha-tooltip
-                  .disabled=${!item.tooltip}
-                  .for=${item.id ?? "icon-button-" + item.label}
-                  >${item.tooltip ?? ""}</ha-tooltip
-                >
-                <ha-icon-button
-                  class="icon-toolbar-button"
-                  .id=${item.id ?? "icon-button-" + item.label}
-                  @click=${item.action}
-                  .label=${item.label}
-                  .path=${item.path}
-                  .disabled=${item.disabled ?? false}
-                ></ha-icon-button>`
-        )}
-      </ha-icon-button-group>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      position: absolute;
-      top: 0px;
-      width: 100%;
-      display: flex;
-      flex-direction: row-reverse;
-      background-color: var(
-        --icon-button-toolbar-color,
-        var(--secondary-background-color, whitesmoke)
-      );
-      --icon-button-toolbar-height: 32px;
-      --icon-button-toolbar-button: calc(
-        var(--icon-button-toolbar-height) - 4px
-      );
-      --icon-button-toolbar-icon: calc(
-        var(--icon-button-toolbar-height) - 10px
-      );
-    }
-
-    .icon-toolbar-divider {
-      height: var(--icon-button-toolbar-icon);
-      margin: 0px 4px;
-      border: 0.5px solid
-        var(--divider-color, var(--secondary-text-color, transparent));
-    }
-
-    .icon-toolbar-buttongroup {
-      background-color: transparent;
-      padding-right: 4px;
-      height: var(--icon-button-toolbar-height);
-      gap: 8px;
-    }
-
-    .icon-toolbar-button {
-      color: var(--secondary-text-color);
-      --mdc-icon-button-size: var(--icon-button-toolbar-button);
-      --mdc-icon-size: var(--icon-button-toolbar-icon);
-      /* Ensure button is clickable on iOS */
-      cursor: pointer;
-      -webkit-tap-highlight-color: transparent;
-      touch-action: manipulation;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-icon-button-toolbar": HaIconButtonToolbar;
-  }
-}

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;