clean up

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,7 +42,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -77,7 +77,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=cast/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v4.2.4
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v4.6.2
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v4.6.2
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # 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@v3
+        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
         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@v3
+        uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
 
       # ℹ️ 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@v3
+        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5

.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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -43,7 +43,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=demo/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -35,7 +35,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --prod
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -40,7 +40,7 @@ jobs:
       - name: Deploy preview to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@v5.0.0
+        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # 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@v5.0.1
+      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v4.6.2
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # 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@v3.0.1
+        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # 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@v6.1.0
+      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         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@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # 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@v2.3.2
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: |
             dist/*.whl
@@ -73,8 +73,9 @@ 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
+        uses: home-assistant/wheels@2025.09.1
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -90,9 +91,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -107,7 +108,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@v2.3.2
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -119,9 +120,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -136,6 +137,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@v2.3.2
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # 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@v7
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # 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@v9.1.0
+        uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # 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@v5.0.0
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Upload Translations
         run: |

.yarnrc.yml

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

cast/src/media/entrypoint.ts

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

cast/src/receiver/demo/cast-demo-entities.ts

@@ -75,7 +75,7 @@ export const castDemoEntities: () => Entity[] = () =>
         longitude: 4.8903147,
         radius: 100,
         friendly_name: "Home",
-        icon: "hass:home",
+        icon: "mdi:home",
       },
     },
     "input_number.harmonyvolume": {
@@ -88,7 +88,7 @@ export const castDemoEntities: () => Entity[] = () =>
         step: 1,
         mode: "slider",
         friendly_name: "Volume",
-        icon: "hass:volume-high",
+        icon: "mdi:volume-high",
       },
     },
     "climate.upstairs": {

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/climate",
                 name: "Climate controls",
-                icon: "hass:arrow-right",
+                icon: "mdi:arrow-right",
               },
             ],
           },
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/overview",
                 name: "Back",
-                icon: "hass:arrow-left",
+                icon: "mdi:arrow-left",
               },
             ],
           },

cast/src/receiver/entrypoint.ts

@@ -40,8 +40,7 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType =
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
-    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -90,7 +89,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: "json" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -98,7 +97,9 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (playerManager.getPlayerState() !== "IDLE") {
+    if (
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+    ) {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -112,7 +113,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -126,23 +127,24 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/src/configs/arsaboo/entities.ts

@@ -143,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "on",
       attributes: {
         friendly_name: "Home Automation",
-        icon: "hass:home-automation",
+        icon: "mdi:home-automation",
       },
     },
     "input_boolean.tvtime": {

demo/src/configs/arsaboo/lovelace.ts

@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",
   views: [
     {
-      icon: "hass:home-assistant",
+      icon: "mdi:home-assistant",
       id: "home",
       title: "Home",
       cards: [

demo/src/configs/jimpower/lovelace.ts

@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
         },
       ],
       path: "security",
-      icon: "hass:shield-home",
+      icon: "mdi:shield-home",
       name: "Security",
       background:
         'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',

gallery/src/data/media_players.ts

@@ -17,6 +17,10 @@ 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",
@@ -24,8 +28,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
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
-    supported_features: 195135,
+    supported_features: 784959,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,
@@ -34,6 +38,9 @@ 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",
@@ -149,15 +156,18 @@ 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/pages/components/ha-badge.ts

@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
     }
     .card-content {
       display: flex;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

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

@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -0,0 +1,37 @@
+---
+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

@@ -0,0 +1,25 @@
+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-progress-button.ts

@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     .card-content div {
       display: flex;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
   `;
 }

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

@@ -0,0 +1,36 @@
+---
+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

@@ -0,0 +1,100 @@
+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: 8px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--ha-space-6);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-slider": DemoHaSlider;
+  }
+}

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

@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
   `;
 }

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

@@ -6,21 +6,23 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
 
 Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
 
-<ha-tooltip content="This is a tooltip">
+<ha-button id="hover">Hover Me</ha-button>
-  <ha-button>Hover Me</ha-button>
+<ha-tooltip for="hover">
+This is a tooltip
 </ha-tooltip>
 
 ```
-<ha-tooltip content="This is a tooltip">
+<ha-button id="hover">Hover Me</ha-button>
-  <ha-button>Hover Me</ha-button>
+<ha-tooltip for="hover">
+This is a tooltip
 </ha-tooltip>
 ```
 
 ## Documentation
 
-This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
+This element is based on webawesome `wa-tooltip` it only sets some css tokens and has a custom show/hide animation.
 
-<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
+<a href="https://webawesome.com/docs/components/tooltip/" target="_blank" rel="noopener noreferrer">Webawesome documentation</a>
 
 ### HA style tokens
 
@@ -28,7 +30,7 @@ In your theme settings use this without the prefixed `--`.
 
 - `--ha-tooltip-border-radius` (Default: 4px)
 - `--ha-tooltip-arrow-size` (Default: 8px)
-- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
+- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
 - `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
-- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
+- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
-- `--sl-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
+- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)

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

@@ -11,7 +11,10 @@ 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 } from "../../../../src/components/ha-form/types";
+import type {
+  HaFormSchema,
+  HaFormDataContainer,
+} from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-list-item";
@@ -33,6 +36,7 @@ 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",
@@ -78,78 +82,125 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  public computeLabel = (entry: HaFormSchema): string =>
+  private _getTranslationEntry(
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+    language: string,
-      ?.name ||
+    entry: HaFormSchema,
-    this.addon.translations.en?.configuration?.[entry.name]?.name ||
+    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 ||
     entry.name;
 
-  public computeHelper = (entry: HaFormSchema): string =>
+  public computeHelper = (
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+    entry: HaFormSchema,
+    options?: { path?: string[] }
+  ): string =>
+    this._getTranslationEntry(this.hass.language, entry, options)
       ?.description ||
-    this.addon.translations.en?.configuration?.[entry.name]?.description ||
+    this._getTranslationEntry("en", entry, options)?.description ||
     "";
 
   private _convertSchema = memoizeOne(
     // Convert supervisor schema to selectors
-    (schema: Record<string, any>): HaFormSchema[] =>
+    (schema: readonly HaFormSchema[]): HaFormSchema[] =>
-      schema.map((entry) =>
+      this._convertSchemaElements(schema)
-        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 _filteredShchema = memoizeOne(
+  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)
   );
@@ -161,7 +212,7 @@ class HassioAddonConfig extends LitElement {
       showForm &&
       JSON.stringify(this.addon.schema) !==
         JSON.stringify(
-          this._filteredShchema(this.addon.options, this.addon.schema!)
+          this._filteredSchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -199,6 +250,7 @@ class HassioAddonConfig extends LitElement {
         <div class="card-content">
           ${showForm
             ? html`<ha-form
+                .hass=${this.hass}
                 .disabled=${this.disabled}
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
@@ -207,7 +259,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredShchema(
+                    : this._filteredSchema(
                         this.addon.options,
                         this.addon.schema!
                       )

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

@@ -781,7 +781,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card class="long-description" outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
@@ -1333,6 +1333,9 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
+        .long-description {
+          direction: ltr;
+        }
         ha-assist-chip {
           --md-sys-color-primary: var(--text-primary-color);
           --md-sys-color-on-surface: var(--text-primary-color);

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

@@ -15,6 +15,8 @@ import "../../../../src/components/ha-list";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
+import "../../../../src/components/ha-tab-group";
+import "../../../../src/components/ha-tab-group-tab";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -36,7 +38,6 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioNetworkDialogParams } from "./show-dialog-network";
-import "../../../../src/components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -114,19 +115,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
+            ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
                   (device, index) =>
-                    html`<sl-tab
+                    html`<ha-tab-group-tab
                       slot="nav"
                       .id=${device.interface}
                       .panel=${index.toString()}
                       .active=${this._curTabIndex === index}
                     >
                       ${device.interface}
-                    </sl-tab>`
+                    </ha-tab-group-tab>`
                 )}
-              </sl-tab-group>`
+              </ha-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -627,10 +628,10 @@ export class DialogHassioNetwork
           --mdc-list-side-padding: 10px;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -119,26 +119,27 @@ class HassioRepositoriesDialog extends LitElement {
                         <div>${repo.url}</div>
                       </div>
                       <ha-tooltip
+                        .for="icon-button-${repo.slug}"
                         class="delete"
                         slot="end"
-                        .content=${this._dialogParams!.supervisor.localize(
+                      >
+                        ${this._dialogParams!.supervisor.localize(
                           usedRepositories.includes(repo.slug)
                             ? "dialog.repositories.used"
                             : "dialog.repositories.remove"
                         )}
-                      >
-                        <div>
-                          <ha-icon-button
-                            .disabled=${usedRepositories.includes(repo.slug)}
-                            .slug=${repo.slug}
-                            .path=${usedRepositories.includes(repo.slug)
-                              ? mdiDeleteOff
-                              : mdiDelete}
-                            @click=${this._removeRepository}
-                          >
-                          </ha-icon-button>
-                        </div>
                       </ha-tooltip>
+                      <div .id="icon-button-${repo.slug}">
+                        <ha-icon-button
+                          .disabled=${usedRepositories.includes(repo.slug)}
+                          .slug=${repo.slug}
+                          .path=${usedRepositories.includes(repo.slug)
+                            ? mdiDeleteOff
+                            : mdiDelete}
+                          @click=${this._removeRepository}
+                        >
+                        </ha-icon-button>
+                      </div>
                     </ha-md-list-item>
                   `
                 )

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: 16px;
+          gap: var(--ha-space-4);
           --mdc-icon-size: 48px;
           margin-bottom: 32px;
         }

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

@@ -3,7 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import { navigate } from "../../../src/common/navigate";
+import { goBack, navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import { nextRender } from "../../../src/common/util/render-status";
 import "../../../src/components/ha-icon-button";
@@ -193,7 +193,7 @@ class HassioIngressView extends LitElement {
         title: addon.name,
       });
       await nextRender();
-      history.back();
+      goBack();
       return;
     }
 
@@ -275,7 +275,7 @@ class HassioIngressView extends LitElement {
         title: addon.name,
       });
       await nextRender();
-      history.back();
+      goBack();
       return;
     }
 

hassio/src/resources/hassio-style.ts

@@ -31,7 +31,7 @@ export const hassioStyle = css`
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: 8px;
+    grid-gap: var(--ha-space-2);
   }
   @media screen and (min-width: 640px) {
     .card-group {

hassio/src/update-available/update-available-dashboard.ts

@@ -2,6 +2,7 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { goBack } from "../../../src/common/navigate";
 import "../../../src/layouts/hass-subpage";
 import type { HomeAssistant, Route } from "../../../src/types";
 import "./update-available-card";
@@ -35,7 +36,7 @@ class UpdateAvailableDashboard extends LitElement {
   }
 
   private _updateComplete() {
-    history.back();
+    goBack();
   }
 
   static styles = css`

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

@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-card .card-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
       }
       ha-alert p {
         text-align: unset;

package.json

@@ -26,16 +26,16 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.4",
-    "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.7",
+    "@codemirror/autocomplete": "6.19.0",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.2",
+    "@codemirror/view": "6.38.3",
+    "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -52,6 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -84,26 +85,24 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@shoelace-style/shoelace": "2.20.1",
     "@swc/helpers": "0.5.17",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/combo-box": "24.9.1",
-    "@vaadin/vaadin-themable-mixin": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.9.1",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "barcode-detector": "3.0.5",
-    "color-name": "2.0.0",
+    "color-name": "2.0.2",
     "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",
@@ -112,7 +111,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.11",
+    "hls.js": "1.6.13",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -122,8 +121,8 @@
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.1",
+    "luxon": "3.7.2",
-    "marked": "16.2.1",
+    "marked": "16.3.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -136,7 +135,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.4",
+    "ua-parser-js": "2.0.5",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -149,7 +148,7 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.3",
+    "@babel/core": "7.28.4",
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
@@ -158,11 +157,11 @@
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
-    "@rsdoctor/rspack-plugin": "1.2.3",
+    "@rsdoctor/rspack-plugin": "1.3.0",
-    "@rspack/core": "1.5.2",
+    "@rspack/core": "1.5.7",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -183,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.0",
+    "del": "8.0.1",
-    "eslint": "9.34.0",
+    "eslint": "9.36.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -194,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.1",
+    "fs-extra": "11.3.2",
     "glob": "11.0.3",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
@@ -202,23 +201,23 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "26.1.0",
+    "jsdom": "27.0.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.2.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
     "prettier": "3.6.2",
-    "rspack-manifest-plugin": "5.0.3",
+    "rspack-manifest-plugin": "5.1.0",
-    "serve": "14.2.4",
+    "serve": "14.2.5",
     "sinon": "21.0.0",
-    "tar": "7.4.3",
+    "tar": "7.5.1",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.42.0",
+    "typescript-eslint": "8.44.1",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -232,10 +231,9 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.3.0",
+    "globals": "16.4.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",
+    "@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"
-    "@vaadin/vaadin-themable-mixin": "24.8.6"
   },
-  "packageManager": "yarn@4.9.4"
+  "packageManager": "yarn@4.10.3"
 }

prettier.config.js

@@ -1,3 +1,11 @@
 export default {
   trailingComma: "es5",
+  overrides: [
+    {
+      files: "*.globals.ts",
+      options: {
+        printWidth: 9999, // Effectively disables line wrapping for these files
+      },
+    },
+  ],
 };

pyproject.toml

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

src/common/color/hex.ts

@@ -1,23 +1,40 @@
+import { formatHex, parse } from "culori";
+
+/**
+ * Expands a 3-digit hex color to a 6-digit hex color.
+ * @param hex - The hex color to expand.
+ * @returns The expanded hex color.
+ * @throws If the hex color is invalid.
+ */
 export const expandHex = (hex: string): string => {
-  hex = hex.replace("#", "");
+  const color = parse(hex);
-  if (hex.length === 6) return hex;
+  if (!color) {
-  let result = "";
+    throw new Error(`Invalid hex color: ${hex}`);
-  for (const val of hex) {
-    result += val + val;
   }
-  return result;
+  const formattedColor = formatHex(color);
+  if (!formattedColor) {
+    throw new Error(`Could not format hex color: ${hex}`);
+  }
+  return formattedColor.replace("#", "");
 };
 
-// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+/**
+ * Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
+ * @param c1 - The first hex color.
+ * @param c2 - The second hex color.
+ * @param blend - The blend percentage (0-100).
+ * @returns The blended hex color.
+ */
 export const hexBlend = (c1: string, c2: string, blend = 50): string => {
-  let color = "";
   c1 = expandHex(c1);
   c2 = expandHex(c2);
+  let color = "";
   for (let i = 0; i <= 5; i += 2) {
     const h1 = parseInt(c1.substring(i, i + 2), 16);
     const h2 = parseInt(c2.substring(i, i + 2), 16);
-    let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
+    const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
-    while (hex.length < 2) hex = "0" + hex;
+      .toString(16)
+      .padStart(2, "0");
     color += hex;
   }
   return `#${color}`;

src/common/color/rgb.ts

@@ -1,28 +1,49 @@
-export const luminosity = (rgb: [number, number, number]): number => {
+import { wcagLuminance, wcagContrast } from "culori";
-  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
-  const lum: [number, number, number] = [0, 0, 0];
-  for (let i = 0; i < rgb.length; i++) {
-    const chan = rgb[i] / 255;
-    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
-  }
 
-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+/**
-};
+ * Calculates the luminosity of an RGB color.
+ * @param rgb - The RGB color to calculate the luminosity of.
+ * @returns The luminosity of the color.
+ */
+export const luminosity = (rgb: [number, number, number]): number =>
+  wcagLuminance({
+    mode: "rgb",
+    r: rgb[0] / 255,
+    g: rgb[1] / 255,
+    b: rgb[2] / 255,
+  });
 
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param color1 - The first color to calculate the contrast ratio of.
+ * @param color2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const rgbContrast = (
   color1: [number, number, number],
   color2: [number, number, number]
-) => {
+) =>
-  const lum1 = luminosity(color1);
+  wcagContrast(
-  const lum2 = luminosity(color2);
+    {
-
+      mode: "rgb",
-  if (lum1 > lum2) {
+      r: color1[0] / 255,
-    return (lum1 + 0.05) / (lum2 + 0.05);
+      g: color1[1] / 255,
-  }
+      b: color1[2] / 255,
-
+    },
-  return (lum2 + 0.05) / (lum1 + 0.05);
+    {
-};
+      mode: "rgb",
+      r: color2[0] / 255,
+      g: color2[1] / 255,
+      b: color2[2] / 255,
+    }
+  );
 
+/**
+ * Calculates the contrast ratio between two RGB colors.
+ * @param rgb1 - The first color to calculate the contrast ratio of.
+ * @param rgb2 - The second color to calculate the contrast ratio of.
+ * @returns The contrast ratio between the two colors.
+ */
 export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]

src/common/datetime/calc_date.ts

@@ -11,7 +11,7 @@ import {
   differenceInDays,
   addDays,
 } from "date-fns";
-import { toZonedTime, fromZonedTime } from "date-fns-tz";
+import { TZDate } from "@date-fns/tz";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
@@ -22,12 +22,13 @@ const calcZonedDate = (
   fn: (date: Date, options?: any) => Date | number | boolean,
   options?
 ) => {
-  const inputZoned = toZonedTime(date, tz);
+  const tzDate = new TZDate(date, tz);
-  const fnZoned = fn(inputZoned, options);
+  const fnResult = fn(tzDate, options);
-  if (fnZoned instanceof Date) {
+  if (fnResult instanceof Date) {
-    return fromZonedTime(fnZoned, tz) as Date;
+    // Convert back to regular Date in the specified timezone
+    return new Date(fnResult.getTime());
   }
-  return fnZoned;
+  return fnResult;
 };
 
 export const calcDate = (
@@ -65,7 +66,7 @@ export const calcDateDifferenceProperty = (
     locale,
     config,
     locale.time_zone === TimeZone.server
-      ? toZonedTime(startDate, config.time_zone)
+      ? new TZDate(startDate, config.time_zone)
       : startDate
   );
 
@@ -144,3 +145,36 @@ 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/compute_entity_name.ts

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

src/common/entity/context/get_entity_context.ts

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

src/common/entity/entity_filter.ts

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

src/common/navigate.ts

@@ -63,3 +63,21 @@ export const navigate = async (
   });
   return true;
 };
+
+/**
+ * Navigate back in history, with fallback to a default path if no history exists.
+ * This prevents a user from getting stuck when they navigate directly to a page with no history.
+ */
+export const goBack = (fallbackPath?: string) => {
+  const { history } = mainWindow;
+
+  // Check if we have history to go back to
+  if (history.length > 1) {
+    history.back();
+    return;
+  }
+
+  // No history available, navigate to fallback path
+  const fallback = fallbackPath || "/";
+  navigate(fallback, { replace: true });
+};

src/common/translations/entity-state.ts

@@ -2,6 +2,12 @@ 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,
@@ -17,16 +23,28 @@ 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"
@@ -57,5 +75,45 @@ 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

@@ -0,0 +1,18 @@
+/**
+ * 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

@@ -63,6 +63,9 @@ 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[];
 
@@ -215,7 +218,7 @@ export class HaChartBase extends LitElement {
         </div>
         ${this._renderLegend()}
         <div class="chart-controls ${classMap({ small: this.smallControls })}">
-          ${this._isZoomed
+          ${this._isZoomed && !this.hideResetButton
             ? html`<ha-icon-button
                 class="zoom-reset"
                 .path=${mdiRestart}
@@ -353,20 +356,12 @@ export class HaChartBase extends LitElement {
 
       this.chart = echarts.init(container, "custom");
       this.chart.on("datazoom", (e: any) => {
-        const { start, end } = e.batch?.[0] ?? e;
+        this._handleDataZoomEvent(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);
       }
@@ -868,10 +863,60 @@ 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;
@@ -929,7 +974,7 @@ export class HaChartBase extends LitElement {
       right: 4px;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
     }
     .chart-controls.small {
       top: 0;
@@ -966,7 +1011,7 @@ export class HaChartBase extends LitElement {
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .chart-legend li {
       height: 24px;
@@ -1024,5 +1069,9 @@ 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,6 +66,9 @@ 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[] = [];
@@ -94,7 +97,9 @@ 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>
     `;
   }
@@ -192,6 +197,19 @@ 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,6 +51,9 @@ 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;
@@ -68,6 +71,8 @@ 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>
     `;
   }
@@ -256,6 +261,19 @@ 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,7 +1,8 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } 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 {
@@ -11,6 +12,10 @@ 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";
 
@@ -29,6 +34,11 @@ 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;
+    };
   }
 }
 
@@ -74,6 +84,9 @@ 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;
@@ -84,6 +97,10 @@ export class StateHistoryCharts extends LitElement {
 
   @state() private _chartCount = 0;
 
+  @state() private _hasZoomedCharts = false;
+
+  private _isSyncing = false;
+
   // @ts-ignore
   @restoreScroll(".container") private _savedScrollPos?: number;
 
@@ -115,19 +132,36 @@ export class StateHistoryCharts extends LitElement {
     // eslint-disable-next-line lit/no-this-assign-in-render
     this._chartCount = combinedItems.length;
 
-    return this.virtualize
+    return html`
-      ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
+      ${this.virtualize
-          <lit-virtualizer
+        ? html`<div
-            scroller
+            class="container ha-scrollbar"
-            class="ha-scrollbar"
+            @scroll=${this._saveScrollPos}
-            .items=${combinedItems}
-            .renderItem=${this._renderHistoryItem}
           >
-          </lit-virtualizer>
+            <lit-virtualizer
-        </div>`
+              scroller
-      : html`${combinedItems.map((item, index) =>
+              class="ha-scrollbar"
-          this._renderHistoryItem(item, index)
+              .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}
+    `;
   }
 
   private _renderHistoryItem: RenderItemFunction<
@@ -156,8 +190,10 @@ 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> `;
     }
@@ -175,6 +211,8 @@ 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> `;
   };
@@ -264,6 +302,66 @@ 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 ||
@@ -345,6 +443,12 @@ 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/data-table/ha-data-table-icon.ts

@@ -12,9 +12,8 @@ class HaDataTableIcon extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-tooltip .content=${this.tooltip}>
+      <ha-tooltip for="svg-icon">${this.tooltip}</ha-tooltip>
-        <ha-svg-icon .path=${this.path}></ha-svg-icon>
+      <ha-svg-icon id="svg-icon" .path=${this.path}></ha-svg-icon>
-      </ha-tooltip>
     `;
   }
 

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

@@ -5,12 +5,8 @@ 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";
@@ -148,11 +144,9 @@ export class HaEntityPicker extends LitElement {
       `;
     }
 
-    const { area, device } = getEntityContext(stateObj, this.hass);
+    const entityName = this.hass.formatEntityName(stateObj, "entity");
-
+    const deviceName = this.hass.formatEntityName(stateObj, "device");
-    const entityName = computeEntityName(stateObj, this.hass);
+    const areaName = this.hass.formatEntityName(stateObj, "area");
-    const deviceName = device ? computeDeviceName(device) : undefined;
-    const areaName = area ? computeAreaName(area) : undefined;
 
     const isRTL = computeRTL(this.hass);
 
@@ -311,12 +305,10 @@ 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 = computeEntityName(stateObj, hass);
+        const entityName = this.hass.formatEntityName(stateObj, "entity");
-        const deviceName = device ? computeDeviceName(device) : undefined;
+        const deviceName = this.hass.formatEntityName(stateObj, "device");
-        const areaName = area ? computeAreaName(area) : undefined;
+        const areaName = this.hass.formatEntityName(stateObj, "area");
 
         const domainName = domainToName(
           this.hass.localize,

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

@@ -6,11 +6,7 @@ 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 {
@@ -259,12 +255,10 @@ 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 = computeEntityName(stateObj, hass);
+        const entityName = hass.formatEntityName(stateObj, "entity");
-        const deviceName = device ? computeDeviceName(device) : undefined;
+        const deviceName = hass.formatEntityName(stateObj, "device");
-        const areaName = area ? computeAreaName(area) : undefined;
+        const areaName = hass.formatEntityName(stateObj, "area");
 
         const primary = entityName || deviceName || id;
         const secondary = [areaName, entityName ? deviceName : undefined]
@@ -337,11 +331,9 @@ export class HaStatisticPicker extends LitElement {
     const stateObj = this.hass.states[statisticId];
 
     if (stateObj) {
-      const { area, device } = getEntityContext(stateObj, this.hass);
+      const entityName = this.hass.formatEntityName(stateObj, "entity");
-
+      const deviceName = this.hass.formatEntityName(stateObj, "device");
-      const entityName = computeEntityName(stateObj, this.hass);
+      const areaName = this.hass.formatEntityName(stateObj, "area");
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
 
       const isRTL = computeRTL(this.hass);
 

src/components/entity/state-info.ts

@@ -36,39 +36,38 @@ class StateInfo extends LitElement {
         </div>
         ${this.inDialog
           ? html`<div class="time-ago">
-              <ha-tooltip>
+              <ha-tooltip for="relative-time">
-                <ha-relative-time
+                <div class="row">
-                  .hass=${this.hass}
+                  <span class="column-name">
-                  .datetime=${this.stateObj.last_changed}
+                    ${this.hass.localize(
-                  capitalize
+                      "ui.dialogs.more_info_control.last_changed"
-                ></ha-relative-time>
+                    )}:
-                <div slot="content">
+                  </span>
-                  <div class="row">
+                  <ha-relative-time
-                    <span class="column-name">
+                    .hass=${this.hass}
-                      ${this.hass.localize(
+                    .datetime=${this.stateObj.last_changed}
-                        "ui.dialogs.more_info_control.last_changed"
+                    capitalize
-                      )}:
+                  ></ha-relative-time>
-                    </span>
+                </div>
-                    <ha-relative-time
+                <div class="row">
-                      .hass=${this.hass}
+                  <span>
-                      .datetime=${this.stateObj.last_changed}
+                    ${this.hass.localize(
-                      capitalize
+                      "ui.dialogs.more_info_control.last_updated"
-                    ></ha-relative-time>
+                    )}:
-                  </div>
+                  </span>
-                  <div class="row">
+                  <ha-relative-time
-                    <span>
+                    .hass=${this.hass}
-                      ${this.hass.localize(
+                    .datetime=${this.stateObj.last_updated}
-                        "ui.dialogs.more_info_control.last_updated"
+                    capitalize
-                      )}:
+                  ></ha-relative-time>
-                    </span>
-                    <ha-relative-time
-                      .hass=${this.hass}
-                      .datetime=${this.stateObj.last_updated}
-                      capitalize
-                    ></ha-relative-time>
-                  </div>
                 </div>
               </ha-tooltip>
+              <ha-relative-time
+                id="relative-time"
+                .hass=${this.hass}
+                .datetime=${this.stateObj.last_changed}
+                capitalize
+              ></ha-relative-time>
             </div>`
           : html`<div class="extra-info"><slot></slot></div>`}
       </div>`;

src/components/ha-alert.ts

@@ -86,6 +86,10 @@ 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;

src/components/ha-analytics.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
@@ -67,21 +67,24 @@ export class HaAnalytics extends LitElement {
               )}
             </span>
             <span>
-              <ha-tooltip
+              <ha-switch
-                content=${this.localize(
+                .id="switch-${preference}"
-                  `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                @change=${this._handleRowClick}
-                )}
+                .checked=${this.analytics?.preferences[preference]}
-                placement="right"
+                .preference=${preference}
-                ?disabled=${baseEnabled}
+                name=${preference}
               >
-                <ha-switch
+              </ha-switch>
-                  @change=${this._handleRowClick}
+              ${baseEnabled
-                  .checked=${this.analytics?.preferences[preference]}
+                ? nothing
-                  .preference=${preference}
+                : html`<ha-tooltip
-                  name=${preference}
+                    .for="switch-${preference}"
-                >
+                    placement="right"
-                </ha-switch>
+                  >
-              </ha-tooltip>
+                    ${this.localize(
+                      `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
+                    )}
+                  </ha-tooltip>`}
             </span>
           </ha-settings-row>
         `

src/components/ha-automation-row.ts

@@ -83,15 +83,6 @@ export class HaAutomationRow extends LitElement {
         !(ev.ctrlKey || ev.metaKey) &&
         !ev.shiftKey &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
-      ) &&
-      !(
-        (ev.ctrlKey || ev.metaKey) &&
-        !ev.shiftKey &&
-        !ev.altKey &&
-        (ev.key === "c" ||
-          ev.key === "x" ||
-          ev.key === "Delete" ||
-          ev.key === "Backspace")
       )
     ) {
       return;
@@ -112,22 +103,6 @@ export class HaAutomationRow extends LitElement {
       return;
     }
 
-    if (ev.ctrlKey || ev.metaKey) {
-      if (ev.key === "c") {
-        fireEvent(this, "copy-row");
-        return;
-      }
-      if (ev.key === "x") {
-        fireEvent(this, "cut-row");
-        return;
-      }
-
-      if (ev.key === "Delete" || ev.key === "Backspace") {
-        fireEvent(this, "delete-row");
-        return;
-      }
-    }
-
     this.click();
   }
 

src/components/ha-badge.ts

@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       height: var(--ha-badge-size, 36px);
       min-width: var(--ha-badge-size, 36px);
       padding: 0px 12px;

src/components/ha-bottom-sheet.ts

@@ -1,262 +1,62 @@
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type PropertyValues } from "lit";
-import { customElement, query, state } from "lit/decorators";
+import "@home-assistant/webawesome/dist/components/drawer/drawer";
-import { styleMap } from "lit/directives/style-map";
+import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
 
-const ANIMATION_DURATION_MS = 300;
+export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
 
-/**
- * A bottom sheet component that slides up from the bottom of the screen.
- *
- * The bottom sheet provides a draggable interface that allows users to resize
- * the sheet by dragging the handle at the top. It supports both mouse and touch
- * interactions and automatically closes when dragged below a 20% of screen height.
- *
- * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
- *
- * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
- * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
- * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
- */
 @customElement("ha-bottom-sheet")
 export class HaBottomSheet extends LitElement {
-  @query("dialog") private _dialog!: HTMLDialogElement;
+  @property({ type: Boolean }) public open = false;
 
-  private _dragging = false;
+  @state() private _drawerOpen = false;
 
-  private _dragStartY = 0;
+  private _handleAfterHide() {
+    this.open = false;
+    const ev = new Event("closed", {
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(ev);
+  }
 
-  private _initialSize = 0;
+  protected updated(changedProperties: PropertyValues): void {
-
+    super.updated(changedProperties);
-  @state() private _dialogMaxViewpointHeight = 70;
+    if (changedProperties.has("open")) {
-
+      this._drawerOpen = this.open;
-  @state() private _dialogMinViewpointHeight = 55;
+    }
-
+  }
-  @state() private _dialogViewportHeight?: number;
 
   render() {
-    return html`<dialog
+    return html`
-      open
+      <wa-drawer
-      @transitionend=${this._handleTransitionEnd}
+        placement="bottom"
-      style=${styleMap({
+        .open=${this._drawerOpen}
-        height: this._dialogViewportHeight
+        @wa-after-hide=${this._handleAfterHide}
-          ? `${this._dialogViewportHeight}vh`
+        without-header
-          : "auto",
+      >
-        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        <slot></slot>
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
+      </wa-drawer>
-      })}
+    `;
-    >
-      <div class="handle-wrapper">
-        <div
-          @mousedown=${this._handleMouseDown}
-          @touchstart=${this._handleTouchStart}
-          class="handle"
-        ></div>
-      </div>
-      <slot></slot>
-    </dialog>`;
-  }
-
-  protected firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this._openSheet();
-  }
-
-  private _openSheet() {
-    requestAnimationFrame(() => {
-      // trigger opening animation
-      this._dialog.classList.add("show");
-    });
-  }
-
-  public closeSheet() {
-    requestAnimationFrame(() => {
-      this._dialog.classList.remove("show");
-    });
-  }
-
-  private _handleTransitionEnd() {
-    if (this._dialog.classList.contains("show")) {
-      // after show animation is done
-      // - set the height to the natural height, to prevent content shift when switch content
-      // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh
-      this._dialogViewportHeight =
-        (this._dialog.offsetHeight / window.innerHeight) * 100;
-      this._dialogMaxViewpointHeight = 90;
-      this._dialogMinViewpointHeight = 20;
-    } else {
-      // after close animation is done close dialog element and fire closed event
-      this._dialog.close();
-      fireEvent(this, "bottom-sheet-closed");
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    // register event listeners for drag handling
-    document.addEventListener("mousemove", this._handleMouseMove);
-    document.addEventListener("mouseup", this._handleMouseUp);
-    document.addEventListener("touchmove", this._handleTouchMove, {
-      passive: false,
-    });
-    document.addEventListener("touchend", this._handleTouchEnd);
-    document.addEventListener("touchcancel", this._handleTouchEnd);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    // unregister event listeners for drag handling
-    document.removeEventListener("mousemove", this._handleMouseMove);
-    document.removeEventListener("mouseup", this._handleMouseUp);
-    document.removeEventListener("touchmove", this._handleTouchMove);
-    document.removeEventListener("touchend", this._handleTouchEnd);
-    document.removeEventListener("touchcancel", this._handleTouchEnd);
-  }
-
-  private _handleMouseDown = (ev: MouseEvent) => {
-    this._startDrag(ev.clientY);
-  };
-
-  private _handleTouchStart = (ev: TouchEvent) => {
-    // Prevent the browser from interpreting this as a scroll/PTR gesture.
-    ev.preventDefault();
-    this._startDrag(ev.touches[0].clientY);
-  };
-
-  private _startDrag(clientY: number) {
-    this._dragging = true;
-    this._dragStartY = clientY;
-    this._initialSize = (this._dialog.offsetHeight / window.innerHeight) * 100;
-    document.body.style.setProperty("cursor", "grabbing");
-  }
-
-  private _handleMouseMove = (ev: MouseEvent) => {
-    if (!this._dragging) {
-      return;
-    }
-    this._updateSize(ev.clientY);
-  };
-
-  private _handleTouchMove = (ev: TouchEvent) => {
-    if (!this._dragging) {
-      return;
-    }
-    ev.preventDefault(); // Prevent scrolling
-    this._updateSize(ev.touches[0].clientY);
-  };
-
-  private _updateSize(clientY: number) {
-    const deltaY = this._dragStartY - clientY;
-    const viewportHeight = window.innerHeight;
-    const deltaVh = (deltaY / viewportHeight) * 100;
-
-    // Calculate new size and clamp between 10vh and 90vh
-    let newSize = this._initialSize + deltaVh;
-    newSize = Math.max(10, Math.min(90, newSize));
-
-    // on drag down and below 20vh
-    if (newSize < 20 && deltaY < 0) {
-      this._endDrag();
-      this.closeSheet();
-      return;
-    }
-
-    this._dialogViewportHeight = newSize;
-  }
-
-  private _handleMouseUp = () => {
-    this._endDrag();
-  };
-
-  private _handleTouchEnd = () => {
-    this._endDrag();
-  };
-
-  private _endDrag() {
-    if (!this._dragging) {
-      return;
-    }
-    this._dragging = false;
-    document.body.style.removeProperty("cursor");
   }
 
   static styles = css`
-    .handle-wrapper {
+    wa-drawer {
-      position: absolute;
+      --wa-color-surface-raised: var(
-      top: 0;
-      width: 100%;
-      padding-bottom: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: grab;
-      touch-action: none;
-    }
-    .handle-wrapper .handle {
-      height: 20px;
-      width: 200px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 7;
-      padding-bottom: 76px;
-    }
-    .handle-wrapper .handle::after {
-      content: "";
-      border-radius: 8px;
-      height: 4px;
-      background: var(--divider-color, #e0e0e0);
-      width: 80px;
-    }
-    .handle-wrapper .handle:active::after {
-      cursor: grabbing;
-    }
-    dialog {
-      height: auto;
-      max-height: 70vh;
-      min-height: 30vh;
-      background-color: var(
         --ha-dialog-surface-background,
         var(--mdc-theme-surface, #fff)
       );
-      display: flex;
+      --spacing: 0;
-      flex-direction: column;
+      --size: auto;
-      top: 0;
+      --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-      inset-inline-start: 0;
+      --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-      position: fixed;
-      width: calc(100% - 4px);
-      max-width: 100%;
-      border: none;
-      box-shadow: var(--wa-shadow-l);
-      padding: 0;
-      margin: 0;
-      top: auto;
-      inset-inline-end: auto;
-      bottom: 0;
-      inset-inline-start: 0;
-      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
-      border-top-left-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      border-top-right-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      transform: translateY(100%);
-      transition: transform ${ANIMATION_DURATION_MS}ms ease;
-      border-top-width: var(--ha-bottom-sheet-border-width);
-      border-right-width: var(--ha-bottom-sheet-border-width);
-      border-left-width: var(--ha-bottom-sheet-border-width);
-      border-bottom-width: 0;
-      border-style: var(--ha-bottom-sheet-border-style);
-      border-color: var(--ha-bottom-sheet-border-color);
     }
-
+    wa-drawer::part(dialog) {
-    dialog.show {
+      border-top-left-radius: var(--ha-border-radius-lg);
-      transform: translateY(0);
+      border-top-right-radius: var(--ha-border-radius-lg);
+      max-height: 90vh;
+      padding-bottom: var(--safe-area-inset-bottom);
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
     }
   `;
 }
@@ -265,8 +65,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-bottom-sheet": HaBottomSheet;
   }
-
-  interface HASSDomEvents {
-    "bottom-sheet-closed": undefined;
-  }
 }

src/components/ha-button-group.ts

@@ -1,82 +0,0 @@
-import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group";
-import { customElement } from "lit/decorators";
-import type { HaButton } from "./ha-button";
-import { StateSet } from "../resources/polyfills/stateset";
-
-export type Appearance = "accent" | "filled" | "outlined" | "plain";
-
-/**
- * Finds an ha-button element either as the current element or within its descendants.
- * @param el - The HTML element to search from
- * @returns The found HaButton element, or null if not found
- */
-function findButton(el: HTMLElement) {
-  const selector = "ha-button";
-  return (el.closest(selector) ?? el.querySelector(selector)) as HaButton;
-}
-
-/**
- * @element ha-button-group
- * @extends {ButtonGroup}
- * @summary
- * Group buttons. Extend Webawesome to be able to work with ha-button tags
- *
- * @documentation https://webawesome.com/components/button-group
- */
-@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods
-export class HaButtonGroup extends ButtonGroup {
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error updateClassNames is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override updateClassNames() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true }),
-    ] as HTMLElement[];
-    this.hasOutlined = false;
-
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-
-      if (button) {
-        if ((button as HaButton).appearance === "outlined")
-          this.hasOutlined = true;
-        if (this.size) button.setAttribute("size", this.size);
-        button.classList.add("wa-button-group__button");
-        button.classList.toggle(
-          "wa-button-group__horizontal",
-          this.orientation === "horizontal"
-        );
-        button.classList.toggle(
-          "wa-button-group__vertical",
-          this.orientation === "vertical"
-        );
-        button.classList.toggle("wa-button-group__button-first", index === 0);
-        button.classList.toggle(
-          "wa-button-group__button-inner",
-          index > 0 && index < slottedElements.length - 1
-        );
-        button.classList.toggle(
-          "wa-button-group__button-last",
-          index === slottedElements.length - 1
-        );
-
-        // use button-group variant
-        button.setAttribute("variant", this.variant);
-      }
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-group": HaButtonGroup;
-  }
-}

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

