tabs+data-table: add safe-area padding and heights; group header row class; row/header paddings; empty row includes bottom inset

subpage: include safe-area top inset in toolbar height; add content/toolbar paddings; adjust content height
sidebar: account for safe-area top inset in menu height/padding; adjust list height calc
2025-11-08 18:39:40 +00:00 · 2025-09-01 15:57:38 +01:00 · 2025-09-01 15:49:16 +01:00 · 2025-09-01 15:41:44 +01:00
258 changed files with 4372 additions and 5858 deletions
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -26,7 +26,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -61,7 +61,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -60,7 +60,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -78,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -102,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -27,7 +27,7 @@ jobs:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -62,7 +62,7 @@ jobs:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_deployment.yaml
+++ b/.github/workflows/design_deployment.yaml
@@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/design_preview.yaml
+++ b/.github/workflows/design_preview.yaml
@@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@v5.0.0

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/labeler.yaml
+++ b/.github/workflows/labeler.yaml
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@v6.0.1
+        uses: actions/labeler@v5.0.0
        with:
          sync-labels: true
--- a/.github/workflows/nightly.yaml
+++ b/.github/workflows/nightly.yaml
@@ -23,12 +23,12 @@ jobs:
        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -26,7 +26,7 @@ jobs:
        uses: actions/checkout@v5.0.0

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v6
+        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@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@v2.3.3
+        uses: softprops/action-gh-release@v2.3.2
        with:
          files: |
            dist/*.whl
@@ -92,7 +92,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -107,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@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

@@ -121,7 +121,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v5.0.0
      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -136,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@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
--- a/.github/workflows/restrict-task-creation.yml
+++ b/.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@v8
+        uses: actions/github-script@v7
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v10.0.0
+        uses: actions/stale@v9.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
--- a/cast/src/media/entrypoint.ts
+++ b/cast/src/media/entrypoint.ts
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

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

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

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

 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
--- a/demo/src/html/index.html.template
+++ b/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 {
--- a/gallery/src/components/demo-more-info.ts
+++ b/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}
--- a/gallery/src/pages/components/ha-tooltip.markdown
+++ b/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)`)
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/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!
                      )
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/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);
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/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;
        }
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/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>
                  `
                )
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/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;
    }

--- a/hassio/src/update-available/update-available-dashboard.ts
+++ b/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`
--- a/landing-page/src/html/index.html.template
+++ b/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;
--- a/package.json
+++ b/package.json
@@ -26,15 +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",
+    "@codemirror/view": "6.38.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -51,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",
@@ -84,12 +84,13 @@
    "@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",
@@ -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.2",
+    "@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",
@@ -203,7 +204,7 @@
    "husky": "9.1.7",
    "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",
@@ -233,7 +234,8 @@
    "@fullcalendar/daygrid": "6.1.19",
    "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"
 }
--- a/prettier.config.js
+++ b/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
-      },
-    },
-  ],
 };
--- a/pyproject.toml
+++ b/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"
--- a/src/common/entity/color/battery_color.ts
+++ b/src/common/entity/color/battery_color.ts
@@ -1,13 +1,15 @@
-export const batteryStateColor = (state: string): string | undefined => {
+export const batteryStateColorProperty = (
+  state: string
+): string | undefined => {
  const value = Number(state);
  if (isNaN(value)) {
    return undefined;
  }
  if (value >= 70) {
-    return "var(--state-sensor-battery-high-color)";
+    return "--state-sensor-battery-high-color";
  }
  if (value >= 30) {
-    return "var(--state-sensor-battery-medium-color)";
+    return "--state-sensor-battery-medium-color";
  }
-  return "var(--state-sensor-battery-low-color)";
+  return "--state-sensor-battery-low-color";
 };
--- a/src/common/entity/entity_filter.ts
+++ b/src/common/entity/entity_filter.ts
@@ -67,7 +67,10 @@ export const generateEntityFilter = (
    }

    if (floors) {
-      if (!floor || !floors.has(floor.floor_id)) {
+      if (!floor) {
+        return false;
+      }
+      if (!floors) {
        return false;
      }
    }
--- a/src/common/entity/state_active.ts
+++ b/src/common/entity/state_active.ts
@@ -5,15 +5,12 @@ import { computeDomain } from "./compute_domain";
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
  const domain = computeDomain(stateObj.entity_id);
  const compareState = state !== undefined ? state : stateObj?.state;
-  return domainStateActive(domain, compareState);
-}

-export function domainStateActive(domain: string, state: string) {
  if (["button", "event", "input_button", "scene"].includes(domain)) {
-    return state !== UNAVAILABLE;
+    return compareState !== UNAVAILABLE;
  }

-  if (isUnavailableState(state)) {
+  if (isUnavailableState(compareState)) {
    return false;
  }

@@ -21,40 +18,40 @@ export function domainStateActive(domain: string, state: string) {
  // such as "alert" where "off" is still a somewhat active state and
  // therefore gets a custom color and "idle" is instead the state that
  // matches what most other domains consider inactive.
-  if (state === OFF && domain !== "alert") {
+  if (compareState === OFF && domain !== "alert") {
    return false;
  }

  // Custom cases
  switch (domain) {
    case "alarm_control_panel":
-      return state !== "disarmed";
+      return compareState !== "disarmed";
    case "alert":
      // "on" and "off" are active, as "off" just means alert was acknowledged but is still active
-      return state !== "idle";
+      return compareState !== "idle";
    case "cover":
-      return state !== "closed";
+      return compareState !== "closed";
    case "device_tracker":
    case "person":
-      return state !== "not_home";
+      return compareState !== "not_home";
    case "lawn_mower":
-      return ["mowing", "error"].includes(state);
+      return ["mowing", "error"].includes(compareState);
    case "lock":
-      return state !== "locked";
+      return compareState !== "locked";
    case "media_player":
-      return state !== "standby";
+      return compareState !== "standby";
    case "vacuum":
-      return !["idle", "docked", "paused"].includes(state);
+      return !["idle", "docked", "paused"].includes(compareState);
    case "valve":
-      return state !== "closed";
+      return compareState !== "closed";
    case "plant":
-      return state === "problem";
+      return compareState === "problem";
    case "group":
-      return ["on", "home", "open", "locked", "problem"].includes(state);
+      return ["on", "home", "open", "locked", "problem"].includes(compareState);
    case "timer":
-      return state === "active";
+      return compareState === "active";
    case "camera":
-      return state === "streaming";
+      return compareState === "streaming";
  }

  return true;
--- a/src/common/entity/state_color.ts
+++ b/src/common/entity/state_color.ts
@@ -1,11 +1,13 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
+import { UNAVAILABLE } from "../../data/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
+import { computeCssVariable } from "../../resources/css-variables";
 import { slugify } from "../string/slugify";
-import { batteryStateColor } from "./color/battery_color";
+import { batteryStateColorProperty } from "./color/battery_color";
 import { computeDomain } from "./compute_domain";
-import { domainStateActive } from "./state_active";
+import { stateActive } from "./state_active";

 const STATE_COLORED_DOMAIN = new Set([
  "alarm_control_panel",
@@ -40,20 +42,73 @@ const STATE_COLORED_DOMAIN = new Set([
  "water_heater",
 ]);

-export const stateColor = (
-  element: HTMLElement | CSSStyleDeclaration,
+export const stateColorCss = (stateObj: HassEntity, state?: string) => {
+  const compareState = state !== undefined ? state : stateObj?.state;
+  if (compareState === UNAVAILABLE) {
+    return `var(--state-unavailable-color)`;
+  }
+
+  const properties = stateColorProperties(stateObj, state);
+  if (properties) {
+    return computeCssVariable(properties);
+  }
+
+  return undefined;
+};
+
+export const domainStateColorProperties = (
+  domain: string,
  stateObj: HassEntity,
  state?: string
+): string[] => {
+  const compareState = state !== undefined ? state : stateObj.state;
+  const active = stateActive(stateObj, state);
+
+  return domainColorProperties(
+    domain,
+    stateObj.attributes.device_class,
+    compareState,
+    active
+  );
+};
+
+export const domainColorProperties = (
+  domain: string,
+  deviceClass: string | undefined,
+  state: string,
+  active: boolean
 ) => {
+  const properties: string[] = [];
+
+  const stateKey = slugify(state, "_");
+  const activeKey = active ? "active" : "inactive";
+
+  if (deviceClass) {
+    properties.push(`--state-${domain}-${deviceClass}-${stateKey}-color`);
+  }
+
+  properties.push(
+    `--state-${domain}-${stateKey}-color`,
+    `--state-${domain}-${activeKey}-color`,
+    `--state-${activeKey}-color`
+  );
+
+  return properties;
+};
+
+export const stateColorProperties = (
+  stateObj: HassEntity,
+  state?: string
+): string[] | undefined => {
+  const compareState = state !== undefined ? state : stateObj?.state;
  const domain = computeDomain(stateObj.entity_id);
  const dc = stateObj.attributes.device_class;
-  const compareState = state !== undefined ? state : stateObj.state;

  // Special rules for battery coloring
  if (domain === "sensor" && dc === "battery") {
-    const property = batteryStateColor(compareState);
+    const property = batteryStateColorProperty(compareState);
    if (property) {
-      return property;
+      return [property];
    }
  }

@@ -61,52 +116,17 @@ export const stateColor = (
  if (domain === "group") {
    const groupDomain = computeGroupDomain(stateObj as GroupEntity);
    if (groupDomain && STATE_COLORED_DOMAIN.has(groupDomain)) {
-      return domainStateColor(element, groupDomain, undefined, compareState);
+      return domainStateColorProperties(groupDomain, stateObj, state);
    }
  }

  if (STATE_COLORED_DOMAIN.has(domain)) {
-    return domainStateColor(element, domain, dc, compareState);
+    return domainStateColorProperties(domain, stateObj, state);
  }

  return undefined;
 };

-export const domainStateColor = (
-  element: HTMLElement | CSSStyleDeclaration,
-  domain: string,
-  deviceClass: string | undefined,
-  state: string
-) => {
-  const style =
-    element instanceof CSSStyleDeclaration
-      ? element
-      : getComputedStyle(element);
-
-  const stateKey = slugify(state, "_");
-
-  const active = domainStateActive(domain, state);
-  const activeKey = active ? "active" : "inactive";
-
-  const variables = [
-    `--state-${domain}-${stateKey}-color`,
-    `--state-${domain}-${activeKey}-color`,
-    `--state-${activeKey}-color`,
-  ];
-
-  if (deviceClass) {
-    variables.unshift(`--state-${domain}-${deviceClass}-${stateKey}-color`);
-  }
-
-  for (const variable of variables) {
-    const value = style.getPropertyValue(variable).trim();
-    if (value) {
-      return value;
-    }
-  }
-  return undefined;
-};
-
 export const stateColorBrightness = (stateObj: HassEntity): string => {
  if (
    stateObj.attributes.brightness &&
--- a/src/common/navigate.ts
+++ b/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 });
-};
--- a/src/components/chart/timeline-color.ts
+++ b/src/components/chart/timeline-color.ts
@@ -3,7 +3,7 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColor } from "../../common/entity/state_color";
+import { stateColorProperties } from "../../common/entity/state_color";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { computeCssValue } from "../../resources/css-variables";

@@ -30,16 +30,22 @@ function computeTimelineStateColor(
    return computeCssValue("--history-unknown-color", computedStyles);
  }

-  const color = stateColor(computedStyles, stateObj, state);
+  const properties = stateColorProperties(stateObj, state);

-  if (!color) return undefined;
+  if (!properties) {
+    return undefined;
+  }
+
+  const rgb = computeCssValue(properties, computedStyles);
+
+  if (!rgb) return undefined;

  const domain = computeDomain(stateObj.entity_id);
  const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
  if (!shade) {
-    return color;
+    return rgb;
  }
-  return lab2hex(labBrighten(rgb2lab(hex2rgb(color)), shade));
+  return lab2hex(labBrighten(rgb2lab(hex2rgb(rgb)), shade));
 }

 let colorIndex = 0;
--- a/src/components/data-table/ha-data-table-icon.ts
+++ b/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>
    `;
  }

--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -533,7 +533,11 @@ export class HaDataTable extends LitElement {
      return nothing;
    }
    if (row.append) {
-      return html`<div class="mdc-data-table__row">${row.content}</div>`;
+      return html`<div
+        class=${`mdc-data-table__row append${row.groupHeader ? " group-header" : ""}`}
+      >
+        ${row.content}
+      </div>`;
    }
    if (row.empty) {
      return html`<div class="mdc-data-table__row empty-row"></div>`;
@@ -768,8 +772,9 @@ export class HaDataTable extends LitElement {
            groupedItems.push({
              append: true,
              selectable: false,
+              groupHeader: true,
              content: html`<div
-                class="mdc-data-table__cell group-header"
+                class="mdc-data-table__cell"
                role="cell"
                .group=${groupName}
                @click=${this._collapseGroup}
@@ -1071,12 +1076,18 @@ export class HaDataTable extends LitElement {
          display: flex;
          height: var(--data-table-row-height, 52px);
          width: var(--table-row-width, 100%);
+          box-sizing: border-box;
+          padding-left: var(--data-row-padding-left);
+          padding-right: var(--data-row-padding-right);
        }

        .mdc-data-table__row.empty-row {
-          height: var(
-            --data-table-empty-row-height,
-            var(--data-table-row-height, 52px)
+          height: calc(
+            var(
+                --data-table-empty-row-height,
+                var(--data-table-row-height, 52px)
+              ) +
+              var(--safe-area-inset-bottom)
          );
        }

@@ -1103,6 +1114,9 @@ export class HaDataTable extends LitElement {
          display: flex;
          border-bottom: 1px solid var(--divider-color);
          overflow: auto;
+          box-sizing: border-box;
+          padding-left: var(--data-row-padding-left);
+          padding-right: var(--data-row-padding-right);
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
@@ -1305,6 +1319,10 @@ export class HaDataTable extends LitElement {
        /* custom from here */

        .group-header {
+          background-color: var(--primary-background-color);
+        }
+
+        .group-header .mdc-data-table__cell {
          padding-top: 12px;
          height: var(--data-table-row-height, 52px);
          padding-left: 12px;
@@ -1315,7 +1333,6 @@ export class HaDataTable extends LitElement {
          display: flex;
          align-items: center;
          cursor: pointer;
-          background-color: var(--primary-background-color);
        }

        .group-header ha-icon-button {
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -9,7 +9,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
  stateColorBrightness,
-  stateColor,
+  stateColorCss,
 } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -148,7 +148,7 @@ export class StateBadge extends LitElement {
          // Externally provided overriding color wins over state color
          iconStyle.color = this.color;
        } else if (this._stateColor) {
-          const color = stateColor(this, stateObj);
+          const color = stateColorCss(stateObj);
          if (color) {
            iconStyle.color = color;
          }
@@ -169,8 +169,7 @@ export class StateBadge extends LitElement {
          if (stateObj.attributes.hvac_action) {
            const hvacAction = stateObj.attributes.hvac_action;
            if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-              iconStyle.color = stateColor(
-                this,
+              iconStyle.color = stateColorCss(
                stateObj,
                CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
              )!;
--- a/src/components/entity/state-info.ts
+++ b/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>`;
--- a/src/components/ha-analytics.ts
+++ b/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>
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -25,8 +25,6 @@ export class HaAutomationRow extends LitElement {
  @property({ type: Boolean, reflect: true, attribute: "building-block" })
  public buildingBlock = false;

-  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
-
  @query(".row")
  private _rowElement?: HTMLDivElement;

@@ -80,8 +78,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 +130,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);
@@ -173,20 +168,9 @@ export class HaAutomationRow extends LitElement {
      margin: 0 12px;
    }
    :host([sort-selected]) .row {
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
-    }
-    .row:hover {
-      background-color: rgba(var(--rgb-primary-text-color), 0.04);
-    }
-    :host([highlight]) .row {
-      background-color: rgba(var(--rgb-primary-color), 0.08);
-    }
-    :host([highlight]) .row:hover {
-      background-color: rgba(var(--rgb-primary-color), 0.16);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
    }
  `;
 }
@@ -199,8 +183,5 @@ declare global {
  interface HASSDomEvents {
    "toggle-collapsed": undefined;
    "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
  }
 }
--- a/src/components/ha-bottom-sheet.ts
+++ b/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;
-    }
-    wa-drawer::part(body) {
-      padding-bottom: var(--safe-area-inset-bottom);
+
+    dialog.show {
+      transform: translateY(0);
    }
  `;
 }
@@ -65,4 +262,8 @@ declare global {
  interface HTMLElementTagNameMap {
    "ha-bottom-sheet": HaBottomSheet;
  }
+
+  interface HASSDomEvents {
+    "bottom-sheet-closed": undefined;
+  }
 }
--- a/src/components/ha-button-group.ts
+++ b/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;
+  }
+}
--- a/src/components/ha-button-toggle-group.ts
+++ b/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
@@ -37,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}
@@ -58,7 +55,7 @@ export class HaButtonToggleGroup extends LitElement {
                : button.label}
            </ha-button>`
        )}
-      </wa-button-group>
+      </ha-button-group>
    `;
  }

--- a/src/components/ha-button.ts
+++ b/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;
        }
      `,
    ];
--- a/src/components/ha-control-slider.ts
+++ b/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;
--- a/src/components/ha-dialog.ts
+++ b/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;
--- a/src/components/ha-fade-in.ts
+++ b/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")
--- a/src/components/ha-form/ha-form-expandable.ts
+++ b/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;
  }
 }
