Add automation sidebar resize

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

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

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

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

@@ -199,6 +199,7 @@ class HassioAddonConfig extends LitElement {
         <div class="card-content">
           ${showForm
             ? html`<ha-form
+                .hass=${this.hass}
                 .disabled=${this.disabled}
                 .data=${this._options!}
                 @value-changed=${this._configChanged}

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

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

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

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

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

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

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

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

package.json

@@ -51,7 +51,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
+    "@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,7 +84,6 @@
     "@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",
@@ -218,7 +217,7 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.42.0",
+    "typescript-eslint": "8.43.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",

prettier.config.js

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

src/common/navigate.ts

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

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

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

src/components/entity/state-info.ts

@@ -36,39 +36,38 @@ class StateInfo extends LitElement {
         </div>
         ${this.inDialog
           ? html`<div class="time-ago">
-              <ha-tooltip>
-                <ha-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>
+              <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>
                 </div>
               </ha-tooltip>
+              <ha-relative-time
+                id="relative-time"
+                .hass=${this.hass}
+                .datetime=${this.stateObj.last_changed}
+                capitalize
+              ></ha-relative-time>
             </div>`
           : html`<div class="extra-info"><slot></slot></div>`}
       </div>`;

src/components/ha-analytics.ts

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

src/components/ha-automation-row.ts

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

src/components/ha-bottom-sheet.ts

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

src/components/ha-button.ts

@@ -57,6 +57,8 @@ export class HaButton extends Button {
 
           font-size: var(--ha-font-size-m);
           line-height: 1;
+
+          transition: background-color 0.15s ease-in-out;
         }
 
         :host([size="small"]) .button {

src/components/ha-control-slider.ts

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

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

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

src/components/ha-help-tooltip.ts

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

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

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

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

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

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

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

src/components/ha-tab-group.ts

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

src/components/ha-target-picker.ts

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

src/components/ha-tooltip.ts

@@ -1,50 +1,47 @@
-import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component";
-import styles from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.styles";
+import Tooltip from "@home-assistant/webawesome/dist/components/tooltip/tooltip";
 import { css } from "lit";
-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" },
-});
+import type { CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-tooltip")
-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);
-      }
-    `,
-  ];
+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);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

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

src/components/sl-tab-group.ts

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

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

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

src/data/automation.ts

@@ -567,7 +567,6 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
-  insertAfter: (value: Trigger | Trigger[]) => boolean;
   toggleYamlMode: () => void;
   config: Trigger;
   yamlMode: boolean;
@@ -582,7 +581,6 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
-  insertAfter: (value: Condition | Condition[]) => boolean;
   toggleYamlMode: () => void;
   config: Condition;
   yamlMode: boolean;
@@ -596,7 +594,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
-  insertAfter: (value: Action | Action[]) => boolean;
   run: () => void;
   toggleYamlMode: () => void;
   config: {

src/data/data_entry_flow.ts

@@ -63,6 +63,7 @@ export interface DataEntryFlowStepCreateEntry {
   type: "create_entry";
   version: number;
   flow_id: string;
+  next_flow?: [FlowType, string]; // [flow_type, flow_id]
   handler: string;
   title: string;
   result?: ConfigEntry;

src/data/script.ts

@@ -380,9 +380,6 @@ export const getActionType = (action: Action): ActionType => {
   return "unknown";
 };
 
-export const isAction = (value: unknown): value is Action =>
-  getActionType(value as Action) !== "unknown";
-
 export const hasScriptFields = (
   hass: HomeAssistant,
   entityId: string

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ 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";
@@ -11,8 +12,9 @@ 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,
@@ -30,7 +32,6 @@ import {
   weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -165,37 +166,36 @@ class MoreInfoWeather extends LitElement {
               ${this.hass.formatEntityState(this.stateObj)}
             </div>
             <div class="time-ago">
-              <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>
+              <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>
                 </div>
               </ha-tooltip>
             </div>
@@ -299,18 +299,18 @@ class MoreInfoWeather extends LitElement {
         ${this.hass.localize("ui.card.weather.forecast")}:
       </div>
       ${supportedForecasts?.length > 1
-        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
+        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
             ${supportedForecasts.map(
               (forecastType) =>
-                html`<sl-tab
+                html`<ha-tab-group-tab
                   slot="nav"
                   .panel=${forecastType}
                   .active=${this._forecastType === forecastType}
                 >
                   ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                </sl-tab>`
+                </ha-tab-group-tab>`
             )}
-          </sl-tab-group>`
+          </ha-tab-group>`
         : nothing}
       <div class="forecast">
         ${forecast?.length
@@ -419,11 +419,11 @@ class MoreInfoWeather extends LitElement {
           font-size: 1.2em;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
 
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -28,15 +28,14 @@ export class HuiPersistentNotificationItem extends LitElement {
 
         <div class="time">
           <span>
-            <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-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>
           </span>
         </div>

src/layouts/hass-error-screen.ts

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

src/layouts/hass-loading-screen.ts

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

src/layouts/hass-subpage.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
+import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import type { HomeAssistant } from "../types";
@@ -78,7 +79,7 @@ class HassSubpage extends LitElement {
       this.backCallback();
       return;
     }
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {
@@ -99,28 +100,27 @@ 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);
-          background-color: var(--app-header-background-color);
-          border-bottom: var(--app-header-border-bottom, none);
-          box-sizing: border-box;
         }
 
         .toolbar-content {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          padding: 8px 12px;
+          height: var(--header-height);
           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-content {
-            padding: 4px;
-          }
-        }
-        .toolbar-content a {
+
+        .toolbar a {
           color: var(--sidebar-text-color);
           text-decoration: none;
         }
@@ -149,9 +149,7 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(
-            100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
-          );
+          height: calc(100% - 1px - var(--header-height));
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

src/layouts/hass-tabs-subpage.ts

@@ -4,6 +4,7 @@ import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../common/config/can_show_page";
+import { goBack } from "../common/navigate";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -205,7 +206,7 @@ class HassTabsSubpage extends LitElement {
       this.backCallback();
       return;
     }
-    history.back();
+    goBack();
   }
 
   static get styles(): CSSResultGroup {

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

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

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

@@ -50,7 +50,9 @@ export default class HaAutomationActionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            this.disabled || (this.action.enabled === false && !this.yamlMode),
+            !this.indent &&
+            (this.disabled ||
+              (this.action.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,

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

@@ -15,7 +15,6 @@ import {
   mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import { dump } from "js-yaml";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -26,7 +25,6 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
@@ -63,7 +61,7 @@ import type {
   NonConditionAction,
   RepeatAction,
 } from "../../../../data/script";
-import { getActionType, isAction } from "../../../../data/script";
+import { getActionType } from "../../../../data/script";
 import { describeAction } from "../../../../data/script_i18n";
 import { callExecuteScript } from "../../../../data/service";
 import {
@@ -260,14 +258,16 @@ export default class HaAutomationActionRow extends LitElement {
 
       ${type !== "condition" &&
       (this.action as NonConditionAction).continue_on_error === true
-        ? 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>`
+        ? 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>`
         : nothing}
       ${!this.optionsInSidebar
         ? html`<ha-md-button-menu
@@ -462,9 +462,6 @@ 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`
@@ -509,7 +506,6 @@ export default class HaAutomationActionRow extends LitElement {
       ...this._clipboard,
       action: deepClone(this.action),
     };
-    copyToClipboard(dump(this.action));
   }
 
   private _onDisable = () => {
@@ -640,18 +636,6 @@ export default class HaAutomationActionRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Action | Action[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isAction(val)) &&
-      !isAction(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
   private _copyAction = () => {
     this._setClipboard();
     showToast(this, {
@@ -740,7 +724,6 @@ export default class HaAutomationActionRow extends LitElement {
       copy: this._copyAction,
       cut: this._cutAction,
       duplicate: this._duplicateAction,
-      insertAfter: this._insertAfter,
       run: this._runAction,
       config: {
         action: sidebarAction,

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

@@ -26,7 +26,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import type HaAutomationActionRow from "./ha-automation-action-row";
 import { getAutomationActionType } from "./ha-automation-action-row";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 @customElement("ha-automation-action")
 export default class HaAutomationAction extends LitElement {
@@ -92,7 +91,6 @@ export default class HaAutomationAction extends LitElement {
                 .narrow=${this.narrow}
                 .disabled=${this.disabled}
                 @duplicate=${this._duplicateAction}
-                @insert-after=${this._insertAfter}
                 @move-down=${this._moveDown}
                 @move-up=${this._moveUp}
                 @value-changed=${this._actionChanged}
@@ -364,21 +362,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.toSpliced(
-        index + 1,
-        0,
-        deepClone(this.actions[index])
-      ),
-    });
-  }
-
-  private _insertAfter(ev: CustomEvent) {
-    ev.stopPropagation();
-    const index = (ev.target as any).index;
-    const inserted = ensureArray(ev.detail.value);
-    this.highlightedActions = inserted;
-    fireEvent(this, "value-changed", {
-      value: this.actions.toSpliced(index + 1, 0, ...inserted),
+      value: this.actions.concat(deepClone(this.actions[index])),
     });
   }
 

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

@@ -53,8 +53,9 @@ export default class HaAutomationConditionEditor extends LitElement {
         class=${classMap({
           "card-content": true,
           disabled:
-            this.disabled ||
-            (this.condition.enabled === false && !this.yamlMode),
+            !this.indent &&
+            (this.disabled ||
+              (this.condition.enabled === false && !this.yamlMode)),
           yaml: yamlMode,
           indent: this.indent,
           card: !this.inSidebar,

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

@@ -19,7 +19,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { dump } from "js-yaml";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
@@ -39,7 +38,7 @@ import type {
   Condition,
   ConditionSidebarConfig,
 } from "../../../../data/automation";
-import { isCondition, testCondition } from "../../../../data/automation";
+import { testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
 import {
   CONDITION_BUILDING_BLOCKS,
@@ -70,7 +69,6 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -371,9 +369,6 @@ 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`
@@ -388,12 +383,12 @@ export default class HaAutomationConditionRow extends LitElement {
             error: this._testingResult === false,
           })}"
         >
