Add logbook to security dashboard

.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

.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

.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

.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

.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

.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

.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

.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

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

.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

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

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

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

@@ -149,7 +149,7 @@ class HassioAddonConfig extends LitElement {
       )
   );
 
-  private _filteredSchema = memoizeOne(
+  private _filteredShchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
   );
@@ -161,7 +161,7 @@ class HassioAddonConfig extends LitElement {
       showForm &&
       JSON.stringify(this.addon.schema) !==
         JSON.stringify(
-          this._filteredSchema(this.addon.options, this.addon.schema!)
+          this._filteredShchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -199,7 +199,6 @@ class HassioAddonConfig extends LitElement {
         <div class="card-content">
           ${showForm
             ? html`<ha-form
-                .hass=${this.hass}
                 .disabled=${this.disabled}
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
@@ -208,7 +207,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredSchema(
+                    : this._filteredShchema(
                         this.addon.options,
                         this.addon.schema!
                       )

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

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

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

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

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

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

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

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

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

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

package.json

@@ -26,7 +26,8 @@
   "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/commands": "6.8.1",
@@ -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",
@@ -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",
@@ -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",
@@ -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.42.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"
 }

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

src/common/navigate.ts

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

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

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

src/components/entity/state-info.ts

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

src/components/ha-analytics.ts

@@ -67,19 +67,20 @@ export class HaAnalytics extends LitElement {
               )}
             </span>
             <span>
-              <ha-switch
-                .id="switch-${preference}"
-                @change=${this._handleRowClick}
-                .checked=${this.analytics?.preferences[preference]}
-                .preference=${preference}
-                name=${preference}
-                ?disabled=${baseEnabled}
-              >
-              </ha-switch>
-              <ha-tooltip .for="switch-${preference}" placement="right">
-                ${this.localize(
+              <ha-tooltip
+                content=${this.localize(
                   `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                 )}
+                placement="right"
+                ?disabled=${baseEnabled}
+              >
+                <ha-switch
+                  @change=${this._handleRowClick}
+                  .checked=${this.analytics?.preferences[preference]}
+                  .preference=${preference}
+                  name=${preference}
+                >
+                </ha-switch>
               </ha-tooltip>
             </span>
           </ha-settings-row>

src/components/ha-automation-row.ts

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

src/components/ha-button-group.ts

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

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

@@ -1,11 +1,11 @@
-import "@home-assistant/webawesome/dist/components/button-group/button-group";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-button";
 import "./ha-svg-icon";
+import "./ha-button";
+import "./ha-button-group";
 
 /**
  * @element ha-button-toggle-group
@@ -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>
     `;
   }
 

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,
@@ -216,10 +262,10 @@ export class HaButton extends Button {
         }
 
         .button.has-start {
-          padding-inline-start: 8px;
+          padding-left: 8px;
         }
         .button.has-end {
-          padding-inline-end: 8px;
+          padding-right: 8px;
         }
       `,
     ];

src/components/ha-control-slider.ts

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

src/components/ha-dialog.ts

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px 16px 16px;
+        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -100,8 +100,6 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
-        padding-top: var(--safe-area-inset-top);
-        padding-bottom: var(--safe-area-inset-bottom);
       }
       .mdc-dialog__title {
         padding: 16px 16px 0 16px;
@@ -117,17 +115,15 @@ export class HaDialog extends DialogBase {
         padding: var(--dialog-content-padding, 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: var(--dialog-content-padding, 24px);
+        padding-bottom: max(
+          var(--dialog-content-padding, 24px),
+          var(--safe-area-inset-bottom)
+        );
       }
       .mdc-dialog .mdc-dialog__surface {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         margin-top: var(--dialog-surface-margin-top);
-        min-width: calc(
-          var(--mdc-dialog-min-width, 100vw) - var(
-              --safe-area-inset-left
-            ) - var(--safe-area-inset-right)
-        );
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -141,24 +137,6 @@ export class HaDialog extends DialogBase {
         display: flex;
         flex-direction: column;
       }
-
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        .mdc-dialog .mdc-dialog__surface {
-          min-height: calc(
-            100vh - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
-                0px
-              )
-          );
-          max-height: calc(
-            100vh - var(--safe-area-inset-top, 0px) - var(
-                --safe-area-inset-bottom,
-                0px
-              )
-          );
-        }
-      }
-
       .header_title {
         display: flex;
         align-items: center;

src/components/ha-fade-in.ts

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

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

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

src/components/ha-header-bar.ts

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

src/components/ha-help-tooltip.ts

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

src/components/ha-icon-overflow-menu.ts

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

src/components/ha-progress-ring.ts

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

src/components/ha-sidebar.ts

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

src/components/ha-spinner.ts

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

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

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

src/components/ha-tab-group.ts

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

src/components/ha-target-picker.ts

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

src/components/ha-tooltip.ts

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

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

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

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

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

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

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

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

src/components/sl-tab-group.ts

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

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

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

src/data/ai_task.ts

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

src/data/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;

src/data/recorder.ts

@@ -246,7 +246,7 @@ export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
   });
 
 export const calculateStatisticSumGrowth = (
-  values?: StatisticValue[]
+  values: StatisticValue[]
 ): number | null => {
   let growth: number | null = null;
 

src/dialogs/config-flow/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 {

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;

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

@@ -3,7 +3,6 @@ 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";
@@ -12,9 +11,8 @@ 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 +30,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 +165,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>
@@ -299,18 +299,18 @@ class MoreInfoWeather extends LitElement {
         ${this.hass.localize("ui.card.weather.forecast")}:
       </div>
       ${supportedForecasts?.length > 1
-        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
+        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
             ${supportedForecasts.map(
               (forecastType) =>
-                html`<ha-tab-group-tab
+                html`<sl-tab
                   slot="nav"
                   .panel=${forecastType}
                   .active=${this._forecastType === forecastType}
                 >
                   ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                </ha-tab-group-tab>`
+                </sl-tab>`
             )}
-          </ha-tab-group>`
+          </sl-tab-group>`
         : nothing}
       <div class="forecast">
         ${forecast?.length
@@ -419,11 +419,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;
         }

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

@@ -661,10 +661,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;
         }
 

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

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>

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}

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 {

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 {

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,22 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
-          background-color: var(--app-header-background-color);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .toolbar {
-          padding-left: var(--safe-area-inset-left);
-        }
-
-        .toolbar-content {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
           height: var(--header-height);
+          padding: 8px 12px;
+          background-color: var(--app-header-background-color);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
-          padding: 8px 12px;
         }
-
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+          }
+        }
         .toolbar a {
           color: var(--sidebar-text-color);
           text-decoration: none;

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

@@ -884,13 +884,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;
     }

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 {
@@ -241,10 +240,7 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          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);
+          height: var(--header-height);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);

src/layouts/home-assistant-main.ts

@@ -144,13 +144,13 @@ 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;

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>;
@@ -18,14 +17,6 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
         !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;
-        }
         event.preventDefault();
         supportedShortcuts[event.key]();
         return;

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

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

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

@@ -50,9 +50,7 @@ export default class HaAutomationActionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            !this.indent &&
-            (this.disabled ||
-              (this.action.enabled === false && !this.yamlMode)),
+            this.disabled || (this.action.enabled === false && !this.yamlMode),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,
@@ -99,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
+    fireEvent(this, "yaml-changed", {
       value: migrateAutomationAction(ev.detail.value),
     });
   }

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

@@ -258,16 +258,14 @@ export default class HaAutomationActionRow extends LitElement {
 
       ${type !== "condition" &&
       (this.action as NonConditionAction).continue_on_error === true
-        ? html`<ha-svg-icon
-              id="svg-icon"
-              slot="icons"
-              .path=${mdiAlertCircleCheck}
-            ></ha-svg-icon>
-            <ha-tooltip for="svg-icon">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.continue_on_error"
-              )}
-            </ha-tooltip>`
+        ? html`<ha-tooltip
+            slot="icons"
+            .content=${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.continue_on_error"
+            )}
+          >
+            <ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
+          </ha-tooltip>`
         : nothing}
       ${!this.optionsInSidebar
         ? html`<ha-md-button-menu
@@ -462,6 +460,9 @@ export default class HaAutomationActionRow extends LitElement {
               .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
+              @copy-row=${this._copyAction}
+              @cut-row=${this._cutAction}
+              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -3,7 +3,6 @@ import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
-import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
@@ -67,7 +66,6 @@ export class HaConditionAction extends LitElement implements ActionElement {
               .value=${this.action.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
-              @closed=${stopPropagation}
             >
               ${this._processedTypes(this.hass.localize).map(
                 ([opt, label, icon]) => html`

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

@@ -53,9 +53,8 @@ export default class HaAutomationConditionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            !this.indent &&
-            (this.disabled ||
-              (this.condition.enabled === false && !this.yamlMode)),
+            this.disabled ||
+            (this.condition.enabled === false && !this.yamlMode),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,
@@ -104,9 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
-      value: ev.detail.value,
-    });
+    fireEvent(this, "yaml-changed", { value: ev.detail.value });
   }
 
   private _onUiChanged(ev: CustomEvent) {

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

@@ -369,6 +369,9 @@ export default class HaAutomationConditionRow extends LitElement {
               .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
+              @copy-row=${this._copyCondition}
+              @cut-row=${this._cutCondition}
+              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -383,12 +386,12 @@ export default class HaAutomationConditionRow extends LitElement {
             error: this._testingResult === false,
           })}"
         >
-          ${this._testingResult === undefined
-            ? nothing
+          ${this._testingResult
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_pass"
+              )
             : this.hass.localize(
-                `ui.panel.config.automation.editor.conditions.testing_${
-                  this._testingResult ? "pass" : "error"
-                }`
+                "ui.panel.config.automation.editor.conditions.testing_error"
               )}
         </div>
       </ha-card>

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

@@ -24,7 +24,7 @@ import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { goBack, navigate } from "../../../common/navigate";
+import { navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -593,7 +593,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       this.hass
     ) {
       const initData = getAutomationEditorInitData();
-      this._dirty = !!initData;
       let baseConfig: Partial<AutomationConfig> = { description: "" };
       if (!initData || !("use_blueprint" in initData)) {
         baseConfig = {
@@ -702,7 +701,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 { err_no: err.status_code }
               ),
       });
-      goBack("/config");
+      history.back();
     }
   }
 
@@ -853,7 +852,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private _backTapped = async () => {
     const result = await this._confirmUnsavedChanged();
     if (result) {
-      afterNextRender(() => goBack("/config"));
+      afterNextRender(() => history.back());
     }
   };
 
@@ -941,7 +940,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private async _delete() {
     if (this.automationId) {
       await deleteAutomation(this.hass, this.automationId);
-      goBack("/config");
+      history.back();
     }
   }
 

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

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

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

@@ -296,12 +296,12 @@ export default class HaAutomationSidebarCondition extends LitElement {
             narrow: this.narrow,
           })}"
         >
-          ${this._testingResult === undefined
-            ? nothing
+          ${this._testingResult
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_pass"
+              )
             : this.hass.localize(
-                `ui.panel.config.automation.editor.conditions.testing_${
-                  this._testingResult ? "pass" : "error"
-                }`
+                "ui.panel.config.automation.editor.conditions.testing_error"
               )}
         </div>
       </div>

src/panels/config/automation/styles.ts

@@ -44,6 +44,7 @@ export const rowStyles = css`
 
 export const editorStyles = css`
   .disabled {
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -61,15 +62,12 @@ export const indentStyle = css`
   .card-content.indent,
   .selector-row,
   :host([indent]) ha-form {
-    margin-inline-start: 12px;
-    padding-top: 12px;
-    padding-bottom: 16px;
-    padding-inline-start: 16px;
-    padding-inline-end: 0px;
-    border-inline-start: 2px solid var(--ha-color-border-neutral-quiet);
+    margin-left: 12px;
+    padding: 12px 0 16px 16px;
+    border-left: 2px solid var(--ha-color-border-neutral-quiet);
     border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
     border-radius: 0;
-    border-end-start-radius: var(--ha-border-radius-lg);
+    border-bottom-left-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
   :host([selected]) .card-content.indent,
@@ -177,7 +175,7 @@ export const automationRowsStyles = css`
     gap: 16px;
   }
   .rows.no-sidebar {
-    margin-inline-end: 0;
+    margin-right: 0;
   }
   .sortable-ghost {
     background: none;
@@ -254,7 +252,4 @@ export const sidebarEditorStyles = css`
       display: none;
     }
   }
-  ha-md-menu-item {
-    --mdc-icon-size: 24px;
-  }
 `;

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

@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, this.inSidebar ? "yaml-changed" : "value-changed", {
+    fireEvent(this, "yaml-changed", {
       value: migrateAutomationTrigger(ev.detail.value),
     });
   }
@@ -141,6 +141,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
       haStyle,
       css`
         .disabled {
+          opacity: 0.5;
           pointer-events: none;
         }
 

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

@@ -358,6 +358,9 @@ export default class HaAutomationTriggerRow extends LitElement {
               .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
+              @copy-row=${this._copyTrigger}
+              @cut-row=${this._cutTrigger}
+              @delete-row=${this._onDelete}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row

src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts

@@ -125,7 +125,7 @@ export class HaWebhookTrigger extends LitElement {
             .path=${mdiContentCopy}
           ></ha-icon-button>
         </ha-textfield>
-        <ha-button-menu multi @closed=${stopPropagation} fixed>
+        <ha-button-menu multi @closed=${stopPropagation}>
           <ha-icon-button
             slot="trigger"
             .label=${this.hass!.localize(

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

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

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

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

src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts

@@ -5,7 +5,7 @@ import {
   mdiGroup,
   mdiPlus,
 } from "@mdi/js";
-import { goBack, navigate } from "../../../../../../common/navigate";
+import { navigate } from "../../../../../../common/navigate";
 import type { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { fetchZHADevice } from "../../../../../../data/zha";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
@@ -102,7 +102,7 @@ export const getZHADeviceActions = async (
           ieee: zhaDevice.ieee,
         });
 
-        goBack("/config");
+        history.back();
       },
     });
   }

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -132,7 +132,7 @@ class DialogDeviceRegistryDetail extends LitElement {
           </div>
         </div>
         <ha-button
-          slot="secondaryAction"
+          slot="primaryAction"
           @click=${this.closeDialog}
           .disabled=${this._submitting}
           appearance="plain"

src/panels/config/devices/ha-config-device-page.ts

@@ -89,7 +89,6 @@ import {
   loadDeviceRegistryDetailDialog,
   showDeviceRegistryDetailDialog,
 } from "./device-registry-detail/show-dialog-device-registry-detail";
-import { slugify } from "../../../common/string/slugify";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -556,21 +555,16 @@ export class HaConfigDevicePage extends LitElement {
                               </a>
                             `
                           : html`
-                              <ha-list-item
-                                .id="scene-${slugify(entityState.entity_id)}"
-                                hasMeta
-                                .scene=${entityState}
-                              >
-                                ${computeStateName(entityState)}
-                                <ha-icon-next slot="meta"></ha-icon-next>
-                              </ha-list-item>
                               <ha-tooltip
-                                .for="scene-${slugify(entityState.entity_id)}"
                                 placement="left"
-                              >
-                                ${this.hass.localize(
+                                .content=${this.hass.localize(
                                   "ui.panel.config.devices.cant_edit"
                                 )}
+                              >
+                                <ha-list-item hasMeta .scene=${entityState}>
+                                  ${computeStateName(entityState)}
+                                  <ha-icon-next slot="meta"></ha-icon-next>
+                                </ha-list-item>
                               </ha-tooltip>
                             `;
                       })}

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -6,14 +6,13 @@ import {
   mdiPlus,
   mdiTextureBox,
   mdiCancel,
-  mdiDelete,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
@@ -38,7 +37,6 @@ import type {
   SelectionChangedEvent,
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
@@ -67,10 +65,7 @@ import type {
   DeviceEntityLookup,
   DeviceRegistryEntry,
 } from "../../../data/device_registry";
-import {
-  updateDeviceRegistryEntry,
-  removeConfigEntryFromDevice,
-} from "../../../data/device_registry";
+import { updateDeviceRegistryEntry } from "../../../data/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
   findBatteryChargingEntity,
@@ -82,11 +77,7 @@ import {
   createLabelRegistryEntry,
   subscribeLabelRegistry,
 } from "../../../data/label_registry";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
-import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -130,11 +121,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
   @state() private _selected: string[] = [];
 
-  private _selectedCanDelete: string[] = [];
-
-  @query("hass-tabs-subpage-data-table", true)
-  private _dataTable!: HaTabsSubpageDataTable;
-
   @state()
   @storage({
     storage: "sessionStorage",
@@ -231,17 +217,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
     if (!this.hasUpdated) {
       this._setFiltersFromUrl();
     }
-    if (changedProps.has("_selected")) {
-      this._selectedCanDelete = this._selected.filter((d) => {
-        const device = this.hass.devices[d];
-        const entries = device.config_entries;
-        return entries.some(
-          (entryId) =>
-            this.entries.find((e) => e.entry_id === entryId)
-              ?.supports_remove_device
-        );
-      });
-    }
   }
 
   private _setFiltersFromUrl() {
@@ -671,14 +646,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                   tabindex="0"
                   style="display:inline-block; position: relative;"
                 >
-                  <ha-svg-icon
-                    .id="svg-icon-${device.id}"
-                    .path=${mdiCancel}
-                  ></ha-svg-icon>
-                  <ha-tooltip .for="svg-icon-${device.id}" placement="left">
-                    ${this.hass.localize(
+                  <ha-tooltip
+                    placement="left"
+                    .content=${this.hass.localize(
                       "ui.panel.config.entities.picker.status.disabled"
                     )}
+                  >
+                    <ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
                   </ha-tooltip>
                 </div>
               `
@@ -935,32 +909,48 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                     ${areaItems}
                   </ha-md-button-menu>`}`
           : nothing}
-        <ha-md-button-menu has-overflow slot="selection-bar">
-          ${this.narrow
-            ? html`<ha-assist-chip
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>`
-            : html`<ha-icon-button
-                .path=${mdiDotsVertical}
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              ></ha-icon-button>`}
-          ${this.narrow
-            ? html` <ha-sub-menu>
+        ${this.narrow || areasInOverflow
+          ? html`<ha-md-button-menu has-overflow slot="selection-bar">
+              ${this.narrow
+                ? html`<ha-assist-chip
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  >
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiMenuDown}
+                    ></ha-svg-icon>
+                  </ha-assist-chip>`
+                : html`<ha-icon-button
+                    .path=${mdiDotsVertical}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  ></ha-icon-button>`}
+              ${this.narrow
+                ? html` <ha-sub-menu>
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-md-menu-item>
+                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
+                  </ha-sub-menu>`
+                : nothing}
+              <ha-sub-menu>
                 <ha-md-menu-item slot="item">
                   <div slot="headline">
                     ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                      "ui.panel.config.devices.picker.bulk_actions.move_area"
                     )}
                   </div>
                   <ha-svg-icon
@@ -968,39 +958,10 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                     .path=${mdiChevronRight}
                   ></ha-svg-icon>
                 </ha-md-menu-item>
-                <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-              </ha-sub-menu>`
-            : nothing}
-          ${areasInOverflow
-            ? html`<ha-sub-menu>
-                  <ha-md-menu-item slot="item">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
-                    </div>
-                    <ha-svg-icon
-                      slot="end"
-                      .path=${mdiChevronRight}
-                    ></ha-svg-icon>
-                  </ha-md-menu-item>
-                  <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                </ha-sub-menu>
-                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-            : nothing}
-          <ha-md-menu-item
-            .clickAction=${this._deleteSelected}
-            .disabled=${!this._selectedCanDelete.length}
-            class="warning"
-          >
-            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            <div slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
-              )}
-            </div>
-          </ha-md-menu-item>
-        </ha-md-button-menu>
+                <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
+              </ha-sub-menu>
+            </ha-md-button-menu>`
+          : nothing}
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1175,61 +1136,6 @@ ${rejected
     });
   };
 
-  private _deleteSelected = () => {
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_title"
-      ),
-      text:
-        this._selectedCanDelete.length === this._selected.length
-          ? this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_text"
-            )
-          : this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_partly_text",
-              {
-                deletable: this._selectedCanDelete.length,
-                selected: this._selected.length,
-              }
-            ),
-      confirmText: this.hass.localize("ui.common.delete"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      destructive: true,
-      confirm: async () => {
-        const proms: Promise<DeviceRegistryEntry>[] = [];
-        this._selectedCanDelete.forEach((deviceId) => {
-          const entries = this.hass!.devices[deviceId]?.config_entries;
-          entries.forEach((entryId) => {
-            if (
-              this.entries.find((entry) => entry.entry_id === entryId)
-                ?.supports_remove_device
-            ) {
-              proms.push(
-                removeConfigEntryFromDevice(this.hass!, deviceId, entryId)
-              );
-            }
-          });
-        });
-        const results = await Promise.allSettled(proms);
-        if (hasRejectedItems(results)) {
-          showAlertDialog(this, {
-            text: this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure"
-            ),
-            title: this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure_title"
-            ),
-          });
-        }
-        this._clearSelection();
-      },
-    });
-  };
-
-  private _clearSelection() {
-    this._dataTable.clearSelection();
-  }
-
   private _handleSortingChanged(ev: CustomEvent) {
     this._activeSorting = ev.detail;
   }

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -226,7 +226,6 @@ export class EnergyBatterySettings extends LitElement {
         .label {
           overflow: hidden;
           text-overflow: ellipsis;
-          white-space: nowrap;
         }
       `,
     ];

src/panels/config/entities/ha-config-entities.ts

@@ -114,7 +114,6 @@ import { isHelperDomain } from "../helpers/const";
 import "../integrations/ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import { slugify } from "../../../common/string/slugify";
 
 export interface StateEntity
   extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@@ -393,27 +392,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                   tabindex="0"
                   style="display:inline-block; position: relative;"
                 >
-                  <ha-svg-icon
-                    .id="status-icon-${slugify(entry.entity_id)}"
-                    style=${styleMap({
-                      color: entry.unavailable ? "var(--error-color)" : "",
-                    })}
-                    .path=${entry.restored
-                      ? mdiRestoreAlert
-                      : entry.unavailable
-                        ? mdiAlertCircle
-                        : entry.disabled_by
-                          ? mdiCancel
-                          : entry.hidden_by
-                            ? mdiEyeOff
-                            : mdiPencilOff}
-                  ></ha-svg-icon>
-
                   <ha-tooltip
-                    .for="status-icon-${slugify(entry.entity_id)}"
                     placement="left"
-                  >
-                    ${entry.restored
+                    .content=${entry.restored
                       ? this.hass.localize(
                           "ui.panel.config.entities.picker.status.not_provided"
                         )
@@ -432,6 +413,21 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                             : this.hass.localize(
                                 "ui.panel.config.entities.picker.status.unmanageable"
                               )}
+                  >
+                    <ha-svg-icon
+                      style=${styleMap({
+                        color: entry.unavailable ? "var(--error-color)" : "",
+                      })}
+                      .path=${entry.restored
+                        ? mdiRestoreAlert
+                        : entry.unavailable
+                          ? mdiAlertCircle
+                          : entry.disabled_by
+                            ? mdiCancel
+                            : entry.hidden_by
+                              ? mdiEyeOff
+                              : mdiPencilOff}
+                    ></ha-svg-icon>
                   </ha-tooltip>
                 </div>
               `

src/panels/config/helpers/dialog-helper-detail.ts

@@ -236,18 +236,17 @@ export class DialogHelperDetail extends LitElement {
                 <span class="item-text"> ${label} </span>
                 ${isLoaded
                   ? html`<ha-icon-next slot="meta"></ha-icon-next>`
-                  : html` <ha-svg-icon
-                        slot="meta"
-                        .id="icon-${domain}"
-                        path=${mdiAlertOutline}
-                        @click=${stopPropagation}
-                      ></ha-svg-icon>
-                      <ha-tooltip .for="icon-${domain}">
-                        ${this.hass.localize(
-                          "ui.dialogs.helper_settings.platform_not_loaded",
-                          { platform: domain }
-                        )}
-                      </ha-tooltip>`}
+                  : html`<ha-tooltip
+                      hoist
+                      slot="meta"
+                      .content=${this.hass.localize(
+                        "ui.dialogs.helper_settings.platform_not_loaded",
+                        { platform: domain }
+                      )}
+                      @click=${stopPropagation}
+                    >
+                      <ha-svg-icon path=${mdiAlertOutline}></ha-svg-icon>
+                    </ha-tooltip>`}
               </ha-list-item>
             `;
           })}
@@ -431,13 +430,7 @@ export class DialogHelperDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-list {
-            height: calc(
-              100vh -
-                184px - var(--safe-area-inset-top, 0px) - var(
-                  --safe-area-inset-bottom,
-                  0px
-                )
-            );
+            height: calc(100vh - 184px);
           }
         }
       `,

src/panels/config/helpers/ha-config-helpers.ts

@@ -110,7 +110,6 @@ import { renderConfigEntryError } from "../integrations/ha-config-integration-pa
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
-import { slugify } from "../../../common/string/slugify";
 
 interface HelperItem {
   id: string;
@@ -362,16 +361,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                   tabindex="0"
                   style="display:inline-block; position: relative;"
                 >
-                  <ha-svg-icon
-                    .id="icon-edit-${slugify(helper.entity_id)}"
-                    .path=${mdiPencilOff}
-                  ></ha-svg-icon>
                   <ha-tooltip
-                    .for="icon-edit-${slugify(helper.entity_id)}"
                     placement="left"
-                    >${this.hass.localize(
+                    .content=${this.hass.localize(
                       "ui.panel.config.entities.picker.status.unmanageable"
                     )}
+                  >
+                    <ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
                   </ha-tooltip>
                 </div>
               `

src/panels/config/integrations/dialog-add-integration.ts

@@ -461,9 +461,7 @@ class AddIntegrationDialog extends LitElement {
               class="ha-scrollbar"
               style=${styleMap({
                 width: `${this._width}px`,
-                height: this._narrow
-                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
-                  : "500px",
+                height: this._narrow ? "calc(100vh - 184px)" : "500px",
               })}
               @click=${this._integrationPicked}
               @keypress=${this._handleKeyPress}

src/panels/config/integrations/ha-integration-card.ts

@@ -159,32 +159,29 @@ export class HaIntegrationCard extends LitElement {
                   ? "overwrites"
                   : "custom"}"
               >
-                <ha-svg-icon
-                  id="icon-custom"
-                  .path=${mdiPackageVariant}
-                ></ha-svg-icon>
                 <ha-tooltip
-                  for="icon-custom"
+                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                >
-                  ${this.hass.localize(
+                  .content=${this.hass.localize(
                     this.manifest.overwrites_built_in
                       ? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
                       : "ui.panel.config.integrations.config_entry.custom_integration"
                   )}
+                >
+                  <ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>
                 </ha-tooltip>
               </span>`
             : nothing}
           ${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
             ? html`<div class="icon cloud">
-                <ha-svg-icon id="icon-cloud" .path=${mdiWeb}></ha-svg-icon>
                 <ha-tooltip
-                  for="icon-cloud"
+                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                >
-                  ${this.hass.localize(
+                  .content=${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.depends_on_cloud"
                   )}
+                >
+                  <ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
                 </ha-tooltip>
               </div>`
             : nothing}
@@ -192,18 +189,15 @@ export class HaIntegrationCard extends LitElement {
           !this.manifest?.config_flow &&
           !this.items.every((itm) => itm.source === "system")
             ? html`<div class="icon yaml">
-                <ha-svg-icon
-                  id="icon-yaml"
-                  .path=${mdiFileCodeOutline}
-                ></ha-svg-icon>
                 <ha-tooltip
-                  for="icon-yaml"
+                  hoist
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                >
-                  ${this.hass.localize(
+                  .content=${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.no_config_flow"
                   )}
-                </ha-tooltip>
+                >
+                  <ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon
+                ></ha-tooltip>
               </div>`
             : nothing}
         </div>

src/panels/config/integrations/ha-integration-list-item.ts

@@ -74,45 +74,45 @@ export class HaIntegrationListItem extends ListItemBase {
     }
     return html`<span class="mdc-deprecated-list-item__meta material-icons">
       ${this.integration.cloud
-        ? html` <ha-svg-icon id="icon-cloud" .path=${mdiWeb}></ha-svg-icon>
-            <ha-tooltip for="icon-cloud" placement="left"
-              >${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.depends_on_cloud"
-              )}
-            </ha-tooltip>`
+        ? html`<ha-tooltip
+            placement="left"
+            .content=${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.depends_on_cloud"
+            )}
+            ><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
+          ></ha-tooltip>`
         : nothing}
       ${!this.integration.is_built_in
         ? html`<span
             class=${this.integration.overwrites_built_in
               ? "overwrites"
               : "custom"}
-          >
-            <ha-svg-icon
-              id="icon-custom"
-              .path=${mdiPackageVariant}
-            ></ha-svg-icon>
-            <ha-tooltip for="icon-custom" placement="left"
-              >${this.hass.localize(
+            ><ha-tooltip
+              placement="left"
+              .content=${this.hass.localize(
                 this.integration.overwrites_built_in
                   ? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
                   : "ui.panel.config.integrations.config_entry.custom_integration"
-              )}</ha-tooltip
-            ></span
-          >`
+              )}
+              ><ha-svg-icon
+                .path=${mdiPackageVariant}
+              ></ha-svg-icon></ha-tooltip
+          ></span>`
         : nothing}
       ${!this.integration.config_flow &&
       !this.integration.integrations &&
       !this.integration.iot_standards
-        ? html` <ha-svg-icon
-              id="icon-yaml"
+        ? html`<ha-tooltip
+            placement="left"
+            .content=${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.yaml_only"
+            )}
+          >
+            <ha-svg-icon
               .path=${mdiFileCodeOutline}
               class="open-in-new"
             ></ha-svg-icon>
-            <ha-tooltip for="icon-yaml" placement="left">
-              ${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.yaml_only"
-              )}
-            </ha-tooltip>`
+          </ha-tooltip>`
         : html`<ha-icon-next></ha-icon-next>`}
     </span>`;
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts

@@ -122,13 +122,6 @@ export class BluetoothConfigDashboard extends LitElement {
   }
 
   protected render(): TemplateResult {
-    // Get scanner type to determine if options button should be shown
-    const scannerDetails =
-      this._scannerState && this._scannerDetails?.[this._scannerState.source];
-    const scannerType: HaScannerType =
-      scannerDetails?.scanner_type ?? "unknown";
-    const isRemoteScanner = scannerType === "remote";
-
     return html`
       <hass-subpage .narrow=${this.narrow} .hass=${this.hass}>
         <div class="content">
@@ -138,15 +131,13 @@ export class BluetoothConfigDashboard extends LitElement {
             )}
           >
             <div class="card-content">${this._renderScannerState()}</div>
-            ${!isRemoteScanner
-              ? html`<div class="card-actions">
-                  <ha-button @click=${this._openOptionFlow}
-                    >${this.hass.localize(
-                      "ui.panel.config.bluetooth.option_flow"
-                    )}</ha-button
-                  >
-                </div>`
-              : nothing}
+            <div class="card-actions">
+              <ha-button @click=${this._openOptionFlow}
+                >${this.hass.localize(
+                  "ui.panel.config.bluetooth.option_flow"
+                )}</ha-button
+              >
+            </div>
           </ha-card>
           <ha-card
             .header=${this.hass.localize(

src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts

@@ -8,8 +8,6 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-code-editor";
 import "../../../../../components/ha-dialog";
 import "../../../../../components/ha-dialog-header";
-import "../../../../../components/ha-tab-group";
-import "../../../../../components/ha-tab-group-tab";
 import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
 import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -105,10 +103,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           >
             ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
           </span>
-          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
             ${tabs.map(
               (tab) => html`
-                <ha-tab-group-tab
+                <sl-tab
                   slot="nav"
                   .panel=${tab}
                   .active=${this._currTab === tab}
@@ -116,10 +114,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                   ${this.hass.localize(
                     `ui.dialogs.zha_manage_device.tabs.${tab}`
                   )}
-                </ha-tab-group-tab>
+                </sl-tab>
               `
             )}
-          </ha-tab-group>
+          </sl-tab-group>
         </ha-dialog-header>
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
@@ -231,10 +229,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           }
         }
 
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -307,18 +307,14 @@ class DialogZHAReconfigureDevice extends LitElement {
                                               `
                                             : html`
                                                 <span class="stage">
-                                                  <ha-svg-icon
-                                                    .id="svg-icon-${clusterStatus
-                                                      .cluster.name}"
-                                                    .path=${mdiCloseCircle}
-                                                    class="failed"
-                                                  ></ha-svg-icon>
                                                   <ha-tooltip
-                                                    .for="svg-icon-${clusterStatus
-                                                      .cluster.name}"
                                                     placement="top"
+                                                    .content=${attribute.status}
                                                   >
-                                                    ${attribute.status}
+                                                    <ha-svg-icon
+                                                      .path=${mdiCloseCircle}
+                                                      class="failed"
+                                                    ></ha-svg-icon>
                                                   </ha-tooltip>
                                                 </span>
                                               `}

src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts

@@ -6,8 +6,6 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-select";
-import "../../../../../components/ha-tab-group";
-import "../../../../../components/ha-tab-group-tab";
 import type { Cluster, ZHADevice } from "../../../../../data/zha";
 import { fetchClustersForZhaDevice } from "../../../../../data/zha";
 import { haStyle } from "../../../../../resources/styles";
@@ -15,6 +13,7 @@ import type { HomeAssistant } from "../../../../../types";
 import { computeClusterKey } from "./functions";
 import "./zha-cluster-attributes";
 import "./zha-cluster-commands";
+import "../../../../../components/sl-tab-group";
 
 declare global {
   // for fire event
@@ -92,20 +91,20 @@ export class ZHAManageClusters extends LitElement {
         </div>
         ${this._selectedCluster
           ? html`
-              <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+              <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                 ${tabs.map(
                   (tab) => html`
-                    <ha-tab-group-tab
+                    <sl-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
                       >${this.hass.localize(
                         `ui.panel.config.zha.clusters.tabs.${tab}`
-                      )}</ha-tab-group-tab
+                      )}</sl-tab
                     >
                   `
                 )}
-              </ha-tab-group>
+              </sl-tab-group>
 
               <div class="content" tabindex="-1" dialogInitialFocus>
                 ${cache(
@@ -178,10 +177,10 @@ export class ZHAManageClusters extends LitElement {
           padding-bottom: 10px;
         }
 
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts

@@ -1,11 +1,11 @@
-import "@home-assistant/webawesome/dist/components/animation/animation";
 import { mdiCheckCircleOutline } from "@mdi/js";
-import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "@awesome.me/webawesome/dist/components/animation/animation";
+import { css, html, LitElement } from "lit";
 import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-alert";
 import "../../../../../../components/ha-svg-icon";
+import "../../../../../../components/ha-alert";
 
 @customElement("zwave-js-add-node-added-insecure")
 export class ZWaveJsAddNodeFinished extends LitElement {

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts

@@ -1,15 +1,15 @@
-import "@home-assistant/webawesome/dist/components/animation/animation";
+import "@awesome.me/webawesome/dist/components/animation/animation";
 import { mdiRestart } from "@mdi/js";
 
-import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import type { HomeAssistant } from "../../../../../../types";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import { InclusionStrategy } from "../../../../../../data/zwave_js";
-import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-alert";
-import "../../../../../../components/ha-button";
 import "../../../../../../components/ha-spinner";
+import "../../../../../../components/ha-button";
+import "../../../../../../components/ha-alert";
 import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin";
 
 @customElement("zwave-js-add-node-searching-devices")

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts

@@ -21,7 +21,6 @@ import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-progress-ring";
 import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-svg-icon";
-import { goBack } from "../../../../../common/navigate";
 import type { ConfigEntry } from "../../../../../data/config_entries";
 import {
   ERROR_STATES,
@@ -619,7 +618,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   }
 
   private _handleBack(): void {
-    goBack("/config");
+    history.back();
   }
 
   private _fetchData = async () => {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -367,7 +367,6 @@ class ZWaveJSNodeConfig extends LitElement {
       return html`
         ${labelAndDescription}
         <ha-select
-          fixedMenuPosition
           .disabled=${!item.metadata.writeable}
           .value=${item.value?.toString()}
           .key=${id}

src/panels/config/logs/error-log-card.ts

@@ -243,7 +243,7 @@ class ErrorLogCard extends LitElement {
               ${!streaming || this._error
                 ? html`<ha-icon-button
                     .path=${mdiRefresh}
-                    @click=${this._handleRefresh}
+                    @click=${this._loadLogs}
                     .label=${localize("ui.common.refresh")}
                   ></ha-icon-button>`
                 : nothing}
@@ -715,10 +715,6 @@ class ErrorLogCard extends LitElement {
     this._wrapLines = !this._wrapLines;
   }
 
-  private _handleRefresh() {
-    this._loadLogs();
-  }
-
   private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     let index = ev.detail.index;
     if (this.provider === "core") {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -156,18 +156,16 @@ export class HaConfigLovelaceDashboards extends LitElement {
                 ${dashboard.title}
                 ${dashboard.default
                   ? html`
-                      <ha-svg-icon
-                        .id="default-icon-${dashboard.title}"
-                        style="padding-left: 10px; padding-inline-start: 10px; padding-inline-end: initial; direction: var(--direction);"
-                        .path=${mdiCheckCircleOutline}
-                      ></ha-svg-icon>
                       <ha-tooltip
-                        .for="default-icon-${dashboard.title}"
-                        placement="right"
-                      >
-                        ${this.hass.localize(
+                        .content=${this.hass.localize(
                           `ui.panel.config.lovelace.dashboards.default_dashboard`
                         )}
+                        placement="right"
+                      >
+                        <ha-svg-icon
+                          style="padding-left: 10px; padding-inline-start: 10px; padding-inline-end: initial; direction: var(--direction);"
+                          .path=${mdiCheckCircleOutline}
+                        ></ha-svg-icon>
                       </ha-tooltip>
                     `
                   : nothing}