@@ -1,11 +1,11 @@
+import "@home-assistant/webawesome/dist/components/button-group/button-group";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";
 import "./ha-button";
-import "./ha-button-group";
+import "./ha-svg-icon";
 
 /**
  * @element ha-button-toggle-group
@@ -28,6 +28,9 @@ 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"
@@ -37,11 +40,14 @@ export class HaButtonToggleGroup extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-button-group .variant=${this.variant} .size=${this.size}>
+      <wa-button-group childSelector="ha-button">
         ${this.buttons.map(
           (button) =>
             html`<ha-button
+              iconTag="ha-svg-icon"
               class="icon"
+              .variant=${this.variant}
+              .size=${this.size}
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
@@ -55,7 +61,7 @@ export class HaButtonToggleGroup extends LitElement {
                 : button.label}
             </ha-button>`
         )}
-      </ha-button-group>
+      </wa-button-group>
     `;
   }
 
@@ -68,6 +74,10 @@ 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-button.ts

@@ -1,9 +1,7 @@
-import Button from "@awesome.me/webawesome/dist/components/button/button";
+import Button from "@home-assistant/webawesome/dist/components/button/button";
 import { css, type CSSResultGroup } from "lit";
 import { customElement } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 export type Appearance = "accent" | "filled" | "outlined" | "plain";
 
 /**
@@ -35,54 +33,10 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
  * @attr {boolean} disabled - Disables the button and prevents user interaction.
  */
