Change drag selected styling

.github/workflows/cast_deployment.yaml

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

.github/workflows/ci.yaml

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/demo_deployment.yaml

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

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

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

.github/workflows/labeler.yaml

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

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

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

.github/workflows/relative-ci.yaml

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

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

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

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

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

.github/workflows/stale.yml

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

.github/workflows/translations.yaml

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

cast/src/media/entrypoint.ts

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

cast/src/receiver/entrypoint.ts

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

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-top, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

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

@@ -1,11 +1,10 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } 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 {
@@ -22,13 +21,11 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            ${!computeShowNewMoreInfo(state)
-              ? html`<state-card-content
-                  .stateObj=${state}
-                  .hass=${this.hass}
-                  in-dialog
-                ></state-card-content>`
-              : nothing}
+            <state-card-content
+              .stateObj=${state}
+              .hass=${this.hass}
+              in-dialog
+            ></state-card-content>
 
             <more-info-content
               .hass=${this.hass}

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

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

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

@@ -1,100 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-spinner";
-import "../../../../src/components/ha-slider";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-slider")
-export class DemoHaSlider extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
-              <div class="card-content">
-                <span>Default (disabled)</span>
-                <ha-slider
-                  disabled
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Small</span>
-                <ha-slider
-                  size="small"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Medium</span>
-                <ha-slider
-                  size="medium"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: 8px;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-slider": DemoHaSlider;
-  }
-}

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

@@ -6,23 +6,21 @@ 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-button id="hover">Hover Me</ha-button>
-<ha-tooltip for="hover">
-This is a tooltip
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
 </ha-tooltip>
 
 ```
-<ha-button id="hover">Hover Me</ha-button>
-<ha-tooltip for="hover">
-This is a tooltip
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
 </ha-tooltip>
 ```
 
 ## Documentation
 
-This element is based on webawesome `wa-tooltip` it only sets some css tokens and has a custom show/hide animation.
+This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
 
-<a href="https://webawesome.com/docs/components/tooltip/" target="_blank" rel="noopener noreferrer">Webawesome documentation</a>
+<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
 
 ### HA style tokens
 
@@ -30,7 +28,7 @@ In your theme settings use this without the prefixed `--`.
 
 - `--ha-tooltip-border-radius` (Default: 4px)
 - `--ha-tooltip-arrow-size` (Default: 8px)
-- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
+- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
 - `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
-- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
-- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
+- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
+- `--sl-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 _filteredSchema = memoizeOne(
+  private _filteredShchema = 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._filteredSchema(this.addon.options, this.addon.schema!)
+          this._filteredShchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -199,7 +199,6 @@ 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}
@@ -208,7 +207,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredSchema(
+                    : this._filteredShchema(
                         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 class="long-description" outlined>
+            <ha-card outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
@@ -1333,9 +1333,6 @@ 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,8 +15,6 @@ 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";
@@ -38,6 +36,7 @@ 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"];
 
@@ -115,19 +114,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
                   (device, index) =>
-                    html`<ha-tab-group-tab
+                    html`<sl-tab
                       slot="nav"
                       .id=${device.interface}
                       .panel=${index.toString()}
                       .active=${this._curTabIndex === index}
                     >
                       ${device.interface}
-                    </ha-tab-group-tab>`
+                    </sl-tab>`
                 )}
-              </ha-tab-group>`
+              </sl-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -628,10 +627,10 @@ export class DialogHassioNetwork
           --mdc-list-side-padding: 10px;
         }
 
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -119,27 +119,26 @@ class HassioRepositoriesDialog extends LitElement {
                         <div>${repo.url}</div>
                       </div>
                       <ha-tooltip
-                        .for="icon-button-${repo.slug}"
                         class="delete"
                         slot="end"
-                      >
-                        ${this._dialogParams!.supervisor.localize(
+                        .content=${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 { goBack, navigate } from "../../../src/common/navigate";
+import { 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();
-      goBack();
+      history.back();
       return;
     }
 
@@ -275,7 +275,7 @@ class HassioIngressView extends LitElement {
         title: addon.name,
       });
       await nextRender();
-      goBack();
+      history.back();
       return;
     }
 

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

@@ -2,7 +2,6 @@ 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";
@@ -36,7 +35,7 @@ class UpdateAvailableDashboard extends LitElement {
   }
 
   private _updateComplete() {
-    goBack();
+    history.back();
   }
 
   static styles = css`

landing-page/src/html/index.html.template

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

package.json

@@ -26,16 +26,16 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.28.4",
+    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.7",
+    "@codemirror/autocomplete": "6.18.6",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.2",
-    "@date-fns/tz": "1.4.1",
+    "@codemirror/view": "6.38.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -52,7 +52,6 @@
     "@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",
@@ -85,24 +84,26 @@
     "@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.7",
-    "@vaadin/vaadin-themable-mixin": "24.8.7",
+    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.6",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "barcode-detector": "3.0.5",
-    "color-name": "2.0.2",
+    "color-name": "2.0.0",
     "comlink": "4.4.2",
     "core-js": "3.45.1",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
@@ -111,7 +112,7 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.12",
+    "hls.js": "1.6.11",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
     "intl-messageformat": "10.7.16",
@@ -121,7 +122,7 @@
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.2",
+    "luxon": "3.7.1",
     "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
@@ -135,7 +136,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.5",
+    "ua-parser-js": "2.0.4",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -148,7 +149,7 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
+    "@babel/core": "7.28.3",
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
@@ -158,18 +159,18 @@
     "@octokit/plugin-retry": "8.0.1",
     "@octokit/rest": "22.0.0",
     "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.5.3",
+    "@rspack/core": "1.5.1",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.1",
+    "@types/culori": "4.0.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.13",
-    "@types/leaflet.markercluster": "1.5.6",
+    "@types/leaflet-draw": "1.0.12",
+    "@types/leaflet.markercluster": "1.5.5",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
@@ -183,7 +184,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.0",
-    "eslint": "9.35.0",
+    "eslint": "9.34.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -201,9 +202,9 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.0",
+    "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.1.5",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -211,13 +212,13 @@
     "pinst": "3.0.0",
     "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.0.3",
-    "serve": "14.2.5",
+    "serve": "14.2.4",
     "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.43.0",
+    "typescript-eslint": "8.41.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -231,9 +232,10 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.4.0",
+    "globals": "16.3.0",
     "tslib": "2.8.1",
