Refactor state function

Co-authored-by: renovate[bot] <29139614+renovate[bot]@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",
@@ -136,7 +135,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.4",
+    "ua-parser-js": "2.0.5",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -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/entity/color/battery_color.ts

@@ -1,15 +1,13 @@
-export const batteryStateColorProperty = (
-  state: string
-): string | undefined => {
+export const batteryStateColor = (state: string): string | undefined => {
   const value = Number(state);
   if (isNaN(value)) {
     return undefined;
   }
   if (value >= 70) {
-    return "--state-sensor-battery-high-color";
+    return "var(--state-sensor-battery-high-color)";
   }
   if (value >= 30) {
-    return "--state-sensor-battery-medium-color";
+    return "var(--state-sensor-battery-medium-color)";
   }
-  return "--state-sensor-battery-low-color";
+  return "var(--state-sensor-battery-low-color)";
 };

src/common/entity/state_active.ts

@@ -5,12 +5,15 @@ import { computeDomain } from "./compute_domain";
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
   const compareState = state !== undefined ? state : stateObj?.state;
+  return domainStateActive(domain, compareState);
+}
 
+export function domainStateActive(domain: string, state: string) {
   if (["button", "event", "input_button", "scene"].includes(domain)) {
-    return compareState !== UNAVAILABLE;
+    return state !== UNAVAILABLE;
   }
 
-  if (isUnavailableState(compareState)) {
+  if (isUnavailableState(state)) {
     return false;
   }
 
@@ -18,40 +21,40 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
   // such as "alert" where "off" is still a somewhat active state and
   // therefore gets a custom color and "idle" is instead the state that
   // matches what most other domains consider inactive.
-  if (compareState === OFF && domain !== "alert") {
+  if (state === OFF && domain !== "alert") {
     return false;
   }
 
   // Custom cases
   switch (domain) {
     case "alarm_control_panel":
-      return compareState !== "disarmed";
+      return state !== "disarmed";
     case "alert":
       // "on" and "off" are active, as "off" just means alert was acknowledged but is still active
-      return compareState !== "idle";
+      return state !== "idle";
     case "cover":
-      return compareState !== "closed";
+      return state !== "closed";
     case "device_tracker":
     case "person":
-      return compareState !== "not_home";
+      return state !== "not_home";
     case "lawn_mower":
-      return ["mowing", "error"].includes(compareState);
+      return ["mowing", "error"].includes(state);
     case "lock":
-      return compareState !== "locked";
+      return state !== "locked";
     case "media_player":
-      return compareState !== "standby";
+      return state !== "standby";
     case "vacuum":
-      return !["idle", "docked", "paused"].includes(compareState);
+      return !["idle", "docked", "paused"].includes(state);
     case "valve":
-      return compareState !== "closed";
+      return state !== "closed";
     case "plant":
-      return compareState === "problem";
+      return state === "problem";
     case "group":
-      return ["on", "home", "open", "locked", "problem"].includes(compareState);
+      return ["on", "home", "open", "locked", "problem"].includes(state);
     case "timer":
-      return compareState === "active";
+      return state === "active";
     case "camera":
-      return compareState === "streaming";
+      return state === "streaming";
   }
 
   return true;

src/common/entity/state_color.ts

@@ -1,13 +1,11 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
-import { computeCssVariable } from "../../resources/css-variables";
 import { slugify } from "../string/slugify";
-import { batteryStateColorProperty } from "./color/battery_color";
+import { batteryStateColor } from "./color/battery_color";
 import { computeDomain } from "./compute_domain";
-import { stateActive } from "./state_active";
+import { domainStateActive } from "./state_active";
 
 const STATE_COLORED_DOMAIN = new Set([
   "alarm_control_panel",
@@ -42,73 +40,20 @@ const STATE_COLORED_DOMAIN = new Set([
   "water_heater",
 ]);
 
-export const stateColorCss = (stateObj: HassEntity, state?: string) => {
-  const compareState = state !== undefined ? state : stateObj?.state;
-  if (compareState === UNAVAILABLE) {
-    return `var(--state-unavailable-color)`;
-  }
-
-  const properties = stateColorProperties(stateObj, state);
-  if (properties) {
-    return computeCssVariable(properties);
-  }
-
-  return undefined;
-};
-
-export const domainStateColorProperties = (
-  domain: string,
+export const stateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
   stateObj: HassEntity,
   state?: string
-): string[] => {
-  const compareState = state !== undefined ? state : stateObj.state;
-  const active = stateActive(stateObj, state);
-
-  return domainColorProperties(
-    domain,
-    stateObj.attributes.device_class,
-    compareState,
-    active
-  );
-};
-
-export const domainColorProperties = (
-  domain: string,
-  deviceClass: string | undefined,
-  state: string,
-  active: boolean
 ) => {
-  const properties: string[] = [];
-
-  const stateKey = slugify(state, "_");
-  const activeKey = active ? "active" : "inactive";
-
-  if (deviceClass) {
-    properties.push(`--state-${domain}-${deviceClass}-${stateKey}-color`);
-  }
-
-  properties.push(
-    `--state-${domain}-${stateKey}-color`,
-    `--state-${domain}-${activeKey}-color`,
-    `--state-${activeKey}-color`
-  );
-
-  return properties;
-};
-
-export const stateColorProperties = (
-  stateObj: HassEntity,
-  state?: string
-): string[] | undefined => {
-  const compareState = state !== undefined ? state : stateObj?.state;
   const domain = computeDomain(stateObj.entity_id);
   const dc = stateObj.attributes.device_class;
+  const compareState = state !== undefined ? state : stateObj.state;
 
   // Special rules for battery coloring
   if (domain === "sensor" && dc === "battery") {
-    const property = batteryStateColorProperty(compareState);
+    const property = batteryStateColor(compareState);
     if (property) {
-      return [property];
+      return property;
     }
   }
 
@@ -116,17 +61,52 @@ export const stateColorProperties = (
   if (domain === "group") {
     const groupDomain = computeGroupDomain(stateObj as GroupEntity);
     if (groupDomain && STATE_COLORED_DOMAIN.has(groupDomain)) {
-      return domainStateColorProperties(groupDomain, stateObj, state);
+      return domainStateColor(element, groupDomain, undefined, compareState);
     }
   }
 
   if (STATE_COLORED_DOMAIN.has(domain)) {
-    return domainStateColorProperties(domain, stateObj, state);
+    return domainStateColor(element, domain, dc, compareState);
   }
 
   return undefined;
 };
 
+export const domainStateColor = (
+  element: HTMLElement | CSSStyleDeclaration,
+  domain: string,
+  deviceClass: string | undefined,
+  state: string
+) => {
+  const style =
+    element instanceof CSSStyleDeclaration
+      ? element
+      : getComputedStyle(element);
+
+  const stateKey = slugify(state, "_");
+
+  const active = domainStateActive(domain, state);
+  const activeKey = active ? "active" : "inactive";
+
+  const variables = [
+    `--state-${domain}-${stateKey}-color`,
+    `--state-${domain}-${activeKey}-color`,
+    `--state-${activeKey}-color`,
+  ];
+
+  if (deviceClass) {
+    variables.unshift(`--state-${domain}-${deviceClass}-${stateKey}-color`);
+  }
+
+  for (const variable of variables) {
+    const value = style.getPropertyValue(variable).trim();
+    if (value) {
+      return value;
+    }
+  }
+  return undefined;
+};
+
 export const stateColorBrightness = (stateObj: HassEntity): string => {
   if (
     stateObj.attributes.brightness &&

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/chart/timeline-color.ts

@@ -3,7 +3,7 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
+import { stateColor } from "../../common/entity/state_color";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { computeCssValue } from "../../resources/css-variables";
 
@@ -30,22 +30,16 @@ function computeTimelineStateColor(
     return computeCssValue("--history-unknown-color", computedStyles);
   }
 
-  const properties = stateColorProperties(stateObj, state);
+  const color = stateColor(computedStyles, stateObj, state);
 
-  if (!properties) {
-    return undefined;
-  }
-
-  const rgb = computeCssValue(properties, computedStyles);
-
-  if (!rgb) return undefined;
+  if (!color) return undefined;
 
   const domain = computeDomain(stateObj.entity_id);
   const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
   if (!shade) {
-    return rgb;
+    return color;
   }
-  return lab2hex(labBrighten(rgb2lab(hex2rgb(rgb)), shade));
+  return lab2hex(labBrighten(rgb2lab(hex2rgb(color)), shade));
 }
 
 let colorIndex = 0;

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-badge.ts

@@ -9,7 +9,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import {
   stateColorBrightness,
-  stateColorCss,
+  stateColor,
 } from "../../common/entity/state_color";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import { cameraUrlWithWidthHeight } from "../../data/camera";
@@ -148,7 +148,7 @@ export class StateBadge extends LitElement {
           // Externally provided overriding color wins over state color
           iconStyle.color = this.color;
         } else if (this._stateColor) {
-          const color = stateColorCss(stateObj);
+          const color = stateColor(this, stateObj);
           if (color) {
             iconStyle.color = color;
           }
@@ -169,7 +169,8 @@ export class StateBadge extends LitElement {
           if (stateObj.attributes.hvac_action) {
             const hvacAction = stateObj.attributes.hvac_action;
             if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-              iconStyle.color = stateColorCss(
+              iconStyle.color = stateColor(
+                this,
                 stateObj,
                 CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
               )!;

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/components/lights/light-color-temp-picker.ts

@@ -10,7 +10,7 @@ import {
   temperature2rgb,
 } from "../../../../common/color/convert-light-color";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stateColorCss } from "../../../../common/entity/state_color";
+import { stateColor } from "../../../../common/entity/state_color";
 import { throttle } from "../../../../common/util/throttle";
 import "../../../../components/ha-control-slider";
 import { UNAVAILABLE } from "../../../../data/entity";
@@ -66,7 +66,7 @@ class LightColorTempPicker extends LitElement {
       this.stateObj.attributes.max_color_temp_kelvin ?? DEFAULT_MAX_KELVIN;
 
     const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
 
     return html`
       <ha-control-slider

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

@@ -2,7 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-state-icon";
 import type { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
@@ -32,7 +32,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
       return nothing;
     }
 
-    const color = stateColorCss(this.stateObj);
+    const color = stateColor(this, this.stateObj);
     const style = {
       "--icon-color": color,
     };

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

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

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,19 +15,16 @@ 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";
 import memoizeOne from "memoize-one";
-import { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
 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";
@@ -64,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 {
@@ -261,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
@@ -463,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`
@@ -510,7 +506,6 @@ export default class HaAutomationActionRow extends LitElement {
       ...this._clipboard,
       action: deepClone(this.action),
     };
-    copyToClipboard(dump(this.action));
   }
 
   private _onDisable = () => {
@@ -641,14 +636,6 @@ export default class HaAutomationActionRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Action | Action[]) => {
-    if (ensureArray(value).some((val) => !isAction(val))) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
   private _copyAction = () => {
     this._setClipboard();
     showToast(this, {
@@ -737,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,23 +362,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      // @ts-expect-error Requires library bump to ES2023
-      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", {
-      // @ts-expect-error Requires library bump to ES2023
-      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

@@ -14,20 +14,17 @@ import {
   mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 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 { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
 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";
@@ -41,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,
@@ -372,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`
@@ -389,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>
@@ -443,7 +437,6 @@ export default class HaAutomationConditionRow extends LitElement {
       ...this._clipboard,
       condition: deepClone(this.condition),
     };
-    copyToClipboard(dump(this.condition));
   }
 
   private _onDisable = () => {
@@ -589,14 +582,6 @@ export default class HaAutomationConditionRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Condition | Condition[]) => {
-    if (ensureArray(value).some((val) => !isCondition(val))) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
   private _copyCondition = () => {
     this._setClipboard();
     showToast(this, {
@@ -708,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,23 +381,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      // @ts-expect-error Requires library bump to ES2023
-      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", {
-      // @ts-expect-error Requires library bump to ES2023
-      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,7 @@
 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 "../../../components/ha-resizable-bottom-sheet";
+import type { HaResizableBottomSheet } from "../../../components/ha-resizable-bottom-sheet";
 import {
   isCondition,
   isScriptField,
@@ -37,7 +37,8 @@ export default class HaAutomationSidebar extends LitElement {
 
   @state() private _yamlMode = false;
 
-  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
+  @query("ha-resizable-bottom-sheet")
+  private _bottomSheetElement?: HaResizableBottomSheet;
 
   private _renderContent() {
     // get config type
@@ -147,9 +148,9 @@ export default class HaAutomationSidebar extends LitElement {
 
     if (this.narrow) {
       return html`
-        <ha-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
+        <ha-resizable-bottom-sheet @bottom-sheet-closed=${this._closeSidebar}>
           ${this._renderContent()}
-        </ha-bottom-sheet>
+        </ha-resizable-bottom-sheet>
       `;
     }
 

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

@@ -34,6 +34,7 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
+  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -159,7 +160,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 +207,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 +252,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}
@@ -497,30 +498,12 @@ export class HaManualAutomationEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      const keysPresent = Object.keys(normalized).filter(
-        (key) => ensureArray(normalized[key]).length
-      );
-
-      if (
-        keysPresent.length === 1 &&
-        ["triggers", "conditions", "actions"].includes(keysPresent[0])
-      ) {
-        // if only one type of element is pasted, insert under the currently active item
-        const previousConfig = { ...this.config };
-        if (this._tryInsertAfterSelected(normalized[keysPresent[0]])) {
-          this._previousConfig = previousConfig;
-          this._showPastedToastWithUndo();
-          return;
-        }
-      }
-
       if (
         this.dirty ||
         ensureArray(this.config.triggers)?.length ||
         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",
@@ -641,30 +624,21 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _tryInsertAfterSelected(
-    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();
     }
   }
 

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

@@ -291,12 +291,7 @@ export default class HaAutomationOption extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      // @ts-expect-error Requires library bump to ES2023
-      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;
   }
 
@@ -255,4 +254,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

@@ -14,20 +14,17 @@ import {
   mdiStopCircleOutline,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 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 { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
 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 { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-automation-row";
@@ -43,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";
@@ -361,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
@@ -514,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,
@@ -536,8 +529,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       ...this._clipboard,
       trigger: this.trigger,
     };
-
-    copyToClipboard(dump(this.trigger));
   }
 
   private _onDelete = () => {
@@ -645,14 +636,6 @@ export default class HaAutomationTriggerRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
-  private _insertAfter = (value: Trigger | Trigger[]) => {
-    if (ensureArray(value).some((val) => !isTrigger(val))) {
-      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,23 +321,7 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      // @ts-expect-error Requires library bump to ES2023
-      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", {
-      // @ts-expect-error Requires library bump to ES2023
-      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/script/manual-script-editor.ts

@@ -198,7 +198,7 @@ export class HaManualScriptEditor extends LitElement {
       role="region"
       aria-labelledby="sequence-heading"
       .actions=${this.config.sequence || []}
-      .highlightedActions=${this._pastedConfig?.sequence}
+      .highlightedActions=${this._pastedConfig?.sequence || []}
       @value-changed=${this._sequenceChanged}
       @open-sidebar=${this._openSidebar}
       @request-close-sidebar=${this._triggerCloseSidebar}
@@ -377,20 +377,6 @@ export class HaManualScriptEditor extends LitElement {
     if (normalized) {
       ev.preventDefault();
 
-      const keysPresent = Object.keys(normalized).filter(
-        (key) => ensureArray(normalized[key]).length
-      );
-
-      if (keysPresent.length === 1 && ["sequence"].includes(keysPresent[0])) {
-        // if only one type of element is pasted, insert under the currently active item
-        const previousConfig = { ...this.config };
-        if (this._tryInsertAfterSelected(normalized[keysPresent[0]])) {
-          this._previousConfig = previousConfig;
-          this._showPastedToastWithUndo();
-          return;
-        }
-      }
-
       if (
         this.dirty ||
         ensureArray(this.config.sequence)?.length ||
@@ -541,13 +527,6 @@ export class HaManualScriptEditor extends LitElement {
     fireEvent(this, "save-script");
   }
 
-  private _tryInsertAfterSelected(config: Action | Action[]): boolean {
-    if (this._sidebarConfig && "insertAfter" in this._sidebarConfig) {
-      return this._sidebarConfig.insertAfter(config as any);
-    }
-    return false;
-  }
-
   public expandAll() {
     this._collapsableElements?.forEach((element) => {
       element.expandAll();

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/badges/hui-entity-badge.ts

@@ -11,7 +11,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-badge";
 import "../../../components/ha-ripple";
 import "../../../components/ha-state-icon";
@@ -132,7 +132,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       }
 
       // Fallback to state color
-      return stateColorCss(stateObj);
+      return stateColor(this, stateObj);
     }
   );
 

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-alarm-modes-card-feature.ts

@@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
@@ -143,7 +143,7 @@ class HuiAlarmModeCardFeature
       return nothing;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const supportedModes = supportedAlarmModes(this._stateObj).reverse();
 

src/panels/lovelace/card-features/hui-area-controls-card-feature.ts

@@ -11,14 +11,13 @@ import {
   toggleGroupEntities,
 } from "../../../common/entity/group_entities";
 import { stateActive } from "../../../common/entity/state_active";
-import { domainColorProperties } from "../../../common/entity/state_color";
+import { domainStateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-svg-icon";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
 import { forwardHaptic } from "../../../data/haptics";
-import { computeCssVariable } from "../../../resources/css-variables";
 import type { HomeAssistant } from "../../../types";
 import type { AreaCardFeatureContext } from "../cards/hui-area-card";
 import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
@@ -258,14 +257,12 @@ class HuiAreaControlsCardFeature
             ? ensureArray(button.filter.device_class)[0]
             : undefined;
 
-          const activeColor = computeCssVariable(
-            domainColorProperties(domain, deviceClass, groupState, true)
-          );
+          const color = domainStateColor(this, domain, deviceClass, groupState);
 
           return html`
             <ha-control-button
               style=${styleMap({
-                "--active-color": activeColor,
+                "--active-color": color,
               })}
               .title=${label}
               aria-label=${label}

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/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -5,7 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import "../../../components/ha-control-select-menu";
@@ -145,7 +145,7 @@ class HuiClimateHvacModesCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const ordererHvacModes = (this._stateObj.attributes.hvac_modes || [])
       .concat()

src/panels/lovelace/card-features/hui-cover-position-card-feature.ts

@@ -5,7 +5,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-slider";
 import { CoverEntityFeature, type CoverEntity } from "../../../data/cover";
@@ -84,11 +84,11 @@ class HuiCoverPositionCardFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const openColor = stateColorCss(this._stateObj, "open");
+    const openColor = stateColor(this, this._stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this._stateObj);
+      : stateColor(this, this._stateObj);
 
     const style = {
       "--feature-color": color,

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts

@@ -4,7 +4,7 @@ import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import type { CoverEntity } from "../../../data/cover";
 import { CoverEntityFeature } from "../../../data/cover";
@@ -84,11 +84,11 @@ class HuiCoverTiltPositionCardFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const openColor = stateColorCss(this._stateObj, "open");
+    const openColor = stateColor(this, this._stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this._stateObj);
+      : stateColor(this, this._stateObj);
 
     const style = {
       "--feature-color": color,

src/panels/lovelace/card-features/hui-fan-oscillate-card-feature.ts

@@ -4,7 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -112,7 +112,7 @@ class HuiFanOscillateCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const yesNo = ["no", "yes"] as const;
     const options = yesNo.map<ControlSelectOption>((oscillating) => ({

src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts

@@ -4,7 +4,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { stateColorCss } from "../../../common/entity/state_color";
+import { stateColor } from "../../../common/entity/state_color";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -117,7 +117,7 @@ class HuiHumidifierToggleCardFeature
       return null;
     }
 
-    const color = stateColorCss(this._stateObj);
+    const color = stateColor(this, this._stateObj);
 
     const options = ["off", "on"].map<ControlSelectOption>((entityState) => ({
       value: entityState,