--- a/src/components/ha-header-bar.ts
+++ b/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;
--- a/src/components/ha-help-tooltip.ts
+++ b/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>
    `;
  }
--- a/src/components/ha-icon-overflow-menu.ts
+++ b/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>`
            )}
          `}
    `;
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -393,13 +393,10 @@ export class HaItemDisplayEditor extends LitElement {
      --md-list-item-one-line-container-height: 48px;
    }
    ha-md-list-item.drag-selected {
-      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
      border-radius: 8px;
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
    }
    ha-md-list-item ha-icon-button {
      margin-left: -12px;
--- a/src/components/ha-md-dialog.ts
+++ b/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"]) {
--- a/src/components/ha-progress-ring.ts
+++ b/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);

--- a/src/components/ha-related-items.ts
+++ b/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";
@@ -267,9 +266,7 @@ export class HaRelatedItems extends LitElement {
                  <a href="/config/devices/device/${relatedDeviceId}">
                    <ha-list-item hasMeta graphic="icon">
                      <ha-svg-icon
-                        .path=${device.entry_type === "service"
-                          ? mdiTransitConnectionVariant
-                          : mdiDevices}
+                        .path=${mdiDevices}
                        slot="graphic"
                      ></ha-svg-icon>
                      ${device.name_by_user || device.name}
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/src/components/ha-resizable-bottom-sheet.ts
@@ -1,271 +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);
-      max-width: 100%;
-      border: none;
-      box-shadow: var(--wa-shadow-l);
-      padding: 0;
-      margin: 0;
-      top: auto;
-      inset-inline-end: auto;
-      bottom: 0;
-      inset-inline-start: 0;
-      box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
-      border-top-left-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      border-top-right-radius: var(
-        --ha-dialog-border-radius,
-        var(--ha-border-radius-2xl)
-      );
-      transform: translateY(100%);
-      transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
-      border-top-width: var(--ha-bottom-sheet-border-width);
-      border-right-width: var(--ha-bottom-sheet-border-width);
-      border-left-width: var(--ha-bottom-sheet-border-width);
-      border-bottom-width: 0;
-      border-style: var(--ha-bottom-sheet-border-style);
-      border-color: var(--ha-bottom-sheet-border-color);
-    }
-
-    dialog.show {
-      transform: translateY(0);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-resizable-bottom-sheet": HaResizableBottomSheet;
-  }
-
-  interface HASSDomEvents {
-    "bottom-sheet-closed": undefined;
-  }
-}
--- a/src/components/ha-sidebar.ts
+++ b/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: calc(var(--header-height) + var(--safe-area-inset-top));
          box-sizing: border-box;
          display: flex;
          padding: 0 4px;