-@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
+@customElement("ha-button")
 export class HaButton extends Button {
   variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error handleLabelSlotChange is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override handleLabelSlotChange() {
-    const nodes = this.labelSlot.assignedNodes({ flatten: true });
-    let hasIconLabel = false;
-    let hasIcon = false;
-    let text = "";
-
-    // If there's only an icon and no text, it's an icon button
-    [...nodes].forEach((node) => {
-      if (
-        node.nodeType === Node.ELEMENT_NODE &&
-        (node as HTMLElement).localName === "ha-svg-icon"
-      ) {
-        hasIcon = true;
-        if (!hasIconLabel)
-          hasIconLabel = (node as HTMLElement).hasAttribute("aria-label");
-      }
-
-      // Concatenate text nodes
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent;
-      }
-    });
-
-    this.isIconButton = text.trim() === "" && hasIcon;
-
-    if (__DEV__ && this.isIconButton && !hasIconLabel) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Icon buttons must have a label for screen readers. Add <ha-svg-icon aria-label="..."> to remove this warning.',
-        this
-      );
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Button.styles,
@@ -103,6 +57,8 @@ export class HaButton extends Button {
 
           font-size: var(--ha-font-size-m);
           line-height: 1;
+
+          transition: background-color 0.15s ease-in-out;
         }
 
         :host([size="small"]) .button {
@@ -262,10 +218,10 @@ export class HaButton extends Button {
         }
 
         .button.has-start {
-          padding-left: 8px;
+          padding-inline-start: 8px;
         }
         .button.has-end {
-          padding-right: 8px;
+          padding-inline-end: 8px;
         }
       `,
     ];

src/components/ha-code-editor.ts

@@ -5,9 +5,16 @@ import type {
   CompletionResult,
   CompletionSource,
 } from "@codemirror/autocomplete";
+import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import { mdiArrowExpand, mdiArrowCollapse } from "@mdi/js";
+import {
+  mdiArrowExpand,
+  mdiArrowCollapse,
+  mdiContentCopy,
+  mdiUndo,
+  mdiRedo,
+} from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, ReactiveElement, html, render } from "lit";
@@ -16,11 +23,14 @@ 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";
+import "./ha-icon-button-toolbar";
-import "./ha-code-editor-completion-items";
+import type { HaIconButtonToolbar } from "./ha-icon-button-toolbar";
 
 declare global {
   interface HASSDomEvents {
@@ -68,13 +78,24 @@ 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) {
@@ -119,9 +140,7 @@ export class HaCodeEditor extends ReactiveElement {
     super.disconnectedCallback();
     this.removeEventListener("keydown", stopPropagation);
     this.removeEventListener("keydown", this._handleKeyDown);
-    if (this._isFullscreen) {
+    this._updateFullscreenState(false);
-      this._toggleFullscreen();
-    }
     this.updateComplete.then(() => {
       this.codemirror!.destroy();
       delete this.codemirror;
@@ -157,6 +176,7 @@ export class HaCodeEditor extends ReactiveElement {
           this._loadedCodeMirror!.EditorView!.editable.of(!this.readOnly)
         ),
       });
+      this._updateToolbarButtons();
     }
     if (changedProps.has("linewrap")) {
       transactions.push({
@@ -177,14 +197,25 @@ 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._updateFullscreenButton();
+      this._updateFullscreenState();
     }
   }
 
@@ -253,6 +284,7 @@ export class HaCodeEditor extends ReactiveElement {
       }
     }
 
+    // Create the code editor
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({
         doc: this._value,
@@ -260,77 +292,172 @@ export class HaCodeEditor extends ReactiveElement {
       }),
       parent: this.renderRoot,
     });
+    this._canCopy = this._value?.length > 0;
 
-    this._updateFullscreenButton();
+    // Update the toolbar. Creating it if required
+    this._updateToolbar();
   }
 
-  private _updateFullscreenButton() {
+  private _fullscreenLabel(): string {
-    const existingButton = this.renderRoot.querySelector(".fullscreen-button");
+    if (this._isFullscreen)
+      return (
+        this.hass?.localize("ui.components.yaml-editor.exit_fullscreen") ||
+        "Exit fullscreen"
+      );
+    return (
+      this.hass?.localize("ui.components.yaml-editor.enter_fullscreen") ||
+      "Enter fullscreen"
+    );
+  }
 
-    if (this.disableFullscreen) {
+  private _fullscreenIcon(): string {
-      // Remove button if it exists and fullscreen is disabled
+    return this._isFullscreen ? mdiArrowCollapse : mdiArrowExpand;
-      if (existingButton) {
+  }
-        existingButton.remove();
+
-      }
+  private _createEditorToolbar(): HaIconButtonToolbar {
-      // Exit fullscreen if currently in fullscreen mode
+    // Create the editor toolbar element
-      if (this._isFullscreen) {
+    const editorToolbar = document.createElement("ha-icon-button-toolbar");
-        this._isFullscreen = false;
+    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;
     }
 
-    // Create button if it doesn't exist
+    // If we don't yet have the toolbar, create it.
-    if (!existingButton) {
+    if (!this._editorToolbar) {
-      const button = document.createElement("ha-icon-button");
+      this._editorToolbar = this._createEditorToolbar();
-      (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"
-      );
     }
+
+    // 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._toggleFullscreen();
+    this._updateFullscreenState(!this._isFullscreen);
   };
 
-  private _toggleFullscreen() {
-    this._isFullscreen = !this._isFullscreen;
-    this._updateFullscreenButton();
-  }
-
   private _handleKeyDown = (e: KeyboardEvent) => {
-    if (this._isFullscreen && e.key === "Escape") {
+    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.
       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!);
+    const context = getEntityContext(
+      this.hass!.states[key],
+      this.hass!.entities,
+      this.hass!.devices,
+      this.hass!.areas,
+      this.hass!.floors
+    );
 
     const completionInfo = document.createElement("div");
     completionInfo.classList.add("completion-info");
@@ -586,10 +713,13 @@ 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 });
   };
 
@@ -608,39 +738,33 @@ 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, red);
+      border-color: var(--error-state-color, var(--error-color)) !important;
     }
 
-    .fullscreen-button {
+    :host(.hasToolbar) .cm-gutters {
-      position: absolute;
+      padding-top: 0;
-      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;
     }
 
-    .fullscreen-button:hover,
+    :host(.hasToolbar) .cm-focused .cm-gutters {
-    .fullscreen-button:active {
+      padding-top: 1px;
-      opacity: 1;
     }
 
-    @media (hover: none) {
+    :host(.error-state) .cm-content {
-      .fullscreen-button {
+      border-color: var(--error-state-color, var(--error-color)) !important;
-        opacity: 0.8;
+    }
-      }
+
+    :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;
     }
 
     :host(.fullscreen) {
@@ -649,7 +773,7 @@ export class HaCodeEditor extends ReactiveElement {
       left: 8px !important;
       right: 8px !important;
       bottom: 8px !important;
-      z-index: 9999 !important;
+      z-index: 6;
       border-radius: 12px !important;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
       overflow: hidden !important;
@@ -666,15 +790,28 @@ 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: 0 !important;
     }
 
-    :host(.fullscreen) .fullscreen-button {
+    :host(:not(.hasToolbar)) .code-editor-toolbar {
-      top: calc(var(--safe-area-inset-top, 0px) + 8px);
+      display: none !important;
-      right: calc(var(--safe-area-inset-right, 0px) + 8px);
+    }
+
+    .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);
     }
 
     .completion-info {

src/components/ha-control-slider.ts

@@ -528,6 +528,10 @@ export class HaControlSlider extends LitElement {
       background-color: white;
     }
     .slider .slider-track-bar {
+      --slider-track-bar-border-radius: min(
+        var(--control-slider-border-radius),
+        var(--ha-border-radius-md)
+      );
       top: 0;
       left: 0;
       transform: translate3d(
@@ -535,7 +539,7 @@ export class HaControlSlider extends LitElement {
         0,
         0
       );
-      border-radius: 0 8px 8px 0;
+      border-radius: var(--slider-track-bar-border-radius);
     }
     .slider .slider-track-bar:after {
       top: 0;
@@ -548,7 +552,6 @@ export class HaControlSlider extends LitElement {
       right: 0;
       left: initial;
       transform: translate3d(calc(var(--value, 0) * var(--slider-size)), 0, 0);
-      border-radius: 8px 0 0 8px;
     }
     .slider .slider-track-bar.end::after {
       right: initial;
@@ -563,7 +566,6 @@ export class HaControlSlider extends LitElement {
         calc((1 - var(--value, 0)) * var(--slider-size)),
         0
       );
-      border-radius: 8px 8px 0 0;
     }
     :host([vertical]) .slider .slider-track-bar:after {
       top: var(--handle-margin);
@@ -581,7 +583,6 @@ export class HaControlSlider extends LitElement {
         calc((0 - var(--value, 0)) * var(--slider-size)),
         0
       );
-      border-radius: 0 0 8px 8px;
     }
     :host([vertical]) .slider .slider-track-bar.end::after {
       top: initial;
@@ -605,7 +606,10 @@ export class HaControlSlider extends LitElement {
       --cursor-size: calc(var(--control-slider-thickness) / 4);
       position: absolute;
       background-color: white;
-      border-radius: var(--handle-size);
+      border-radius: min(
+        var(--handle-size),
+        var(--control-slider-border-radius)
+      );
       transition:
         left 180ms ease-in-out,
         bottom 180ms ease-in-out;

src/components/ha-copy-textfield.ts

@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
     .container {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
       margin-top: 8px;
     }
 

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 { fromZonedTime, toZonedTime } from "date-fns-tz";
+import { TZDate } 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 = fromZonedTime(start, this.hass.config.time_zone);
+      start = new Date(new TZDate(start, this.hass.config.time_zone).getTime());
-      end = fromZonedTime(end, this.hass.config.time_zone);
+      end = new Date(new TZDate(end, this.hass.config.time_zone).getTime());
     }
 
     if (
@@ -290,7 +290,7 @@ export class HaDateRangePicker extends LitElement {
 
   private _formatDate(date: Date): string {
     if (this.hass.locale.time_zone === TimeZone.server) {
-      return toZonedTime(date, this.hass.config.time_zone).toISOString();
+      return new TZDate(date, this.hass.config.time_zone).toISOString();
     }
     return date.toISOString();
   }
@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
     .date-range-inputs {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
 
     .date-range-ranges {

src/components/ha-dialog.ts

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
+        padding: 12px 16px 16px 16px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -115,15 +115,13 @@ export class HaDialog extends DialogBase {
         padding: var(--dialog-content-padding, 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: max(
+        padding-bottom: var(--dialog-content-padding, 24px);
-          var(--dialog-content-padding, 24px),
-          var(--safe-area-inset-bottom)
-        );
       }
       .mdc-dialog .mdc-dialog__surface {
         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, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -137,6 +135,18 @@ export class HaDialog extends DialogBase {
         display: flex;
         flex-direction: column;
       }
+
+      @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);
+        }
+      }
+
       .header_title {
         display: flex;
         align-items: center;

src/components/ha-fade-in.ts

@@ -1,4 +1,4 @@
-import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
+import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")

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

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
 import "./ha-form";
+import "../ha-expansion-panel";
 import type {
   HaFormDataContainer,
   HaFormElement,
@@ -10,7 +11,7 @@ import type {
 } from "./types";
 
 @customElement("ha-form-expandable")
-export class HaFormExpendable extends LitElement implements HaFormElement {
+export class HaFormExpandable extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public data!: HaFormDataContainer;
@@ -131,6 +132,6 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-form-expandable": HaFormExpendable;
+    "ha-form-expandable": HaFormExpandable;
   }
 }

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

@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         var(--form-grid-column-count, auto-fit),
         minmax(var(--form-grid-min-width, 200px), 1fr)
       );
-      grid-column-gap: 8px;
+      grid-column-gap: var(--ha-space-2);
-      grid-row-gap: 24px;
+      grid-row-gap: var(--ha-space-6);
     }
     :host > ha-form {
       display: block;

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

@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     :host {
       display: flex !important;
       flex-direction: column;
-      gap: 24px;
+      gap: var(--ha-space-6);
     }
     :host ha-form {
       display: block;

src/components/ha-formfield.ts

@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
       }
       .mdc-form-field {
         align-items: var(--ha-formfield-align-items, center);
-        gap: 4px;
+        gap: var(--ha-space-1);
       }
       .mdc-form-field > label {
         direction: var(--direction);

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

@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
           "row-slider preview";
         grid-template-rows: auto auto;
         grid-template-columns: auto 1fr;
-        gap: 8px;
+        gap: var(--ha-space-2);
       }
       #columns {
         grid-area: column-slider;

src/components/ha-header-bar.ts

@@ -38,6 +38,7 @@ export class HaHeaderBar extends LitElement {
         .mdc-top-app-bar {
           position: static;
           color: var(--mdc-theme-on-primary, #fff);
+          padding: var(--header-bar-padding);
         }
         .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
           flex: 1;

src/components/ha-help-tooltip.ts

@@ -25,8 +25,9 @@ export class HaHelpTooltip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-tooltip .placement=${this.position} .content=${this.label}>
+      <ha-svg-icon id="svg-icon" .path=${mdiHelpCircle}></ha-svg-icon>
-        <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+      <ha-tooltip for="svg-icon" .placement=${this.position}>
+        ${this.label}
       </ha-tooltip>
     `;
   }

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

