Revert SHA pinning for home-assistant/wheels (#27034)

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

.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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@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@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
         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@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
 
       # ℹ️ 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@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0

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

.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

.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

.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,6 +73,7 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
+      # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
         uses: home-assistant/wheels@2025.07.0
         with:
@@ -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.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs

cast/src/media/entrypoint.ts

@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as 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 = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -40,7 +40,8 @@ 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 = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ 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 (
+    if (playerManager.getPlayerState() !== "IDLE") {
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
-        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

gallery/src/components/demo-more-info.ts

@@ -1,10 +1,11 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
+import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -21,11 +22,13 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            <state-card-content
+            ${!computeShowNewMoreInfo(state)
-              .stateObj=${state}
+              ? html`<state-card-content
-              .hass=${this.hass}
+                  .stateObj=${state}
-              in-dialog
+                  .hass=${this.hass}
-            ></state-card-content>
+                  in-dialog
+                ></state-card-content>`
+              : nothing}
 
             <more-info-content
               .hass=${this.hass}

gallery/src/data/demo_states.js

@@ -1106,7 +1106,7 @@ export default {
       friendly_name: "Philips Hue",
       entity_picture: null,
       description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
       submit_caption: "I have pressed the button",
     },
     last_changed: "2018-07-19T10:44:46.515160+00:00",

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

@@ -149,7 +149,7 @@ class HassioAddonConfig extends LitElement {
       )
   );
 
-  private _filteredShchema = memoizeOne(
+  private _filteredSchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
   );
@@ -161,7 +161,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 +199,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 +208,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/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/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/html/index.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;

package.json

@@ -26,16 +26,15 @@
   "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.6",
+    "@codemirror/autocomplete": "6.18.7",
     "@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.1",
+    "@codemirror/view": "6.38.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -52,6 +51,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,13 +84,12 @@
     "@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.5",
+    "@vaadin/combo-box": "24.8.7",
-    "@vaadin/vaadin-themable-mixin": "24.8.5",
+    "@vaadin/vaadin-themable-mixin": "24.8.7",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -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.10",
+    "hls.js": "1.6.12",
     "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.0",
+    "marked": "16.2.1",
     "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",
@@ -159,18 +158,18 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.4.11",
+    "@rspack/core": "1.5.3",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.0",
+    "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.12",
+    "@types/leaflet-draw": "1.0.13",
-    "@types/leaflet.markercluster": "1.5.5",
+    "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
@@ -184,7 +183,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.34.0",
+    "eslint": "9.35.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -204,7 +203,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -212,13 +211,13 @@
     "pinst": "3.0.0",
     "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.0.3",
-    "serve": "14.2.4",
+    "serve": "14.2.5",
     "sinon": "21.0.0",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.40.0",
+    "typescript-eslint": "8.43.0",
     "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.5"
   },
-  "packageManager": "yarn@4.9.3"
+  "packageManager": "yarn@4.9.4"
 }

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.5"
+version      = "20250903.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/entity/entity_filter.ts

@@ -67,10 +67,7 @@ export const generateEntityFilter = (
     }
 
     if (floors) {
-      if (!floor) {
+      if (!floor || !floors.has(floor.floor_id)) {
-        return false;
-      }
-      if (!floors) {
         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/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/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-analytics.ts

@@ -67,20 +67,19 @@ 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}
+                name=${preference}
                 ?disabled=${baseEnabled}
               >
-                <ha-switch
+              </ha-switch>
-                  @change=${this._handleRowClick}
+              <ha-tooltip .for="switch-${preference}" placement="right">
-                  .checked=${this.analytics?.preferences[preference]}
+                ${this.localize(
-                  .preference=${preference}
+                  `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
-                  name=${preference}
+                )}
-                >
-                </ha-switch>
               </ha-tooltip>
             </span>
           </ha-settings-row>

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;
+    }
+    wa-drawer::part(body) {
+      padding-bottom: var(--safe-area-inset-bottom);
     }
   `;
 }
@@ -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
@@ -37,11 +37,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 +58,7 @@ export class HaButtonToggleGroup extends LitElement {
                 : button.label}
             </ha-button>`
         )}
-      </ha-button-group>
+      </wa-button-group>
     `;
   }
 

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-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-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);
@@ -100,6 +100,8 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
+        padding-top: var(--safe-area-inset-top);
+        padding-bottom: var(--safe-area-inset-bottom);
       }
       .mdc-dialog__title {
         padding: 16px 16px 0 16px;
@@ -115,15 +117,17 @@ 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: calc(
+          var(--mdc-dialog-min-width, 100vw) - var(
+              --safe-area-inset-left
+            ) - var(--safe-area-inset-right)
+        );
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -137,6 +141,24 @@ 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: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+          max-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+        }
+      }
+
       .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-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-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-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-resizable-bottom-sheet.ts

@@ -0,0 +1,271 @@
+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);
+      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);
+    }
+
+    dialog.show {
+      transform: translateY(0);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-resizable-bottom-sheet": HaResizableBottomSheet;
+  }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
+}

src/components/ha-sidebar.ts

@@ -666,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     tooltip.style.display = "block";
     tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
-    tooltip.style.left = `${item.offsetLeft + item.clientWidth + 8}px`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
   }
 
   private _hideTooltip() {
@@ -705,9 +705,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           background-color: var(--sidebar-background-color);
           width: 100%;
           box-sizing: border-box;
+          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
         }
         .menu {
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
           box-sizing: border-box;
           display: flex;
           padding: 0 4px;
@@ -725,12 +726,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           );
           font-size: var(--ha-font-size-xl);
           align-items: center;
-          padding-left: calc(4px + var(--safe-area-inset-left));
+          padding-left: calc(4px + var(--safe-area-inset-left, 0px));
-          padding-inline-start: calc(4px + var(--safe-area-inset-left));
+          padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
           padding-inline-end: initial;
+          padding-top: var(--safe-area-inset-top, 0px);
         }
         :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left));