@@ -726,16 +725,13 @@ 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);
+          padding-top: var(--safe-area-inset-top);
        }
        :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);
@@ -760,15 +756,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {

        ha-fade-in,
        ha-md-list {
+          padding: 4px 0;
+          box-sizing: border-box;
          height: calc(
-            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
-              132px - var(--safe-area-inset-bottom, 0px)
+            100% - var(--header-height) - var(--safe-area-inset-top) -
+              132px - var(--safe-area-inset-bottom)
          );
        }

        ha-fade-in {
-          padding: 4px 0;
-          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
@@ -777,7 +773,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-md-list {
          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 +793,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 {
--- a/src/components/ha-sortable.ts
+++ b/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
--- a/src/components/ha-spinner.ts
+++ b/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,
--- a/src/components/ha-tab-group-tab.ts
+++ b/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;
-  }
-}
--- a/src/components/ha-tab-group.ts
+++ b/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;
-  }
-}
--- a/src/components/ha-target-picker.ts
+++ b/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;
    }

--- a/src/components/ha-tooltip.ts
+++ b/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 {
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -8,17 +8,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
  static override styles = [
    styles,
    css`
-      header {
-        padding-top: var(--safe-area-inset-top);
-      }
      .mdc-top-app-bar__row {
        height: var(--header-height);
-        padding-left: var(--safe-area-content-inset-left);
-        padding-right: var(--safe-area-content-inset-right);
        border-bottom: var(--app-header-border-bottom);
      }
      .mdc-top-app-bar--fixed-adjust {
-        padding-top: 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);
@@ -27,9 +22,6 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
          --app-header-background-color,
          var(--mdc-theme-primary)
        );
-        padding-top: var(--safe-area-inset-top);
-        padding-left: var(--safe-area-inset-left);
-        padding-right: var(--safe-area-inset-right);
      }
      .mdc-top-app-bar__title {
        font-size: var(--ha-font-size-xl);
--- a/src/components/ha-top-app-bar.ts
+++ b/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);
      }
    `,
  ];
--- a/src/components/ha-two-pane-top-app-bar-fixed.ts
+++ b/src/components/ha-two-pane-top-app-bar-fixed.ts
@@ -244,15 +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(--safe-area-inset-top) + var(--header-height));
+        padding-top: var(--header-height);
      }
      .shadow-container {
        position: absolute;
@@ -277,9 +274,6 @@ export class TopAppBarBaseBase extends BaseElement {
          --app-header-background-color,
          var(--mdc-theme-primary)
        );
-        padding-top: var(--safe-area-inset-top);
-        padding-left: var(--safe-area-inset-left);
-        padding-right: var(--safe-area-inset-right);
      }
      .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
        box-shadow: none;
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -642,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>
    `;
--- a/src/components/sl-tab-group.ts
+++ b/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;
+  }
+}
--- a/src/components/tile/ha-tile-icon.ts
+++ b/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;
--- a/src/data/ai_task.ts
+++ b/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 {
--- a/src/data/bluetooth.ts
+++ b/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
-  );
-};
--- a/src/data/data_entry_flow.ts
+++ b/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;
 }
--- a/src/data/graph.ts
+++ b/src/data/graph.ts
@@ -1 +1 @@
-export const strokeWidth = 2;
+export const strokeWidth = 5;
--- a/src/data/recorder.ts
+++ b/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;

--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/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 "";
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@@ -137,12 +137,6 @@ export interface FlowConfig {
    option: string
  ): string;

-  renderMenuOptionDescription(
-    hass: HomeAssistant,
-    step: DataEntryFlowStepMenu,
-    option: string
-  ): string;
-
  renderLoadingDescription(
    hass: HomeAssistant,
    loadingReason: LoadingReason,
--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@@ -225,13 +225,6 @@ export const showOptionsFlowDialog = (
        );
      },

-      renderMenuOptionDescription(hass, step, option) {
-        return hass.localize(
-          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
-          step.description_placeholders
-        );
-      },
-
      renderLoadingDescription(hass, reason) {
        return (
          hass.localize(`component.${configEntry.domain}.options.loading`) ||
--- a/src/dialogs/config-flow/show-dialog-sub-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-sub-config-flow.ts
@@ -252,13 +252,6 @@ export const showSubConfigFlowDialog = (
      );
    },

-    renderMenuOptionDescription(hass, step, option) {
-      return hass.localize(
-        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
-        step.description_placeholders
-      );
-    },
-
    renderLoadingDescription(hass, reason, handler, step) {
      if (reason !== "loading_flow" && reason !== "loading_step") {
        return "";
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -27,9 +27,6 @@ import { showAlertDialog } from "../generic/show-dialog-box";
 import { showVoiceAssistantSetupDialog } from "../voice-assistant-setup/show-voice-assistant-setup-dialog";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
-import { showConfigFlowDialog } from "./show-dialog-config-flow";
-import { showOptionsFlowDialog } from "./show-dialog-options-flow";
-import { showSubConfigFlowDialog } from "./show-dialog-sub-config-flow";

@customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@@ -66,11 +63,6 @@ class StepFlowCreateEntry extends LitElement {
      return;
    }

-    if (this.step.next_flow && this.devices.length === 0) {
-      this._flowDone();
-      return;
-    }
-
    if (
      this.devices.length !== 1 ||
      this.devices[0].primary_config_entry !== this.step.result?.entry_id ||
@@ -181,13 +173,7 @@ class StepFlowCreateEntry extends LitElement {
      <div class="buttons">
        <ha-button @click=${this._flowDone}
          >${localize(
-            `ui.panel.config.integrations.config_flow.${
-              this.step.next_flow
-                ? "next"
-                : !this.devices.length || Object.keys(this._deviceUpdate).length
-                  ? "finish"
-                  : "finish_skip"
-            }`
+            `ui.panel.config.integrations.config_flow.${!this.devices.length || Object.keys(this._deviceUpdate).length ? "finish" : "finish_skip"}`
          )}</ha-button
        >
      </div>
@@ -251,37 +237,7 @@ class StepFlowCreateEntry extends LitElement {
    }

    fireEvent(this, "flow-update", { step: undefined });
-    if (this.step.next_flow) {
-      // start the next flow
-      if (this.step.next_flow[0] === "config_flow") {
-        showConfigFlowDialog(this, {
-          continueFlowId: this.step.next_flow[1],
-          navigateToResult: this.navigateToResult,
-        });
-      } else if (this.step.next_flow[0] === "options_flow") {
-        showOptionsFlowDialog(this, this.step.result!, {
-          continueFlowId: this.step.next_flow[1],
-          navigateToResult: this.navigateToResult,
-        });
-      } else if (this.step.next_flow[0] === "config_subentries_flow") {
-        showSubConfigFlowDialog(
-          this,
-          this.step.result!,
-          this.step.next_flow[0],
-          {
-            continueFlowId: this.step.next_flow[1],
-            navigateToResult: this.navigateToResult,
-          }
-        );
-      } else {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.error",
-            { error: `Unsupported next flow type: ${this.step.next_flow[0]}` }
-          ),
-        });
-      }
-    } else if (this.step.result && this.navigateToResult) {
+    if (this.step.result && this.navigateToResult) {
      if (this.devices.length === 1) {
        navigate(`/config/devices/device/${this.devices[0].id}`);
      } else {
--- a/src/dialogs/config-flow/step-flow-menu.ts
+++ b/src/dialogs/config-flow/step-flow-menu.ts
@@ -1,5 +1,5 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+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 "../../components/ha-icon-next";
@@ -8,7 +8,6 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
-import { stringCompare } from "../../common/string/compare";

@customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -18,18 +17,9 @@ class StepFlowMenu extends LitElement {

  @property({ attribute: false }) public step!: DataEntryFlowStepMenu;

-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return (
-      changedProps.size > 1 ||
-      !changedProps.has("hass") ||
-      this.hass.localize !== changedProps.get("hass")?.localize
-    );
-  }
-
  protected render(): TemplateResult {
    let options: string[];
    let translations: Record<string, string>;
-    let optionDescriptions: Record<string, string> = {};

    if (Array.isArray(this.step.menu_options)) {
      options = this.step.menu_options;
@@ -40,36 +30,10 @@ class StepFlowMenu extends LitElement {
          this.step,
          option
        );
-        optionDescriptions[option] =
-          this.flowConfig.renderMenuOptionDescription(
-            this.hass,
-            this.step,
-            option
-          );
      }
    } else {
      options = Object.keys(this.step.menu_options);
      translations = this.step.menu_options;
-      optionDescriptions = Object.fromEntries(
-        options.map((key) => [
-          key,
-          this.flowConfig.renderMenuOptionDescription(
-            this.hass,
-            this.step,
-            key
-          ),
-        ])
-      );
-    }
-
-    if (this.step.sort) {
-      options = options.sort((a, b) =>
-        stringCompare(
-          translations[a]!,
-          translations[b]!,
-          this.hass.locale.language
-        )
-      );
    }

    const description = this.flowConfig.renderMenuDescription(
@@ -82,18 +46,8 @@ class StepFlowMenu extends LitElement {
      <div class="options">
        ${options.map(
          (option) => html`