@@ -0,0 +1,126 @@
+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: var(--ha-space-2);
+    }
+
+    .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-icon-overflow-menu.ts

@@ -74,16 +74,16 @@ export class HaIconOverflowMenu extends LitElement {
                 : item.divider
                   ? html`<div role="separator"></div>`
                   : html`<ha-tooltip
-                      .disabled=${!item.tooltip}
+                        .disabled=${!item.tooltip}
-                      .content=${item.tooltip ?? ""}
+                        .for="icon-button-${item.label}"
-                    >
+                        >${item.tooltip ?? ""} </ha-tooltip
-                      <ha-icon-button
+                      ><ha-icon-button
+                        .id="icon-button-${item.label}"
                         @click=${item.action}
                         .label=${item.label}
                         .path=${item.path}
                         ?disabled=${item.disabled}
-                      ></ha-icon-button>
+                      ></ha-icon-button> `
-                    </ha-tooltip>`
             )}
           `}
     `;

src/components/ha-labeled-slider.ts

@@ -36,15 +36,17 @@ class HaLabeledSlider extends LitElement {
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
-        <ha-slider
+        <div class="slider-wrapper">
-          .min=${this.min}
+          <ha-slider
-          .max=${this.max}
+            .min=${this.min}
-          .step=${this.step}
+            .max=${this.max}
-          .labeled=${this.labeled}
+            .step=${this.step}
-          .disabled=${this.disabled}
+            .labeled=${this.labeled}
-          .value=${this.value}
+            .disabled=${this.disabled}
-          @change=${this._inputChanged}
+            .value=${this.value}
-        ></ha-slider>
+            @change=${this._inputChanged}
+          ></ha-slider>
+        </div>
       </div>
       ${this.helper
         ? html`<ha-input-helper-text .disabled=${this.disabled}>