-    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
+    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
+    "@vaadin/vaadin-themable-mixin": "24.8.6"
   },
   "packageManager": "yarn@4.9.4"
 }

prettier.config.js

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

pyproject.toml

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

src/common/datetime/calc_date.ts

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

src/common/entity/compute_entity_name.ts

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

src/common/entity/context/get_entity_context.ts

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

src/common/entity/entity_filter.ts

@@ -60,20 +60,17 @@ export const generateEntityFilter = (
       }
     }
 
-    const { area, floor, device, entity } = getEntityContext(
-      stateObj,
-      hass.entities,
-      hass.devices,
-      hass.areas,
-      hass.floors
-    );
+    const { area, floor, device, entity } = getEntityContext(stateObj, hass);
 
     if (entity && entity.hidden) {
       return false;
     }
 
     if (floors) {
-      if (!floor || !floors.has(floor.floor_id)) {
+      if (!floor) {
+        return false;
+      }
+      if (!floors) {
         return false;
       }
     }

src/common/navigate.ts

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

src/common/translations/entity-state.ts

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

src/common/util/order-properties.ts

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

src/components/chart/ha-chart-base.ts

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

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

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

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

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

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

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

src/components/data-table/ha-data-table-icon.ts

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

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

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

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

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

src/components/entity/state-info.ts

@@ -36,38 +36,39 @@ class StateInfo extends LitElement {
         </div>
         ${this.inDialog
           ? html`<div class="time-ago">
-              <ha-tooltip for="relative-time">
-                <div class="row">
-                  <span class="column-name">
-                    ${this.hass.localize(
-                      "ui.dialogs.more_info_control.last_changed"
-                    )}:
-                  </span>
-                  <ha-relative-time
-                    .hass=${this.hass}
-                    .datetime=${this.stateObj.last_changed}
-                    capitalize
-                  ></ha-relative-time>
-                </div>
-                <div class="row">
-                  <span>
-                    ${this.hass.localize(
-                      "ui.dialogs.more_info_control.last_updated"
-                    )}:
-                  </span>
-                  <ha-relative-time
-                    .hass=${this.hass}
-                    .datetime=${this.stateObj.last_updated}
-                    capitalize
-                  ></ha-relative-time>
+              <ha-tooltip>
+                <ha-relative-time
+                  .hass=${this.hass}
+                  .datetime=${this.stateObj.last_changed}
+                  capitalize
+                ></ha-relative-time>
+                <div slot="content">
+                  <div class="row">
+                    <span class="column-name">
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_changed"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_changed}
+                      capitalize
+                    ></ha-relative-time>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_updated"
+                      )}:
+                    </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,19 +67,20 @@ export class HaAnalytics extends LitElement {
               )}
             </span>
             <span>
-              <ha-switch
-                .id="switch-${preference}"
-                @change=${this._handleRowClick}
-                .checked=${this.analytics?.preferences[preference]}
-                .preference=${preference}
-                name=${preference}
-                ?disabled=${baseEnabled}
-              >
-              </ha-switch>
-              <ha-tooltip .for="switch-${preference}" placement="right">
-                ${this.localize(
+              <ha-tooltip
+                content=${this.localize(
                   `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                 )}
+                placement="right"
+                ?disabled=${baseEnabled}
+              >
+                <ha-switch
+                  @change=${this._handleRowClick}
+                  .checked=${this.analytics?.preferences[preference]}
+                  .preference=${preference}
+                  name=${preference}
+                >
+                </ha-switch>
               </ha-tooltip>
             </span>
           </ha-settings-row>

src/components/ha-automation-row.ts

@@ -80,8 +80,6 @@ export class HaAutomationRow extends LitElement {
       ev.key !== " " &&
       !(
         (this.sortSelected || ev.altKey) &&
-        !(ev.ctrlKey || ev.metaKey) &&
-        !ev.shiftKey &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
       )
     ) {
@@ -134,7 +132,6 @@ export class HaAutomationRow extends LitElement {
     .expand-button {
       transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--ha-color-on-neutral-quiet);
-      margin-left: -8px;
     }
     :host([building-block]) .leading-icon-wrapper {
       background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -199,8 +196,5 @@ declare global {
   interface HASSDomEvents {
     "toggle-collapsed": undefined;
     "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
   }
 }

src/components/ha-bottom-sheet.ts

@@ -1,62 +1,259 @@
-import { css, html, LitElement, type PropertyValues } from "lit";
-import "@home-assistant/webawesome/dist/components/drawer/drawer";
-import { customElement, property, state } from "lit/decorators";
+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";
 
-export const BOTTOM_SHEET_ANIMATION_DURATION_MS = 300;
+const 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 {
-  @property({ type: Boolean }) public open = false;
+  @query("dialog") private _dialog!: HTMLDialogElement;
 
-  @state() private _drawerOpen = false;
+  private _dragging = false;
 
-  private _handleAfterHide() {
-    this.open = false;
-    const ev = new Event("closed", {
-      bubbles: true,
-      composed: true,
-    });
-    this.dispatchEvent(ev);
+  private _dragStartY = 0;
+
+  private _initialSize = 0;
+
+  @state() private _dialogMaxViewpointHeight = 70;
+
+  @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`,
+      })}
+    >
+      <div class="handle-wrapper">
+        <div
+          @mousedown=${this._handleMouseDown}
+          @touchstart=${this._handleTouchStart}
+          class="handle"
+        ></div>
+      </div>
+      <slot></slot>
+    </dialog>`;
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    if (changedProperties.has("open")) {
-      this._drawerOpen = this.open;
+  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;
+    } else {
+      // after close animation is done close dialog element and fire closed event
+      this._dialog.close();
+      fireEvent(this, "bottom-sheet-closed");
     }
   }
 
-  render() {
-    return html`
-      <wa-drawer
-        placement="bottom"
-        .open=${this._drawerOpen}
-        @wa-after-hide=${this._handleAfterHide}
-        without-header
-      >
-        <slot></slot>
-      </wa-drawer>
-    `;
+  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`
-    wa-drawer {
-      --wa-color-surface-raised: var(
+    .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)
       );
-      --spacing: 0;
-      --size: auto;
-      --show-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
-      --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
+      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 ${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) {
-      border-top-left-radius: var(--ha-border-radius-lg);
-      border-top-right-radius: var(--ha-border-radius-lg);
-      max-height: 90vh;
-      margin-bottom: var(--safe-area-inset-bottom);
-      margin-left: var(--safe-area-inset-left);
-      margin-right: var(--safe-area-inset-right);
+
+    dialog.show {
+      transform: translateY(0);
     }
   `;
 }
@@ -65,4 +262,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-bottom-sheet": HaBottomSheet;
   }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
 }

src/components/ha-button-group.ts

@@ -0,0 +1,82 @@
+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-button";
 import "./ha-svg-icon";
+import "./ha-button";
+import "./ha-button-group";
 
 /**
  * @element ha-button-toggle-group
@@ -28,9 +28,6 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property({ reflect: true }) size: "small" | "medium" = "medium";
 
-  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
-  public nowrap = false;
-
   @property() public variant:
     | "brand"
     | "neutral"
@@ -40,14 +37,11 @@ export class HaButtonToggleGroup extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <wa-button-group childSelector="ha-button">
+      <ha-button-group .variant=${this.variant} .size=${this.size}>
         ${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}
@@ -61,7 +55,7 @@ export class HaButtonToggleGroup extends LitElement {
                 : button.label}
             </ha-button>`
         )}
-      </wa-button-group>
+      </ha-button-group>
     `;
   }
 
@@ -74,10 +68,6 @@ export class HaButtonToggleGroup extends LitElement {
     :host {
       --mdc-icon-size: var(--button-toggle-icon-size, 20px);
     }
-
-    :host([no-wrap]) wa-button-group::part(base) {
-      flex-wrap: nowrap;
-    }
   `;
 }
 

src/components/ha-button.ts

@@ -1,7 +1,9 @@
-import Button from "@home-assistant/webawesome/dist/components/button/button";
+import Button from "@awesome.me/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";
 
 /**
@@ -33,10 +35,54 @@ 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")
+@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
 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,
@@ -57,8 +103,6 @@ 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 {
@@ -218,10 +262,10 @@ export class HaButton extends Button {
         }
 
         .button.has-start {
-          padding-inline-start: 8px;
+          padding-left: 8px;
         }
         .button.has-end {
-          padding-inline-end: 8px;
+          padding-right: 8px;
         }
       `,
     ];

src/components/ha-code-editor.ts

@@ -330,13 +330,7 @@ export class HaCodeEditor extends ReactiveElement {
 
   private _renderInfo = (completion: Completion): CompletionInfo => {
     const key = completion.label;
-    const context = getEntityContext(
-      this.hass!.states[key],
-      this.hass!.entities,
-      this.hass!.devices,
-      this.hass!.areas,
-      this.hass!.floors
-    );
+    const context = getEntityContext(this.hass!.states[key], this.hass!);
 
     const completionInfo = document.createElement("div");
     completionInfo.classList.add("completion-info");

src/components/ha-control-slider.ts

@@ -528,10 +528,6 @@ 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(
@@ -539,7 +535,7 @@ export class HaControlSlider extends LitElement {
         0,
         0
       );
-      border-radius: var(--slider-track-bar-border-radius);
+      border-radius: 0 8px 8px 0;
     }
     .slider .slider-track-bar:after {
       top: 0;
@@ -552,6 +548,7 @@ 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;
@@ -566,6 +563,7 @@ 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);
@@ -583,6 +581,7 @@ 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;
@@ -606,10 +605,7 @@ export class HaControlSlider extends LitElement {
       --cursor-size: calc(var(--control-slider-thickness) / 4);
       position: absolute;
       background-color: white;
-      border-radius: min(
-        var(--handle-size),
-        var(--control-slider-border-radius)
-      );
+      border-radius: var(--handle-size);
       transition:
         left 180ms ease-in-out,
         bottom 180ms ease-in-out;

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

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

src/components/ha-dialog.ts

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px 16px 16px;
+        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -100,8 +100,6 @@ 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;
@@ -117,17 +115,15 @@ export class HaDialog extends DialogBase {
         padding: var(--dialog-content-padding, 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: var(--dialog-content-padding, 24px);
+        padding-bottom: max(
+          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);
@@ -141,24 +137,6 @@ 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 "@home-assistant/webawesome/dist/components/animation/animation";
+import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")

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

@@ -2,7 +2,6 @@ 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,
@@ -11,7 +10,7 @@ import type {
 } from "./types";
 
 @customElement("ha-form-expandable")
-export class HaFormExpandable extends LitElement implements HaFormElement {
+export class HaFormExpendable extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public data!: HaFormDataContainer;
@@ -132,6 +131,6 @@ export class HaFormExpandable extends LitElement implements HaFormElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-form-expandable": HaFormExpandable;
+    "ha-form-expandable": HaFormExpendable;
   }
 }

src/components/ha-header-bar.ts

@@ -38,7 +38,6 @@ 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,9 +25,8 @@ export class HaHelpTooltip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-svg-icon id="svg-icon" .path=${mdiHelpCircle}></ha-svg-icon>
-      <ha-tooltip for="svg-icon" .placement=${this.position}>
-        ${this.label}
+      <ha-tooltip .placement=${this.position} .content=${this.label}>
+        <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
       </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}
-                        .for="icon-button-${item.label}"
-                        >${item.tooltip ?? ""} </ha-tooltip
-                      ><ha-icon-button
-                        .id="icon-button-${item.label}"
+                      .disabled=${!item.tooltip}
+                      .content=${item.tooltip ?? ""}
+                    >
+                      <ha-icon-button
                         @click=${item.action}
                         .label=${item.label}
                         .path=${item.path}
                         ?disabled=${item.disabled}
-                      ></ha-icon-button> `
+                      ></ha-icon-button>
+                    </ha-tooltip>`
             )}
           `}
     `;

src/components/ha-labeled-slider.ts

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

src/components/ha-md-dialog.ts

@@ -159,7 +159,6 @@ export class HaMdDialog extends Dialog {
         --md-dialog-headline-size: var(--ha-font-size-xl);
         --md-dialog-supporting-text-size: var(--ha-font-size-m);
         --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
-        --md-divider-color: var(--divider-color);
       }
 
       :host([type="alert"]) {

src/components/ha-progress-ring.ts

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

src/components/ha-related-items.ts

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

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

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

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

@@ -246,8 +246,6 @@ export class HaMediaSelector extends LitElement {
       entityId: this._getActiveEntityId(),
       navigateIds: this.value?.metadata?.navigateIds,
       accept: this.selector.media?.accept,
-      defaultId: this.value?.media_content_id,
-      defaultType: this.value?.media_content_type,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
         fireEvent(this, "value-changed", {
           value: {

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

src/components/ha-slider.ts

@@ -1,81 +1,33 @@
-import Slider from "@home-assistant/webawesome/dist/components/slider/slider";
-import { css, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
+import { Slider } from "@material/web/slider/internal/slider";
+import { styles } from "@material/web/slider/internal/slider-styles";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
 export class HaSlider extends Slider {
-  @property({ reflect: true }) size: "small" | "medium" = "small";
-
-  @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
-
   public connectedCallback() {
     super.connectedCallback();
     this.dir = mainWindow.document.dir;
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      Slider.styles,
-      css`
-        :host {
-          --wa-form-control-activated-color: var(--primary-color);
-          --track-size: var(--ha-slider-track-size, 4px);
-          --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
-          --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
-          --wa-color-surface-default: var(--card-background-color);
-          --wa-color-neutral-fill-normal: var(--disabled-color);
-          --wa-tooltip-background-color: var(--secondary-background-color);
-          --wa-tooltip-color: var(--primary-text-color);
-          --wa-tooltip-font-family: var(
-            --ha-tooltip-font-family,
-            var(--ha-font-family-body)
-          );
-          --wa-tooltip-font-size: var(
-            --ha-tooltip-font-size,
-            var(--ha-font-size-s)
-          );
-          --wa-tooltip-font-weight: var(
-            --ha-tooltip-font-weight,
-            var(--ha-font-weight-normal)
-          );
-          --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);
-          min-width: 100px;
-          min-inline-size: 100px;
-          width: 200px;
-        }
-
-        #thumb {
-          border: none;
-        }
-
-        #slider {
-          &:focus-visible:not(.disabled) #thumb,
-          &:focus-visible:not(.disabled) #thumb-min,
-          &:focus-visible:not(.disabled) #thumb-max {
-            outline: var(--wa-focus-ring);
-          }
-        }
-
-        :host([size="medium"]) {
-          --thumb-width: var(--ha-font-size-l, 1.25em);
-          --thumb-height: var(--ha-font-size-l, 1.25em);
-        }
-
-        :host([size="small"]) {
-          --thumb-width: var(--ha-font-size-m, 1em);
-          --thumb-height: var(--ha-font-size-m, 1em);
-        }
-      `,
-    ];
-  }
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-color);
+        --md-sys-color-on-primary: var(--text-primary-color);
+        --md-sys-color-outline: var(--outline-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-slider-handle-width: 14px;
+        --md-slider-handle-height: 14px;
+        --md-slider-state-layer-size: 24px;
+        min-width: 100px;
+        min-inline-size: 100px;
+        width: 200px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-sortable.ts

@@ -15,16 +15,21 @@ declare global {
     "item-added": {
       index: number;
       data: any;
-      item: any;
     };
     "item-removed": {
       index: number;
     };
     "drag-start": undefined;
     "drag-end": undefined;
+    "item-cloned": HaSortableClonedEventData;
   }
 }
 
+export interface HaSortableClonedEventData {
+  item: any;
+  clone: any;
+}
+
 export type HaSortableOptions = Omit<
   SortableInstance.SortableOptions,
   "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove"
@@ -149,6 +154,7 @@ export class HaSortable extends LitElement {
       onUpdate: this._handleUpdate,
       onAdd: this._handleAdd,
       onRemove: this._handleRemove,
+      onClone: this._handleClone,
     };
 
     if (this.draggableSelector) {
@@ -181,7 +187,6 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-added", {
       index: evt.newIndex,
       data: evt.item.sortableData,
-      item: evt.item,
     });
   };
 
@@ -189,6 +194,10 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-removed", { index: evt.oldIndex });
   };
 
+  private _handleClone = (evt) => {
+    fireEvent(this, "item-cloned", evt);
+  };
+
   private _handleEnd = async (evt) => {
     fireEvent(this, "drag-end");
     // put back in original location

src/components/ha-spinner.ts

@@ -1,8 +1,10 @@
-import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
+import Spinner from "@awesome.me/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";
@@ -31,6 +33,14 @@ 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

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

@@ -1,64 +0,0 @@
-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,36 +343,40 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         ${type === "entity_id"
           ? ""
           : html`<span role="gridcell">
-              <ha-tooltip .for="expand-${id}"
-                >${this.hass.localize(
+              <ha-tooltip
+                .content=${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 .for="remove-${id}">
-            ${this.hass.localize(`ui.components.target-picker.remove_${type}`)}
+          <ha-tooltip
+            .content=${this.hass.localize(
+              `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>
     `;
@@ -588,7 +592,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         if (
           entity.labels.includes(target.id) &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity, true)
+          this._entityRegMeetsFilter(entity)
         ) {
           newEntities.push(entity.entity_id);
         }
@@ -713,11 +717,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return true;
   }
 
-  private _entityRegMeetsFilter(
-    entity: EntityRegistryDisplayEntry,
-    includeSecondary = false
-  ): boolean {
-    if (entity.hidden || (entity.entity_category && !includeSecondary)) {
+  private _entityRegMeetsFilter(entity: EntityRegistryDisplayEntry): boolean {
+    if (entity.hidden || entity.entity_category) {
       return false;
     }
 

src/components/ha-tooltip.ts

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

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

@@ -1,31 +1,19 @@
 import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-top-app-bar-fixed")
 export class HaTopAppBarFixed extends TopAppBarFixedBase {
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
   static override styles = [
     styles,
     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: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
+        padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -34,11 +22,6 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
       }
       .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: calc(var(--safe-area-inset-top) + var(--header-height));
+        padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,9 +22,6 @@ 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

@@ -32,8 +32,6 @@ export class TopAppBarBaseBase extends BaseElement {
 
   protected _scrollTarget!: HTMLElement | Window;
 
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
   @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
 
   @property({ type: Boolean, reflect: true }) prominent = false;
@@ -246,22 +244,12 @@ 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: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
+        padding-top: var(--header-height);
       }
       .shadow-container {
         position: absolute;
@@ -286,11 +274,6 @@ export class TopAppBarBaseBase extends BaseElement {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
       }
       .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
         box-shadow: none;
@@ -305,12 +288,7 @@ export class TopAppBarBaseBase extends BaseElement {
       }
       div.mdc-top-app-bar--pane {
         display: flex;
-        height: calc(
-          100vh - var(--header-height, 0px) - var(
-              --safe-area-inset-top,
-              0px
-            ) - var(--safe-area-inset-bottom, 0px)
-        );
+        height: calc(100vh - var(--header-height));
       }
       .pane {
         border-right: 1px solid var(--divider-color);

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

@@ -165,8 +165,6 @@ class DialogMediaPlayerBrowse extends LitElement {
           .action=${this._action}
           .preferredLayout=${this._preferredLayout}
           .accept=${this._params.accept}
-          .defaultId=${this._params.defaultId}
-          .defaultType=${this._params.defaultType}
           @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
           @media-browsed=${this._mediaBrowsed}

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

@@ -1,112 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
-import "../ha-button";
-import "../ha-card";
-import "../ha-form/ha-form";
-import type { SchemaUnion } from "../ha-form/types";
-import type { MediaPlayerItemId } from "./ha-media-player-browse";
-
-export interface ManualMediaPickedEvent {
-  item: MediaPlayerItemId;
-}
-
-@customElement("ha-browse-media-manual")
-class BrowseMediaManual extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public item!: MediaPlayerItemId;
-
-  private _schema = memoizeOne(
-    () =>
-      [
-        {
-          name: "media_content_id",
-          required: true,
-          selector: {
-            text: {},
-          },
-        },
-        {
-          name: "media_content_type",
-          required: false,
-          selector: {
-            text: {},
-          },
-        },
-      ] as const
-  );
-
-  protected render() {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <ha-form
-            .hass=${this.hass}
-            .schema=${this._schema()}
-            .data=${this.item}
-            .computeLabel=${this._computeLabel}
-            .computeHelper=${this._computeHelper}
-            @value-changed=${this._valueChanged}
-          ></ha-form>
-        </div>
-        <div class="card-actions">
-          <ha-button @click=${this._mediaPicked}>
-            ${this.hass.localize("ui.common.submit")}
-          </ha-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    const value = { ...ev.detail.value };
-
-    this.item = value;
-  }
-
-  private _computeLabel = (
-    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}`);
-
-  private _computeHelper = (
-    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);
-
-  private _mediaPicked() {
-    fireEvent(this, "manual-media-picked", {
-      item: {
-        media_content_id: this.item.media_content_id || "",
-        media_content_type: this.item.media_content_type || "",
-      },
-    });
-  }
-
-  static override styles = css`
-    :host {
-      margin: 16px auto;
-      padding: 0 8px;
-      display: flex;
-      flex-direction: column;
-      max-width: 448px;
-    }
-    .card-actions {
-      display: flex;
-      justify-content: flex-end;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-browse-media-manual": BrowseMediaManual;
-  }
-
-  interface HASSDomEvents {
-    "manual-media-picked": ManualMediaPickedEvent;
-  }
-}

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

@@ -1,7 +1,7 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { grid } from "@lit-labs/virtualizer/layouts/grid";
 
-import { mdiArrowUpRight, mdiPlay, mdiPlus, mdiKeyboard } from "@mdi/js";
+import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -28,11 +28,7 @@ import {
   BROWSER_PLAYER,
   MediaClassBrowserSettings,
 } from "../../data/media-player";
-import {
-  browseLocalMediaPlayer,
-  isManualMediaSourceContentId,
-  MANUAL_MEDIA_SOURCE_PREFIX,
-} from "../../data/media_source";
+import { browseLocalMediaPlayer } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
@@ -57,9 +53,7 @@ import "../ha-spinner";
 import "../ha-svg-icon";
 import "../ha-tooltip";
 import "./ha-browse-media-tts";
-import "./ha-browse-media-manual";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
-import type { ManualMediaPickedEvent } from "./ha-browse-media-manual";
 
 declare global {
   interface HASSDomEvents {
@@ -80,18 +74,6 @@ export interface MediaPlayerItemId {
   media_content_type: string | undefined;
 }
 
-const MANUAL_ITEM: MediaPlayerItem = {
-  can_expand: true,
-  can_play: false,
-  can_search: false,
-  children_media_class: "",
-  media_class: "app",
-  media_content_id: MANUAL_MEDIA_SOURCE_PREFIX,
-  media_content_type: "",
-  iconPath: mdiKeyboard,
-  title: "Manual entry",
-};
-
 @customElement("ha-media-player-browse")
 export class HaMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -109,10 +91,6 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @property({ attribute: false }) public accept?: string[];
 
-  @property({ attribute: false }) public defaultId?: string;
-
-  @property({ attribute: false }) public defaultType?: string;
-
   // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
@@ -238,69 +216,56 @@ export class HaMediaPlayerBrowse extends LitElement {
       }
     }
     // Fetch current
-    if (
-      currentId.media_content_id &&
-      isManualMediaSourceContentId(currentId.media_content_id)
-    ) {
-      this._currentItem = MANUAL_ITEM;
-      fireEvent(this, "media-browsed", {
-        ids: navigateIds,
-        current: this._currentItem,
-      });
-    } else {
-      if (!currentProm) {
-        currentProm = this._fetchData(
-          this.entityId,
-          currentId.media_content_id,
-          currentId.media_content_type
-        );
-      }
-      currentProm.then(
-        (item) => {
-          this._currentItem = item;
-          fireEvent(this, "media-browsed", {
-            ids: navigateIds,
-            current: item,
-          });
-        },
-        (err) => {
-          // When we change entity ID, we will first try to see if the new entity is
-          // able to resolve the new path. If that results in an error, browse the root.
-          const isNewEntityWithSamePath =
-            oldNavigateIds &&
-            changedProps.has("entityId") &&
-            navigateIds.length === oldNavigateIds.length &&
-            oldNavigateIds.every(
-              (oldItem, idx) =>
-                navigateIds[idx].media_content_id ===
-                  oldItem.media_content_id &&
-                navigateIds[idx].media_content_type ===
-                  oldItem.media_content_type
-            );
-          if (isNewEntityWithSamePath) {
-            fireEvent(this, "media-browsed", {
-              ids: [
-                { media_content_id: undefined, media_content_type: undefined },
-              ],
-              replace: true,
-            });
-          } else if (
-            err.code === "entity_not_found" &&
-            this.entityId &&
-            isUnavailableState(this.hass.states[this.entityId]?.state)
-          ) {
-            this._setError({
-              message: this.hass.localize(
-                `ui.components.media-browser.media_player_unavailable`
-              ),
-              code: "entity_not_found",
-            });
-          } else {
-            this._setError(err);
-          }
-        }
+    if (!currentProm) {
+      currentProm = this._fetchData(
+        this.entityId,
+        currentId.media_content_id,
+        currentId.media_content_type
       );
     }
+    currentProm.then(
+      (item) => {
+        this._currentItem = item;
+        fireEvent(this, "media-browsed", {
+          ids: navigateIds,
+          current: item,
+        });
+      },
+      (err) => {
+        // When we change entity ID, we will first try to see if the new entity is
+        // able to resolve the new path. If that results in an error, browse the root.
+        const isNewEntityWithSamePath =
+          oldNavigateIds &&
+          changedProps.has("entityId") &&
+          navigateIds.length === oldNavigateIds.length &&
+          oldNavigateIds.every(
+            (oldItem, idx) =>
+              navigateIds[idx].media_content_id === oldItem.media_content_id &&
+              navigateIds[idx].media_content_type === oldItem.media_content_type
+          );
+        if (isNewEntityWithSamePath) {
+          fireEvent(this, "media-browsed", {
+            ids: [
+              { media_content_id: undefined, media_content_type: undefined },
+            ],
+            replace: true,
+          });
+        } else if (
+          err.code === "entity_not_found" &&
+          this.entityId &&
+          isUnavailableState(this.hass.states[this.entityId]?.state)
+        ) {
+          this._setError({
+            message: this.hass.localize(
+              `ui.components.media-browser.media_player_unavailable`
+            ),
+            code: "entity_not_found",
+          });
+        } else {
+          this._setError(err);
+        }
+      }
+    );
     // Fetch parent
     if (!parentProm && parentId !== undefined) {
       parentProm = this._fetchData(
@@ -514,120 +479,111 @@ export class HaMediaPlayerBrowse extends LitElement {
                       </ha-alert>
                     </div>
                   `
-                : isManualMediaSourceContentId(currentItem.media_content_id)
-                  ? html`<ha-browse-media-manual
-                      .item=${{
-                        media_content_id: this.defaultId || "",
-                        media_content_type: this.defaultType || "",
-                      }}
-                      .hass=${this.hass}
-                      @manual-media-picked=${this._manualPicked}
-                    ></ha-browse-media-manual>`
-                  : isTTSMediaSource(currentItem.media_content_id)
+                : isTTSMediaSource(currentItem.media_content_id)
+                  ? html`
+                      <ha-browse-media-tts
+                        .item=${currentItem}
+                        .hass=${this.hass}
+                        .action=${this.action}
+                        @tts-picked=${this._ttsPicked}
+                      ></ha-browse-media-tts>
+                    `
+                  : !children.length && !currentItem.not_shown
                     ? html`
-                        <ha-browse-media-tts
-                          .item=${currentItem}
-                          .hass=${this.hass}
-                          .action=${this.action}
-                          @tts-picked=${this._ttsPicked}
-                        ></ha-browse-media-tts>
+                        <div class="container no-items">
+                          ${currentItem.media_content_id ===
+                          "media-source://media_source/local/."
+                            ? html`
+                                <div class="highlight-add-button">
+                                  <span>
+                                    <ha-svg-icon
+                                      .path=${mdiArrowUpRight}
+                                    ></ha-svg-icon>
+                                  </span>
+                                  <span>
+                                    ${this.hass.localize(
+                                      "ui.components.media-browser.file_management.highlight_button"
+                                    )}
+                                  </span>
+                                </div>
+                              `
+                            : this.hass.localize(
+                                "ui.components.media-browser.no_items"
+                              )}
+                        </div>
                       `
-                    : !children.length && !currentItem.not_shown
+                    : this.preferredLayout === "grid" ||
+                        (this.preferredLayout === "auto" &&
+                          childrenMediaClass.layout === "grid")
                       ? html`
-                          <div class="container no-items">
-                            ${currentItem.media_content_id ===
-                            "media-source://media_source/local/."
-                              ? html`
-                                  <div class="highlight-add-button">
-                                    <span>
-                                      <ha-svg-icon
-                                        .path=${mdiArrowUpRight}
-                                      ></ha-svg-icon>
-                                    </span>
-                                    <span>
-                                      ${this.hass.localize(
-                                        "ui.components.media-browser.file_management.highlight_button"
-                                      )}
-                                    </span>
+                          <lit-virtualizer
+                            scroller
+                            .layout=${grid({
+                              itemSize: {
+                                width: "175px",
+                                height:
+                                  childrenMediaClass.thumbnail_ratio ===
+                                  "portrait"
+                                    ? "312px"
+                                    : "225px",
+                              },
+                              gap: "16px",
+                              flex: { preserve: "aspect-ratio" },
+                              justify: "space-evenly",
+                              direction: "vertical",
+                            })}
+                            .items=${children}
+                            .renderItem=${this._renderGridItem}
+                            class="children ${classMap({
+                              portrait:
+                                childrenMediaClass.thumbnail_ratio ===
+                                "portrait",
+                              not_shown: !!currentItem.not_shown,
+                            })}"
+                          ></lit-virtualizer>
+                          ${currentItem.not_shown
+                            ? html`
+                                <div class="grid not-shown">
+                                  <div class="title">
+                                    ${this.hass.localize(
+                                      "ui.components.media-browser.not_shown",
+                                      { count: currentItem.not_shown }
+                                    )}
                                   </div>
-                                `
-                              : this.hass.localize(
-                                  "ui.components.media-browser.no_items"
-                                )}
-                          </div>
+                                </div>
+                              `
+                            : ""}
                         `
-                      : this.preferredLayout === "grid" ||
-                          (this.preferredLayout === "auto" &&
-                            childrenMediaClass.layout === "grid")
-                        ? html`
+                      : html`
+                          <ha-list>
                             <lit-virtualizer
                               scroller
-                              .layout=${grid({
-                                itemSize: {
-                                  width: "175px",
-                                  height:
-                                    childrenMediaClass.thumbnail_ratio ===
-                                    "portrait"
-                                      ? "312px"
-                                      : "225px",
-                                },
-                                gap: "16px",
-                                flex: { preserve: "aspect-ratio" },
-                                justify: "space-evenly",
-                                direction: "vertical",
-                              })}
                               .items=${children}
-                              .renderItem=${this._renderGridItem}
-                              class="children ${classMap({
-                                portrait:
-                                  childrenMediaClass.thumbnail_ratio ===
-                                  "portrait",
-                                not_shown: !!currentItem.not_shown,
-                              })}"
+                              style=${styleMap({
+                                height: `${children.length * 72 + 26}px`,
+                              })}
+                              .renderItem=${this._renderListItem}
                             ></lit-virtualizer>
                             ${currentItem.not_shown
                               ? html`
-                                  <div class="grid not-shown">
-                                    <div class="title">
+                                  <ha-list-item
+                                    noninteractive
+                                    class="not-shown"
+                                    .graphic=${mediaClass.show_list_images
+                                      ? "medium"
+                                      : "avatar"}
+                                  >
+                                    <span class="title">
                                       ${this.hass.localize(
                                         "ui.components.media-browser.not_shown",
                                         { count: currentItem.not_shown }
                                       )}
-                                    </div>
-                                  </div>
+                                    </span>
+                                  </ha-list-item>
                                 `
                               : ""}
-                          `
-                        : html`
-                            <ha-list>
-                              <lit-virtualizer
-                                scroller
-                                .items=${children}
-                                style=${styleMap({
-                                  height: `${children.length * 72 + 26}px`,
-                                })}
-                                .renderItem=${this._renderListItem}
-                              ></lit-virtualizer>
-                              ${currentItem.not_shown
-                                ? html`
-                                    <ha-list-item
-                                      noninteractive
-                                      class="not-shown"
-                                      .graphic=${mediaClass.show_list_images
-                                        ? "medium"
-                                        : "avatar"}
-                                    >
-                                      <span class="title">
-                                        ${this.hass.localize(
-                                          "ui.components.media-browser.not_shown",
-                                          { count: currentItem.not_shown }
-                                        )}
-                                      </span>
-                                    </ha-list-item>
-                                  `
-                                : ""}
-                            </ha-list>
-                          `
+                          </ha-list>
+                        `
             }
           </div>
         </div>
@@ -661,9 +617,8 @@ export class HaMediaPlayerBrowse extends LitElement {
               : html`
                   <div class="icon-holder image">
                     <ha-svg-icon
-                      class=${child.iconPath ? "icon" : "folder"}
-                      .path=${child.iconPath ||
-                      MediaClassBrowserSettings[
+                      class="folder"
+                      .path=${MediaClassBrowserSettings[
                         child.media_class === "directory"
                           ? child.children_media_class || child.media_class
                           : child.media_class
@@ -687,10 +642,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                 `
               : ""}
           </div>
-          <ha-tooltip .for="grid-${child.title}" distance="-4">
-            ${child.title}
+          <ha-tooltip distance="-4" .content=${child.title}>
+            <div class="title">${child.title}</div>
           </ha-tooltip>
-          <div .id="grid-${child.title}" class="title">${child.title}</div>
         </ha-card>
       </div>
     `;
@@ -813,14 +767,6 @@ export class HaMediaPlayerBrowse extends LitElement {
     });
   }
 
-  private _manualPicked(ev: CustomEvent<ManualMediaPickedEvent>) {
-    ev.stopPropagation();
-    fireEvent(this, "media-picked", {
-      item: ev.detail.item as MediaPlayerItem,
-      navigateIds: this.navigateIds,
-    });
-  }
-
   private _childClicked = async (ev: MouseEvent): Promise<void> => {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
@@ -844,23 +790,9 @@ export class HaMediaPlayerBrowse extends LitElement {
     mediaContentId?: string,
     mediaContentType?: string
   ): Promise<MediaPlayerItem> {
-    const prom =
-      entityId && entityId !== BROWSER_PLAYER
-        ? browseMediaPlayer(
-            this.hass,
-            entityId,
-            mediaContentId,
-            mediaContentType
-          )
-        : browseLocalMediaPlayer(this.hass, mediaContentId);
-
-    return prom.then((item) => {
-      if (!mediaContentId && this.action === "pick") {
-        item.children = item.children || [];
-        item.children.push(MANUAL_ITEM);
-      }
-      return item;
-    });
+    return entityId && entityId !== BROWSER_PLAYER
+      ? browseMediaPlayer(this.hass, entityId, mediaContentId, mediaContentType)
+      : browseLocalMediaPlayer(this.hass, mediaContentId);
   }
 
   private _measureCard(): void {
@@ -1208,11 +1140,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
         }
 
-        .child .icon {
-          color: #00a9f7; /* Match the png color from brands repo */
-          --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
-        }
-
         .child .play {
           position: absolute;
           transition: color 0.5s;

src/components/media-player/show-media-browser-dialog.ts

@@ -12,8 +12,6 @@ export interface MediaPlayerBrowseDialogParams {
   navigateIds?: MediaPlayerItemId[];
   minimumNavigateLevel?: number;
   accept?: string[];
-  defaultId?: string;
-  defaultType?: string;
 }
 
 export const showMediaBrowserDialog = (

src/components/sl-tab-group.ts

@@ -0,0 +1,88 @@
+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,35 +3,28 @@ 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: "image-url", type: String })
+  @property({ attribute: "border-style", 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">
+        <div class="container ${classMap({ [imageStyle]: this.imageUrl })}">
           <img alt="" src=${this.imageUrl} />
         </div>
         <slot></slot>
@@ -51,11 +44,6 @@ 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;
@@ -72,15 +60,21 @@ export class HaTileIcon extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: var(--tile-icon-size);
-      height: var(--tile-icon-size);
-      border-radius: var(--tile-icon-border-radius);
+      width: 36px;
+      height: 36px;
+      border-radius: 18px;
       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/components/tile/ha-tile-info.ts

@@ -1,21 +1,20 @@
-import { css, html, LitElement } from "lit";
+import type { TemplateResult } from "lit";
+import { html, css, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-tile-info")
 export class HaTileInfo extends LitElement {
   @property() public primary?: string;
 
-  @property() public secondary?: string;
+  @property() public secondary?: string | TemplateResult<1>;
 
   protected render() {
     return html`
       <div class="info">
-        <slot name="primary" class="primary">
-          <span>${this.primary}</span>
-        </slot>
-        <slot name="secondary" class="secondary">
-          <span>${this.secondary}</span>
-        </slot>
+        <span class="primary">${this.primary}</span>
+        ${this.secondary
+          ? html`<span class="secondary">${this.secondary}</span>`
+          : nothing}
       </div>
     `;
   }
@@ -28,8 +27,7 @@ export class HaTileInfo extends LitElement {
       align-items: flex-start;
       justify-content: center;
     }
-    span,
-    ::slotted(*) {
+    span {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;

src/data/ai_task.ts

@@ -1,14 +1,8 @@
 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,14 +24,11 @@ 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>;
@@ -58,13 +55,6 @@ 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>
@@ -180,20 +170,3 @@ 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,7 +63,6 @@ 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;
@@ -98,7 +97,6 @@ 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/entity_attributes.ts

@@ -115,9 +115,6 @@ export const DOMAIN_ATTRIBUTES_FORMATERS: Record<
       return formatDurationDigital(locale, { hours, minutes, seconds })!;
     },
   },
-  input_datetime: {
-    year: (value) => value.toString(),
-  },
 };
 
 export const NON_NUMERIC_ATTRIBUTES = [

src/data/graph.ts

@@ -1 +1 @@
-export const strokeWidth = 2;
+export const strokeWidth = 5;

src/data/logbook.ts

@@ -8,12 +8,12 @@ import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { autoCaseNoun } from "../common/translations/auto_case_noun";
 import type { LocalizeFunc } from "../common/translations/localize";
+import type { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE, UNKNOWN } from "./entity";
-import { isNumericEntity } from "./history";
 
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
-export const CONTINUOUS_DOMAINS = ["counter", "proximity"];
+export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
 
 export interface LogbookStreamMessage {
   events: LogbookEntry[];
@@ -326,14 +326,9 @@ export const localizeStateMessage = (
   });
 };
 
-export const filterLogbookCompatibleEntities = (
-  entity,
-  sensorNumericDeviceClasses: string[] = []
-) => {
-  const domain = computeStateDomain(entity);
-  const continuous =
-    CONTINUOUS_DOMAINS.includes(domain) ||
-    (domain === "sensor" &&
-      isNumericEntity(domain, entity, undefined, sensorNumericDeviceClasses));
-  return !continuous;
-};
+export const filterLogbookCompatibleEntities: HaEntityPickerEntityFilterFunc = (
+  entity
+) =>
+  computeStateDomain(entity) !== "sensor" ||
+  (entity.attributes.unit_of_measurement === undefined &&
+    entity.attributes.state_class === undefined);

src/data/lovelace/config/card.ts

@@ -14,5 +14,4 @@ export interface LovelaceCardConfig {
   type: string;
   [key: string]: any;
   visibility?: Condition[];
-  disabled?: boolean;
 }

src/data/lovelace/config/section.ts

@@ -4,7 +4,6 @@ import type { LovelaceStrategyConfig } from "./strategy";
 
 export interface LovelaceBaseSectionConfig {
   visibility?: Condition[];
-  disabled?: boolean;
   column_span?: number;
   row_span?: number;
   /**

src/data/media-player.ts

@@ -199,12 +199,10 @@ export interface MediaPlayerItem {
   media_content_type: string;
   media_content_id: string;
   media_class: keyof TranslationDict["ui"]["components"]["media-browser"]["class"];
-  children_media_class?: string | null;
+  children_media_class?: string;
   can_play: boolean;
   can_expand: boolean;
-  can_search: boolean;
   thumbnail?: string;
-  iconPath?: string;
   children?: MediaPlayerItem[];
   not_shown?: number;
 }

src/data/media_source.ts

@@ -24,11 +24,6 @@ export const browseLocalMediaPlayer = (
     media_content_id: mediaContentId,
   });
 
-export const MANUAL_MEDIA_SOURCE_PREFIX = "__MANUAL_ENTRY__";
-
-export const isManualMediaSourceContentId = (mediaContentId: string) =>
-  mediaContentId.startsWith(MANUAL_MEDIA_SOURCE_PREFIX);
-
 export const isMediaSourceContentId = (mediaId: string) =>
   mediaId.startsWith("media-source://");
 

src/data/recorder.ts

@@ -2,7 +2,6 @@ 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;
@@ -109,7 +108,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -212,14 +211,7 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar
-      ? {
-          ...(period.calendar.period === "week"
-            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
-            : {}),
-          ...period.calendar,
-        }
-      : undefined,
+    calendar: period.calendar,
     rolling_window: period.rolling_window,
   });
 
@@ -246,7 +238,7 @@ export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
   });
 
 export const calculateStatisticSumGrowth = (
-  values?: StatisticValue[]
+  values: StatisticValue[]
 ): number | null => {
   let growth: number | null = null;
 

src/data/selector/format_selector_value.ts

@@ -1,5 +1,8 @@
 import { ensureArray } from "../../common/array/ensure-array";
 import { computeAreaName } from "../../common/entity/compute_area_name";
+import { computeDeviceName } from "../../common/entity/compute_device_name";
+import { computeEntityName } from "../../common/entity/compute_entity_name";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 import type { HomeAssistant } from "../../types";
 import type { Selector } from "../selector";
@@ -76,8 +79,10 @@ export const formatSelectorValue = (
         if (!stateObj) {
           return entityId;
         }
-        const name = hass.formatEntityName(stateObj, ["device", "entity"], " ");
-        return name || entityId;
+        const { device } = getEntityContext(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const entityName = computeEntityName(stateObj, hass);
+        return [deviceName, entityName].filter(Boolean).join(" ") || entityId;
       })
       .join(", ");
   }

src/data/usage_prediction.ts

@@ -1,10 +0,0 @@
-import type { HomeAssistant } from "../types";
-
-export interface CommonControlResult {
-  entities: string[];
-}
-
-export const getCommonControlUsagePrediction = (hass: HomeAssistant) =>
-  hass.callWS<CommonControlResult>({
-    type: "usage_prediction/common_control",
-  });

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

@@ -256,13 +256,6 @@ 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 "";