-            <ha-list-item
-              hasMeta
-              .step=${option}
-              @click=${this._handleStep}
-              ?twoline=${optionDescriptions[option]}
-            >
+            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
              <span>${translations[option]}</span>
-              ${optionDescriptions[option]
-                ? html`<span slot="secondary">
-                    ${optionDescriptions[option]}
-                  </span>`
-                : nothing}
              <ha-icon-next slot="meta"></ha-icon-next>
            </ha-list-item>
          `
@@ -119,10 +73,11 @@ class StepFlowMenu extends LitElement {
    css`
      .options {
        margin-top: 20px;
-        margin-bottom: 16px;
+        margin-bottom: 8px;
      }
      .content {
        padding-bottom: 16px;
+        border-bottom: 1px solid var(--divider-color);
      }
      .content + .options {
        margin-top: 8px;
--- a/src/dialogs/dialog-list-items/dialog-list-items.ts
+++ b/src/dialogs/dialog-list-items/dialog-list-items.ts
@@ -1,7 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-bottom-sheet";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-icon";
 import "../../components/ha-md-list";
@@ -41,54 +40,6 @@ export class ListItemsDialog
      return nothing;
    }

-    const content = html`
-      <div class="container">
-        <ha-md-list>
-          ${this._params.items.map(
-            (item) => html`
-              <ha-md-list-item
-                type="button"
-                @click=${this._itemClicked}
-                .item=${item}
-              >
-                ${item.iconPath
-                  ? html`
-                      <ha-svg-icon
-                        .path=${item.iconPath}
-                        slot="start"
-                        class="item-icon"
-                      ></ha-svg-icon>
-                    `
-                  : item.icon
-                    ? html`
-                        <ha-icon
-                          icon=${item.icon}
-                          slot="start"
-                          class="item-icon"
-                        ></ha-icon>
-                      `
-                    : nothing}
-                <span class="headline">${item.label}</span>
-                ${item.description
-                  ? html`
-                      <span class="supporting-text">${item.description}</span>
-                    `
-                  : nothing}
-              </ha-md-list-item>
-            `
-          )}
-        </ha-md-list>
-      </div>
-    `;
-
-    if (this._params.mode === "bottom-sheet") {
-      return html`
-        <ha-bottom-sheet placement="bottom" open @closed=${this._dialogClosed}>
-          ${content}
-        </ha-bottom-sheet>
-      `;
-    }
-
    return html`
      <ha-dialog
        open
@@ -96,7 +47,43 @@ export class ListItemsDialog
        @closed=${this._dialogClosed}
        hideActions
      >
-        ${content}
+        <div class="container">
+          <ha-md-list>
+            ${this._params.items.map(
+              (item) => html`
+                <ha-md-list-item
+                  type="button"
+                  @click=${this._itemClicked}
+                  .item=${item}
+                >
+                  ${item.iconPath
+                    ? html`
+                        <ha-svg-icon
+                          .path=${item.iconPath}
+                          slot="start"
+                          class="item-icon"
+                        ></ha-svg-icon>
+                      `
+                    : item.icon
+                      ? html`
+                          <ha-icon
+                            icon=${item.icon}
+                            slot="start"
+                            class="item-icon"
+                          ></ha-icon>
+                        `
+                      : nothing}
+                  <span class="headline">${item.label}</span>
+                  ${item.description
+                    ? html`
+                        <span class="supporting-text">${item.description}</span>
+                      `
+                    : nothing}
+                </ha-md-list-item>
+              `
+            )}
+          </ha-md-list>
+        </div>
      </ha-dialog>
    `;
  }