@@ -83,7 +85,8 @@ class HaLabeledSlider extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    ha-slider {
+    .slider-wrapper {
+      padding: 0 8px;
       display: flex;
       flex-grow: 1;
       align-items: center;
@@ -91,6 +94,10 @@ class HaLabeledSlider extends LitElement {
       border-radius: 4px;
       height: 32px;
     }
+
+    ha-slider {
+      width: 100%;
+    }
   `;
 }
 

src/components/ha-marquee-text.ts

@@ -0,0 +1,178 @@
+import {
+  type TemplateResult,
+  LitElement,
+  html,
+  css,
+  type PropertyValues,
+} from "lit";
+import { customElement, eventOptions, property, query } from "lit/decorators";
+
+@customElement("ha-marquee-text")
+export class HaMarqueeText extends LitElement {
+  @property({ type: Number }) speed = 15; // pixels per second
+
+  @property({ type: Number, attribute: "pause-duration" }) pauseDuration = 1000; // ms delay at ends
+
+  @property({ type: Boolean, attribute: "pause-on-hover" })
+  pauseOnHover = false;
+
+  private _direction: "left" | "right" = "left";
+
+  private _animationFrame?: number;
+
+  @query(".marquee-container")
+  private _container?: HTMLDivElement;
+
+  @query(".marquee-text")
+  private _textSpan?: HTMLSpanElement;
+
+  private _position = 0;
+
+  private _maxOffset = 0;
+
+  private _pauseTimeout?: number;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    this._setupAnimation();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (changedProps.has("text")) {
+      this._setupAnimation();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        class="marquee-container"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @touchstart=${this._handleMouseEnter}
+        @touchend=${this._handleMouseLeave}
+      >
+        <span class="marquee-text"><slot></slot></span>
+      </div>
+    `;
+  }
+
+  private _setupAnimation() {
+    if (!this._container || !this._textSpan) {
+      return;
+    }
+
+    this._position = 0;
+    this._direction = "left";
+    this._maxOffset = Math.max(
+      0,
+      this._textSpan.offsetWidth - this._container.offsetWidth
+    );
+    this._textSpan.style.transform = `translateX(0px)`;
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+    this._animate();
+  }
+
+  private _animate = () => {
+    if (!this._container || !this._textSpan) {
+      return;
+    }
+
+    const dt = 1 / 60; // ~16ms per frame
+    const pxPerFrame = this.speed * dt;
+    let reachedEnd = false;
+    if (this._direction === "left") {
+      this._position -= pxPerFrame;
+      if (this._position <= -this._maxOffset) {
+        this._position = -this._maxOffset;
+        this._direction = "right";
+        reachedEnd = true;
+      }
+    } else {
+      this._position += pxPerFrame;
+      if (this._position >= 0) {
+        this._position = 0;
+        this._direction = "left";
+        reachedEnd = true;
+      }
+    }
+    this._textSpan.style.transform = `translateX(${this._position}px)`;
+    if (reachedEnd) {
+      this._pauseTimeout = window.setTimeout(() => {
+        this._pauseTimeout = undefined;
+        this._animationFrame = requestAnimationFrame(this._animate);
+      }, this.pauseDuration);
+    } else {
+      this._animationFrame = requestAnimationFrame(this._animate);
+    }
+  };
+
+  @eventOptions({ passive: true })
+  private _handleMouseEnter() {
+    if (this.pauseOnHover && this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+    if (this.pauseOnHover && this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+  }
+
+  private _handleMouseLeave() {
+    if (this.pauseOnHover && !this._animationFrame && !this._pauseTimeout) {
+      this._animate();
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .marquee-container {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      user-select: none;
+      cursor: default;
+    }
+
+    .marquee-text {
+      display: inline-block;
+      vertical-align: middle;
+      will-change: transform;
+      font-size: 1em;
+      pointer-events: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-marquee-text": HaMarqueeText;
+  }
+}

src/components/ha-md-dialog.ts

@@ -168,16 +168,18 @@ export class HaMdDialog extends Dialog {
 
       @media all and (max-width: 450px), all and (max-height: 500px) {
         :host(:not([type="alert"])) {
-          min-width: calc(
+          min-width: var(--mdc-dialog-min-width, 100vw);
-            100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-          );
-          max-width: calc(
-            100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-          );
           min-height: 100%;
           max-height: 100%;
           --md-dialog-container-shape: 0;
         }
+
+        .container {
+          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);
+        }
       }
 
       ::slotted(ha-dialog-header[slot="headline"]) {

src/components/ha-picker-field.ts

@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
           --md-list-item-bottom-space: 0px;
           --md-list-item-leading-space: 8px;
           --md-list-item-trailing-space: 8px;
-          --ha-md-list-item-gap: 8px;
+          --ha-md-list-item-gap: var(--ha-space-2);
           /* Remove the default focus ring */
           --md-focus-ring-width: 0px;
           --md-focus-ring-duration: 0s;

src/components/ha-progress-ring.ts

@@ -1,21 +1,12 @@
-import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring";
+import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring";
 import { css } from "lit";
 import type { CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
-import { StateSet } from "../resources/polyfills/stateset";
 
 @customElement("ha-progress-ring")
 export class HaProgressRing extends ProgressRing {
   @property() public size?: "tiny" | "small" | "medium" | "large";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   public updated(changedProps) {
     super.updated(changedProps);
 

src/components/ha-related-items.ts

@@ -153,6 +153,58 @@ export class HaRelatedItems extends LitElement {
     );
 
     return html`
+      ${this._related.entity
+        ? html`
+            <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
+            <ha-list>
+              ${this._relatedEntities(this._related.entity).map(
+                (entity) => html`
+                  <ha-list-item
+                    @click=${this._openMoreInfo}
+                    .entityId=${entity.entity_id}
+                    hasMeta
+                    graphic="icon"
+                  >
+                    <ha-state-icon
+                      .hass=${this.hass}
+                      .stateObj=${entity}
+                      slot="graphic"
+                    ></ha-state-icon>
+                    ${entity.attributes.friendly_name || entity.entity_id}
+                    <ha-icon-next slot="meta"></ha-icon-next>
+                  </ha-list-item>
+                `
+              )}
+            </ha-list>
+          `
+        : nothing}
+      ${this._related.device
+        ? html`<h3>
+              ${this.hass.localize("ui.components.related-items.device")}
+            </h3>
+            <ha-list>
+              ${this._related.device.map((relatedDeviceId) => {
+                const device = this.hass.devices[relatedDeviceId];
+                if (!device) {
+                  return nothing;
+                }
+                return html`
+                  <a href="/config/devices/device/${relatedDeviceId}">
+                    <ha-list-item hasMeta graphic="icon">
+                      <ha-svg-icon
+                        .path=${device.entry_type === "service"
+                          ? mdiTransitConnectionVariant
+                          : mdiDevices}
+                        slot="graphic"
+                      ></ha-svg-icon>
+                      ${device.name_by_user || device.name}
+                      <ha-icon-next slot="meta"></ha-icon-next>
+                    </ha-list-item>
+                  </a>
+                `;
+              })}
+            </ha-list>`
+        : nothing}
       ${configEntries || this._related.integration
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.integration")}
@@ -253,58 +305,6 @@ export class HaRelatedItems extends LitElement {
               })}
             </ha-list>`
         : nothing}
-      ${this._related.device
-        ? html`<h3>
-              ${this.hass.localize("ui.components.related-items.device")}
-            </h3>
-            <ha-list>
-              ${this._related.device.map((relatedDeviceId) => {
-                const device = this.hass.devices[relatedDeviceId];
-                if (!device) {
-                  return nothing;
-                }
-                return html`
-                  <a href="/config/devices/device/${relatedDeviceId}">
-                    <ha-list-item hasMeta graphic="icon">
-                      <ha-svg-icon
-                        .path=${device.entry_type === "service"
-                          ? mdiTransitConnectionVariant
-                          : mdiDevices}
-                        slot="graphic"
-                      ></ha-svg-icon>
-                      ${device.name_by_user || device.name}
-                      <ha-icon-next slot="meta"></ha-icon-next>
-                    </ha-list-item>
-                  </a>
-                `;
-              })}
-            </ha-list>`
-        : nothing}
-      ${this._related.entity
-        ? html`
-            <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
-            <ha-list>
-              ${this._relatedEntities(this._related.entity).map(
-                (entity) => html`
-                  <ha-list-item
-                    @click=${this._openMoreInfo}
-                    .entityId=${entity.entity_id}
-                    hasMeta
-                    graphic="icon"
-                  >
-                    <ha-state-icon
-                      .hass=${this.hass}
-                      .stateObj=${entity}
-                      slot="graphic"
-                    ></ha-state-icon>
-                    ${entity.attributes.friendly_name || entity.entity_id}
-                    <ha-icon-next slot="meta"></ha-icon-next>
-                  </ha-list-item>
-                `
-              )}
-            </ha-list>
-          `
-        : nothing}
       ${this._related.group
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
@@ -491,7 +491,7 @@ export class HaRelatedItems extends LitElement {
         }
         h3 {
           padding: 0 24px;
-          margin-bottom: 0;
+          margin-bottom: -8px;
         }
         h3:first-child {
           margin-top: 0;

src/components/ha-resizable-bottom-sheet.ts

@@ -0,0 +1,276 @@
+import { css, html, LitElement } from "lit";
+import { customElement, query, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../common/dom/fire_event";
+import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
+
+/**
+ * A bottom sheet component that slides up from the bottom of the screen.
+ *
+ * The bottom sheet provides a draggable interface that allows users to resize
+ * the sheet by dragging the handle at the top. It supports both mouse and touch
+ * interactions and automatically closes when dragged below a 20% of screen height.
+ *
+ * @fires bottom-sheet-closed - Fired when the bottom sheet is closed
+ *
+ * @cssprop --ha-bottom-sheet-border-width - Border width for the sheet
+ * @cssprop --ha-bottom-sheet-border-style - Border style for the sheet
+ * @cssprop --ha-bottom-sheet-border-color - Border color for the sheet
+ */
+@customElement("ha-resizable-bottom-sheet")
+export class HaResizableBottomSheet extends LitElement {
+  @query("dialog") private _dialog!: HTMLDialogElement;
+
+  private _dragging = false;
+
+  private _dragStartY = 0;
+
+  private _initialSize = 0;
+
+  @state() private _dialogMaxViewpointHeight = 70;
+
+  @state() private _dialogMinViewpointHeight = 55;
+
+  @state() private _dialogViewportHeight?: number;
+
+  render() {
+    return html`<dialog
+      open
+      @transitionend=${this._handleTransitionEnd}
+      style=${styleMap({
+        height: this._dialogViewportHeight
+          ? `${this._dialogViewportHeight}vh`
+          : "auto",
+        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        minHeight: `${this._dialogMinViewpointHeight}vh`,
+      })}
+    >
+      <div class="handle-wrapper">
+        <div
+          @mousedown=${this._handleMouseDown}
+          @touchstart=${this._handleTouchStart}
+          class="handle"
+        ></div>
+      </div>
+      <slot></slot>
+    </dialog>`;
+  }
+
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this._openSheet();
+  }
+
+  private _openSheet() {
+    requestAnimationFrame(() => {
+      // trigger opening animation
+      this._dialog.classList.add("show");
+    });
+  }
+
+  public closeSheet() {
+    requestAnimationFrame(() => {
+      this._dialog.classList.remove("show");
+    });
+  }
+
+  private _handleTransitionEnd() {
+    if (this._dialog.classList.contains("show")) {
+      // after show animation is done
+      // - set the height to the natural height, to prevent content shift when switch content
+      // - set max height to 90vh, so it opens at max 70vh but can be resized to 90vh
+      this._dialogViewportHeight =
+        (this._dialog.offsetHeight / window.innerHeight) * 100;
+      this._dialogMaxViewpointHeight = 90;
+      this._dialogMinViewpointHeight = 20;
+    } else {
+      // after close animation is done close dialog element and fire closed event
+      this._dialog.close();
+      fireEvent(this, "bottom-sheet-closed");
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // register event listeners for drag handling
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+    document.addEventListener("touchmove", this._handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", this._handleTouchEnd);
+    document.addEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // unregister event listeners for drag handling
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    document.removeEventListener("touchmove", this._handleTouchMove);
+    document.removeEventListener("touchend", this._handleTouchEnd);
+    document.removeEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  private _handleMouseDown = (ev: MouseEvent) => {
+    this._startDrag(ev.clientY);
+  };
+
+  private _handleTouchStart = (ev: TouchEvent) => {
+    // Prevent the browser from interpreting this as a scroll/PTR gesture.
+    ev.preventDefault();
+    this._startDrag(ev.touches[0].clientY);
+  };
+
+  private _startDrag(clientY: number) {
+    this._dragging = true;
+    this._dragStartY = clientY;
+    this._initialSize = (this._dialog.offsetHeight / window.innerHeight) * 100;
+    document.body.style.setProperty("cursor", "grabbing");
+  }
+
+  private _handleMouseMove = (ev: MouseEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    this._updateSize(ev.clientY);
+  };
+
+  private _handleTouchMove = (ev: TouchEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    ev.preventDefault(); // Prevent scrolling
+    this._updateSize(ev.touches[0].clientY);
+  };
+
+  private _updateSize(clientY: number) {
+    const deltaY = this._dragStartY - clientY;
+    const viewportHeight = window.innerHeight;
+    const deltaVh = (deltaY / viewportHeight) * 100;
+
+    // Calculate new size and clamp between 10vh and 90vh
+    let newSize = this._initialSize + deltaVh;
+    newSize = Math.max(10, Math.min(90, newSize));
+
+    // on drag down and below 20vh
+    if (newSize < 20 && deltaY < 0) {
+      this._endDrag();
+      this.closeSheet();
+      return;
+    }
+
+    this._dialogViewportHeight = newSize;
+  }
+
+  private _handleMouseUp = () => {
+    this._endDrag();
+  };
+
+  private _handleTouchEnd = () => {
+    this._endDrag();
+  };
+
+  private _endDrag() {
+    if (!this._dragging) {
+      return;
+    }
+    this._dragging = false;
+    document.body.style.removeProperty("cursor");
+  }
+
+  static styles = css`
+    .handle-wrapper {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding-bottom: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: grab;
+      touch-action: none;
+    }
+    .handle-wrapper .handle {
+      height: 20px;
+      width: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 7;
+      padding-bottom: 76px;
+    }
+    .handle-wrapper .handle::after {
+      content: "";
+      border-radius: 8px;
+      height: 4px;
+      background: var(--divider-color, #e0e0e0);
+      width: 80px;
+    }
+    .handle-wrapper .handle:active::after {
+      cursor: grabbing;
+    }
+    dialog {
+      height: auto;
+      max-height: 70vh;
+      min-height: 30vh;
+      background-color: var(
+        --ha-dialog-surface-background,
+        var(--mdc-theme-surface, #fff)
+      );
+      display: flex;
+      flex-direction: column;
+      top: 0;
+      inset-inline-start: 0;
+      position: fixed;
+      width: calc(
+        100% - 4px - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+      );
+      max-width: 100%;
+      border: none;
+      box-shadow: var(--wa-shadow-l);
+      padding: 0;
+      margin: 0;
+      top: auto;
+      inset-inline-end: auto;
+      bottom: 0;
+      inset-inline-start: 0;
+      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
+      border-top-left-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      border-top-right-radius: var(
+        --ha-dialog-border-radius,
+        var(--ha-border-radius-2xl)
+      );
+      transform: translateY(100%);
+      transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
+      border-top-width: var(--ha-bottom-sheet-border-width);
+      border-right-width: var(--ha-bottom-sheet-border-width);
+      border-left-width: var(--ha-bottom-sheet-border-width);
+      border-bottom-width: 0;
+      border-style: var(--ha-bottom-sheet-border-style);
+      border-color: var(--ha-bottom-sheet-border-color);
+      margin-bottom: var(--safe-area-inset-bottom);
+      margin-left: var(--safe-area-inset-left);
+      margin-right: var(--safe-area-inset-right);
+    }
+
+    dialog.show {
+      transform: translateY(0);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-resizable-bottom-sheet": HaResizableBottomSheet;
+  }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
+}

src/components/ha-ripple.ts

@@ -16,6 +16,14 @@ export class HaRipple extends Ripple {
     this.attachableTouchController.attach(control);
   }
 
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // @ts-ignore
+    this.hovered = false;
+    // @ts-ignore
+    this.pressed = false;
+  }
+
   detach() {
     super.detach();
     this.attachableTouchController.detach();

src/components/ha-segmented-bar.ts

@@ -39,22 +39,24 @@ class HaSegmentedBar extends LitElement {
           <slot name="extra"></slot>
         </div>
         <div class="bar">
-          ${this.segments.map((segment) => {
+          ${this.segments.map(
-            const bar = html`<div
+            (segment, index) => html`
-              style=${styleMap({
+              ${this.hideTooltip || !segment.label
-                width: `${(segment.value / totalValue) * 100}%`,
+                ? nothing
-                backgroundColor: segment.color,
+                : html`
-              })}
+                    <ha-tooltip for="segment-${index}" placement="top">
-            ></div>`;
+                      ${segment.label}
-            return this.hideTooltip && !segment.label
+                    </ha-tooltip>
-              ? bar
+                  `}
-              : html`
+              <div
-                  <ha-tooltip>
+                id="segment-${index}"
-                    <span slot="content">${segment.label}</span>
+                style=${styleMap({
-                    ${bar}
+                  width: `${(segment.value / totalValue) * 100}%`,
-                  </ha-tooltip>
+                  backgroundColor: segment.color,
-                `;
+                })}
-          })}
+              ></div>
+            `
+          )}
         </div>
         ${this.hideLegend
           ? nothing
@@ -88,7 +90,7 @@ class HaSegmentedBar extends LitElement {
     .heading {
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
     }
     .heading .title {
       flex: 1;
@@ -123,7 +125,7 @@ class HaSegmentedBar extends LitElement {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: var(--ha-space-3);
       margin: 12px 0;
       padding: 0;
       list-style: none;
@@ -131,7 +133,7 @@ class HaSegmentedBar extends LitElement {
     .legend li {
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--ha-space-1);
       font-size: var(--ha-font-size-s);
     }
     .legend li .bullet {

src/components/ha-select-box.ts

@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
     .list {
       display: grid;
       grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     .option {
       position: relative;
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 12px;
-      gap: 8px;
+      gap: var(--ha-space-2);
       overflow: hidden;
       cursor: pointer;
     }
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
       position: relative;
       display: flex;
       flex-direction: row;
-      gap: 8px;
+      gap: var(--ha-space-2);
       min-width: 0;
       width: 100%;
     }
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
     .option .content .text {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: var(--ha-space-1);
       min-width: 0;
       flex: 1;
     }

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

@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: var(--ha-space-2);
       align-items: center;
     }
     @media all and (max-width: 600px) {

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

@@ -62,7 +62,7 @@ export class HaColorTempSelector extends LitElement {
           "--ha-slider-background": `linear-gradient( to var(--float-end), ${gradient})`,
         })}
         labeled
-        icon="hass:thermometer"
+        icon="mdi:thermometer"
         .caption=${this.label || ""}
         .min=${min}
         .max=${max}

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

@@ -246,6 +246,8 @@ export class HaMediaSelector extends LitElement {
       entityId: this._getActiveEntityId(),
       navigateIds: this.value?.metadata?.navigateIds,
       accept: this.selector.media?.accept,
+      defaultId: this.value?.media_content_id,
+      defaultType: this.value?.media_content_type,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
         fireEvent(this, "value-changed", {
           value: {
@@ -319,7 +321,7 @@ export class HaMediaSelector extends LitElement {
       display: flex;
       align-items: center;
       padding: 8px;
-      gap: 12px;
+      gap: var(--ha-space-3);
     }
     ha-card .thumbnail {
       width: 40px;

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

@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
                 labeled
                 .min=${this.selector.number!.min}
                 .max=${this.selector.number!.max}
-                .value=${this.value ?? ""}
+                .value=${this.value}
                 .step=${sliderStep}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
-                .ticks=${this.selector.number?.slider_ticks}
+                .withMarkers=${this.selector.number?.slider_ticks || false}
               >
               </ha-slider>
             `