+          width: calc(256px + var(--safe-area-inset-left, 0px));
+        }
+        :host([narrow][expanded]) .menu {
+          width: 100%;
         }
         .menu ha-icon-button {
           color: var(--sidebar-icon-color);
@@ -756,22 +761,23 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-fade-in,
         ha-md-list {
           height: calc(
-            100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
+            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
+              132px - var(--safe-area-inset-bottom, 0px)
           );
         }
 
         ha-fade-in {
+          padding: 4px 0;
+          box-sizing: border-box;
           display: flex;
           justify-content: center;
           align-items: center;
         }
 
         ha-md-list {
-          padding: 4px 0;
-          box-sizing: border-box;
           overflow-x: hidden;
           background: none;
-          margin-left: var(--safe-area-inset-left);
+          margin-left: var(--safe-area-inset-left, 0px);
         }
 
         ha-md-list-item {
@@ -791,7 +797,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
         :host([expanded]) ha-md-list-item {
           width: 248px;
-          width: calc(248px - var(--safe-area-inset-left));
+        }
+        :host([narrow][expanded]) ha-md-list-item {
+          width: calc(240px - var(--safe-area-inset-left, 0px));
         }
 
         ha-md-list-item.selected {

src/components/ha-spinner.ts

@@ -1,10 +1,8 @@
-import Spinner from "@awesome.me/webawesome/dist/components/spinner/spinner";
+import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 @customElement("ha-spinner")
 export class HaSpinner extends Spinner {
   @property() public size?: "tiny" | "small" | "medium" | "large";
@@ -33,14 +31,6 @@ export class HaSpinner extends Spinner {
     }
   }
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Spinner.styles,

src/components/ha-tab-group-tab.ts

@@ -0,0 +1,42 @@
+import Tab from "@home-assistant/webawesome/dist/components/tab/tab";
+import { css, type CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-tab-group-tab")
+export class HaTabGroupTab extends Tab {
+  static get styles(): CSSResultGroup {
+    return [
+      Tab.styles,
+      css`
+        :host {
+          font-size: var(--ha-font-size-m);
+          --wa-color-brand-on-quiet: var(
+            --ha-tab-active-text-color,
+            var(--primary-color)
+          );
+2
+          --wa-color-neutral-on-quiet: var(--wa-color-brand-on-quiet);
+          opacity: 0.8;
+
+          color: inherit;
+        }
+
+        :host([active]:not([disabled])) {
+          opacity: 1;
+        }
+
+        @media (hover: hover) {
+          :host(:hover:not([disabled]):not([active])) .tab {
+            color: var(--wa-color-brand-on-quiet);
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tab-group-tab": HaTabGroupTab;
+  }
+}

src/components/ha-tab-group.ts

@@ -0,0 +1,64 @@
+import TabGroup from "@home-assistant/webawesome/dist/components/tab-group/tab-group";
+import { css, type CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
+import { DragScrollController } from "../common/controllers/drag-scroll-controller";
+
+@customElement("ha-tab-group")
+export class HaTabGroup extends TabGroup {
+  private _dragScrollController = new DragScrollController(this, {
+    selector: ".nav",
+  });
+
+  @property({ attribute: "tab-tag" }) override tabTag = "ha-tab-group-tab";
+
+  @property({ attribute: "tab-only", type: Boolean }) tabOnly = true;
+
+  protected override handleClick(event: MouseEvent) {
+    if (this._dragScrollController.scrolled) {
+      return;
+    }
+    super.handleClick(event);
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      TabGroup.styles,
+      css`
+        :host {
+          --track-width: 2px;
+          --track-color: var(--ha-tab-track-color, var(--divider-color));
+          --indicator-color: var(
+            --ha-tab-indicator-color,
+            var(--primary-color)
+          );
+          --wa-color-neutral-on-quiet: var(--indicator-color);
+        }
+
+        .tab-group-top ::slotted(ha-tab-group-tab[active]) {
+          border-block-end: solid var(--track-width) var(--indicator-color);
+          margin-block-end: calc(-1 * var(--track-width));
+        }
+
+        .tab-group-start ::slotted(ha-tab-group-tab[active]) {
+          border-inline-end: solid var(--track-width) var(--indicator-color);
+          margin-inline-end: calc(-1 * var(--track-width));
+        }
+
+        .tab-group-end ::slotted(ha-tab-group-tab[active]) {
+          border-inline-start: solid var(--track-width) var(--indicator-color);
+          margin-inline-start: calc(-1 * var(--track-width));
+        }
+
+        .scroll-button::part(base):hover {
+          background-color: transparent;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tab-group": HaTabGroup;
+  }
+}

src/components/ha-target-picker.ts

@@ -343,40 +343,36 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         ${type === "entity_id"
           ? ""
           : html`<span role="gridcell">
-              <ha-tooltip
+              <ha-tooltip .for="expand-${id}"
-                .content=${this.hass.localize(
+                >${this.hass.localize(
                   `ui.components.target-picker.expand_${type}`
                 )}
-              >
-                <ha-icon-button
-                  class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                  .label=${this.hass.localize(
-                    "ui.components.target-picker.expand"
-                  )}
-                  .path=${mdiUnfoldMoreVertical}
-                  hide-title
-                  .id=${id}
-                  .type=${type}
-                  @click=${this._handleExpand}
-                ></ha-icon-button>
               </ha-tooltip>
+              <ha-icon-button
+                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                .label=${this.hass.localize(
+                  "ui.components.target-picker.expand"
+                )}
+                .path=${mdiUnfoldMoreVertical}
+                hide-title
+                .id="expand-${id}"
+                .type=${type}
+                @click=${this._handleExpand}
+              ></ha-icon-button>
             </span>`}
         <span role="gridcell">
-          <ha-tooltip
+          <ha-tooltip .for="remove-${id}">
-            .content=${this.hass.localize(
+            ${this.hass.localize(`ui.components.target-picker.remove_${type}`)}
-              `ui.components.target-picker.remove_${type}`
-            )}
-          >
-            <ha-icon-button
-              class="mdc-chip__icon mdc-chip__icon--trailing"
-              .label=${this.hass.localize("ui.components.target-picker.remove")}
-              .path=${mdiClose}
-              hide-title
-              .id=${id}
-              .type=${type}
-              @click=${this._handleRemove}
-            ></ha-icon-button>
           </ha-tooltip>
+          <ha-icon-button
+            class="mdc-chip__icon mdc-chip__icon--trailing"
+            .label=${this.hass.localize("ui.components.target-picker.remove")}
+            .path=${mdiClose}
+            hide-title
+            .id="remove-${id}"
+            .type=${type}
+            @click=${this._handleRemove}
+          ></ha-icon-button>
         </span>
       </div>
     `;
@@ -592,7 +588,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         if (
           entity.labels.includes(target.id) &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity)
+          this._entityRegMeetsFilter(entity, true)
         ) {
           newEntities.push(entity.entity_id);
         }
@@ -717,8 +713,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return true;
   }
 
-  private _entityRegMeetsFilter(entity: EntityRegistryDisplayEntry): boolean {
+  private _entityRegMeetsFilter(
-    if (entity.hidden || entity.entity_category) {
+    entity: EntityRegistryDisplayEntry,
+    includeSecondary = false
+  ): boolean {
+    if (entity.hidden || (entity.entity_category && !includeSecondary)) {
       return false;
     }
 

src/components/ha-tooltip.ts

@@ -1,50 +1,47 @@
-import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component";
+import Tooltip from "@home-assistant/webawesome/dist/components/tooltip/tooltip";
-import styles from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.styles";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import type { CSSResultGroup } from "lit";
-import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
+import { customElement, property } from "lit/decorators";
-
-setDefaultAnimation("tooltip.show", {
-  keyframes: [{ opacity: 0 }, { opacity: 1 }],
-  options: { duration: 150, easing: "ease" },
-});
-
-setDefaultAnimation("tooltip.hide", {
-  keyframes: [{ opacity: 1 }, { opacity: 0 }],
-  options: { duration: 400, easing: "ease" },
-});
 
 @customElement("ha-tooltip")
-export class HaTooltip extends SlTooltip {
+export class HaTooltip extends Tooltip {
-  static override styles = [
+  /** The amount of time to wait before showing the tooltip when the user mouses in. */
-    styles,
+  @property({ attribute: "show-delay", type: Number }) showDelay = 150;
-    css`
+
-      :host {
+  /** The amount of time to wait before hiding the tooltip when the user mouses out.. */
-        --sl-tooltip-background-color: var(--secondary-background-color);
+  @property({ attribute: "hide-delay", type: Number }) hideDelay = 400;
-        --sl-tooltip-color: var(--primary-text-color);
+
-        --sl-tooltip-font-family: var(
+  static get styles(): CSSResultGroup {
-          --ha-tooltip-font-family,
+    return [
-          var(--ha-font-family-body)
+      Tooltip.styles,
-        );
+      css`
-        --sl-tooltip-font-size: var(
+        :host {
-          --ha-tooltip-font-size,
+          --wa-tooltip-background-color: var(--secondary-background-color);
-          var(--ha-font-size-s)
+          --wa-tooltip-color: var(--primary-text-color);
-        );
+          --wa-tooltip-font-family: var(
-        --sl-tooltip-font-weight: var(
+            --ha-tooltip-font-family,
-          --ha-tooltip-font-weight,
+            var(--ha-font-family-body)
-          var(--ha-font-weight-normal)
+          );
-        );
+          --wa-tooltip-font-size: var(
-        --sl-tooltip-line-height: var(
+            --ha-tooltip-font-size,
-          --ha-tooltip-line-height,
+            var(--ha-font-size-s)
-          var(--ha-line-height-condensed)
+          );
-        );
+          --wa-tooltip-font-weight: var(
-        --sl-tooltip-padding: 8px;
+            --ha-tooltip-font-weight,
-        --sl-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
+            var(--ha-font-weight-normal)
-        --sl-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
+          );
-        --sl-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
+          --wa-tooltip-line-height: var(
-      }
+            --ha-tooltip-line-height,
-    `,
+            var(--ha-line-height-condensed)
-  ];
+          );
+          --wa-tooltip-padding: 8px;
+          --wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
+          --wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
+          --wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

@@ -8,12 +8,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
   static override styles = [
     styles,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
+        padding-left: var(--safe-area-content-inset-left);
+        padding-right: var(--safe-area-content-inset-right);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);

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

@@ -13,7 +13,7 @@ export class HaTopAppBar extends TopAppBarBase {
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +22,9 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
     `,
   ];

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

@@ -244,12 +244,15 @@ export class TopAppBarBaseBase extends BaseElement {
     styles,
     haStyleScrollbar,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .shadow-container {
         position: absolute;
@@ -274,6 +277,9 @@ export class TopAppBarBaseBase extends BaseElement {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
         box-shadow: none;

src/components/media-player/ha-media-player-browse.ts

@@ -642,9 +642,10 @@ export class HaMediaPlayerBrowse extends LitElement {
                 `
               : ""}
           </div>
-          <ha-tooltip distance="-4" .content=${child.title}>
+          <ha-tooltip .for="grid-${child.title}" distance="-4">
-            <div class="title">${child.title}</div>
+            ${child.title}
           </ha-tooltip>
+          <div .id="grid-${child.title}" class="title">${child.title}</div>
         </ha-card>
       </div>
     `;

src/components/sl-tab-group.ts

@@ -1,88 +0,0 @@
-import TabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component";
-import TabGroupStyles from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.styles";
-import "@shoelace-style/shoelace/dist/components/tab/tab";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-import { DragScrollController } from "../common/controllers/drag-scroll-controller";
-
-@customElement("sl-tab-group")
-// @ts-ignore
-export class HaSlTabGroup extends TabGroup {
-  private _dragScrollController = new DragScrollController(this, {
-    selector: ".tab-group__nav",
-  });
-
-  override setAriaLabels() {
-    // Override the method to prevent setting aria-labels, as we don't use panels
-    // and don't want to set aria-labels for the tabs
-  }
-
-  override getAllPanels() {
-    // Override the method to prevent querying for panels
-    // and return an empty array instead
-    // as we don't use panels
-    return [];
-  }
-
-  // @ts-ignore
-  protected override handleClick(event: MouseEvent) {
-    if (this._dragScrollController.scrolled) {
-      return;
-    }
-    // @ts-ignore
-    super.handleClick(event);
-  }
-
-  static override styles = [
-    TabGroupStyles,
-    css`
-      :host {
-        --sl-spacing-3x-small: 0.125rem;
-        --sl-spacing-2x-small: 0.25rem;
-        --sl-spacing-x-small: 0.5rem;
-        --sl-spacing-small: 0.75rem;
-        --sl-spacing-medium: 1rem;
-        --sl-spacing-large: 1.25rem;
-        --sl-spacing-x-large: 1.75rem;
-        --sl-spacing-2x-large: 2.25rem;
-        --sl-spacing-3x-large: 3rem;
-        --sl-spacing-4x-large: 4.5rem;
-
-        --sl-transition-x-slow: 1000ms;
-        --sl-transition-slow: 500ms;
-        --sl-transition-medium: 250ms;
-        --sl-transition-fast: 150ms;
-        --sl-transition-x-fast: 50ms;
-        --transition-speed: var(--sl-transition-fast);
-        --sl-border-radius-small: 0.1875rem;
-        --sl-border-radius-medium: 0.25rem;
-        --sl-border-radius-large: 0.5rem;
-        --sl-border-radius-x-large: 1rem;
-        --sl-border-radius-circle: 50%;
-        --sl-border-radius-pill: 9999px;
-
-        --sl-color-neutral-600: inherit;
-
-        --sl-font-weight-semibold: var(--ha-font-weight-medium);
-        --sl-font-size-small: var(--ha-font-size-m);
-
-        --sl-color-primary-600: var(
-          --ha-tab-active-text-color,
-          var(--primary-color)
-        );
-        --track-color: var(--ha-tab-track-color, var(--divider-color));
-        --indicator-color: var(--ha-tab-indicator-color, var(--primary-color));
-      }
-      ::slotted(sl-tab:not([active])) {
-        opacity: 0.8;
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    // @ts-ignore
-    "sl-tab-group": HaSlTabGroup;
-  }
-}

src/components/tile/ha-tile-icon.ts

@@ -3,28 +3,35 @@ import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../ha-icon";
 import "../ha-svg-icon";
-import { classMap } from "lit/directives/class-map";
-
-export type TileIconImageStyle = "square" | "rounded-square" | "circle";
-
-export const DEFAULT_TILE_ICON_BORDER_STYLE = "circle";
 
+/**
+ * Home Assistant tile icon component
+ *
+ * @element ha-tile-icon
+ *
+ * @summary
+ * A tile icon component, used in tile card in Home Assistant to display an icon or image.
+ *
+ * @slot - Additional content (for example, a badge).
+ * @slot icon - The icon container (usually for icons).
+ *
+ * @cssprop --ha-tile-icon-border-radius - The border radius of the tile icon. defaults to `var(--ha-border-radius-pill)`.
+ *
+ * @attr {boolean} interactive - Whether the icon is interactive (hover and focus styles).
+ * @attr {string} image-url - The URL of the image to display instead of an icon.
+ */
 @customElement("ha-tile-icon")
 export class HaTileIcon extends LitElement {
   @property({ type: Boolean, reflect: true })
   public interactive = false;
 
-  @property({ attribute: "border-style", type: String })
+  @property({ attribute: "image-url", type: String })
-  public imageStyle?: TileIconImageStyle;
-
-  @property({ attribute: false })
   public imageUrl?: string;
 
   protected render(): TemplateResult {
     if (this.imageUrl) {
-      const imageStyle = this.imageStyle || DEFAULT_TILE_ICON_BORDER_STYLE;
       return html`
-        <div class="container ${classMap({ [imageStyle]: this.imageUrl })}">
+        <div class="container">
           <img alt="" src=${this.imageUrl} />
         </div>
         <slot></slot>
@@ -44,6 +51,11 @@ export class HaTileIcon extends LitElement {
       --tile-icon-color: var(--disabled-color);
       --tile-icon-opacity: 0.2;
       --tile-icon-hover-opacity: 0.35;
+      --tile-icon-border-radius: var(
+        --ha-tile-icon-border-radius,
+        var(--ha-border-radius-pill)
+      );
+      --tile-icon-size: 36px;
       --mdc-icon-size: 24px;
       position: relative;
       user-select: none;
@@ -60,21 +72,15 @@ export class HaTileIcon extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 36px;
+      width: var(--tile-icon-size);
-      height: 36px;
+      height: var(--tile-icon-size);
-      border-radius: 18px;
+      border-radius: var(--tile-icon-border-radius);
       overflow: hidden;
       transition: box-shadow 180ms ease-in-out;
     }
     :host([interactive]:focus-visible) .container {
       box-shadow: 0 0 0 2px var(--tile-icon-color);
     }
-    .container.rounded-square {
-      border-radius: 8px;
-    }
-    .container.square {
-      border-radius: 0;
-    }
     .container.background::before {
       content: "";
       position: absolute;

src/data/ai_task.ts

@@ -1,8 +1,14 @@
 import type { HomeAssistant } from "../types";
 import type { Selector } from "./selector";
 
+export const enum AITaskEntityFeature {
+  GENERATE_DATA = 1,
+  SUPPORT_ATTACHMENTS = 2,
+  GENERATE_IMAGE = 4,
+}
 export interface AITaskPreferences {
   gen_data_entity_id: string | null;
+  gen_image_entity_id: string | null;
 }
 
 export interface GenDataTask {

src/data/bluetooth.ts

@@ -24,11 +24,14 @@ export interface BluetoothConnectionData extends DataTableRowData {
   source: string;
 }
 
+export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
+
 export interface BluetoothScannerDetails {
   source: string;
   connectable: boolean;
   name: string;
   adapter: string;
+  scanner_type?: HaScannerType;
 }
 
 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -55,6 +58,13 @@ export interface BluetoothAllocationsData {
   allocated: string[];
 }
 
+export interface BluetoothScannerState {
+  source: string;
+  adapter: string;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
+}
+
 export const subscribeBluetoothScannersDetailsUpdates = (
   conn: Connection,
   store: Store<BluetoothScannersDetails>
@@ -170,3 +180,20 @@ export const subscribeBluetoothConnectionAllocations = (
     params
   );
 };
+
+export const subscribeBluetoothScannerState = (
+  conn: Connection,
+  callbackFunction: (scannerState: BluetoothScannerState) => void,
+  configEntryId?: string
+): Promise<() => Promise<void>> => {
+  const params: { type: string; config_entry_id?: string } = {
+    type: "bluetooth/subscribe_scanner_state",
+  };
+  if (configEntryId) {
+    params.config_entry_id = configEntryId;
+  }
+  return conn.subscribeMessage<BluetoothScannerState>(
+    (scannerState) => callbackFunction(scannerState),
+    params
+  );
+};

src/data/data_entry_flow.ts

@@ -63,6 +63,7 @@ export interface DataEntryFlowStepCreateEntry {
   type: "create_entry";
   version: number;
   flow_id: string;
+  next_flow?: [FlowType, string]; // [flow_type, flow_id]
   handler: string;
   title: string;
   result?: ConfigEntry;
@@ -97,6 +98,7 @@ export interface DataEntryFlowStepMenu {
   step_id: string;
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
+  sort?: boolean;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
 }

src/data/recorder.ts

@@ -2,6 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import { firstWeekday } from "../common/datetime/first_weekday";
 
 export interface RecorderInfo {
   backlog: number | null;
@@ -108,7 +109,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -211,7 +212,14 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar,
+    calendar: period.calendar
+      ? {
+          ...(period.calendar.period === "week"
+            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
+            : {}),
+          ...period.calendar,
+        }
+      : undefined,
     rolling_window: period.rolling_window,
   });
 
@@ -238,7 +246,7 @@ export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
   });
 
 export const calculateStatisticSumGrowth = (
-  values: StatisticValue[]
+  values?: StatisticValue[]
 ): number | null => {
   let growth: number | null = null;
 

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -137,6 +137,12 @@ export interface FlowConfig {
     option: string
   ): string;
 
+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -27,6 +27,9 @@ import { showAlertDialog } from "../generic/show-dialog-box";
 import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { showConfigFlowDialog } from "./show-dialog-config-flow";
+import { showOptionsFlowDialog } from "./show-dialog-options-flow";
+import { showSubConfigFlowDialog } from "./show-dialog-sub-config-flow";
 
 @customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@@ -63,6 +66,11 @@ class StepFlowCreateEntry extends LitElement {
       return;
     }
 
+    if (this.step.next_flow && this.devices.length === 0) {
+      this._flowDone();
+      return;
+    }
+
     if (
       this.devices.length !== 1 ||
       this.devices[0].primary_config_entry !== this.step.result?.entry_id ||
@@ -173,7 +181,13 @@ class StepFlowCreateEntry extends LitElement {
       <div class="buttons">
         <ha-button @click=${this._flowDone}
           >${localize(
-            `ui.panel.config.integrations.config_flow.${!this.devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}`
+            `ui.panel.config.integrations.config_flow.${
+              this.step.next_flow
+                ? "next"
+                : !this.devices.length || Object.keys(this._deviceUpdate).length
+                  ? "finish"
+                  : "finish_skip"
+            }`
           )}</ha-button
         >
       </div>
@@ -237,7 +251,37 @@ class StepFlowCreateEntry extends LitElement {
     }
 
     fireEvent(this, "flow-update", { step: undefined });
-    if (this.step.result && this.navigateToResult) {
+    if (this.step.next_flow) {
+      // start the next flow
+      if (this.step.next_flow[0] === "config_flow") {
+        showConfigFlowDialog(this, {
+          continueFlowId: this.step.next_flow[1],
+          navigateToResult: this.navigateToResult,
+        });
+      } else if (this.step.next_flow[0] === "options_flow") {
+        showOptionsFlowDialog(this, this.step.result!, {
+          continueFlowId: this.step.next_flow[1],
+          navigateToResult: this.navigateToResult,
+        });
+      } else if (this.step.next_flow[0] === "config_subentries_flow") {
+        showSubConfigFlowDialog(
+          this,
+          this.step.result!,
+          this.step.next_flow[0],
+          {
+            continueFlowId: this.step.next_flow[1],
+            navigateToResult: this.navigateToResult,
+          }
+        );
+      } else {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.panel.config.integrations.config_flow.error",
+            { error: `Unsupported next flow type: ${this.step.next_flow[0]}` }
+          ),
+        });
+      }
+    } else if (this.step.result && this.navigateToResult) {
       if (this.devices.length === 1) {
         navigate(`/config/devices/device/${this.devices[0].id}`);
       } else {

src/dialogs/config-flow/step-flow-menu.ts

@@ -1,5 +1,5 @@
-import type { TemplateResult } from "lit";
+import type { PropertyValues, 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 "../../components/ha-icon-next";
@@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -17,9 +18,18 @@ class StepFlowMenu extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this.hass.localize !== changedProps.get("hass")?.localize
+    );
+  }
+
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -30,10 +40,36 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
+    }
+
+    if (this.step.sort) {
+      options = options.sort((a, b) =>
+        stringCompare(
+          translations[a]!,
+          translations[b]!,
+          this.hass.locale.language
+        )
+      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +82,18 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
               <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -73,11 +119,10 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
       }
       .content {
         padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

src/dialogs/dialog-list-items/dialog-list-items.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-bottom-sheet";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-icon";
 import "../../components/ha-md-list";
@@ -40,6 +41,54 @@ export class ListItemsDialog
       return nothing;
     }
 
+    const content = html`
+      <div class="container">
+        <ha-md-list>
+          ${this._params.items.map(
+            (item) => html`
+              <ha-md-list-item
+                type="button"
+                @click=${this._itemClicked}
+                .item=${item}
+              >
+                ${item.iconPath
+                  ? html`
+                      <ha-svg-icon
+                        .path=${item.iconPath}
+                        slot="start"
+                        class="item-icon"
+                      ></ha-svg-icon>
+                    `
+                  : item.icon
+                    ? html`
+                        <ha-icon
+                          icon=${item.icon}
+                          slot="start"
+                          class="item-icon"
+                        ></ha-icon>
+                      `
+                    : nothing}
+                <span class="headline">${item.label}</span>
+                ${item.description
+                  ? html`
+                      <span class="supporting-text">${item.description}</span>
+                    `
+                  : nothing}
+              </ha-md-list-item>
+            `
+          )}
+        </ha-md-list>
+      </div>
+    `;
+
+    if (this._params.mode === "bottom-sheet") {
+      return html`
+        <ha-bottom-sheet placement="bottom" open @closed=${this._dialogClosed}>
+          ${content}
+        </ha-bottom-sheet>
+      `;
+    }
+
     return html`
       <ha-dialog
         open
@@ -47,43 +96,7 @@ export class ListItemsDialog
         @closed=${this._dialogClosed}
         hideActions
       >
-        <div class="container">
+        ${content}
-          <ha-md-list>
-            ${this._params.items.map(
-              (item) => html`
-                <ha-md-list-item
-                  type="button"
-                  @click=${this._itemClicked}
-                  .item=${item}
-                >
-                  ${item.iconPath
-                    ? html`
-                        <ha-svg-icon
-                          .path=${item.iconPath}
-                          slot="start"
-                          class="item-icon"
-                        ></ha-svg-icon>
-                      `
-                    : item.icon
-                      ? html`
-                          <ha-icon
-                            icon=${item.icon}
-                            slot="start"
-                            class="item-icon"
-                          ></ha-icon>
-                        `
-                      : nothing}
-                  <span class="headline">${item.label}</span>
-                  ${item.description
-                    ? html`
-                        <span class="supporting-text">${item.description}</span>
-                      `
-                    : nothing}
-                </ha-md-list-item>
-              `
-            )}
-          </ha-md-list>
-        </div>
       </ha-dialog>
     `;
   }

src/dialogs/dialog-list-items/show-list-items-dialog.ts

@@ -11,6 +11,7 @@ interface ListItem {
 export interface ListItemsDialogParams {
   title?: string;
   items: ListItem[];
+  mode?: "dialog" | "bottom-sheet";
 }
 
 export const showListItemsDialog = (

src/dialogs/more-info/controls/more-info-update.ts

@@ -475,7 +475,6 @@ class MoreInfoUpdate extends LitElement {
       bottom: 0;
       margin: 0 -24px 0 -24px;
       margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
-      padding-bottom: var(--safe-area-inset-bottom);
       box-sizing: border-box;
       display: flex;
       flex-direction: column;

src/dialogs/more-info/controls/more-info-weather.ts

@@ -3,14 +3,18 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-tab-group";
+import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-tooltip";
-import "../../../components/sl-tab-group";
 import type {
   ForecastEvent,
   ModernForecastType,
@@ -28,7 +32,6 @@ import {
   weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -163,37 +166,36 @@ class MoreInfoWeather extends LitElement {
               ${this.hass.formatEntityState(this.stateObj)}
             </div>
             <div class="time-ago">
-              <ha-tooltip>
+              <ha-relative-time
-                <ha-relative-time
+                id="relative-time"
-                  .hass=${this.hass}
+                .hass=${this.hass}
-                  .datetime=${this.stateObj.last_changed}
+                .datetime=${this.stateObj.last_changed}
-                  capitalize
+                capitalize
-                ></ha-relative-time>
+              ></ha-relative-time>
-                <div slot="content">
+              <ha-tooltip for="relative-time">
-                  <div class="row">
+                <div class="row">
-                    <span class="column-name">
+                  <span class="column-name">
-                      ${this.hass.localize(
+                    ${this.hass.localize(
-                        "ui.dialogs.more_info_control.last_changed"
+                      "ui.dialogs.more_info_control.last_changed"
-                      )}:
+                    )}:
-                    </span>
+                  </span>
-                    <ha-relative-time
+                  <ha-relative-time
-                      .hass=${this.hass}
+                    .hass=${this.hass}
-                      .datetime=${this.stateObj.last_changed}
+                    .datetime=${this.stateObj.last_changed}
-                      capitalize
+                    capitalize
-                    ></ha-relative-time>
+                  ></ha-relative-time>
-                  </div>
+                </div>
-                  <div class="row">
+                <div class="row">
-                    <span>
+                  <span>
-                      ${this.hass.localize(
+                    ${this.hass.localize(
-                        "ui.dialogs.more_info_control.last_updated"
+                      "ui.dialogs.more_info_control.last_updated"
-                      )}:
+                    )}:
-                    </span>
+                  </span>
-                    <ha-relative-time
+                  <ha-relative-time
-                      .hass=${this.hass}
+                    .hass=${this.hass}
-                      .datetime=${this.stateObj.last_updated}
+                    .datetime=${this.stateObj.last_updated}
-                      capitalize
+                    capitalize
-                    ></ha-relative-time>
+                  ></ha-relative-time>
-                  </div>
                 </div>
               </ha-tooltip>
             </div>
@@ -292,106 +294,101 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-      ${forecast
+
-        ? html`
+      <div class="section">
-            <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
-              ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
-            </div>
+      ${supportedForecasts?.length > 1
-            ${supportedForecasts.length > 1
+        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
-              ? html`<sl-tab-group
+            ${supportedForecasts.map(
-                  @sl-tab-show=${this._handleForecastTypeChanged}
+              (forecastType) =>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                 >
-                  ${supportedForecasts.map(
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                    (forecastType) =>
+                </ha-tab-group-tab>`
-                      html`<sl-tab
+            )}
-                        slot="nav"
+          </ha-tab-group>`
-                        .panel=${forecastType}
+        : nothing}
-                        .active=${this._forecastType === forecastType}
+      <div class="forecast">
-                      >
+        ${forecast?.length
-                        ${this.hass!.localize(
+          ? forecast.map((item) =>
-                          `ui.card.weather.${forecastType}`
+              this._showValue(item.templow) || this._showValue(item.temperature)
-                        )}
+                ? html`
-                      </sl-tab>`
+                    <div>
-                  )}
-                </sl-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
                       <div>
-                        <div>
+                        ${dayNight
-                          ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                             ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
                                 ${formatDateWeekdayShort(
                                   new Date(item.datetime),
                                   this.hass!.locale,
                                   this.hass!.config
                                 )}
-                                <div class="daynight">
+                              `}
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
-                          ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
-                            `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
                       </div>
-                    `
+                      ${this._showValue(item.condition)
-                  : nothing
+                        ? html`
-              )}
+                            <div class="forecast-image-icon">
-            </div>
+                              ${getWeatherStateIcon(
-          `
+                                item.condition!,
-        : nothing}
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
+                            </div>
+                          `
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
@@ -422,11 +419,11 @@ class MoreInfoWeather extends LitElement {
           font-size: 1.2em;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
 
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }
@@ -589,6 +586,10 @@ class MoreInfoWeather extends LitElement {
         .forecast-icon {
           --mdc-icon-size: 40px;
         }
+
+        .forecast ha-spinner {
+          height: 120px;
+        }
       `,
     ];
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -661,7 +661,10 @@ export class MoreInfoDialog extends LitElement {
         ha-dialog {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: 40px;
+          --dialog-surface-margin-top: max(
+            40px,
+            var(--safe-area-inset-top, 0px)
+          );
           --dialog-content-padding: 0;
         }
 

src/dialogs/notifications/notification-drawer.ts

@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement {
     );
     this.style.setProperty(
       "--mdc-drawer-width",
-      narrow ? window.innerWidth + "px" : "500px"
+      `min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))`
     );
     this._open = true;
   }
@@ -152,24 +152,40 @@ export class HuiNotificationDrawer extends LitElement {
     ha-header-bar {
       --mdc-theme-on-primary: var(--primary-text-color);
       --mdc-theme-primary: var(--primary-background-color);
+      --header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
+        var(--safe-area-inset-left, 0px);
       border-bottom: 1px solid var(--divider-color);
       display: block;
     }
 
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      ha-header-bar {
+        --header-bar-padding: var(--safe-area-inset-top, 0px)
+          var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
+      }
+    }
+
     .notifications {
       overflow-y: auto;
       padding-top: 16px;
-      padding-left: var(--safe-area-inset-left);
+      padding-left: var(--safe-area-inset-left, 0px);
-      padding-right: var(--safe-area-inset-right);
+      padding-inline-start: var(--safe-area-inset-left, 0px);
-      padding-inline-start: var(--safe-area-inset-left);
+      padding-bottom: var(--safe-area-inset-bottom, 0px);
-      padding-inline-end: var(--safe-area-inset-right);
+      height: calc(
-      padding-bottom: var(--safe-area-inset-bottom);
+        100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
-      height: calc(100% - 1px - var(--header-height));
+      );
       box-sizing: border-box;
       background-color: var(--primary-background-color);
       color: var(--primary-text-color);
     }
 
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      .notifications {
+        padding-right: var(--safe-area-inset-right, 0px);
+        padding-inline-end: var(--safe-area-inset-right, 0px);
+      }
+    }
+
     .notification {
       padding: 0 16px 16px;
     }

src/dialogs/notifications/persistent-notification-item.ts

@@ -28,15 +28,14 @@ export class HuiPersistentNotificationItem extends LitElement {
 
         <div class="time">
           <span>
-            <ha-tooltip
+            <ha-relative-time
-              .content=${this._computeTooltip(this.hass, this.notification)}
+              id="relative-time"
-              placement="bottom"
+              .hass=${this.hass}
-            >
+              .datetime=${this.notification.created_at}
-              <ha-relative-time
+              capitalize
-                .hass=${this.hass}
+            ></ha-relative-time>
-                .datetime=${this.notification.created_at}
+            <ha-tooltip for="relative-time" placement="bottom">
-                capitalize
+              ${this._computeTooltip(this.hass, this.notification)}
-              ></ha-relative-time>
             </ha-tooltip>
           </span>
         </div>

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -281,11 +281,11 @@ export class QuickBar extends LitElement {
                         class="ha-scrollbar"
                         style=${styleMap({
                           height: this._narrow
-                            ? "calc(100vh - 56px)"
+                            ? "calc(100vh - 56px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
-                            : `${Math.min(
+                            : `calc(${Math.min(
                                 items.length * (commandMode ? 56 : 72) + 26,
                                 500
-                              )}px`,
+                              )}px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))`,
                         })}
                         .items=${items}
                         .renderItem=${this._renderItem}

src/html/authorize.html.template

@@ -35,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/html/index.html.template

@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

src/html/onboarding.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
@@ -32,6 +33,7 @@
         justify-content: flex-start;
         margin-bottom: 32px;
         margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/layouts/hass-error-screen.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-button";
 import "../components/ha-menu-button";
@@ -50,7 +51,7 @@ class HassErrorScreen extends LitElement {
   }
 
   private _handleBack(): void {
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {

src/layouts/hass-loading-screen.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { goBack } from "../common/navigate";
 import "../components/ha-spinner";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
@@ -49,7 +50,7 @@ class HassLoadingScreen extends LitElement {
   }
 
   private _handleBack() {
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {

src/layouts/hass-subpage.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
+import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import type { HomeAssistant } from "../types";
@@ -29,31 +30,35 @@ class HassSubpage extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
-        ${this.mainPage || history.state?.root
+        <div class="toolbar-content">
-          ? html`
+          ${this.mainPage || history.state?.root
-              <ha-menu-button
-                .hassio=${this.supervisor}
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-            `
-          : this.backPath
             ? html`
-                <a href=${this.backPath}>
+                <ha-menu-button
+                  .hassio=${this.supervisor}
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                ></ha-menu-button>
+              `
+            : this.backPath
+              ? html`
+                  <a href=${this.backPath}>
+                    <ha-icon-button-arrow-prev
+                      .hass=${this.hass}
+                    ></ha-icon-button-arrow-prev>
+                  </a>
+                `
+              : html`
                   <ha-icon-button-arrow-prev
                     .hass=${this.hass}
+                    @click=${this._backTapped}
                   ></ha-icon-button-arrow-prev>
-                </a>
+                `}
-              `
-            : html`
-                <ha-icon-button-arrow-prev
-                  .hass=${this.hass}
-                  @click=${this._backTapped}
-                ></ha-icon-button-arrow-prev>
-              `}
 
-        <div class="main-title"><slot name="header">${this.header}</slot></div>
+          <div class="main-title">
-        <slot name="toolbar-icon"></slot>
+            <slot name="header">${this.header}</slot>
+          </div>
+          <slot name="toolbar-icon"></slot>
+        </div>
       </div>
       <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
         <slot></slot>
@@ -74,7 +79,7 @@ class HassSubpage extends LitElement {
       this.backCallback();
       return;
     }
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {
@@ -95,22 +100,26 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
+          background-color: var(--app-header-background-color);
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .toolbar {
+          padding-left: var(--safe-area-inset-left);
+        }
+
+        .toolbar-content {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
           height: var(--header-height);
-          padding: 8px 12px;
-          background-color: var(--app-header-background-color);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
+          padding: 8px 12px;
         }
-        @media (max-width: 599px) {
+
-          .toolbar {
-            padding: 4px;
-          }
-        }
         .toolbar a {
           color: var(--sidebar-text-color);
           text-decoration: none;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -884,7 +884,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
 
     .filter-dialog-content {
-      height: calc(100vh - 1px - 61px - var(--header-height));
+      height: calc(
+        100vh -
+          70px - var(--header-height, 0px) - var(
+            --safe-area-inset-top,
+            0px
+          ) - var(--safe-area-inset-bottom, 0px)
+      );
       display: flex;
       flex-direction: column;
     }

src/layouts/hass-tabs-subpage.ts

@@ -4,6 +4,7 @@ import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../common/config/can_show_page";
+import { goBack } from "../common/navigate";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -205,7 +206,7 @@ class HassTabsSubpage extends LitElement {
       this.backCallback();
       return;
     }
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {
@@ -240,7 +241,10 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);

src/layouts/home-assistant-main.ts

@@ -144,15 +144,18 @@ export class HomeAssistantMain extends LitElement {
       color: var(--primary-text-color);
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      --mdc-drawer-width: 56px;
+      --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
       --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
     :host([expanded]) {
-      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
+      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px));
     }
     :host([modal]) {
       --mdc-drawer-width: unset;
       --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,
     ha-sidebar {

src/panels/config/areas/ha-config-area-page.ts

@@ -7,6 +7,7 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { goBack } from "../../../common/navigate";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -50,6 +51,7 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
+import { slugify } from "../../../common/string/slugify";
 
 declare interface NameAndEntity<EntityType extends HassEntity> {
   name: string;
@@ -548,11 +550,14 @@ class HaConfigAreaPage extends LitElement {
 
   private _renderScene(name: string, entityState: SceneEntity) {
     return html`<ha-tooltip
-      .distance=${-4}
+        .for="scene-${slugify(entityState.entity_id)}"
-      .disabled=${!!entityState.attributes.id}
+        .distance=${-4}
-      .content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
+        .disabled=${!!entityState.attributes.id}
-    >
+      >
+        ${this.hass.localize("ui.panel.config.devices.cant_edit")}
+      </ha-tooltip>
       <a
+        .id="scene-${slugify(entityState.entity_id)}"
         href=${ifDefined(
           entityState.attributes.id
             ? `/config/scene/edit/${entityState.attributes.id}`
@@ -563,17 +568,12 @@ class HaConfigAreaPage extends LitElement {
           <span>${name}</span>
           <ha-icon-next slot="meta"></ha-icon-next>
         </ha-list-item>
-      </a>
+      </a> `;
-    </ha-tooltip>`;
   }
 
   private _renderAutomation(name: string, entityState: AutomationEntity) {
-    return html`<ha-tooltip
+    return html`<a
-      .disabled=${!!entityState.attributes.id}
+        id="automation-${slugify(entityState.entity_id)}"
-      .distance=${-4}
-      .content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
-    >
-      <a
         href=${ifDefined(
           entityState.attributes.id
             ? `/config/automation/edit/${encodeURIComponent(entityState.attributes.id)}`
@@ -585,7 +585,12 @@ class HaConfigAreaPage extends LitElement {
           <ha-icon-next slot="meta"></ha-icon-next>
         </ha-list-item>
       </a>
-    </ha-tooltip>`;
+      <ha-tooltip
+        for="automation-${slugify(entityState.entity_id)}"
+        .disabled=${!!entityState.attributes.id}
+        .distance=${-4}
+        >${this.hass.localize("ui.panel.config.devices.cant_edit")}
+      </ha-tooltip>`;
   }
 
   private _renderScript(name: string, entityState: ScriptEntity) {
@@ -643,7 +648,7 @@ class HaConfigAreaPage extends LitElement {
       destructive: true,
       confirm: async () => {
         await deleteAreaRegistryEntry(this.hass!, area!.area_id);
-        afterNextRender(() => history.back());
+        afterNextRender(() => goBack("/config"));
       },
     });
   }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -258,14 +258,16 @@ export default class HaAutomationActionRow extends LitElement {
 
       ${type !== "condition" &&
       (this.action as NonConditionAction).continue_on_error === true
-        ? html`<ha-tooltip
+        ? html`<ha-svg-icon
-            slot="icons"
+              id="svg-icon"
-            .content=${this.hass.localize(
+              slot="icons"
-              "ui.panel.config.automation.editor.actions.continue_on_error"
+              .path=${mdiAlertCircleCheck}
-            )}
+            ></ha-svg-icon>
-          >
+            <ha-tooltip for="svg-icon">
-            <ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
+              ${this.hass.localize(
-          </ha-tooltip>`
+                "ui.panel.config.automation.editor.actions.continue_on_error"
+              )}
+            </ha-tooltip>`
         : nothing}
       ${!this.optionsInSidebar
         ? html`<ha-md-button-menu

src/panels/config/automation/ha-automation-editor.ts

@@ -24,7 +24,7 @@ import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { goBack, navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -702,7 +702,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 { err_no: err.status_code }
               ),
       });
-      history.back();
+      goBack("/config");
     }
   }
 
@@ -853,7 +853,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private _backTapped = async () => {
     const result = await this._confirmUnsavedChanged();
     if (result) {
-      afterNextRender(() => history.back());
+      afterNextRender(() => goBack("/config"));
     }
   };
 
@@ -941,7 +941,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private async _delete() {
     if (this.automationId) {
       await deleteAutomation(this.hass, this.automationId);
-      history.back();
+      goBack("/config");
     }
   }
 

src/panels/config/automation/ha-automation-picker.ts

@@ -292,7 +292,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           extraTemplate: (automation) =>
             automation.labels.length
               ? html`<ha-data-table-labels
-                  @label-clicked=${this._labelClicked}
+                  @label-clicked=${narrow ? undefined : this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
               : nothing,

src/panels/config/automation/ha-automation-sidebar.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import "../../../components/ha-bottom-sheet";
+import "../../../components/ha-resizable-bottom-sheet";
-import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
+import type { HaResizableBottomSheet } from "../../../components/ha-resizable-bottom-sheet";
 import {
   isCondition,
   isScriptField,
@@ -37,7 +37,8 @@ export default class HaAutomationSidebar extends LitElement {
 
   @state() private _yamlMode = false;
 
-  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
+  @query("ha-resizable-bottom-sheet")
+  private _bottomSheetElement?: HaResizableBottomSheet;
 
   private _renderContent() {
     // get config type
@@ -147,9 +148,9 @@ export default class HaAutomationSidebar extends LitElement {
 
     if (this.narrow) {
       return html`
-        <ha-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
+        <ha-resizable-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
           ${this._renderContent()}
-        </ha-bottom-sheet>
+        </ha-resizable-bottom-sheet>
       `;
     }
 

src/panels/config/automation/option/ha-automation-option.ts

@@ -317,7 +317,7 @@ export default class HaAutomationOption extends LitElement {
     automationRowsStyles,
     css`
       :host([root]) .rows {
-        padding-right: 8px;
+        padding-inline-end: 8px;
       }
     `,
   ];

src/panels/config/automation/styles.ts

@@ -61,12 +61,15 @@ export const indentStyle = css`
   .card-content.indent,
   .selector-row,
   :host([indent]) ha-form {
-    margin-left: 12px;
+    margin-inline-start: 12px;
-    padding: 12px 0 16px 16px;
+    padding-top: 12px;
-    border-left: 2px solid var(--ha-color-border-neutral-quiet);
+    padding-bottom: 16px;
+    padding-inline-start: 16px;
+    padding-inline-end: 0px;
+    border-inline-start: 2px solid var(--ha-color-border-neutral-quiet);
     border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
     border-radius: 0;
-    border-bottom-left-radius: var(--ha-border-radius-lg);
+    border-end-start-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
   :host([selected]) .card-content.indent,
@@ -174,7 +177,7 @@ export const automationRowsStyles = css`
     gap: 16px;
   }
   .rows.no-sidebar {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .sortable-ghost {
     background: none;

src/panels/config/core/ai-task-pref.ts

@@ -1,5 +1,6 @@
 import { mdiHelpCircle, mdiStarFourPoints } from "@mdi/js";
 import { css, html, LitElement } from "lit";
+import type { HassEntity } from "home-assistant-js-websocket";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
@@ -8,6 +9,7 @@ import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker
 import "../../../components/ha-card";
 import "../../../components/ha-settings-row";
 import {
+  AITaskEntityFeature,
   fetchAITaskPreferences,
   saveAITaskPreferences,
   type AITaskPreferences,
@@ -15,6 +17,15 @@ import {
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { documentationUrl } from "../../../util/documentation-url";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+
+const filterGenData = (entity: HassEntity) =>
+  computeDomain(entity.entity_id) === "ai_task" &&
+  supportsFeature(entity, AITaskEntityFeature.GENERATE_DATA);
+const filterGenImage = (entity: HassEntity) =>
+  computeDomain(entity.entity_id) === "ai_task" &&
+  supportsFeature(entity, AITaskEntityFeature.GENERATE_IMAGE);
 
 @customElement("ai-task-pref")
 export class AITaskPref extends LitElement {
@@ -26,6 +37,8 @@ export class AITaskPref extends LitElement {
 
   private _gen_data_entity_id?: string | null;
 
+  private _gen_image_entity_id?: string | null;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
@@ -90,7 +103,27 @@ export class AITaskPref extends LitElement {
               isComponentLoaded(this.hass, "ai_task")}
               .value=${this._gen_data_entity_id ||
               this._prefs?.gen_data_entity_id}
-              .includeDomains=${["ai_task"]}
+              .entityFilter=${filterGenData}
+              @value-changed=${this._handlePrefChange}
+            ></ha-entity-picker>
+          </ha-settings-row>
+          <ha-settings-row .narrow=${this.narrow}>
+            <span slot="heading">
+              ${this.hass!.localize("ui.panel.config.ai_task.gen_image_header")}
+            </span>
+            <span slot="description">
+              ${this.hass!.localize(
+                "ui.panel.config.ai_task.gen_image_description"
+              )}
+            </span>
+            <ha-entity-picker
+              data-name="gen_image_entity_id"
+              .hass=${this.hass}
+              .disabled=${this._prefs === undefined &&
+              isComponentLoaded(this.hass, "ai_task")}
+              .value=${this._gen_image_entity_id ||
+              this._prefs?.gen_image_entity_id}
+              .entityFilter=${filterGenImage}
               @value-changed=${this._handlePrefChange}
             ></ha-entity-picker>
           </ha-settings-row>
@@ -121,6 +154,7 @@ export class AITaskPref extends LitElement {
     const oldPrefs = this._prefs;
     const update: Partial<AITaskPreferences> = {
       gen_data_entity_id: this._gen_data_entity_id,
+      gen_image_entity_id: this._gen_image_entity_id,
     };
     this._prefs = { ...this._prefs!, ...update };
     try {

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -239,12 +239,8 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
+            --mdc-dialog-min-width: 100vw;
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+            --mdc-dialog-max-width: 100vw;
-            );
-            --mdc-dialog-max-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
           }
         }
         ha-switch {