-          ${this._testingResult
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_pass"
-              )
+          ${this._testingResult === undefined
+            ? nothing
             : this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_error"
+                `ui.panel.config.automation.editor.conditions.testing_${
+                  this._testingResult ? "pass" : "error"
+                }`
               )}
         </div>
       </ha-card>
@@ -442,7 +437,6 @@ export default class HaAutomationConditionRow extends LitElement {
       ...this._clipboard,
       condition: deepClone(this.condition),
     };
-    copyToClipboard(dump(this.condition));
   }
 
   private _onDisable = () => {
@@ -588,18 +582,6 @@ export default class HaAutomationConditionRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Condition | Condition[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isCondition(val)) &&
-      !isCondition(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
   private _copyCondition = () => {
     this._setClipboard();
     showToast(this, {
@@ -711,7 +693,6 @@ export default class HaAutomationConditionRow extends LitElement {
       disable: this._onDisable,
       delete: this._onDelete,
       duplicate: this._duplicateCondition,
-      insertAfter: this._insertAfter,
       copy: this._copyCondition,
       cut: this._cutCondition,
       test: this._testCondition,

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

@@ -24,7 +24,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-condition-row";
 import type HaAutomationConditionRow from "./ha-automation-condition-row";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 @customElement("ha-automation-condition")
 export default class HaAutomationCondition extends LitElement {
@@ -170,7 +169,6 @@ export default class HaAutomationCondition extends LitElement {
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
                 @duplicate=${this._duplicateCondition}
-                @insert-after=${this._insertAfter}
                 @move-down=${this._moveDown}
                 @move-up=${this._moveUp}
                 @value-changed=${this._conditionChanged}
@@ -383,21 +381,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.toSpliced(
-        index + 1,
-        0,
-        deepClone(this.conditions[index])
-      ),
-    });
-  }
-
-  private _insertAfter(ev: CustomEvent) {
-    ev.stopPropagation();
-    const index = (ev.target as any).index;
-    const inserted = ensureArray(ev.detail.value);
-    this.highlightedConditions = inserted;
-    fireEvent(this, "value-changed", {
-      value: this.conditions.toSpliced(index + 1, 0, ...inserted),
+      value: this.conditions.concat(deepClone(this.conditions[index])),
     });
   }
 

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

@@ -24,7 +24,7 @@ import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { goBack, navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -41,8 +41,6 @@ import type {
   AutomationConfig,
   AutomationEntity,
   BlueprintAutomationConfig,
-  Condition,
-  Trigger,
 } from "../../../data/automation";
 import {
   deleteAutomation,
@@ -62,7 +60,6 @@ import {
   type EntityRegistryEntry,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
-import type { Action } from "../../../data/script";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -99,9 +96,6 @@ declare global {
     "move-down": undefined;
     "move-up": undefined;
     duplicate: undefined;
-    "insert-after": {
-      value: Trigger | Condition | Action | Trigger[] | Condition[] | Action[];
-    };
     "save-automation": undefined;
   }
 }
@@ -708,7 +702,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                 { err_no: err.status_code }
               ),
       });
-      history.back();
+      goBack("/config");
     }
   }
 
@@ -859,7 +853,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private _backTapped = async () => {
     const result = await this._confirmUnsavedChanged();
     if (result) {
-      afterNextRender(() => history.back());
+      afterNextRender(() => goBack("/config"));
     }
   };
 
@@ -947,7 +941,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   private async _delete() {
     if (this.automationId) {
       await deleteAutomation(this.hass, this.automationId);
-      history.back();
+      goBack("/config");
     }
   }
 

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

@@ -1,7 +1,8 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import "../../../components/ha-bottom-sheet";
-import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-resizable-bottom-sheet";
+import type { HaResizableBottomSheet } from "../../../components/ha-resizable-bottom-sheet";
 import {
   isCondition,
   isScriptField,
@@ -37,7 +38,38 @@ export default class HaAutomationSidebar extends LitElement {
 
   @state() private _yamlMode = false;
 
-  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
+  @query("ha-resizable-bottom-sheet")
+  private _bottomSheetElement?: HaResizableBottomSheet;
+
+  private _dragging = false;
+
+  private _dragStartX = 0;
+
+  private _initialSize = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // register event listeners for drag handling
+    document.addEventListener("mousemove", this._handleMouseMove);
+    document.addEventListener("mouseup", this._handleMouseUp);
+    document.addEventListener("touchmove", this._handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", this._handleTouchEnd);
+    document.addEventListener("touchcancel", this._handleTouchEnd);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // unregister event listeners for drag handling
+    document.removeEventListener("mousemove", this._handleMouseMove);
+    document.removeEventListener("mouseup", this._handleMouseUp);
+    document.removeEventListener("touchmove", this._handleTouchMove);
+    document.removeEventListener("touchend", this._handleTouchEnd);
+    document.removeEventListener("touchcancel", this._handleTouchEnd);
+  }
 
   private _renderContent() {
     // get config type
@@ -147,13 +179,84 @@ export default class HaAutomationSidebar extends LitElement {
 
     if (this.narrow) {
       return html`
-        <ha-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
+        <ha-resizable-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
           ${this._renderContent()}
-        </ha-bottom-sheet>
+        </ha-resizable-bottom-sheet>
       `;
     }
 
-    return this._renderContent();
+    return html`
+      <div
+        class="handle"
+        @mousedown=${this._handleMouseDown}
+        @touchstart=${this._handleTouchStart}
+      ></div>
+      ${this._renderContent()}
+    `;
+  }
+
+  private _handleMouseDown = (ev: MouseEvent) => {
+    // Prevent the browser from interpreting this as a scroll/PTR gesture.
+    ev.preventDefault();
+    this._startDrag(ev.clientX);
+  };
+
+  private _handleTouchStart = (ev: TouchEvent) => {
+    // Prevent the browser from interpreting this as a scroll/PTR gesture.
+    ev.preventDefault();
+    this._startDrag(ev.touches[0].clientX);
+  };
+
+  private _startDrag(clientX: number) {
+    this._dragging = true;
+    this._dragStartX = clientX;
+    this._initialSize = (this.offsetWidth / window.innerWidth) * 100;
+    document.body.style.setProperty("cursor", "grabbing");
+  }
+
+  private _handleMouseMove = (ev: MouseEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    this._updateSize(ev.clientX);
+  };
+
+  private _handleTouchMove = (ev: TouchEvent) => {
+    if (!this._dragging) {
+      return;
+    }
+    ev.preventDefault(); // Prevent scrolling
+    this._updateSize(ev.touches[0].clientX);
+  };
+
+  private _updateSize(clientX: number) {
+    const deltaX = this._dragStartX - clientX;
+    const viewportWidth = window.innerWidth;
+    const deltaVw = (deltaX / viewportWidth) * 100;
+
+    // Calculate new size and clamp between 30vh and 70vh
+    let newSize = this._initialSize + deltaVw;
+    newSize = Math.max(30, Math.min(70, newSize));
+
+    requestAnimationFrame(() => {
+      fireEvent(this, "sidebar-width-changed", { width: newSize });
+    });
+  }
+
+  private _handleMouseUp = () => {
+    this._endDrag();
+  };
+
+  private _handleTouchEnd = () => {
+    this._endDrag();
+  };
+
+  private _endDrag() {
+    if (!this._dragging) {
+      return;
+    }
+    this._dragging = false;
+    document.body.style.removeProperty("cursor");
   }
 
   private _getType() {
@@ -226,6 +329,15 @@ export default class HaAutomationSidebar extends LitElement {
         max-height: 100%;
       }
     }
+
+    .handle {
+      position: absolute;
+      left: -4;
+      height: 100%;
+      width: 8px;
+      z-index: 7;
+      cursor: ew-resize;
+    }
   `;
 }
 
@@ -239,5 +351,8 @@ declare global {
     "yaml-changed": {
       value: unknown;
     };
+    "sidebar-width-changed": {
+      width: number;
+    };
   }
 }

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

@@ -22,6 +22,7 @@ import {
   union,
 } from "superstruct";
 import { ensureArray } from "../../../common/array/ensure-array";
+import { storage } from "../../../common/decorators/storage";
 import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { constructUrlCurrentPath } from "../../../common/url/construct-url";
@@ -34,6 +35,7 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
+  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -100,6 +102,13 @@ export class HaManualAutomationEditor extends LitElement {
 
   @state() private _sidebarKey?: string;
 
+  @storage({
+    key: "automation-sidebar-width-percentage",
+    state: false,
+    subscribe: false,
+  })
+  private _sidebarWidth? = 30;
+
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
   @queryAll("ha-automation-action, ha-automation-condition")
@@ -159,7 +168,7 @@ export class HaManualAutomationEditor extends LitElement {
         role="region"
         aria-labelledby="triggers-heading"
         .triggers=${this.config.triggers || []}
-        .highlightedTriggers=${this._pastedConfig?.triggers}
+        .highlightedTriggers=${this._pastedConfig?.triggers || []}
         @value-changed=${this._triggerChanged}
         .hass=${this.hass}
         .disabled=${this.disabled || this.saving}
@@ -206,7 +215,7 @@ export class HaManualAutomationEditor extends LitElement {
         role="region"
         aria-labelledby="conditions-heading"
         .conditions=${this.config.conditions || []}
-        .highlightedConditions=${this._pastedConfig?.conditions}
+        .highlightedConditions=${this._pastedConfig?.conditions || []}
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
         .disabled=${this.disabled || this.saving}
@@ -251,7 +260,7 @@ export class HaManualAutomationEditor extends LitElement {
         role="region"
         aria-labelledby="actions-heading"
         .actions=${this.config.actions || []}
-        .highlightedActions=${this._pastedConfig?.actions}
+        .highlightedActions=${this._pastedConfig?.actions || []}
         @value-changed=${this._actionChanged}
         @open-sidebar=${this._openSidebar}
         @request-close-sidebar=${this._triggerCloseSidebar}
@@ -305,6 +314,7 @@ export class HaManualAutomationEditor extends LitElement {
             @value-changed=${this._sidebarConfigChanged}
             .disabled=${this.disabled}
             .sidebarKey=${this._sidebarKey}
+            @sidebar-width-changed=${this._resizeSidebar}
           ></ha-automation-sidebar>
         </div>
       </div>
@@ -313,6 +323,11 @@ export class HaManualAutomationEditor extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
+    this.style.setProperty(
+      "--sidebar-dynamic-width",
+      `${this._sidebarWidth}vw`
+    );
+
     const expanded = extractSearchParam("expanded");
     if (expanded === "1") {
       this._clearParam("expanded");
@@ -494,22 +509,6 @@ export class HaManualAutomationEditor extends LitElement {
       return;
     }
 
-    const keysPresent = Object.keys(normalized).filter(
-      (key) =>
-        ["triggers", "conditions", "actions"].includes(key) &&
-        ensureArray(normalized[key]).length
-    );
-
-    if (keysPresent.length === 1) {
-      // if only one type of automation element is pasted, insert under the currently active item
-      const previousConfig = { ...this.config };
-      if (this._insertAfterSelected(normalized[keysPresent[0]])) {
-        this._previousConfig = previousConfig;
-        this._showPastedToastWithUndo();
-        return;
-      }
-    }
-
     if (normalized) {
       ev.preventDefault();
 
@@ -519,7 +518,6 @@ export class HaManualAutomationEditor extends LitElement {
         ensureArray(this.config.conditions)?.length ||
         ensureArray(this.config.actions)?.length
       ) {
-        // ask if they want to append or replace if we have existing config or there are unsaved changes
         const result = await new Promise<boolean>((resolve) => {
           showPasteReplaceDialog(this, {
             domain: "automation",
@@ -640,33 +638,32 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _insertAfterSelected(
-    config: Trigger | Condition | Action | Trigger[] | Condition[] | Action[]
-  ): boolean {
-    if (this._sidebarConfig && "insertAfter" in this._sidebarConfig) {
-      return this._sidebarConfig.insertAfter(config as any);
-    }
-    return false;
-  }
-
   public copySelectedRow() {
-    if (this._sidebarConfig && "copy" in this._sidebarConfig) {
-      this._sidebarConfig.copy();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
+      (this._sidebarConfig as ActionSidebarConfig).copy();
     }
   }
 
   public cutSelectedRow() {
-    if (this._sidebarConfig && "cut" in this._sidebarConfig) {
-      this._sidebarConfig.cut();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
+      (this._sidebarConfig as ActionSidebarConfig).cut();
     }
   }
 
   public deleteSelectedRow() {
-    if (this._sidebarConfig && "delete" in this._sidebarConfig) {
-      this._sidebarConfig.delete();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
+      (this._sidebarConfig as ActionSidebarConfig).delete();
     }
   }
 
+  private _resizeSidebar(ev) {
+    ev.stopPropagation();
+    const width = ev.detail.width as number;
+
+    this.style.setProperty("--sidebar-dynamic-width", `${width}vw`);
+    this._sidebarWidth = width;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

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

@@ -291,11 +291,7 @@ export default class HaAutomationOption extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.options.toSpliced(
-        index + 1,
-        0,
-        deepClone(this.options[index])
-      ),
+      value: this.options.concat(deepClone(this.options[index])),
     });
   }
 

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
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_pass"
-              )
+          ${this._testingResult === undefined
+            ? nothing
             : this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_error"
+                `ui.panel.config.automation.editor.conditions.testing_${
+                  this._testingResult ? "pass" : "error"
+                }`
               )}
         </div>
       </div>

src/panels/config/automation/styles.ts

@@ -44,7 +44,6 @@ export const rowStyles = css`
 
 export const editorStyles = css`
   .disabled {
-    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -110,7 +109,8 @@ export const manualEditorStyles = css`
   }
 
   .has-sidebar {
-    --sidebar-width: min(35vw, 500px);
+    --sidebar-width: min(var(--sidebar-dynamic-width), 1078px);
+    /* 1540 * 0.7 = 1078px  */
     --sidebar-gap: 16px;
   }
 
@@ -255,4 +255,7 @@ export const sidebarEditorStyles = css`
       display: none;
     }
   }
+  ha-md-menu-item {
+    --mdc-icon-size: 24px;
+  }
 `;

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

@@ -141,7 +141,6 @@ 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

@@ -19,7 +19,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { dump } from "js-yaml";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
@@ -41,7 +40,7 @@ import type {
   Trigger,
   TriggerSidebarConfig,
 } from "../../../../data/automation";
-import { isTrigger, subscribeTrigger } from "../../../../data/automation";
+import { subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -76,7 +75,6 @@ import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 
 export interface TriggerElement extends LitElement {
   trigger: Trigger;
@@ -360,9 +358,6 @@ 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
@@ -513,7 +508,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       copy: this._copyTrigger,
       duplicate: this._duplicateTrigger,
       cut: this._cutTrigger,
-      insertAfter: this._insertAfter,
       config: trigger || this.trigger,
       uiSupported: this._uiSupported(this._getType(trigger || this.trigger)),
       yamlMode: this._yamlMode,
@@ -535,8 +529,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       ...this._clipboard,
       trigger: this.trigger,
     };
-
-    copyToClipboard(dump(this.trigger));
   }
 
   private _onDelete = () => {
@@ -644,18 +636,6 @@ export default class HaAutomationTriggerRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Trigger | Trigger[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isTrigger(val)) &&
-      !isTrigger(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
   private _copyTrigger = () => {
     this._setClipboard();
     showToast(this, {

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

@@ -25,7 +25,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
-import { ensureArray } from "../../../../common/array/ensure-array";
 
 @customElement("ha-automation-trigger")
 export default class HaAutomationTrigger extends LitElement {
@@ -85,7 +84,6 @@ export default class HaAutomationTrigger extends LitElement {
                 .last=${idx === this.triggers.length - 1}
                 .trigger=${trg}
                 @duplicate=${this._duplicateTrigger}
-                @insert-after=${this._insertAfter}
                 @move-down=${this._moveDown}
                 @move-up=${this._moveUp}
                 @value-changed=${this._triggerChanged}
@@ -323,21 +321,7 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.triggers.toSpliced(
-        index + 1,
-        0,
-        deepClone(this.triggers[index])
-      ),
-    });
-  }
-
-  private _insertAfter(ev: CustomEvent) {
-    ev.stopPropagation();
-    const index = (ev.target as any).index;
-    const inserted = ensureArray(ev.detail.value);
-    this.highlightedTriggers = inserted;
-    fireEvent(this, "value-changed", {
-      value: this.triggers.toSpliced(index + 1, 0, ...inserted),
+      value: this.triggers.concat(deepClone(this.triggers[index])),
     });
   }
 

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

@@ -5,7 +5,7 @@ import {
   mdiGroup,
   mdiPlus,
 } from "@mdi/js";
-import { navigate } from "../../../../../../common/navigate";
+import { goBack, 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,
         });
 
-        history.back();
+        goBack("/config");
       },
     });
   }

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="primaryAction"
+          slot="secondaryAction"
           @click=${this.closeDialog}
           .disabled=${this._submitting}
           appearance="plain"

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

@@ -89,6 +89,7 @@ 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;
@@ -555,16 +556,21 @@ 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"
-                                .content=${this.hass.localize(
+                              >
+                                ${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

@@ -671,13 +671,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                   tabindex="0"
                   style="display:inline-block; position: relative;"
                 >
-                  <ha-tooltip
-                    placement="left"
-                    .content=${this.hass.localize(
+                  <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(
                       "ui.panel.config.entities.picker.status.disabled"
                     )}
-                  >
-                    <ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
                   </ha-tooltip>
                 </div>
               `

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

@@ -114,6 +114,7 @@ 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"> {
@@ -392,9 +393,27 @@ 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"
-                    .content=${entry.restored
+                  >
+                    ${entry.restored
                       ? this.hass.localize(
                           "ui.panel.config.entities.picker.status.not_provided"
                         )
@@ -413,21 +432,6 @@ 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,17 +236,18 @@ export class DialogHelperDetail extends LitElement {
                 <span class="item-text"> ${label} </span>
                 ${isLoaded
                   ? html`<ha-icon-next slot="meta"></ha-icon-next>`
-                  : 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>`}
+                  : 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>`}
               </ha-list-item>
             `;
           })}

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

@@ -110,6 +110,7 @@ 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;
@@ -361,13 +362,16 @@ 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"
-                    .content=${this.hass.localize(
+                    >${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/ha-integration-card.ts

@@ -159,29 +159,32 @@ export class HaIntegrationCard extends LitElement {
                   ? "overwrites"
                   : "custom"}"
               >
+                <ha-svg-icon
+                  id="icon-custom"
+                  .path=${mdiPackageVariant}
+                ></ha-svg-icon>
                 <ha-tooltip
-                  hoist
+                  for="icon-custom"
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                  .content=${this.hass.localize(
+                >
+                  ${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
-                  hoist
+                  for="icon-cloud"
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                  .content=${this.hass.localize(
+                >
+                  ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.depends_on_cloud"
                   )}
-                >
-                  <ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
                 </ha-tooltip>
               </div>`
             : nothing}
@@ -189,15 +192,18 @@ 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
-                  hoist
+                  for="icon-yaml"
                   .placement=${computeRTL(this.hass) ? "right" : "left"}
-                  .content=${this.hass.localize(
+                >
+                  ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.no_config_flow"
                   )}
-                >
-                  <ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon
-                ></ha-tooltip>
+                </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-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>`
+        ? 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>`
         : nothing}
       ${!this.integration.is_built_in
         ? html`<span
             class=${this.integration.overwrites_built_in
               ? "overwrites"
               : "custom"}
-            ><ha-tooltip
-              placement="left"
-              .content=${this.hass.localize(
+          >
+            <ha-svg-icon
+              id="icon-custom"
+              .path=${mdiPackageVariant}
+            ></ha-svg-icon>
+            <ha-tooltip for="icon-custom" placement="left"
+              >${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-svg-icon
-                .path=${mdiPackageVariant}
-              ></ha-svg-icon></ha-tooltip
-          ></span>`
+              )}</ha-tooltip
+            ></span
+          >`
         : nothing}
       ${!this.integration.config_flow &&
       !this.integration.integrations &&
       !this.integration.iot_standards
-        ? html`<ha-tooltip
-            placement="left"
-            .content=${this.hass.localize(
-              "ui.panel.config.integrations.config_entry.yaml_only"
-            )}
-          >
-            <ha-svg-icon
+        ? html` <ha-svg-icon
+              id="icon-yaml"
               .path=${mdiFileCodeOutline}
               class="open-in-new"
             ></ha-svg-icon>
-          </ha-tooltip>`
+            <ha-tooltip for="icon-yaml" placement="left">
+              ${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.yaml_only"
+              )}
+            </ha-tooltip>`
         : html`<ha-icon-next></ha-icon-next>`}
     </span>`;
   }

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

@@ -8,6 +8,8 @@ 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";
@@ -103,10 +105,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           >
             ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
           </span>
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
             ${tabs.map(
               (tab) => html`
-                <sl-tab
+                <ha-tab-group-tab
                   slot="nav"
                   .panel=${tab}
                   .active=${this._currTab === tab}
@@ -114,10 +116,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                   ${this.hass.localize(
                     `ui.dialogs.zha_manage_device.tabs.${tab}`
                   )}
-                </sl-tab>
+                </ha-tab-group-tab>
               `
             )}
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
@@ -229,10 +231,10 @@ class DialogZHAManageZigbeeDevice extends LitElement {
           }
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -307,14 +307,18 @@ 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}
                                                   >
-                                                    <ha-svg-icon
-                                                      .path=${mdiCloseCircle}
-                                                      class="failed"
-                                                    ></ha-svg-icon>
+                                                    ${attribute.status}
                                                   </ha-tooltip>
                                                 </span>
                                               `}

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

@@ -6,6 +6,8 @@ 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";
@@ -13,7 +15,6 @@ 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
@@ -91,20 +92,20 @@ export class ZHAManageClusters extends LitElement {
         </div>
         ${this._selectedCluster
           ? html`
-              <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+              <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                 ${tabs.map(
                   (tab) => html`
-                    <sl-tab
+                    <ha-tab-group-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
                       >${this.hass.localize(
                         `ui.panel.config.zha.clusters.tabs.${tab}`
-                      )}</sl-tab
+                      )}</ha-tab-group-tab
                     >
                   `
                 )}
-              </sl-tab-group>
+              </ha-tab-group>
 
               <div class="content" tabindex="-1" dialogInitialFocus>
                 ${cache(
@@ -177,10 +178,10 @@ export class ZHAManageClusters extends LitElement {
           padding-bottom: 10px;
         }
 
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -21,6 +21,7 @@ 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,
@@ -618,7 +619,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
   }
 
   private _handleBack(): void {
-    history.back();
+    goBack("/config");
   }
 
   private _fetchData = async () => {

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

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

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

@@ -156,16 +156,18 @@ 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
-                        .content=${this.hass.localize(
-                          `ui.panel.config.lovelace.dashboards.default_dashboard`
-                        )}
+                        .for="default-icon-${dashboard.title}"
                         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>
+                        ${this.hass.localize(
+                          `ui.panel.config.lovelace.dashboards.default_dashboard`
+                        )}
                       </ha-tooltip>
                     `
                   : nothing}

src/panels/config/network/supervisor-network.ts

@@ -15,9 +15,10 @@ import "../../../components/ha-password-field";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-spinner";
+import "../../../components/ha-tab-group";
+import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
-import "../../../components/sl-tab-group";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
   type AccessPoint,
@@ -99,19 +100,19 @@ export class HassioNetwork extends LitElement {
           ${this.hass.localize("ui.panel.config.network.supervisor.title")}
           ${this._interfaces.length > 1
             ? html`
-                <sl-tab-group @sl-tab-show=${this._handleTabActivated}
+                <ha-tab-group @wa-tab-show=${this._handleTabActivated}
                   >${this._interfaces.map(
                     (device, i) =>
-                      html`<sl-tab
+                      html`<ha-tab-group-tab
                         slot="nav"
                         .active=${this._curTabIndex === i}
                         .panel=${i.toString()}
                         .id=${device.interface}
                       >
                         ${device.interface}
-                      </sl-tab>`
+                      </ha-tab-group-tab>`
                   )}
-                </sl-tab-group>
+                </ha-tab-group>
               `
             : nothing}
         </div>
@@ -833,13 +834,13 @@ export class HassioNetwork extends LitElement {
           margin-bottom: 16px;
         }
 
-        sl-tab-group {
+        ha-tab-group {
           line-height: var(--ha-line-height-normal);
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -106,6 +106,7 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
+import { slugify } from "../../../common/string/slugify";
 
 type SceneItem = SceneEntity & {
   name: string;
@@ -318,16 +319,18 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           template: (scene) =>
             !scene.attributes.id
               ? html`
+                  <ha-svg-icon
+                    .id="svg-icon-${slugify(scene.entity_id)}"
+                    .path=${mdiPencilOff}
+                    style="color: var(--secondary-text-color)"
+                  ></ha-svg-icon>
                   <ha-tooltip
+                    .for="svg-icon-${slugify(scene.entity_id)}"
                     placement="left"
-                    .content=${this.hass.localize(
+                  >
+                    ${this.hass.localize(
                       "ui.panel.config.scene.picker.only_editable"
                     )}
-                  >
-                    <ha-svg-icon
-                      .path=${mdiPencilOff}
-                      style="color: var(--secondary-text-color)"
-                    ></ha-svg-icon>
                   </ha-tooltip>
                 `
               : nothing,

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

@@ -24,7 +24,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { navigate } from "../../../common/navigate";
+import { goBack, navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/device/ha-device-picker";
@@ -806,7 +806,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
                 { err_no: err.status_code }
               ),
       });
-      history.back();
+      goBack("/config");
       return;
     }
 
@@ -988,7 +988,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
     if (this._mode === "live") {
       applyScene(this.hass, this._storedStates);
     }
-    afterNextRender(() => history.back());
+    afterNextRender(() => goBack("/config"));
   }
 
   private _deleteTapped(): void {
@@ -1012,7 +1012,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
     if (this._mode === "live") {
       applyScene(this.hass, this._storedStates);
     }
-    history.back();
+    goBack("/config");
   }
 
   private async _confirmUnsavedChanged(): Promise<boolean> {

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

@@ -21,7 +21,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
+import { goBack, navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
@@ -596,7 +596,7 @@ export class HaScriptEditor extends SubscribeMixin(
                 { err_no: resp.status_code || resp.code }
               )
         );
-        history.back();
+        goBack("/config");
       }
     );
   }
@@ -762,7 +762,7 @@ export class HaScriptEditor extends SubscribeMixin(
   private _backTapped = async () => {
     const result = await this._confirmUnsavedChanged();
     if (result) {
-      afterNextRender(() => history.back());
+      afterNextRender(() => goBack("/config"));
     }
   };
 
@@ -852,7 +852,7 @@ export class HaScriptEditor extends SubscribeMixin(
 
   private async _delete() {
     await deleteScript(this.hass, this.scriptId!);
-    history.back();
+    goBack("/config");
   }
 
   private async _switchUiMode() {

src/panels/config/voice-assistants/expose/expose-assistant-icon.ts

@@ -25,48 +25,47 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
     if (!this.assistant || !voiceAssistants[this.assistant]) return nothing;
 
     return html`
+      <div class="container" id="container">
+        <img
+          class="logo"
+          style=${styleMap({
+            filter: this.manual ? "grayscale(100%)" : undefined,
+          })}
+          alt=${voiceAssistants[this.assistant].name}
+          src=${brandsUrl({
+            domain: voiceAssistants[this.assistant].domain,
+            type: "icon",
+            darkOptimized: this.hass.themes?.darkMode,
+          })}
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"
+          slot="prefix"
+        />
+        ${this.unsupported
+          ? html`
+              <ha-svg-icon
+                .path=${mdiAlertCircle}
+                class="unsupported"
+              ></ha-svg-icon>
+            `
+          : nothing}
+      </div>
       <ha-tooltip
-        .disabled=${!this.unsupported && !this.manual}
+        for="container"
         placement="left"
+        .disabled=${!this.unsupported && !this.manual}
       >
-        <div class="container">
-          <img
-            class="logo"
-            style=${styleMap({
-              filter: this.manual ? "grayscale(100%)" : undefined,
-            })}
-            alt=${voiceAssistants[this.assistant].name}
-            src=${brandsUrl({
-              domain: voiceAssistants[this.assistant].domain,
-              type: "icon",
-              darkOptimized: this.hass.themes?.darkMode,
-            })}
-            crossorigin="anonymous"
-            referrerpolicy="no-referrer"
-            slot="prefix"
-          />
-          ${this.unsupported
-            ? html`
-                <ha-svg-icon
-                  .path=${mdiAlertCircle}
-                  class="unsupported"
-                ></ha-svg-icon>
-              `
-            : nothing}
-        </div>
-        <span slot="content">
-          ${this.unsupported
-            ? this.hass.localize(
-                "ui.panel.config.voice_assistants.expose.not_supported"
-              )
-            : ""}
-          ${this.unsupported && this.manual ? html`<br />` : nothing}
-          ${this.manual
-            ? this.hass.localize(
-                "ui.panel.config.voice_assistants.expose.manually_configured"
-              )
-            : nothing}
-        </span>
+        ${this.unsupported
+          ? this.hass.localize(
+              "ui.panel.config.voice_assistants.expose.not_supported"
+            )
+          : ""}
+        ${this.unsupported && this.manual ? html`<br />` : nothing}
+        ${this.manual
+          ? this.hass.localize(
+              "ui.panel.config.voice_assistants.expose.manually_configured"
+            )
+          : nothing}
       </ha-tooltip>
     `;
   }

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -607,34 +607,32 @@ export class VoiceAssistantsExpose extends LitElement {
                       >
                     `
                   : html`
-                      <ha-tooltip
-                        .content=${this.hass.localize(
+                      <ha-icon-button
+                        id="expose-button"
+                        @click=${this._exposeSelected}
+                        .path=${mdiPlusBoxMultiple}
+                        .label=${this.hass.localize(
+                          "ui.panel.config.voice_assistants.expose.expose"
+                        )}
+                      ></ha-icon-button>
+                      <ha-tooltip for="expose-button" placement="left">
+                        ${this.hass.localize(
                           "ui.panel.config.voice_assistants.expose.expose"
                         )}
-                        placement="left"
-                      >
-                        <ha-icon-button
-                          @click=${this._exposeSelected}
-                          .path=${mdiPlusBoxMultiple}
-                          .label=${this.hass.localize(
-                            "ui.panel.config.voice_assistants.expose.expose"
-                          )}
-                        ></ha-icon-button>
                       </ha-tooltip>
-                      <ha-tooltip
-                        content=${this.hass.localize(
+                      <ha-tooltip for="unexpose-button" placement="left">
+                        ${this.hass.localize(
                           "ui.panel.config.voice_assistants.expose.unexpose"
                         )}
-                        placement="left"
-                      >
-                        <ha-icon-button
-                          @click=${this._unexposeSelected}
-                          .path=${mdiCloseBoxMultiple}
-                          .label=${this.hass.localize(
-                            "ui.panel.config.voice_assistants.expose.unexpose"
-                          )}
-                        ></ha-icon-button>
                       </ha-tooltip>
+                      <ha-icon-button
+                        id="unexpose-button"
+                        @click=${this._unexposeSelected}
+                        .path=${mdiCloseBoxMultiple}
+                        .label=${this.hass.localize(
+                          "ui.panel.config.voice_assistants.expose.unexpose"
+                        )}
+                      ></ha-icon-button>
                     `}
               </div>
             `

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

@@ -46,6 +46,7 @@ import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import { showHomeZoneDetailDialog } from "./show-dialog-home-zone-detail";
 import { showZoneDetailDialog } from "./show-dialog-zone-detail";
+import { slugify } from "../../../common/string/slugify";
 
 @customElement("ha-config-zone")
 export class HaConfigZone extends SubscribeMixin(LitElement) {
@@ -200,17 +201,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                     stateObject.entity_id === "zone.home" &&
                     !this._canEditCore
                       ? nothing
-                      : html`<ha-tooltip
-                          slot="meta"
-                          placement="left"
-                          .content=${hass.localize(
-                            "ui.panel.config.zone.configured_in_yaml"
-                          )}
-                          .disabled=${stateObject.entity_id === "zone.home"}
-                          hoist
-                        >
-                          <ha-icon-button
-                            .id=${!this.narrow ? stateObject.entity_id : ""}
+                      : html`<ha-icon-button
+                            .id="zone-${slugify(stateObject.entity_id)}"
                             .entityId=${stateObject.entity_id}
                             .noEdit=${stateObject.entity_id !== "zone.home" ||
                             !this._canEditCore}
@@ -222,8 +214,18 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                               name: hass.config.location_name,
                             })}
                             @click=${this._editHomeZone}
+                            slot="meta"
                           ></ha-icon-button>
-                        </ha-tooltip>`}
+                          <ha-tooltip
+                            .for="zone-${slugify(stateObject.entity_id)}"
+                            placement="left"
+                            .disabled=${stateObject.entity_id === "zone.home"}
+                            hoist
+                          >
+                            ${hass.localize(
+                              "ui.panel.config.zone.configured_in_yaml"
+                            )}
+                          </ha-tooltip>`}
                   </ha-list-item>
                 `
               )}

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -1,14 +1,15 @@
+import type { ActionDetail } from "@material/mwc-list";
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { ActionDetail } from "@material/mwc-list";
 import { navigate } from "../../common/navigate";
-import "../../components/ha-menu-button";
 import "../../components/ha-button-menu";
 import "../../components/ha-icon-button";
 import "../../components/ha-list-item";
-import "../../components/sl-tab-group";
+import "../../components/ha-menu-button";
+import "../../components/ha-tab-group";
+import "../../components/ha-tab-group-tab";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
 import "./developer-tools-router";
@@ -50,25 +51,41 @@ class PanelDeveloperTools extends LitElement {
             </ha-list-item>
           </ha-button-menu>
         </div>
-        <sl-tab-group @sl-tab-show=${this._handlePageSelected}>
-          <sl-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
+        <ha-tab-group @wa-tab-show=${this._handlePageSelected}>
+          <ha-tab-group-tab slot="nav" panel="yaml" .active=${page === "yaml"}>
             ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="state" .active=${page === "state"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="state"
+            .active=${page === "state"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.states.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="action" .active=${page === "action"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="action"
+            .active=${page === "action"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.actions.title")}
-          </sl-tab>
-          <sl-tab slot="nav" panel="template" .active=${page === "template"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="template"
+            .active=${page === "template"}
+          >
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.templates.title"
             )}
-          </sl-tab>
-          <sl-tab slot="nav" panel="event" .active=${page === "event"}>
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="event"
+            .active=${page === "event"}
+          >
             ${this.hass.localize("ui.panel.developer-tools.tabs.events.title")}
-          </sl-tab>
-          <sl-tab
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
             slot="nav"
             panel="statistics"
             .active=${page === "statistics"}
@@ -76,11 +93,14 @@ class PanelDeveloperTools extends LitElement {
             ${this.hass.localize(
               "ui.panel.developer-tools.tabs.statistics.title"
             )}
-          </sl-tab>
-          <sl-tab slot="nav" panel="assist" .active=${page === "assist"}
-            >Assist</sl-tab
+          </ha-tab-group-tab>
+          <ha-tab-group-tab
+            slot="nav"
+            panel="assist"
+            .active=${page === "assist"}
+            >Assist</ha-tab-group-tab
           >
-        </sl-tab-group>
+        </ha-tab-group>
       </div>
       <developer-tools-router
         .route=${this.route}
@@ -165,7 +185,7 @@ class PanelDeveloperTools extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
-        sl-tab-group {
+        ha-tab-group {
           --ha-tab-active-text-color: var(--app-header-text-color, white);
           --ha-tab-indicator-color: var(--app-header-text-color, white);
           --ha-tab-track-color: transparent;

src/panels/energy/ha-panel-energy.ts

@@ -13,7 +13,7 @@ import "../lovelace/components/hui-energy-period-selector";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
-import { navigate } from "../../common/navigate";
+import { goBack, navigate } from "../../common/navigate";
 import type {
   GridSourceTypeEnergyPreference,
   SolarSourceTypeEnergyPreference,
@@ -70,7 +70,7 @@ class PanelEnergy extends LitElement {
 
   private _back(ev) {
     ev.stopPropagation();
-    history.back();
+    goBack();
   }
 
   protected render(): TemplateResult {

src/panels/history/ha-panel-history.ts

@@ -17,7 +17,7 @@ import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { storage } from "../../common/decorators/storage";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { navigate } from "../../common/navigate";
+import { goBack, navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   createSearchParam,
@@ -114,7 +114,7 @@ class HaPanelHistory extends LitElement {
   }
 
   private _goBack(): void {
-    history.back();
+    goBack();
   }
 
   protected render() {

src/panels/logbook/ha-panel-logbook.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
-import { navigate } from "../../common/navigate";
+import { goBack, navigate } from "../../common/navigate";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   createSearchParam,
@@ -60,7 +60,7 @@ export class HaPanelLogbook extends LitElement {
   }
 
   private _goBack(): void {
-    history.back();
+    goBack();
   }
 
   protected render() {

src/panels/lovelace/card-features/common/card-feature-styles.ts

@@ -26,8 +26,12 @@ export const cardFeatureStyles = css`
     --control-button-padding: 0px;
   }
   ha-control-button {
+    --control-button-border-radius: var(--feature-border-radius);
     --control-button-focus-color: var(--feature-color);
   }
+  ha-control-number-buttons {
+    --control-number-buttons-border-radius: var(--feature-border-radius);
+  }
   ha-control-slider {
     --control-slider-color: var(--feature-color);
     --control-slider-background: var(--feature-color);

src/panels/lovelace/card-features/hui-card-features.ts

@@ -8,6 +8,17 @@ import type {
   LovelaceCardFeaturePosition,
 } from "./types";
 
+/**
+ * Home Assistant tile icon component
+ *
+ * @element hui-card-features
+ *
+ * @summary
+ * A card features component, used in cards in Home Assistant to display extra features in card.
+ *
+ * @cssprop --ha-card-features-border-radius - The border radius of the card features. defaults to `var(--ha-border-radius-lg)`.
+ *
+ */
 @customElement("hui-card-features")
 export class HuiCardFeatures extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -44,7 +55,10 @@ export class HuiCardFeatures extends LitElement {
     :host {
       --feature-color: var(--state-icon-color);
       --feature-height: 42px;
-      --feature-border-radius: 12px;
+      --feature-border-radius: var(
+        --ha-card-features-border-radius,
+        var(--ha-border-radius-lg)
+      );
       --feature-button-spacing: 12px;
       pointer-events: none;
       position: relative;

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -133,14 +133,12 @@ class HuiEnergyCarbonGaugeCard
                   "--gauge-color": this._computeSeverity(value),
                 })}
               ></ha-gauge>
-              <ha-tooltip
-                .content=${this.hass.localize(
+
+              <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+              <ha-tooltip for="info" placement="left">
+                ${this.hass.localize(
                   "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
                 )}
-                placement="left"
-                hoist
-              >
-                <ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
               </ha-tooltip>
               <div class="name">
                 ${this.hass.localize(

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -114,17 +114,15 @@ class HuiEnergyGridGaugeCard
                 label="kWh"
                 needle
               ></ha-gauge>
-              <ha-tooltip placement="left" hoist>
-                <span slot="content">
-                  ${this.hass.localize(
-                    "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
-                  )}
-                  <br /><br />
-                  ${this.hass.localize(
-                    "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
-                  )}
-                </span>
-                <ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
+              <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+              <ha-tooltip for="info" placement="left">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
+                )}
+                <br /><br />
+                ${this.hass.localize(
+                  "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
+                )}
               </ha-tooltip>
               <div class="name">
                 ${returnedToGrid! >= consumedFromGrid!

src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts

@@ -110,14 +110,11 @@ class HuiEnergySelfSufficiencyGaugeCard
                   "--gauge-color": this._computeSeverity(value),
                 })}
               ></ha-gauge>
-              <ha-tooltip
-                placement="left"
-                .content=${this.hass.localize(
+              <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+              <ha-tooltip for="info" placement="left">
+                ${this.hass.localize(
                   "ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota"
                 )}
-                hoist
-              >
-                <ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
               </ha-tooltip>
               <div class="name">
                 ${this.hass.localize(

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -102,17 +102,15 @@ class HuiEnergySolarGaugeCard
                   "--gauge-color": this._computeSeverity(value),
                 })}
               ></ha-gauge>
-              <ha-tooltip placement="left" hoist>
-                <span slot="content">
-                  ${this.hass.localize(
-                    "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
-                  )}
-                  <br /><br />
-                  ${this.hass.localize(
-                    "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
-                  )}
-                </span>
-                <ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
+              <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
+              <ha-tooltip for="info" placement="left">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
+                )}
+                <br /><br />
+                ${this.hass.localize(
+                  "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
+                )}
               </ha-tooltip>
               <div class="name">
                 ${this.hass.localize(
@@ -176,10 +174,6 @@ class HuiEnergySolarGaugeCard
       top: 4px;
       color: var(--secondary-text-color);
     }
-
-    ha-tooltip::part(base__popup) {
-      margin-top: 4px;
-    }
   `;
 }
 

src/panels/lovelace/cards/hui-tile-card.ts

@@ -18,17 +18,18 @@ import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-icon";
-import type { TileIconImageStyle } from "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-info";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
+import type { LovelaceCardFeatureContext } from "../card-features/types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
   LovelaceCard,
   LovelaceCardEditor,
@@ -36,8 +37,6 @@ import type {
 } from "../types";
 import { renderTileBadge } from "./tile/badges/tile-badge";
 import type { TileCardConfig } from "./types";
-import type { LovelaceCardFeatureContext } from "../card-features/types";
-import { createEntityNotFoundWarning } from "../components/hui-warning";
 
 export const getEntityDefaultTileIconAction = (entityId: string) => {
   const domain = computeDomain(entityId);
@@ -48,11 +47,6 @@ export const getEntityDefaultTileIconAction = (entityId: string) => {
   return supportsIconAction ? "toggle" : "none";
 };
 
-const DOMAIN_IMAGE_SHAPE: Record<string, TileIconImageStyle> = {
-  update: "square",
-  media_player: "rounded-square",
-};
-
 @customElement("hui-tile-card")
 export class HuiTileCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -318,10 +312,10 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 hasDoubleClick: hasAction(this._config!.icon_double_tap_action),
               })}
               .interactive=${this._hasIconAction}
-              .imageStyle=${DOMAIN_IMAGE_SHAPE[domain]}
               .imageUrl=${imageUrl}
               data-domain=${ifDefined(domain)}
               data-state=${ifDefined(stateObj?.state)}
+              class=${classMap({ image: Boolean(imageUrl) })}
             >
               <ha-state-icon
                 slot="icon"
@@ -465,8 +459,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       animation: pulse 1s infinite;
     }
 
-    ha-tile-badge.not-found {
-      --tile-badge-background-color: var(--red-color);
+    /* Make sure we display the whole image */
+    ha-tile-icon.image[data-domain="update"] {
+      --tile-icon-border-radius: 0;
+    }
+    /* Make sure we display the almost the whole image but it often use text */
+    ha-tile-icon.image[data-domain="media_player"] {
+      --tile-icon-border-radius: min(
+        var(--ha-tile-icon-border-radius, var(--ha-border-radius-sm)),
+        var(--ha-border-radius-sm)
+      );
     }
 
     @keyframes pulse {

src/panels/lovelace/components/hui-section-edit-mode.ts

@@ -0,0 +1,152 @@
+import { mdiDelete, mdiDrag, mdiPencil } from "@mdi/js";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
+import "../../../components/ha-svg-icon";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { deleteSection } from "../editor/config-util";
+import { findLovelaceContainer } from "../editor/lovelace-path";
+import { showEditSectionDialog } from "../editor/section-editor/show-edit-section-dialog";
+import type { Lovelace } from "../types";
+
+@customElement("hui-section-edit-mode")
+export class HuiSectionEditMode extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public lovelace!: Lovelace;
+
+  @property({ attribute: false, type: Number }) public index!: number;
+
+  @property({ attribute: false, type: Number }) public viewIndex!: number;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="section-header">
+        <div class="section-actions">
+          <ha-svg-icon
+            aria-hidden="true"
+            class="handle"
+            .path=${mdiDrag}
+          ></ha-svg-icon>
+          <ha-icon-button
+            .label=${this.hass.localize("ui.common.edit")}
+            @click=${this._editSection}
+            .path=${mdiPencil}
+          ></ha-icon-button>
+          <ha-icon-button
+            .label=${this.hass.localize("ui.common.delete")}
+            @click=${this._deleteSection}
+            .path=${mdiDelete}
+          ></ha-icon-button>
+        </div>
+      </div>
+      <div class="section-wrapper">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private async _editSection(ev) {
+    ev.stopPropagation();
+    showEditSectionDialog(this, {
+      lovelace: this.lovelace!,
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: (newConfig) => {
+        this.lovelace!.saveConfig(newConfig);
+      },
+      viewIndex: this.viewIndex,
+      sectionIndex: this.index,
+    });
+  }
+
+  private async _deleteSection(ev) {
+    ev.stopPropagation();
+    const path = [this.viewIndex, this.index] as [number, number];
+
+    const section = findLovelaceContainer(this.lovelace!.config, path);
+
+    const cardCount = "cards" in section && section.cards?.length;
+
+    if (cardCount) {
+      const confirm = await showConfirmationDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.lovelace.editor.delete_section.title"
+        ),
+        text: this.hass.localize(
+          `ui.panel.lovelace.editor.delete_section.text`
+        ),
+        confirmText: this.hass.localize("ui.common.delete"),
+        destructive: true,
+      });
+
+      if (!confirm) return;
+    }
+
+    const newConfig = deleteSection(
+      this.lovelace!.config,
+      this.viewIndex,
+      this.index
+    );
+    this.lovelace!.saveConfig(newConfig);
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .section-header {
+          position: relative;
+          height: 34px;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+
+        .section-actions {
+          position: absolute;
+          height: 36px;
+          bottom: -2px;
+          right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
+          opacity: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: opacity 0.2s ease-in-out;
+          border-radius: var(--ha-card-border-radius, 12px);
+          border-bottom-left-radius: 0px;
+          border-bottom-right-radius: 0px;
+          background: var(--secondary-background-color);
+          --mdc-icon-button-size: 36px;
+          --mdc-icon-size: 20px;
+          color: var(--primary-text-color);
+        }
+
+        .handle {
+          cursor: grab;
+          padding: 8px;
+        }
+
+        .section-wrapper {
+          padding: 8px;
+          border-radius: var(--ha-card-border-radius, 12px);
+          border-start-end-radius: 0;
+          border: 2px dashed var(--divider-color);
+          min-height: var(--row-height);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-section-edit-mode": HuiSectionEditMode;
+  }
+}

src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts

@@ -1,7 +1,8 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { getBadgeElementClass } from "../../create-element/create-badge-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@@ -67,17 +68,21 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
         break;
     }
     return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
         ${tabs.map(
           (tab) => html`
-            <sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .panel=${tab}
+              .active=${this._currTab === tab}
+            >
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
               )}
-            </sl-tab>
+            </ha-tab-group-tab>
           `
         )}
-      </sl-tab-group>
+      </ha-tab-group>
       ${content}
     `;
   }
@@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
     return [
       HuiTypedElementEditor.styles,
       css`
-        sl-tab-group {
+        ha-tab-group {
           margin-bottom: 16px;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts

@@ -5,10 +5,11 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -98,8 +99,8 @@ export class HuiCreateDialogBadge
             .path=${mdiClose}
           ></ha-icon-button>
           <span slot="title">${title}</span>
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "badge"}
               panel="badge"
@@ -108,16 +109,16 @@ export class HuiCreateDialogBadge
               ${this.hass!.localize(
                 "ui.panel.lovelace.editor.badge_picker.by_badge"
               )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "entity"}
               panel="entity"
               >${this.hass!.localize(
                 "ui.panel.lovelace.editor.badge_picker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
             >
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         ${cache(
           this._currTab === "badge"
@@ -193,10 +194,10 @@ export class HuiCreateDialogBadge
             --mdc-dialog-min-width: 1000px;
           }
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts

@@ -1,7 +1,8 @@
 import type { TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { getCardElementClass } from "../../create-element/create-card-element";
@@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
         `;
     }
     return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
         ${displayedTabs.map(
           (tab) => html`
-            <sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .active=${this._currTab === tab}
+              panel=${tab}
+            >
               ${this.hass.localize(
                 `ui.panel.lovelace.editor.edit_card.tab_${tab}`
               )}
-            </sl-tab>
+            </ha-tab-group-tab>
           `
         )}
-      </sl-tab-group>
+      </ha-tab-group>
       ${content}
     `;
   }
@@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
 
   static override styles = [
     css`
-      sl-tab-group {
+      ha-tab-group {
         margin-bottom: 16px;
       }
 
-      sl-tab {
+      ha-tab-group-tab {
         flex: 1;
       }
 
-      sl-tab::part(base) {
+      ha-tab-group-tab::part(base) {
         width: 100%;
         justify-content: center;
       }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -9,7 +9,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -117,8 +118,8 @@ export class HuiCreateDialogCard
           ></ha-icon-button>
           <span slot="title">${title}</span>
 
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "card"}
               panel="card"
@@ -127,16 +128,16 @@ export class HuiCreateDialogCard
               ${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_card"
               )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
               slot="nav"
               .active=${this._currTab === "entity"}
               panel="entity"
               >${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
             >
-          </sl-tab-group>
+          </ha-tab-group>
         </ha-dialog-header>
         ${cache(
           this._currTab === "card"
@@ -215,10 +216,10 @@ export class HuiCreateDialogCard
             --mdc-dialog-min-width: 1000px;
           }
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -10,7 +10,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -79,18 +80,22 @@ export class HuiConditionalCardEditor
     const isGuiMode = !this._cardEditorEl || this._GUImode;
 
     return html`
-      <sl-tab-group @sl-tab-show=${this._selectTab}>
-        <sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
+      <ha-tab-group @wa-tab-show=${this._selectTab}>
+        <ha-tab-group-tab
+          slot="nav"
+          panel="conditions"
+          .active=${!this._cardTab}
+        >
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.conditional.conditions"
           )}
-        </sl-tab>
-        <sl-tab slot="nav" panel="card" .active=${this._cardTab}>
+        </ha-tab-group-tab>
+        <ha-tab-group-tab slot="nav" panel="card" .active=${this._cardTab}>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.conditional.card"
           )}
-        </sl-tab>
-      </sl-tab-group>
+        </ha-tab-group-tab>
+      </ha-tab-group>
       ${this._cardTab
         ? html`
             <div class="card">
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor
     return [
       configElementStyle,
       css`
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
 
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts

@@ -30,7 +30,8 @@ import type {
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-button-arrow-next";
 import "../../../../components/ha-icon-button-arrow-prev";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -123,14 +124,18 @@ export class HuiStackCardEditor
       ></ha-form>
       <div class="card-config">
         <div class="toolbar">
-          <sl-tab-group @sl-tab-show=${this._handleSelectedCard}>
+          <ha-tab-group @wa-tab-show=${this._handleSelectedCard}>
             ${this._config.cards.map(
               (_card, i) =>
-                html`<sl-tab slot="nav" .panel=${i} .active=${i === selected}>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${i}
+                  .active=${i === selected}
+                >
                   ${i + 1}
-                </sl-tab>`
+                </ha-tab-group-tab>`
             )}
-          </sl-tab-group>
+          </ha-tab-group>
           <ha-icon-button
             @click=${this._handleAddCard}
             .path=${mdiPlus}
@@ -229,8 +234,6 @@ export class HuiStackCardEditor
 
   protected async _handleAddCard() {
     this._selectedCard = this._config!.cards.length;
-    await this.updateComplete;
-    this.renderRoot.querySelector("sl-tab-group")!.syncIndicator();
   }
 
   protected _handleSelectedCard(ev) {
@@ -335,7 +338,7 @@ export class HuiStackCardEditor
           justify-content: space-between;
           align-items: center;
         }
-        sl-tab-group {
+        ha-tab-group {
           flex-grow: 1;
           min-width: 0;
           --ha-tab-track-color: var(--card-background-color);

src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts

@@ -17,30 +17,31 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import "../../../../components/sl-tab-group";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
+import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
+import { saveConfig } from "../../../../data/lovelace/config/types";
 import {
   isStrategyView,
   type LovelaceViewConfig,
 } from "../../../../data/lovelace/config/view";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import type { Lovelace } from "../../types";
+import { addSection, deleteSection, moveSection } from "../config-util";
 import {
   findLovelaceContainer,
   updateLovelaceContainer,
 } from "../lovelace-path";
+import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
 import "./hui-section-settings-editor";
 import "./hui-section-visibility-editor";
 import type { EditSectionDialogParams } from "./show-edit-section-dialog";
-import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
-import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
-import { saveConfig } from "../../../../data/lovelace/config/types";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import { addSection, deleteSection, moveSection } from "../config-util";
-import type { Lovelace } from "../../types";
 
 const TABS = ["tab-settings", "tab-visibility"] as const;
 
@@ -195,10 +196,10 @@ export class HuiDialogEditSection
           </ha-button-menu>
           ${!this._yamlMode
             ? html`
-                <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+                <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                   ${TABS.map(
                     (tab) => html`
-                      <sl-tab
+                      <ha-tab-group-tab
                         slot="nav"
                         .panel=${tab}
                         .active=${this._currTab === tab}
@@ -206,10 +207,10 @@ export class HuiDialogEditSection
                         ${this.hass!.localize(
                           `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                         )}
-                      </sl-tab>
+                      </ha-tab-group-tab>
                     `
                   )}
-                </sl-tab-group>
+                </ha-tab-group>
               `
             : nothing}
         </ha-dialog-header>
@@ -433,10 +434,10 @@ export class HuiDialogEditSection
         ha-dialog.yaml-mode {
           --dialog-content-padding: 0;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -20,6 +20,8 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import {
@@ -53,7 +55,6 @@ import "./hui-view-background-editor";
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import type { EditViewDialogParams } from "./show-edit-view-dialog";
-import "../../../../components/sl-tab-group";
 
 const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
 
@@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement {
               `
             : nothing}
           ${!this._yamlMode
-            ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+            ? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                 ${TABS.map(
                   (tab) => html`
-                    <sl-tab
+                    <ha-tab-group-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
@@ -285,10 +286,10 @@ export class HuiDialogEditView extends LitElement {
                       ${this.hass!.localize(
                         `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
                       )}
-                    </sl-tab>
+                    </ha-tab-group-tab>
                   `
                 )}
-              </sl-tab-group>`
+              </ha-tab-group>`
             : nothing}
         </ha-dialog-header>
         ${content}
@@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement {
           font-size: inherit;
           font-weight: inherit;
         }
-        sl-tab {
+        ha-tab-group-tab {
           flex: 1;
         }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/hui-root.ts

@@ -26,7 +26,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
-import { navigate } from "../../common/navigate";
+import { goBack, navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
@@ -45,7 +45,9 @@ import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-svg-icon";
-import "../../components/sl-tab-group";
+import "../../components/ha-tab-group";
+import "../../components/ha-tab-group-tab";
+import "../../components/ha-tooltip";
 import { createAreaRegistryEntry } from "../../data/area_registry";
 import type { LovelacePanelConfig } from "../../data/lovelace";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -228,10 +230,10 @@ class HUIRoot extends LitElement {
           },
           {
             icon: mdiSofa,
-            key: "ui.panel.lovelace.menu.add_area",
+            key: "ui.panel.lovelace.menu.create_area",
             visible: true,
-            action: this._addArea,
-            overflowAction: this._handleAddArea,
+            action: this._createArea,
+            overflowAction: this._handleCreateArea,
           },
           {
             icon: mdiAccount,
@@ -306,7 +308,7 @@ class HUIRoot extends LitElement {
       (i) => i.visible && (!i.overflow || overflowCanPromote)
     );
 
-    buttonItems.forEach((item) => {
+    buttonItems.forEach((item, index) => {
       const label = [this.hass!.localize(item.key), item.suffix].join(" ");
       const button = item.subItems
         ? html`
@@ -340,11 +342,14 @@ class HUIRoot extends LitElement {
             </ha-button-menu>
           `
         : html`
-            <ha-tooltip slot="actionItems" placement="bottom" .content=${label}>
-              <ha-icon-button
-                .path=${item.icon}
-                @click=${item.buttonAction}
-              ></ha-icon-button>
+            <ha-icon-button
+              slot="actionItems"
+              .id="button-${index}"
+              .path=${item.icon}
+              @click=${item.buttonAction}
+            ></ha-icon-button>
+            <ha-tooltip placement="bottom" .for="button-${index}">
+              ${label}
             </ha-tooltip>
           `;
       result.push(button);
@@ -361,6 +366,7 @@ class HUIRoot extends LitElement {
               }
               showListItemsDialog(this, {
                 title: title,
+                mode: this.narrow ? "bottom-sheet" : "dialog",
                 items: i.subItems!.map((si) => ({
                   iconPath: si.icon,
                   label: this.hass!.localize(si.key),
@@ -409,12 +415,12 @@ class HUIRoot extends LitElement {
         !view.visible.some((e) => e.user === this.hass!.user?.id)) ||
         view.visible === false);
 
-    const tabs = html`<sl-tab-group @sl-tab-show=${this._handleViewSelected}>
+    const tabs = html`<ha-tab-group @wa-tab-show=${this._handleViewSelected}>
       ${views.map((view, index) => {
         const hidden =
           !this._editMode && (view.subview || _isTabHiddenForUser(view));
         return html`
-          <sl-tab
+          <ha-tab-group-tab
             slot="nav"
             panel=${index}
             .active=${this._curView === index}
@@ -471,10 +477,10 @@ class HUIRoot extends LitElement {
                   ></ha-icon-button-arrow-next>
                 `
               : nothing}
-          </sl-tab>
+          </ha-tab-group-tab>
         `;
       })}
-    </sl-tab-group>`;
+    </ha-tab-group>`;
 
     const isSubview = curViewConfig?.subview;
     const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -798,7 +804,7 @@ class HUIRoot extends LitElement {
     if (curViewConfig?.back_path != null) {
       navigate(curViewConfig.back_path, { replace: true });
     } else if (history.length > 1) {
-      history.back();
+      goBack();
     } else if (!views[0].subview) {
       navigate(this.route!.prefix, { replace: true });
     } else {
@@ -832,14 +838,14 @@ class HUIRoot extends LitElement {
     showNewAutomationDialog(this, { mode: "automation" });
   };
 
-  private _handleAddArea(ev: CustomEvent<RequestSelectedDetail>): void {
+  private _handleCreateArea(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    this._addArea();
+    this._createArea();
   }
 
-  private _addArea = async () => {
+  private _createArea = async () => {
     await this.hass.loadFragmentTranslation("config");
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
@@ -849,13 +855,15 @@ class HUIRoot extends LitElement {
         }
         showToast(this, {
           message: this.hass.localize(
-            "ui.panel.lovelace.menu.add_area_success"
+            "ui.panel.lovelace.menu.create_area_success"
           ),
           action: {
             action: () => {
               navigate(`/config/areas/area/${area.area_id}`);
             },
-            text: this.hass.localize("ui.panel.lovelace.menu.add_area_action"),
+            text: this.hass.localize(
+              "ui.panel.lovelace.menu.create_area_action"
+            ),
           },
         });
       },
@@ -1267,7 +1275,7 @@ class HUIRoot extends LitElement {
           display: flex;
           align-items: center;
         }
-        sl-tab-group {
+        ha-tab-group {
           --ha-tab-indicator-color: var(
             --app-header-selection-bar-color,
             var(--app-header-text-color, white)
@@ -1279,10 +1287,10 @@ class HUIRoot extends LitElement {
           min-width: 0;
           height: 100%;
         }
-        sl-tab-group::part(nav) {
+        ha-tab-group::part(nav) {
           padding: 0;
         }
-        sl-tab-group::part(scroll-button) {
+        ha-tab-group::part(scroll-button) {
           background-color: var(--app-header-background-color);
           background: linear-gradient(
             90deg,
@@ -1291,14 +1299,14 @@ class HUIRoot extends LitElement {
           );
           z-index: 1;
         }
-        sl-tab-group::part(scroll-button--end) {
+        ha-tab-group::part(scroll-button-end) {
           background: linear-gradient(
             270deg,
             var(--app-header-background-color),
             transparent
           );
         }
-        .edit-mode sl-tab-group::part(scroll-button) {
+        .edit-mode ha-tab-group::part(scroll-button) {
           background-color: var(--app-header-edit-background-color, #455a64);
           background: linear-gradient(
             90deg,
@@ -1306,7 +1314,7 @@ class HUIRoot extends LitElement {
             transparent
           );
         }
-        .edit-mode sl-tab-group::part(scroll-button--end) {
+        .edit-mode ha-tab-group::part(scroll-button--end) {
           background: linear-gradient(
             270deg,
             var(--app-header-edit-background-color, #455a64),
@@ -1319,41 +1327,35 @@ class HUIRoot extends LitElement {
         .tab-bar {
           display: flex;
         }
-        .edit-mode sl-tab-group {
+        .edit-mode ha-tab-group {
           flex-grow: 0;
           color: var(--app-header-edit-text-color, #fff);
           --ha-tab-active-text-color: var(--app-header-edit-text-color, #fff);
           --ha-tab-indicator-color: var(--app-header-edit-text-color, #fff);
         }
-        sl-tab {
-          --sl-tab-height: var(--header-height, 56px);
-          height: calc(var(--sl-tab-height) - 2px);
+        ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--header-height, 56px);
         }
-        sl-tab[aria-selected="true"] .edit-icon {
+        ha-tab-group-tab[aria-selected="true"] .edit-icon {
           display: inline-flex;
         }
-        sl-tab::part(base) {
-          padding-inline-start: var(
-            --ha-tab-padding-start,
-            var(--sl-spacing-large)
-          );
-          padding-inline-end: var(
-            --ha-tab-padding-end,
-            var(--sl-spacing-large)
+        ha-tab-group-tab::part(base) {
+          padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l));
+          padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l));
+        }
+        ha-tab-group-tab::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2);
+        }
+        ha-tab-group-tab.icon::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2 - 2px);
+          padding-bottom: calc(
+            (var(--ha-tab-group-tab-height) - 20px) / 2 - 4px
           );
         }
-        sl-tab::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
+        .tab-bar ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--tab-bar-height, 56px);
         }
-        sl-tab.icon::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 4px);
-        }
-        .tab-bar sl-tab {
-          --sl-tab-height: var(--tab-bar-height, 56px);
-        }
-        .edit-mode sl-tab[aria-selected="true"]::part(base) {
+        .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
           padding: 0;
           margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2);
         }

src/panels/lovelace/sections/hui-grid-section.ts

@@ -99,12 +99,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
         @item-removed=${this._cardRemoved}
         invert-swap
       >
-        <div
-          class="container ${classMap({
-            "edit-mode": editMode,
-            "import-only": this.importOnly,
-          })}"
-        >
+        <div class="container">
           ${repeat(
             cardsConfig,
             (cardConfig) => this._getKey(cardConfig),
@@ -238,19 +233,6 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           margin: 0 auto;
         }
 
-        .container.edit-mode {
-          padding: 8px;
-          border-radius: var(--ha-card-border-radius, 12px);
-          border-start-end-radius: 0;
-          border: 2px dashed var(--divider-color);
-          min-height: var(--row-height);
-        }
-
-        .container.import-only {
-          border: none;
-          padding: 0 !important;
-        }
-
         .card {
           border-radius: var(--ha-card-border-radius, 12px);
           position: relative;

src/panels/lovelace/views/hui-sections-view.ts

@@ -1,11 +1,5 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import {
-  mdiDelete,
-  mdiDrag,
-  mdiEyeOff,
-  mdiPencil,
-  mdiViewGridPlus,
-} from "@mdi/js";
+import { mdiEyeOff, mdiViewGridPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -22,28 +16,21 @@ import type { LovelaceViewElement } from "../../../data/lovelace";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
 import type { HuiBadge } from "../badges/hui-badge";
-import "./hui-view-header";
 import type { HuiCard } from "../cards/hui-card";
 import "../components/hui-badge-edit-mode";
-import {
-  addSection,
-  deleteSection,
-  moveCard,
-  moveSection,
-} from "../editor/config-util";
+import "../components/hui-section-edit-mode";
+import { addSection, moveCard, moveSection } from "../editor/config-util";
 import type { LovelaceCardPath } from "../editor/lovelace-path";
 import {
-  findLovelaceContainer,
   findLovelaceItems,
   getLovelaceContainerPath,
   parseLovelaceCardPath,
 } from "../editor/lovelace-path";
-import { showEditSectionDialog } from "../editor/section-editor/show-edit-section-dialog";
 import type { HuiSection } from "../sections/hui-section";
 import type { Lovelace } from "../types";
+import "./hui-view-header";
 
 export const DEFAULT_MAX_COLUMNS = 4;
 
@@ -205,41 +192,19 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                   })}
                 >
                     ${
-                      this.lovelace?.editMode
+                      editMode
                         ? html`
-                            <div class="section-header">
-                              ${editMode
-                                ? html`
-                                    <div class="section-actions">
-                                      <ha-svg-icon
-                                        aria-hidden="true"
-                                        class="handle"
-                                        .path=${mdiDrag}
-                                      ></ha-svg-icon>
-                                      <ha-icon-button
-                                        .label=${this.hass.localize(
-                                          "ui.common.edit"
-                                        )}
-                                        @click=${this._editSection}
-                                        .index=${idx}
-                                        .path=${mdiPencil}
-                                      ></ha-icon-button>
-                                      <ha-icon-button
-                                        .label=${this.hass.localize(
-                                          "ui.common.delete"
-                                        )}
-                                        @click=${this._deleteSection}
-                                        .index=${idx}
-                                        .path=${mdiDelete}
-                                      ></ha-icon-button>
-                                    </div>
-                                  `
-                                : nothing}
-                            </div>
+                            <hui-section-edit-mode
+                              .hass=${this.hass}
+                              .lovelace=${this.lovelace}
+                              .index=${idx}
+                              .viewIndex=${this.index}
+                            >
+                              ${section}
+                            </hui-section-edit-mode>
                           `
-                        : nothing
+                        : section
                     }
-                    ${section}
                   </div>
                 </div>
               `;
@@ -375,48 +340,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     this.lovelace!.saveConfig(newConfig);
   }
 
-  private async _editSection(ev) {
-    const index = ev.currentTarget.index;
-
-    showEditSectionDialog(this, {
-      lovelace: this.lovelace!,
-      lovelaceConfig: this.lovelace!.config,
-      saveConfig: (newConfig) => {
-        this.lovelace!.saveConfig(newConfig);
-      },
-      viewIndex: this.index!,
-      sectionIndex: index,
-    });
-  }
-
-  private async _deleteSection(ev) {
-    const index = ev.currentTarget.index;
-
-    const path = [this.index!, index] as [number, number];
-
-    const section = findLovelaceContainer(this.lovelace!.config, path);
-
-    const cardCount = "cards" in section && section.cards?.length;
-
-    if (cardCount) {
-      const confirm = await showConfirmationDialog(this, {
-        title: this.hass.localize(
-          "ui.panel.lovelace.editor.delete_section.title"
-        ),
-        text: this.hass.localize(
-          `ui.panel.lovelace.editor.delete_section.text`
-        ),
-        confirmText: this.hass.localize("ui.common.delete"),
-        destructive: true,
-      });
-
-      if (!confirm) return;
-    }
-
-    const newConfig = deleteSection(this.lovelace!.config, this.index!, index);
-    this.lovelace!.saveConfig(newConfig);
-  }
-
   private _sectionMoved(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
@@ -486,11 +409,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       grid-auto-flow: row dense;
     }
 
-    .handle {
-      cursor: grab;
-      padding: 8px;
-    }
-
     .create-section-container {
       position: relative;
       display: flex;
@@ -574,35 +492,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       );
     }
 
-    .section-header {
-      position: relative;
-      height: 34px;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-    }
-
-    .section-actions {
-      position: absolute;
-      height: 36px;
-      bottom: -2px;
-      right: 0;
-      inset-inline-end: 0;
-      inset-inline-start: initial;
-      opacity: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity 0.2s ease-in-out;
-      border-radius: var(--ha-card-border-radius, 12px);
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-      background: var(--secondary-background-color);
-      --mdc-icon-button-size: 36px;
-      --mdc-icon-size: 20px;
-      color: var(--primary-text-color);
-    }
-
     .imported-cards {
       --column-span: var(--column-count);
       --row-span: 1;