--- a/src/dialogs/dialog-list-items/show-list-items-dialog.ts
+++ b/src/dialogs/dialog-list-items/show-list-items-dialog.ts
@@ -11,7 +11,6 @@ interface ListItem {
 export interface ListItemsDialogParams {
  title?: string;
  items: ListItem[];
-  mode?: "dialog" | "bottom-sheet";
 }

 export const showListItemsDialog = (
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -3,11 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import "../../components/ha-dialog-header";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
+import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
+import "../../components/ha-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
@@ -52,7 +52,7 @@ class DialogBox extends LitElement {
      return nothing;
    }

-    const confirmPrompt = this._params.confirmation || !!this._params.prompt;
+    const confirmPrompt = this._params.confirmation || this._params.prompt;

    const dialogTitle =
      this._params.title ||
@@ -62,7 +62,7 @@ class DialogBox extends LitElement {
    return html`
      <ha-md-dialog
        open
-        .disableCancelAction=${confirmPrompt}
+        .disableCancelAction=${confirmPrompt || false}
        @closed=${this._dialogClosed}
        type="alert"
        aria-labelledby="dialog-box-title"
@@ -100,22 +100,23 @@ class DialogBox extends LitElement {
            : ""}
        </div>
        <div slot="actions">
-          ${confirmPrompt
-            ? html`
-                <ha-button
-                  @click=${this._dismiss}
-                  ?autofocus=${!this._params.prompt && this._params.destructive}
-                  appearance="plain"
-                >
-                  ${this._params.dismissText
-                    ? this._params.dismissText
-                    : this.hass.localize("ui.common.cancel")}
-                </ha-button>
-              `
-            : nothing}
+          ${confirmPrompt &&
+          html`
+            <ha-button
+              @click=${this._dismiss}
+              ?dialogInitialFocus=${!this._params.prompt &&
+              this._params.destructive}
+              appearance="plain"
+            >
+              ${this._params.dismissText
+                ? this._params.dismissText
+                : this.hass.localize("ui.common.cancel")}
+            </ha-button>
+          `}
          <ha-button
            @click=${this._confirm}
-            ?autofocus=${!this._params.prompt && !this._params.destructive}
+            ?dialogInitialFocus=${!this._params.prompt &&
+            !this._params.destructive}
            variant=${this._params.destructive ? "danger" : "brand"}
          >
            ${this._params.confirmText
--- a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
@@ -10,7 +10,7 @@ import {
  temperature2rgb,
 } from "../../../../common/color/convert-light-color";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stateColor } from "../../../../common/entity/state_color";
+import { stateColorCss } from "../../../../common/entity/state_color";
 import { throttle } from "../../../../common/util/throttle";
 import "../../../../components/ha-control-slider";
 import { UNAVAILABLE } from "../../../../data/entity";
@@ -66,7 +66,7 @@ class LightColorTempPicker extends LitElement {
      this.stateObj.attributes.max_color_temp_kelvin ?? DEFAULT_MAX_KELVIN;

    const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
-    const color = stateColor(this, this.stateObj);
+    const color = stateColorCss(this.stateObj);

    return html`
      <ha-control-slider
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { stateColor } from "../../../common/entity/state_color";
+import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-state-icon";
 import type { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
@@ -32,7 +32,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
      return nothing;
    }

-    const color = stateColor(this, this.stateObj);
+    const color = stateColorCss(this.stateObj);
    const style = {
      "--icon-color": color,
    };
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -3,7 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { stateColor } from "../../../common/entity/state_color";
+import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-control-button";
@@ -82,7 +82,7 @@ class MoreInfoLock extends LitElement {

    const supportsOpen = supportsFeature(this.stateObj, LockEntityFeature.OPEN);

-    const color = stateColor(this, this.stateObj);
+    const color = stateColorCss(this.stateObj);
    const style = {
      "--state-color": color,
    };
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -475,6 +475,7 @@ class MoreInfoUpdate extends LitElement {
      bottom: 0;
      margin: 0 -24px 0 -24px;
      margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
+      padding-bottom: var(--safe-area-inset-bottom);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -3,18 +3,14 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
-import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
-import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-tab-group";
-import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-tooltip";
+import "../../../components/sl-tab-group";
 import type {
  ForecastEvent,
  ModernForecastType,
@@ -32,6 +28,7 @@ import {
  weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
+import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";

@customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -166,36 +163,37 @@ class MoreInfoWeather extends LitElement {
              ${this.hass.formatEntityState(this.stateObj)}
            </div>
            <div class="time-ago">
-              <ha-relative-time
-                id="relative-time"
-                .hass=${this.hass}
-                .datetime=${this.stateObj.last_changed}
-                capitalize
-              ></ha-relative-time>
-              <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>
            </div>
@@ -294,101 +292,106 @@ class MoreInfoWeather extends LitElement {
            </div>
          `
        : nothing}
-
-      <div class="section">
-        ${this.hass.localize("ui.card.weather.forecast")}:
-      </div>
-      ${supportedForecasts?.length > 1
-        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
-            ${supportedForecasts.map(
-              (forecastType) =>
-                html`<ha-tab-group-tab
-                  slot="nav"
-                  .panel=${forecastType}
-                  .active=${this._forecastType === forecastType}
+      ${forecast
+        ? html`
+            <div class="section">
+              ${this.hass.localize("ui.card.weather.forecast")}:
+            </div>
+            ${supportedForecasts.length > 1
+              ? html`<sl-tab-group
+                  @sl-tab-show=${this._handleForecastTypeChanged}
                >
-                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                </ha-tab-group-tab>`
-            )}
-          </ha-tab-group>`
-        : nothing}
-      <div class="forecast">
-        ${forecast?.length
-          ? forecast.map((item) =>
-              this._showValue(item.templow) || this._showValue(item.temperature)
-                ? html`
-                    <div>
+                  ${supportedForecasts.map(
+                    (forecastType) =>
+                      html`<sl-tab
+                        slot="nav"
+                        .panel=${forecastType}
+                        .active=${this._forecastType === forecastType}
+                      >
+                        ${this.hass!.localize(
+                          `ui.card.weather.${forecastType}`
+                        )}
+                      </sl-tab>`
+                  )}
+                </sl-tab-group>`
+              : nothing}
+            <div class="forecast">
+              ${forecast.map((item) =>
+                this._showValue(item.templow) ||
+                this._showValue(item.temperature)
+                  ? html`
                      <div>
-                        ${dayNight
-                          ? html`
-                              ${formatDateWeekdayShort(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
-                              <div class="daynight">
-                                ${item.is_daytime !== false
-                                  ? this.hass!.localize("ui.card.weather.day")
-                                  : this.hass!.localize(
-                                      "ui.card.weather.night"
-                                    )}<br />
-                              </div>
-                            `
-                          : hourly
+                        <div>
+                          ${dayNight
                            ? html`
-                                ${formatTime(
-                                  new Date(item.datetime),
-                                  this.hass!.locale,
-                                  this.hass!.config
-                                )}
-                              `
-                            : html`
                                ${formatDateWeekdayShort(
                                  new Date(item.datetime),
                                  this.hass!.locale,
                                  this.hass!.config
                                )}
-                              `}
-                      </div>
-                      ${this._showValue(item.condition)
-                        ? html`
-                            <div class="forecast-image-icon">
-                              ${getWeatherStateIcon(
-                                item.condition!,
-                                this,
-                                !(
-                                  item.is_daytime ||
-                                  item.is_daytime === undefined
-                                )
-                              )}
-                            </div>
-                          `
-                        : nothing}
-                      <div class="temp">
-                        ${this._showValue(item.temperature)
-                          ? html`${formatNumber(
-                              item.temperature,
-                              this.hass!.locale
-                            )}°`
-                          : "—"}
-                      </div>
-                      <div class="templow">
-                        ${this._showValue(item.templow)
-                          ? html`${formatNumber(
-                              item.templow!,
-                              this.hass!.locale
-                            )}°`
-                          : hourly
-                            ? nothing
+                                <div class="daynight">
+                                  ${item.is_daytime !== false
+                                    ? this.hass!.localize("ui.card.weather.day")
+                                    : this.hass!.localize(
+                                        "ui.card.weather.night"
+                                      )}<br />
+                                </div>
+                              `
+                            : hourly
+                              ? html`
+                                  ${formatTime(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `
+                              : html`
+                                  ${formatDateWeekdayShort(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `}
+                        </div>
+                        ${this._showValue(item.condition)
+                          ? html`
+                              <div class="forecast-image-icon">
+                                ${getWeatherStateIcon(
+                                  item.condition!,
+                                  this,
+                                  !(
+                                    item.is_daytime ||
+                                    item.is_daytime === undefined
+                                  )
+                                )}
+                              </div>
+                            `
+                          : nothing}
+                        <div class="temp">
+                          ${this._showValue(item.temperature)
+                            ? html`${formatNumber(
+                                item.temperature,
+                                this.hass!.locale
+                              )}°`
                            : "—"}
+                        </div>
+                        <div class="templow">
+                          ${this._showValue(item.templow)
+                            ? html`${formatNumber(
+                                item.templow!,
+                                this.hass!.locale
+                              )}°`
+                            : hourly
+                              ? nothing
+                              : "—"}
+                        </div>
                      </div>
-                    </div>
-                  `
-                : nothing
-            )
-          : html`<ha-spinner size="medium"></ha-spinner>`}
-      </div>
-
+                    `
+                  : nothing
+              )}
+            </div>
+          `
+        : nothing}
      ${this.stateObj.attributes.attribution
        ? html`
            <div class="attribution">
@@ -419,11 +422,11 @@ class MoreInfoWeather extends LitElement {
          font-size: 1.2em;
        }

-        ha-tab-group-tab {
+        sl-tab {
          flex: 1;
        }

-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
@@ -586,10 +589,6 @@ class MoreInfoWeather extends LitElement {
        .forecast-icon {
          --mdc-icon-size: 40px;
        }
-
-        .forecast ha-spinner {
-          height: 120px;
-        }
      `,
    ];
  }
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -8,7 +8,6 @@ import {
  mdiPencil,
  mdiPencilOff,
  mdiPencilOutline,
-  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -312,8 +311,6 @@ export class MoreInfoDialog extends LitElement {
    const isAdmin = this.hass.user!.is_admin;

    const deviceId = this._getDeviceId();
-    const deviceType =
-      (deviceId && this.hass.devices[deviceId].entry_type) || "device";

    const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
    const isSpecificInitialView =
@@ -437,18 +434,11 @@ export class MoreInfoDialog extends LitElement {
                                @request-selected=${this._goToDevice}
                              >
                                ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.device_or_service_info",
-                                  {
-                                    type: this.hass.localize(
-                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
-                                    ),
-                                  }
+                                  "ui.dialogs.more_info_control.device_info"
                                )}
                                <ha-svg-icon
                                  slot="graphic"
-                                  .path=${deviceType === "service"
-                                    ? mdiTransitConnectionVariant
-                                    : mdiDevices}
+                                  .path=${mdiDevices}
                                ></ha-svg-icon>
                              </ha-list-item>
                            `
@@ -661,10 +651,7 @@ export class MoreInfoDialog extends LitElement {
        ha-dialog {
          /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
          --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: max(
-            40px,
-            var(--safe-area-inset-top, 0px)
-          );
+          --dialog-surface-margin-top: 40px;
          --dialog-content-padding: 0;
        }

--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement {
    );
    this.style.setProperty(
      "--mdc-drawer-width",
-      `min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))`
+      narrow ? window.innerWidth + "px" : "500px"
    );
    this._open = true;
  }
@@ -152,40 +152,24 @@ export class HuiNotificationDrawer extends LitElement {
    ha-header-bar {
      --mdc-theme-on-primary: var(--primary-text-color);
      --mdc-theme-primary: var(--primary-background-color);
-      --header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
-        var(--safe-area-inset-left, 0px);
      border-bottom: 1px solid var(--divider-color);
      display: block;
    }

-    @media all and (max-width: 450px), all and (max-height: 500px) {
-      ha-header-bar {
-        --header-bar-padding: var(--safe-area-inset-top, 0px)
-          var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
-      }
-    }
-
    .notifications {
      overflow-y: auto;
      padding-top: 16px;
-      padding-left: var(--safe-area-inset-left, 0px);
-      padding-inline-start: var(--safe-area-inset-left, 0px);
-      padding-bottom: var(--safe-area-inset-bottom, 0px);
-      height: calc(
-        100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
-      );
+      padding-left: var(--safe-area-inset-left);
+      padding-right: var(--safe-area-inset-right);
+      padding-inline-start: var(--safe-area-inset-left);
+      padding-inline-end: var(--safe-area-inset-right);
+      padding-bottom: var(--safe-area-inset-bottom);
+      height: calc(100% - 1px - var(--header-height));
      box-sizing: border-box;
      background-color: var(--primary-background-color);
      color: var(--primary-text-color);
    }

-    @media all and (max-width: 450px), all and (max-height: 500px) {
-      .notifications {
-        padding-right: var(--safe-area-inset-right, 0px);
-        padding-inline-end: var(--safe-area-inset-right, 0px);
-      }
-    }
-
    .notification {
      padding: 0 16px 16px;
    }
--- a/src/dialogs/notifications/persistent-notification-item.ts
+++ b/src/dialogs/notifications/persistent-notification-item.ts
@@ -28,14 +28,15 @@ export class HuiPersistentNotificationItem extends LitElement {

        <div class="time">
          <span>
-            <ha-relative-time
-              id="relative-time"
-              .hass=${this.hass}
-              .datetime=${this.notification.created_at}
-              capitalize
-            ></ha-relative-time>
-            <ha-tooltip for="relative-time" placement="bottom">
-              ${this._computeTooltip(this.hass, this.notification)}
+            <ha-tooltip
+              .content=${this._computeTooltip(this.hass, this.notification)}
+              placement="bottom"
+            >
+              <ha-relative-time
+                .hass=${this.hass}
+                .datetime=${this.notification.created_at}
+                capitalize
+              ></ha-relative-time>
            </ha-tooltip>
          </span>
        </div>
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -281,11 +281,11 @@ export class QuickBar extends LitElement {
                        class="ha-scrollbar"
                        style=${styleMap({
                          height: this._narrow
-                            ? "calc(100vh - 56px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
-                            : `calc(${Math.min(
+                            ? "calc(100vh - 56px)"
+                            : `${Math.min(
                                items.length * (commandMode ? 56 : 72) + 26,
                                500
-                              )}px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))`,
+                              )}px`,
                        })}
                        .items=${items}
                        .renderItem=${this._renderItem}
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@@ -1,148 +1,121 @@
-import { mdiAppleKeyboardCommand } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { LocalizeKeys } from "../../common/translations/localize";
-import "../../components/ha-alert";
+import "../../components/ha-button";
 import { createCloseHeading } from "../../components/ha-dialog";
-import "../../components/ha-svg-icon";
-import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { isMac } from "../../util/is_mac";
+import { haStyleDialog } from "../../resources/styles";
+import "../../components/ha-alert";
+import "../../components/chips/ha-assist-chip";
+import type { LocalizeKeys } from "../../common/translations/localize";

 interface Text {
-  textTranslationKey: LocalizeKeys;
+  type: "text";
+  key: LocalizeKeys;
 }

-interface LocalizedShortcut {
-  shortcutTranslationKey: LocalizeKeys;
-}
-
-type ShortcutString = string | LocalizedShortcut;
+type ShortcutString = string | { key: LocalizeKeys };

 interface Shortcut {
+  type: "shortcut";
  shortcut: ShortcutString[];
-  descriptionTranslationKey: LocalizeKeys;
+  key: LocalizeKeys;
 }

 interface Section {
-  titleTranslationKey: LocalizeKeys;
+  key: LocalizeKeys;
  items: (Text | Shortcut)[];
 }

-const CTRL_CMD = "__CTRL_CMD__";
-
 const _SHORTCUTS: Section[] = [
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.searching.title",
+    key: "ui.dialogs.shortcuts.searching.title",
    items: [
+      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
      {
-        textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page",
-      },
-      {
+        type: "shortcut",
        shortcut: ["C"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_command",
+        key: "ui.dialogs.shortcuts.searching.search_command",
      },
      {
+        type: "shortcut",
        shortcut: ["E"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_entities",
+        key: "ui.dialogs.shortcuts.searching.search_entities",
      },
      {
+        type: "shortcut",
        shortcut: ["D"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_devices",
+        key: "ui.dialogs.shortcuts.searching.search_devices",
      },
      {
-        textTranslationKey:
-          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+        type: "text",
+        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
      },
      {
-        shortcut: [CTRL_CMD, "F"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_in_table",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
+        key: "ui.dialogs.shortcuts.searching.search_in_table",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.assist.title",
+    key: "ui.dialogs.shortcuts.assist.title",
    items: [
      {
+        type: "shortcut",
        shortcut: ["A"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist",
+        key: "ui.dialogs.shortcuts.assist.open_assist",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title",
+    key: "ui.dialogs.shortcuts.automation_script.title",
    items: [
      {
-        shortcut: [CTRL_CMD, "C"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.copy",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
+        key: "ui.dialogs.shortcuts.automation_script.paste",
      },
      {
-        shortcut: [CTRL_CMD, "X"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
-      },
-      {
-        shortcut: [
-          CTRL_CMD,
-          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
-        ],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.delete",
-      },
-      {
-        shortcut: [CTRL_CMD, "V"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.paste",
-      },
-      {
-        shortcut: [CTRL_CMD, "S"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.save",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
+        key: "ui.dialogs.shortcuts.automation_script.save",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.charts.title",
+    key: "ui.dialogs.shortcuts.charts.title",
    items: [
      {
+        type: "shortcut",
        shortcut: [
-          CTRL_CMD,
-          { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" },
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
      },
      {
+        type: "shortcut",
        shortcut: [
-          CTRL_CMD,
-          {
-            shortcutTranslationKey:
-              "ui.dialogs.shortcuts.shortcuts.scroll_wheel",
-          },
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
      },
      {
-        shortcut: [
-          {
-            shortcutTranslationKey:
-              "ui.dialogs.shortcuts.shortcuts.double_click",
-          },
-        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
+        key: "ui.dialogs.shortcuts.charts.double_click",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.other.title",
+    key: "ui.dialogs.shortcuts.other.title",
    items: [
      {
+        type: "shortcut",
        shortcut: ["M"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link",
+        key: "ui.dialogs.shortcuts.other.my_link",
      },
    ],
  },
@@ -164,28 +137,17 @@ class DialogShortcuts extends LitElement {
  }

  private _renderShortcut(
-    shortcutKeys: ShortcutString[],
-    descriptionKey: LocalizeKeys
+    shortcuts: ShortcutString[],
+    translationKey: LocalizeKeys
  ) {
+    const keys = shortcuts.map((shortcut) =>
+      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
+    );
+
    return html`
      <div class="shortcut">
-        ${shortcutKeys.map(
-          (shortcutKey) =>
-            html`<span
-              >${shortcutKey === CTRL_CMD
-                ? isMac
-                  ? html`<ha-svg-icon
-                      .path=${mdiAppleKeyboardCommand}
-                    ></ha-svg-icon>`
-                  : this.hass.localize("ui.panel.config.automation.editor.ctrl")
-                : typeof shortcutKey === "string"
-                  ? shortcutKey
-                  : this.hass.localize(
-                      shortcutKey.shortcutTranslationKey
-                    )}</span
-            >`
-        )}
-        ${this.hass.localize(descriptionKey)}
+        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
+        ${this.hass.localize(translationKey)}
      </div>
    `;
  }
@@ -209,18 +171,16 @@ class DialogShortcuts extends LitElement {
        <div class="content">
          ${_SHORTCUTS.map(
            (section) => html`
-              <h3>${this.hass.localize(section.titleTranslationKey)}</h3>
+              <h3>${this.hass.localize(section.key)}</h3>
              <div class="items">
                ${section.items.map((item) => {
-                  if ("shortcut" in item) {
-                    return this._renderShortcut(
-                      (item as Shortcut).shortcut,
-                      (item as Shortcut).descriptionTranslationKey
-                    );
+                  if (item.type === "text") {
+                    return html`<p>${this.hass.localize(item.key)}</p>`;
                  }
-                  return html`<p>
-                    ${this.hass.localize((item as Text).textTranslationKey)}
-                  </p>`;
+                  if (item.type === "shortcut") {
+                    return this._renderShortcut(item.shortcut, item.key);
+                  }
+                  return nothing;
                })}
              </div>
            `
@@ -272,10 +232,6 @@ class DialogShortcuts extends LitElement {
      .items p {
        margin-bottom: 8px;
      }
-
-      ha-svg-icon {
-        width: 12px;
-      }
    `,
  ];
 }
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -35,7 +35,6 @@
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
-        padding-top: var(--safe-area-inset-top);
      }

      .header img {
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -44,7 +44,7 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-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 {
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.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;
@@ -33,7 +32,6 @@
        justify-content: flex-start;
        margin-bottom: 32px;
        margin-left: 32px;
-        padding-top: var(--safe-area-inset-top);
      }

      .header img {
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-button";
 import "../components/ha-menu-button";
@@ -51,7 +50,7 @@ class HassErrorScreen extends LitElement {
  }

  private _handleBack(): void {
-    goBack();
+    history.back();
  }

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

  private _handleBack() {
-    goBack();
+    history.back();
  }

  static get styles(): CSSResultGroup {
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -2,7 +2,6 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import type { HomeAssistant } from "../types";
@@ -30,35 +29,31 @@ class HassSubpage extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="toolbar">
-        <div class="toolbar-content">
-          ${this.mainPage || history.state?.root
+        ${this.mainPage || history.state?.root
+          ? html`
+              <ha-menu-button
+                .hassio=${this.supervisor}
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+              ></ha-menu-button>
+            `
+          : this.backPath
            ? html`
-                <ha-menu-button
-                  .hassio=${this.supervisor}
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                ></ha-menu-button>
-              `
-            : this.backPath
-              ? html`
-                  <a href=${this.backPath}>
-                    <ha-icon-button-arrow-prev
-                      .hass=${this.hass}
-                    ></ha-icon-button-arrow-prev>
-                  </a>
-                `
-              : html`
+                <a href=${this.backPath}>
                  <ha-icon-button-arrow-prev
                    .hass=${this.hass}
-                    @click=${this._backTapped}
                  ></ha-icon-button-arrow-prev>
-                `}
+                </a>
+              `
+            : html`
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                  @click=${this._backTapped}
+                ></ha-icon-button-arrow-prev>
+              `}

-          <div class="main-title">
-            <slot name="header">${this.header}</slot>
-          </div>
-          <slot name="toolbar-icon"></slot>
-        </div>
+        <div class="main-title"><slot name="header">${this.header}</slot></div>
+        <slot name="toolbar-icon"></slot>
      </div>
      <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
        <slot></slot>
@@ -79,7 +74,7 @@ class HassSubpage extends LitElement {
      this.backCallback();
      return;
    }
-    goBack();
+    history.back();
  }

  static get styles(): CSSResultGroup {
@@ -100,26 +95,28 @@ class HassSubpage extends LitElement {
        }

        .toolbar {
-          background-color: var(--app-header-background-color);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .toolbar {
-          padding-left: var(--safe-area-inset-left);
-        }
-
-        .toolbar-content {
          display: flex;
          align-items: center;
          font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding: 8px 12px;
+          padding-top: max(8px, var(--safe-area-inset-top));
+          padding-right: max(12px, var(--safe-area-content-inset-right));
+          padding-left: max(12px, var(--safe-area-content-inset-left));
+          background-color: var(--app-header-background-color);
          font-weight: var(--ha-font-weight-normal);
          color: var(--app-header-text-color, white);
          border-bottom: var(--app-header-border-bottom, none);
          box-sizing: border-box;
-          padding: 8px 12px;
        }
-
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+            padding-top: max(4px, var(--safe-area-inset-top));
+            padding-right: max(4px, var(--safe-area-inset-right));
+            padding-left: max(4px, var(--safe-area-inset-left));
+          }
+        }
        .toolbar a {
          color: var(--sidebar-text-color);
          text-decoration: none;
@@ -149,7 +146,9 @@ class HassSubpage extends LitElement {
        .content {
          position: relative;
          width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          height: calc(
+            100% - 1px - var(--header-height) - var(--safe-area-inset-top)
+          );
          overflow-y: auto;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -697,14 +697,24 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      height: 100%;
    }

+    hass-tabs-subpage {
+      background: var(--data-table-background-color);
+      --tabs-subpage-content-padding-left: 0;
+      --tabs-subpage-content-padding-right: 0;
+    }
+
    ha-data-table {
      width: 100%;
      height: 100%;
      --data-table-border-width: 0;
+      --data-row-padding-left: var(--safe-area-inset-left);
+      --data-row-padding-right: var(--safe-area-inset-right);
    }
    :host(:not([narrow])) ha-data-table,
    .pane {
-      height: calc(100vh - 1px - var(--header-height));
+      height: calc(
+        100vh - 1px - var(--header-height) - var(--safe-area-inset-top)
+      );
      display: block;
    }

@@ -727,7 +737,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
      height: 56px;
      width: 100%;
      justify-content: space-between;
-      padding: 0 16px;
+      padding-left: max(16px, var(--safe-area-content-inset-left));
+      padding-right: max(16px, var(--safe-area-content-inset-right));
      gap: 16px;
      box-sizing: border-box;
      background: var(--primary-background-color);
@@ -884,13 +895,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    }

    .filter-dialog-content {
-      height: calc(
-        100vh -
-          70px - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
+      height: calc(100vh - 1px - 61px - var(--header-height));
      display: flex;
      flex-direction: column;
    }
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -4,7 +4,6 @@ import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../common/config/can_show_page";
-import { goBack } from "../common/navigate";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -206,7 +205,7 @@ class HassTabsSubpage extends LitElement {
      this.backCallback();
      return;
    }
-    goBack();
+    history.back();
  }

  static get styles(): CSSResultGroup {
@@ -226,7 +225,9 @@ class HassTabsSubpage extends LitElement {

        .container {
          display: flex;
-          height: calc(100% - var(--header-height));
+          height: calc(
+            100% - var(--header-height) - var(--safe-area-inset-top)
+          );
        }

        :host([narrow]) .container {
@@ -244,7 +245,7 @@ class HassTabsSubpage extends LitElement {
          height: calc(var(--header-height) + var(--safe-area-inset-top));
          padding-top: var(--safe-area-inset-top);
          padding-right: var(--safe-area-inset-right);
-          padding-left: var(--safe-area-inset-left);
+          padding-left: var(--safe-area-content-inset-left);
          background-color: var(--sidebar-background-color);
          font-weight: var(--ha-font-weight-normal);
          border-bottom: 1px solid var(--divider-color);
@@ -324,13 +325,16 @@ class HassTabsSubpage extends LitElement {

        .content {
          position: relative;
-          width: calc(
-            100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+          width: 100%;
+          box-sizing: border-box;
+          padding-left: var(
+            --tabs-subpage-content-padding-left,
+            var(--safe-area-content-inset-left)
+          );
+          padding-right: var(
+            --tabs-subpage-content-padding-right,
+            var(--safe-area-content-inset-right)
          );
-          margin-left: var(--safe-area-inset-left);
-          margin-right: var(--safe-area-inset-right);
-          margin-inline-start: var(--safe-area-inset-left);
-          margin-inline-end: var(--safe-area-inset-right);
          overflow: auto;
          -webkit-overflow-scrolling: touch;
        }
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -144,18 +144,15 @@ export class HomeAssistantMain extends LitElement {
      color: var(--primary-text-color);
      /* remove the grey tap highlights in iOS on the fullscreen touch targets */
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
+      --mdc-drawer-width: 56px;
      --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
-      --safe-area-content-inset-left: 0px;
-      --safe-area-content-inset-right: var(--safe-area-inset-right);
    }
    :host([expanded]) {
-      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px));
+      --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
    }
    :host([modal]) {
      --mdc-drawer-width: unset;
      --mdc-top-app-bar-width: unset;
-      --safe-area-content-inset-left: var(--safe-area-inset-left);
    }
    partial-panel-resolver,
    ha-sidebar {
--- a/src/mixins/keyboard-shortcut-mixin.ts
+++ b/src/mixins/keyboard-shortcut-mixin.ts
@@ -1,6 +1,5 @@
 import type { LitElement } from "lit";
 import type { Constructor } from "../types";
-import { canOverrideAlphanumericInput } from "../common/dom/can-override-input";

 declare global {
  type SupportedShortcuts = Record<string, () => void>;
@@ -12,62 +11,23 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
  class extends superClass {
    private _keydownEvent = (event: KeyboardEvent) => {
      const supportedShortcuts = this.supportedShortcuts();
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        !event.shiftKey &&
-        !event.altKey &&
-        event.key in supportedShortcuts
-      ) {
-        // Only capture the event if the user is not focused on an input
-        if (!canOverrideAlphanumericInput(event.composedPath())) {
-          return;
-        }
-        // Don't capture the event if the user is selecting text
-        if (window.getSelection()?.toString()) {
-          return;
-        }
+      if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
        event.preventDefault();
        supportedShortcuts[event.key]();
-        return;
-      }
-
-      const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
-      if (event.key in supportedSingleKeyShortcuts) {
-        event.preventDefault();
-        supportedSingleKeyShortcuts[event.key]();
      }
    };

-    private _listenersAdded = false;
-
    public connectedCallback() {
      super.connectedCallback();
-      this.addKeyboardShortcuts();
-    }
-
-    public disconnectedCallback() {
-      this.removeKeyboardShortcuts();
-      super.disconnectedCallback();
-    }
-
-    public addKeyboardShortcuts() {
-      if (this._listenersAdded) {
-        return;
-      }
-      this._listenersAdded = true;
      window.addEventListener("keydown", this._keydownEvent);
    }

-    public removeKeyboardShortcuts() {
-      this._listenersAdded = false;
+    public disconnectedCallback() {
      window.removeEventListener("keydown", this._keydownEvent);
+      super.disconnectedCallback();
    }

    protected supportedShortcuts(): SupportedShortcuts {
      return {};
    }
-
-    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
-      return {};
-    }
  };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aidan Timson	f29fbb6dbc	tabs+data-table: add safe-area padding and heights; group header row class; row/header paddings; empty row includes bottom inset	2025-09-01 15:57:38 +01:00
Aidan Timson	1305689875	subpage: include safe-area top inset in toolbar height; add content/toolbar paddings; adjust content height	2025-09-01 15:49:16 +01:00
Aidan Timson	98cecc1f08	sidebar: account for safe-area top inset in menu height/padding; adjust list height calc	2025-09-01 15:41:44 +01:00