Support opening a new config flow when the current one is finished (#26964 )

Fix hass-subpage toolbar position (#27003 )
Move close to the secondary action to allow enter key to submit (#27005 )
2025-09-11 14:09:44 +00:00 · 2025-09-11 15:49:09 +02:00 · 2025-09-11 15:26:14 +02:00 · 2025-09-11 13:16:02 +00:00 · 2025-09-11 15:12:20 +02:00 · 2025-09-11 14:55:07 +02:00
54 changed files with 528 additions and 575 deletions
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/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;
        }
--- a/package.json
+++ b/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.2",
    "@lezer/highlight": "1.2.1",
    "@lit-labs/motion": "1.0.9",
    "@lit-labs/observers": "2.0.6",
--- a/prettier.config.js
+++ b/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
+      },
+    },
+  ],
 };
--- a/src/components/ha-control-slider.ts
+++ b/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;
--- a/src/components/ha-form/ha-form-expandable.ts
+++ b/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;
  }
 }
--- a/src/components/ha-tab-group-tab.ts
+++ b/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;
+  }
+}
--- a/src/components/ha-tab-group.ts
+++ b/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;
+  }
+}
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -592,7 +592,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
        if (
          entity.labels.includes(target.id) &&
          !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity)
+          this._entityRegMeetsFilter(entity, true)
        ) {
          newEntities.push(entity.entity_id);
        }
@@ -717,8 +717,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;
    }

--- a/src/components/sl-tab-group.ts
+++ b/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;
-  }
-}
--- a/src/components/tile/ha-tile-icon.ts
+++ b/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;
--- a/src/data/automation.ts
+++ b/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: {
--- a/src/data/data_entry_flow.ts
+++ b/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;
--- a/src/data/script.ts
+++ b/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
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/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 {
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/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 {
@@ -299,18 +300,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 +420,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;
        }
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -99,28 +99,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 +148,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;
--- a/src/panels/config/automation/action/ha-automation-action-editor.ts
+++ b/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,
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -15,7 +15,6 @@ import {
  mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import { dump } from "js-yaml";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -26,7 +25,6 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
@@ -63,7 +61,7 @@ import type {
  NonConditionAction,
  RepeatAction,
 } from "../../../../data/script";
-import { getActionType, isAction } from "../../../../data/script";
+import { getActionType } from "../../../../data/script";
 import { describeAction } from "../../../../data/script_i18n";
 import { callExecuteScript } from "../../../../data/service";
 import {
@@ -509,7 +507,6 @@ export default class HaAutomationActionRow extends LitElement {
      ...this._clipboard,
      action: deepClone(this.action),
    };
-    copyToClipboard(dump(this.action));
  }

  private _onDisable = () => {
@@ -640,18 +637,6 @@ export default class HaAutomationActionRow extends LitElement {
    fireEvent(this, "duplicate");
  };

-  private _insertAfter = (value: Action | Action[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isAction(val)) &&
-      !isAction(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
  private _copyAction = () => {
    this._setClipboard();
    showToast(this, {
@@ -740,7 +725,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,
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -26,7 +26,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import type HaAutomationActionRow from "./ha-automation-action-row";
 import { getAutomationActionType } from "./ha-automation-action-row";
-import { ensureArray } from "../../../../common/array/ensure-array";

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

--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/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,
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -19,7 +19,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { dump } from "js-yaml";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
@@ -39,7 +38,7 @@ import type {
  Condition,
  ConditionSidebarConfig,
 } from "../../../../data/automation";
-import { isCondition, testCondition } from "../../../../data/automation";
+import { testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
 import {
  CONDITION_BUILDING_BLOCKS,
@@ -70,7 +69,6 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";

 export interface ConditionElement extends LitElement {
  condition: Condition;
@@ -388,12 +386,12 @@ export default class HaAutomationConditionRow extends LitElement {
            error: this._testingResult === false,
          })}"
        >
-          ${this._testingResult
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_pass"
-              )
+          ${this._testingResult === undefined
+            ? nothing
            : this.hass.localize(
-                "ui.panel.config.automation.editor.conditions.testing_error"
+                `ui.panel.config.automation.editor.conditions.testing_${
+                  this._testingResult ? "pass" : "error"
+                }`
              )}
        </div>
      </ha-card>
@@ -442,7 +440,6 @@ export default class HaAutomationConditionRow extends LitElement {
      ...this._clipboard,
      condition: deepClone(this.condition),
    };
-    copyToClipboard(dump(this.condition));
  }

  private _onDisable = () => {
@@ -588,18 +585,6 @@ export default class HaAutomationConditionRow extends LitElement {
    fireEvent(this, "duplicate");
  };

-  private _insertAfter = (value: Condition | Condition[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isCondition(val)) &&
-      !isCondition(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
  private _copyCondition = () => {
    this._setClipboard();
    showToast(this, {
@@ -711,7 +696,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,
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -24,7 +24,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-condition-row";
 import type HaAutomationConditionRow from "./ha-automation-condition-row";
-import { ensureArray } from "../../../../common/array/ensure-array";

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

--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -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;
  }
 }
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/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}
@@ -494,22 +495,6 @@ export class HaManualAutomationEditor extends LitElement {
      return;
    }

-    const keysPresent = Object.keys(normalized).filter(
-      (key) =>
-        ["triggers", "conditions", "actions"].includes(key) &&
-        ensureArray(normalized[key]).length
-    );
-
-    if (keysPresent.length === 1) {
-      // if only one type of automation element is pasted, insert under the currently active item
-      const previousConfig = { ...this.config };
-      if (this._insertAfterSelected(normalized[keysPresent[0]])) {
-        this._previousConfig = previousConfig;
-        this._showPastedToastWithUndo();
-        return;
-      }
-    }
-
    if (normalized) {
      ev.preventDefault();

@@ -519,7 +504,6 @@ export class HaManualAutomationEditor extends LitElement {
        ensureArray(this.config.conditions)?.length ||
        ensureArray(this.config.actions)?.length
      ) {
-        // ask if they want to append or replace if we have existing config or there are unsaved changes
        const result = await new Promise<boolean>((resolve) => {
          showPasteReplaceDialog(this, {
            domain: "automation",
@@ -640,30 +624,21 @@ export class HaManualAutomationEditor extends LitElement {
    });
  }

-  private _insertAfterSelected(
-    config: Trigger | Condition | Action | Trigger[] | Condition[] | Action[]
-  ): boolean {
-    if (this._sidebarConfig && "insertAfter" in this._sidebarConfig) {
-      return this._sidebarConfig.insertAfter(config as any);
-    }
-    return false;
-  }
-
  public copySelectedRow() {
-    if (this._sidebarConfig && "copy" in this._sidebarConfig) {
-      this._sidebarConfig.copy();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
+      (this._sidebarConfig as ActionSidebarConfig).copy();
    }
  }

  public cutSelectedRow() {
-    if (this._sidebarConfig && "cut" in this._sidebarConfig) {
-      this._sidebarConfig.cut();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
+      (this._sidebarConfig as ActionSidebarConfig).cut();
    }
  }

  public deleteSelectedRow() {
-    if (this._sidebarConfig && "delete" in this._sidebarConfig) {
-      this._sidebarConfig.delete();
+    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
+      (this._sidebarConfig as ActionSidebarConfig).delete();
    }
  }

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

--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
+++ b/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>
--- a/src/panels/config/automation/styles.ts
+++ b/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;
  }

--- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
+++ b/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;
        }

--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -19,7 +19,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { dump } from "js-yaml";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
@@ -41,7 +40,7 @@ import type {
  Trigger,
  TriggerSidebarConfig,
 } from "../../../../data/automation";
-import { isTrigger, subscribeTrigger } from "../../../../data/automation";
+import { subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -76,7 +75,6 @@ import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
-import { copyToClipboard } from "../../../../common/util/copy-clipboard";

 export interface TriggerElement extends LitElement {
  trigger: Trigger;
@@ -513,7 +511,6 @@ export default class HaAutomationTriggerRow extends LitElement {
      copy: this._copyTrigger,
      duplicate: this._duplicateTrigger,
      cut: this._cutTrigger,
-      insertAfter: this._insertAfter,
      config: trigger || this.trigger,
      uiSupported: this._uiSupported(this._getType(trigger || this.trigger)),
      yamlMode: this._yamlMode,
@@ -535,8 +532,6 @@ export default class HaAutomationTriggerRow extends LitElement {
      ...this._clipboard,
      trigger: this.trigger,
    };
-
-    copyToClipboard(dump(this.trigger));
  }

  private _onDelete = () => {
@@ -644,18 +639,6 @@ export default class HaAutomationTriggerRow extends LitElement {
    fireEvent(this, "duplicate");
  };

-  private _insertAfter = (value: Trigger | Trigger[]) => {
-    if (
-      Array.isArray(value) &&
-      !value.every((val) => isTrigger(val)) &&
-      !isTrigger(value)
-    ) {
-      return false;
-    }
-    fireEvent(this, "insert-after", { value });
-    return true;
-  };
-
  private _copyTrigger = () => {
    this._setClipboard();
    showToast(this, {
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -25,7 +25,6 @@ import {
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
-import { ensureArray } from "../../../../common/array/ensure-array";

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

--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/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"
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
+++ b/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;
        }
--- a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts
+++ b/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;
        }
--- a/src/panels/config/network/supervisor-network.ts
+++ b/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;
        }
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/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;
--- a/src/panels/lovelace/card-features/common/card-feature-styles.ts
+++ b/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);
--- a/src/panels/lovelace/card-features/hui-card-features.ts
+++ b/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;
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -18,17 +18,18 @@ import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-icon";
-import type { TileIconImageStyle } from "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-info";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import "../../../state-display/state-display";
 import type { HomeAssistant } from "../../../types";
 import "../card-features/hui-card-features";
+import type { LovelaceCardFeatureContext } from "../card-features/types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type {
  LovelaceCard,
  LovelaceCardEditor,
@@ -36,8 +37,6 @@ import type {
 } from "../types";
 import { renderTileBadge } from "./tile/badges/tile-badge";
 import type { TileCardConfig } from "./types";
-import type { LovelaceCardFeatureContext } from "../card-features/types";
-import { createEntityNotFoundWarning } from "../components/hui-warning";

 export const getEntityDefaultTileIconAction = (entityId: string) => {
  const domain = computeDomain(entityId);
@@ -48,11 +47,6 @@ export const getEntityDefaultTileIconAction = (entityId: string) => {
  return supportsIconAction ? "toggle" : "none";
 };

-const DOMAIN_IMAGE_SHAPE: Record<string, TileIconImageStyle> = {
-  update: "square",
-  media_player: "rounded-square",
-};
-
@customElement("hui-tile-card")
 export class HuiTileCard extends LitElement implements LovelaceCard {
  public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -318,10 +312,10 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                hasDoubleClick: hasAction(this._config!.icon_double_tap_action),
              })}
              .interactive=${this._hasIconAction}
-              .imageStyle=${DOMAIN_IMAGE_SHAPE[domain]}
              .imageUrl=${imageUrl}
              data-domain=${ifDefined(domain)}
              data-state=${ifDefined(stateObj?.state)}
+              class=${classMap({ image: Boolean(imageUrl) })}
            >
              <ha-state-icon
                slot="icon"
@@ -465,8 +459,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
      animation: pulse 1s infinite;
    }

-    ha-tile-badge.not-found {
-      --tile-badge-background-color: var(--red-color);
+    /* Make sure we display the whole image */
+    ha-tile-icon.image[data-domain="update"] {
+      --tile-icon-border-radius: 0;
+    }
+    /* Make sure we display the almost the whole image but it often use text */
+    ha-tile-icon.image[data-domain="media_player"] {
+      --tile-icon-border-radius: min(
+        var(--ha-tile-icon-border-radius, var(--ha-border-radius-sm)),
+        var(--ha-border-radius-sm)
+      );
    }

    @keyframes pulse {
--- a/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { getBadgeElementClass } from "../../create-element/create-badge-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@@ -67,17 +68,21 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
        break;
    }
    return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
        ${tabs.map(
          (tab) => html`
-            <sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .panel=${tab}
+              .active=${this._currTab === tab}
+            >
              ${this.hass!.localize(
                `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
              )}
-            </sl-tab>
+            </ha-tab-group-tab>
          `
        )}
-      </sl-tab-group>
+      </ha-tab-group>
      ${content}
    `;
  }
@@ -86,13 +91,13 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
    return [
      HuiTypedElementEditor.styles,
      css`
-        sl-tab-group {
+        ha-tab-group {
          margin-bottom: 16px;
        }
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
@@ -5,10 +5,11 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-dialog";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -98,8 +99,8 @@ export class HuiCreateDialogBadge
            .path=${mdiClose}
          ></ha-icon-button>
          <span slot="title">${title}</span>
-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
              slot="nav"
              .active=${this._currTab === "badge"}
              panel="badge"
@@ -108,16 +109,16 @@ export class HuiCreateDialogBadge
              ${this.hass!.localize(
                "ui.panel.lovelace.editor.badge_picker.by_badge"
              )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
              slot="nav"
              .active=${this._currTab === "entity"}
              panel="entity"
              >${this.hass!.localize(
                "ui.panel.lovelace.editor.badge_picker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
            >
-          </sl-tab-group>
+          </ha-tab-group>
        </ha-dialog-header>
        ${cache(
          this._currTab === "badge"
@@ -193,10 +194,10 @@ export class HuiCreateDialogBadge
            --mdc-dialog-min-width: 1000px;
          }
        }
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -1,7 +1,8 @@
 import type { TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { getCardElementClass } from "../../create-element/create-card-element";
@@ -90,17 +91,21 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
        `;
    }
    return html`
-      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+      <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
        ${displayedTabs.map(
          (tab) => html`
-            <sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
+            <ha-tab-group-tab
+              slot="nav"
+              .active=${this._currTab === tab}
+              panel=${tab}
+            >
              ${this.hass.localize(
                `ui.panel.lovelace.editor.edit_card.tab_${tab}`
              )}
-            </sl-tab>
+            </ha-tab-group-tab>
          `
        )}
-      </sl-tab-group>
+      </ha-tab-group>
      ${content}
    `;
  }
@@ -115,15 +120,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf

  static override styles = [
    css`
-      sl-tab-group {
+      ha-tab-group {
        margin-bottom: 16px;
      }

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

-      sl-tab::part(base) {
+      ha-tab-group-tab::part(base) {
        width: 100%;
        justify-content: center;
      }
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@@ -9,7 +9,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -117,8 +118,8 @@ export class HuiCreateDialogCard
          ></ha-icon-button>
          <span slot="title">${title}</span>

-          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
-            <sl-tab
+          <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            <ha-tab-group-tab
              slot="nav"
              .active=${this._currTab === "card"}
              panel="card"
@@ -127,16 +128,16 @@ export class HuiCreateDialogCard
              ${this.hass!.localize(
                "ui.panel.lovelace.editor.cardpicker.by_card"
              )}
-            </sl-tab>
-            <sl-tab
+            </ha-tab-group-tab>
+            <ha-tab-group-tab
              slot="nav"
              .active=${this._currTab === "entity"}
              panel="entity"
              >${this.hass!.localize(
                "ui.panel.lovelace.editor.cardpicker.by_entity"
-              )}</sl-tab
+              )}</ha-tab-group-tab
            >
-          </sl-tab-group>
+          </ha-tab-group>
        </ha-dialog-header>
        ${cache(
          this._currTab === "card"
@@ -215,10 +216,10 @@ export class HuiCreateDialogCard
            --mdc-dialog-min-width: 1000px;
          }
        }
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@@ -10,7 +10,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -79,18 +80,22 @@ export class HuiConditionalCardEditor
    const isGuiMode = !this._cardEditorEl || this._GUImode;

    return html`
-      <sl-tab-group @sl-tab-show=${this._selectTab}>
-        <sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
+      <ha-tab-group @wa-tab-show=${this._selectTab}>
+        <ha-tab-group-tab
+          slot="nav"
+          panel="conditions"
+          .active=${!this._cardTab}
+        >
          ${this.hass!.localize(
            "ui.panel.lovelace.editor.card.conditional.conditions"
          )}
-        </sl-tab>
-        <sl-tab slot="nav" panel="card" .active=${this._cardTab}>
+        </ha-tab-group-tab>
+        <ha-tab-group-tab slot="nav" panel="card" .active=${this._cardTab}>
          ${this.hass!.localize(
            "ui.panel.lovelace.editor.card.conditional.card"
          )}
-        </sl-tab>
-      </sl-tab-group>
+        </ha-tab-group-tab>
+      </ha-tab-group>
      ${this._cardTab
        ? html`
            <div class="card">
@@ -233,11 +238,11 @@ export class HuiConditionalCardEditor
    return [
      configElementStyle,
      css`
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }

-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -30,7 +30,8 @@ import type {
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-button-arrow-next";
 import "../../../../components/ha-icon-button-arrow-prev";
-import "../../../../components/sl-tab-group";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@@ -123,14 +124,18 @@ export class HuiStackCardEditor
      ></ha-form>
      <div class="card-config">
        <div class="toolbar">
-          <sl-tab-group @sl-tab-show=${this._handleSelectedCard}>
+          <ha-tab-group @wa-tab-show=${this._handleSelectedCard}>
            ${this._config.cards.map(
              (_card, i) =>
-                html`<sl-tab slot="nav" .panel=${i} .active=${i === selected}>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${i}
+                  .active=${i === selected}
+                >
                  ${i + 1}
-                </sl-tab>`
+                </ha-tab-group-tab>`
            )}
-          </sl-tab-group>
+          </ha-tab-group>
          <ha-icon-button
            @click=${this._handleAddCard}
            .path=${mdiPlus}
@@ -229,8 +234,6 @@ export class HuiStackCardEditor

  protected async _handleAddCard() {
    this._selectedCard = this._config!.cards.length;
-    await this.updateComplete;
-    this.renderRoot.querySelector("sl-tab-group")!.syncIndicator();
  }

  protected _handleSelectedCard(ev) {
@@ -335,7 +338,7 @@ export class HuiStackCardEditor
          justify-content: space-between;
          align-items: center;
        }
-        sl-tab-group {
+        ha-tab-group {
          flex-grow: 1;
          min-width: 0;
          --ha-tab-track-color: var(--card-background-color);
--- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
+++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
@@ -17,30 +17,31 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import "../../../../components/sl-tab-group";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
+import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
+import { saveConfig } from "../../../../data/lovelace/config/types";
 import {
  isStrategyView,
  type LovelaceViewConfig,
 } from "../../../../data/lovelace/config/view";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import type { Lovelace } from "../../types";
+import { addSection, deleteSection, moveSection } from "../config-util";
 import {
  findLovelaceContainer,
  updateLovelaceContainer,
 } from "../lovelace-path";
+import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
 import "./hui-section-settings-editor";
 import "./hui-section-visibility-editor";
 import type { EditSectionDialogParams } from "./show-edit-section-dialog";
-import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
-import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
-import { saveConfig } from "../../../../data/lovelace/config/types";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import { addSection, deleteSection, moveSection } from "../config-util";
-import type { Lovelace } from "../../types";

 const TABS = ["tab-settings", "tab-visibility"] as const;

@@ -195,10 +196,10 @@ export class HuiDialogEditSection
          </ha-button-menu>
          ${!this._yamlMode
            ? html`
-                <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+                <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                  ${TABS.map(
                    (tab) => html`
-                      <sl-tab
+                      <ha-tab-group-tab
                        slot="nav"
                        .panel=${tab}
                        .active=${this._currTab === tab}
@@ -206,10 +207,10 @@ export class HuiDialogEditSection
                        ${this.hass!.localize(
                          `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                        )}
-                      </sl-tab>
+                      </ha-tab-group-tab>
                    `
                  )}
-                </sl-tab-group>
+                </ha-tab-group>
              `
            : nothing}
        </ha-dialog-header>
@@ -433,10 +434,10 @@ export class HuiDialogEditSection
        ha-dialog.yaml-mode {
          --dialog-content-padding: 0;
        }
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -20,6 +20,8 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-tab-group";
+import "../../../../components/ha-tab-group-tab";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import {
@@ -53,7 +55,6 @@ import "./hui-view-background-editor";
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import type { EditViewDialogParams } from "./show-edit-view-dialog";
-import "../../../../components/sl-tab-group";

 const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;

@@ -274,10 +275,10 @@ export class HuiDialogEditView extends LitElement {
              `
            : nothing}
          ${!this._yamlMode
-            ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+            ? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
                ${TABS.map(
                  (tab) => html`
-                    <sl-tab
+                    <ha-tab-group-tab
                      slot="nav"
                      .panel=${tab}
                      .active=${this._currTab === tab}
@@ -285,10 +286,10 @@ export class HuiDialogEditView extends LitElement {
                      ${this.hass!.localize(
                        `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
                      )}
-                    </sl-tab>
+                    </ha-tab-group-tab>
                  `
                )}
-              </sl-tab-group>`
+              </ha-tab-group>`
            : nothing}
        </ha-dialog-header>
        ${content}
@@ -651,10 +652,10 @@ export class HuiDialogEditView extends LitElement {
          font-size: inherit;
          font-weight: inherit;
        }
-        sl-tab {
+        ha-tab-group-tab {
          flex: 1;
        }
-        sl-tab::part(base) {
+        ha-tab-group-tab::part(base) {
          width: 100%;
          justify-content: center;
        }
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -45,7 +45,8 @@ import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-svg-icon";
-import "../../components/sl-tab-group";
+import "../../components/ha-tab-group";
+import "../../components/ha-tab-group-tab";
 import { createAreaRegistryEntry } from "../../data/area_registry";
 import type { LovelacePanelConfig } from "../../data/lovelace";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -409,12 +410,12 @@ class HUIRoot extends LitElement {
        !view.visible.some((e) => e.user === this.hass!.user?.id)) ||
        view.visible === false);

-    const tabs = html`<sl-tab-group @sl-tab-show=${this._handleViewSelected}>
+    const tabs = html`<ha-tab-group @wa-tab-show=${this._handleViewSelected}>
      ${views.map((view, index) => {
        const hidden =
          !this._editMode && (view.subview || _isTabHiddenForUser(view));
        return html`
-          <sl-tab
+          <ha-tab-group-tab
            slot="nav"
            panel=${index}
            .active=${this._curView === index}
@@ -471,10 +472,10 @@ class HUIRoot extends LitElement {
                  ></ha-icon-button-arrow-next>
                `
              : nothing}
-          </sl-tab>
+          </ha-tab-group-tab>
        `;
      })}
-    </sl-tab-group>`;
+    </ha-tab-group>`;

    const isSubview = curViewConfig?.subview;
    const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -1267,7 +1268,7 @@ class HUIRoot extends LitElement {
          display: flex;
          align-items: center;
        }
-        sl-tab-group {
+        ha-tab-group {
          --ha-tab-indicator-color: var(
            --app-header-selection-bar-color,
            var(--app-header-text-color, white)
@@ -1279,10 +1280,10 @@ class HUIRoot extends LitElement {
          min-width: 0;
          height: 100%;
        }
-        sl-tab-group::part(nav) {
+        ha-tab-group::part(nav) {
          padding: 0;
        }
-        sl-tab-group::part(scroll-button) {
+        ha-tab-group::part(scroll-button) {
          background-color: var(--app-header-background-color);
          background: linear-gradient(
            90deg,
@@ -1291,14 +1292,14 @@ class HUIRoot extends LitElement {
          );
          z-index: 1;
        }
-        sl-tab-group::part(scroll-button--end) {
+        ha-tab-group::part(scroll-button-end) {
          background: linear-gradient(
            270deg,
            var(--app-header-background-color),
            transparent
          );
        }
-        .edit-mode sl-tab-group::part(scroll-button) {
+        .edit-mode ha-tab-group::part(scroll-button) {
          background-color: var(--app-header-edit-background-color, #455a64);
          background: linear-gradient(
            90deg,
@@ -1306,7 +1307,7 @@ class HUIRoot extends LitElement {
            transparent
          );
        }
-        .edit-mode sl-tab-group::part(scroll-button--end) {
+        .edit-mode ha-tab-group::part(scroll-button--end) {
          background: linear-gradient(
            270deg,
            var(--app-header-edit-background-color, #455a64),
@@ -1319,41 +1320,35 @@ class HUIRoot extends LitElement {
        .tab-bar {
          display: flex;
        }
-        .edit-mode sl-tab-group {
+        .edit-mode ha-tab-group {
          flex-grow: 0;
          color: var(--app-header-edit-text-color, #fff);
          --ha-tab-active-text-color: var(--app-header-edit-text-color, #fff);
          --ha-tab-indicator-color: var(--app-header-edit-text-color, #fff);
        }
-        sl-tab {
-          --sl-tab-height: var(--header-height, 56px);
-          height: calc(var(--sl-tab-height) - 2px);
+        ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--header-height, 56px);
        }
-        sl-tab[aria-selected="true"] .edit-icon {
+        ha-tab-group-tab[aria-selected="true"] .edit-icon {
          display: inline-flex;
        }
-        sl-tab::part(base) {
-          padding-inline-start: var(
-            --ha-tab-padding-start,
-            var(--sl-spacing-large)
-          );
-          padding-inline-end: var(
-            --ha-tab-padding-end,
-            var(--sl-spacing-large)
+        ha-tab-group-tab::part(base) {
+          padding-inline-start: var(--ha-tab-padding-start, var(--wa-space-l));
+          padding-inline-end: var(--ha-tab-padding-end, var(--wa-space-l));
+        }
+        ha-tab-group-tab::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2);
+        }
+        ha-tab-group-tab.icon::part(base) {
+          padding-top: calc((var(--ha-tab-group-tab-height) - 20px) / 2 - 2px);
+          padding-bottom: calc(
+            (var(--ha-tab-group-tab-height) - 20px) / 2 - 4px
          );
        }
-        sl-tab::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
+        .tab-bar ha-tab-group-tab {
+          --ha-tab-group-tab-height: var(--tab-bar-height, 56px);
        }
-        sl-tab.icon::part(base) {
-          padding-top: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
-          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 4px);
-        }
-        .tab-bar sl-tab {
-          --sl-tab-height: var(--tab-bar-height, 56px);
-        }
-        .edit-mode sl-tab[aria-selected="true"]::part(base) {
+        .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
          padding: 0;
          margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2);
        }
--- a/src/resources/log-message.ts
+++ b/src/resources/log-message.ts
@@ -44,7 +44,9 @@ export const createLogMessage = async (
        return frame.toString();
      });
    lines.push(...(stackLines.length > 0 ? stackLines : [stackFallback]));
+    // @ts-expect-error Requires library bump to ES2022
    if (error.cause) {
+      // @ts-expect-error Requires library bump to ES2022
      lines.push(`Caused by: ${await createLogMessage(error.cause)}`);
    }
    if (error instanceof AggregateError) {
--- a/src/resources/theme/color/color.globals.ts
+++ b/src/resources/theme/color/color.globals.ts
@@ -117,10 +117,7 @@ export const colorStyles = css`
    /* state color */
    --state-active-color: var(--amber-color);
    --state-inactive-color: var(--grey-color);
-    --state-unavailable-color: var(
-      --state-icon-unavailable-color,
-      var(--disabled-text-color)
-    );
+    --state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));

    /* state domain colors */
    --state-alarm_control_panel-armed_away-color: var(--green-color);
@@ -198,15 +195,9 @@ export const colorStyles = css`
    --sidebar-selected-icon-color: var(--primary-color);
    --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
    --switch-checked-color: var(--primary-color);
-    --switch-checked-button-color: var(
-      --switch-checked-color,
-      var(--primary-background-color)
-    );
+    --switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
    --switch-checked-track-color: var(--switch-checked-color, #000000);
-    --switch-unchecked-button-color: var(
-      --switch-unchecked-color,
-      var(--primary-background-color)
-    );
+    --switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
    --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
    --slider-color: var(--primary-color);
    --slider-secondary-color: var(--light-primary-color);
@@ -252,15 +243,9 @@ export const colorStyles = css`
    --mdc-text-field-idle-line-color: var(--input-idle-line-color);
    --mdc-text-field-hover-line-color: var(--input-hover-line-color);
    --mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
-    --mdc-text-field-outlined-idle-border-color: var(
-      --input-outlined-idle-border-color
-    );
-    --mdc-text-field-outlined-hover-border-color: var(
-      --input-outlined-hover-border-color
-    );
-    --mdc-text-field-outlined-disabled-border-color: var(
-      --input-outlined-disabled-border-color
-    );
+    --mdc-text-field-outlined-idle-border-color: var(--input-outlined-idle-border-color);
+    --mdc-text-field-outlined-hover-border-color: var(--input-outlined-hover-border-color);
+    --mdc-text-field-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-text-field-fill-color: var(--input-fill-color);
    --mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-text-field-ink-color: var(--input-ink-color);
@@ -269,15 +254,9 @@ export const colorStyles = css`

    --mdc-select-idle-line-color: var(--input-idle-line-color);
    --mdc-select-hover-line-color: var(--input-hover-line-color);
-    --mdc-select-outlined-idle-border-color: var(
-      --input-outlined-idle-border-color
-    );
-    --mdc-select-outlined-hover-border-color: var(
-      --input-outlined-hover-border-color
-    );
-    --mdc-select-outlined-disabled-border-color: var(
-      --input-outlined-disabled-border-color
-    );
+    --mdc-select-outlined-idle-border-color: var(--input-outlined-idle-border-color);
+    --mdc-select-outlined-hover-border-color: var(--input-outlined-hover-border-color);
+    --mdc-select-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-select-fill-color: var(--input-fill-color);
    --mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-select-ink-color: var(--input-ink-color);
@@ -285,14 +264,8 @@ export const colorStyles = css`
    --mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
    --mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
    --mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
-    --ha-assist-chip-filled-container-color: rgba(
-      var(--rgb-primary-text-color),
-      0.15
-    );
-    --ha-assist-chip-active-container-color: rgba(
-      var(--rgb-primary-color),
-      0.15
-    );
+    --ha-assist-chip-filled-container-color: rgba(var(--rgb-primary-text-color), 0.15);
+    --ha-assist-chip-active-container-color: rgba(var(--rgb-primary-color), 0.15);
    --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);

    /* Vaadin */
@@ -354,8 +327,7 @@ export const darkColorStyles = css`
    --codemirror-qualifier: #decb6b;
    --codemirror-type: #decb6b;
    --energy-grid-return-color: #a280db;
-    --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2)
-      saturate(0.3);
+    --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(0.3);
    --disabled-color: #464646;

    --ha-button-primary-light-color: #4082a040;
@@ -367,9 +339,5 @@ export const darkColorStyles = css`
  }
 `;

-export const DefaultPrimaryColor = extractVar(
-  colorStyles,
-  "primary-color",
-  coreColorVariables
-);
+export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color", coreColorVariables);
 export const DefaultAccentColor = extractVar(colorStyles, "accent-color");
--- a/src/resources/theme/main.globals.ts
+++ b/src/resources/theme/main.globals.ts
@@ -28,22 +28,10 @@ export const mainStyles = css`
    --margin-title-rtl: 0 24px 0 0;

    /* safe-area-insets */
-    --safe-area-inset-top: var(
-      --app-safe-area-inset-top,
-      env(safe-area-inset-top, 0)
-    );
-    --safe-area-inset-bottom: var(
-      --app-safe-area-inset-bottom,
-      env(safe-area-inset-bottom, 0)
-    );
-    --safe-area-inset-left: var(
-      --app-safe-area-inset-left,
-      env(safe-area-inset-left, 0)
-    );
-    --safe-area-inset-right: var(
-      --app-safe-area-inset-right,
-      env(safe-area-inset-right, 0)
-    );
+    --safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
+    --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
+    --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0));
+    --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0));
  }
 `;

--- a/src/resources/theme/typography.globals.ts
+++ b/src/resources/theme/typography.globals.ts
@@ -1,8 +1,5 @@
 import { css } from "lit";
-import {
-  extractDerivedVars,
-  extractVar,
-} from "../../common/style/derived-css-vars";
+import { extractDerivedVars, extractVar } from "../../common/style/derived-css-vars";

 export const typographyStyles = css`
  html {
@@ -17,16 +14,10 @@ export const typographyStyles = css`
    --ha-font-size-m: calc(14px * var(--ha-font-size-scale)); /* 1rem */
    --ha-font-size-l: calc(16px * var(--ha-font-size-scale)); /* 1.142857rem */
    --ha-font-size-xl: calc(20px * var(--ha-font-size-scale)); /* 1.428571rem */
-    --ha-font-size-2xl: calc(
-      24px * var(--ha-font-size-scale)
-    ); /* 1.714286rem */
+    --ha-font-size-2xl: calc(24px * var(--ha-font-size-scale)); /* 1.714286rem */
    --ha-font-size-3xl: calc(28px * var(--ha-font-size-scale)); /* 2rem */
-    --ha-font-size-4xl: calc(
-      32px * var(--ha-font-size-scale)
-    ); /* 2.285714rem */
-    --ha-font-size-5xl: calc(
-      40px * var(--ha-font-size-scale)
-    ); /* 2.857143rem */
+    --ha-font-size-4xl: calc(32px * var(--ha-font-size-scale)); /* 2.285714rem */
+    --ha-font-size-5xl: calc(40px * var(--ha-font-size-scale)); /* 2.857143rem */

    --ha-font-weight-light: 300;
    --ha-font-weight-normal: 400;
@@ -60,17 +51,8 @@ export const typographyStyles = css`

 export const typographyDerivedVariables = extractDerivedVars(typographyStyles);

-export const haFontFamilyBody = extractVar(
-  typographyStyles,
-  "ha-font-family-body"
-);
+export const haFontFamilyBody = extractVar(typographyStyles, "ha-font-family-body");

-export const haFontSmoothing = extractVar(
-  typographyStyles,
-  "ha-font-smoothing"
-);
+export const haFontSmoothing = extractVar(typographyStyles, "ha-font-smoothing");

-export const haMozOsxFontSmoothing = extractVar(
-  typographyStyles,
-  "ha-moz-osx-font-smoothing"
-);
+export const haMozOsxFontSmoothing = extractVar(typographyStyles, "ha-moz-osx-font-smoothing");
--- a/src/resources/theme/wa.globals.ts
+++ b/src/resources/theme/wa.globals.ts
@@ -6,12 +6,17 @@ export const waMainStyles = css`
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 2px;
    --wa-focus-ring-offset: 2px;
-    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-      var(--wa-focus-ring-color);
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-focus-ring-color);

    --wa-space-l: 24px;
    --wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);
    --wa-form-control-padding-block: 0.75em;
+
+    --wa-font-weight-action: var(--ha-font-weight-medium);
+    --wa-transition-fast: 75ms;
+    --wa-transition-easing: ease;
+    --wa-border-width-l: var(--ha-border-radius-l);
+    --wa-space-xl: 32px;
  }
 `;

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
    // Language Options
-    "target": "ES2023",
-    "lib": ["ES2023", "DOM", "DOM.Iterable", "WebWorker"],
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM", "DOM.Iterable", "WebWorker"],
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    // Modules
--- a/yarn.lock
+++ b/yarn.lock
@@ -1905,9 +1905,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1":
-  version: 3.0.0-beta.4.ha.1
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1"
+"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2":
+  version: 3.0.0-beta.4.ha.2
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2"
  dependencies:
    "@ctrl/tinycolor": "npm:^4.1.0"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -1919,7 +1919,7 @@ __metadata:
    nanoid: "npm:^5.1.5"
    qr-creator: "npm:^1.0.0"
    style-observer: "npm:^0.0.7"
-  checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
+  checksum: 10/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9
  languageName: node
  linkType: hard

@@ -9334,7 +9334,7 @@ __metadata:
    "@fullcalendar/list": "npm:6.1.19"
    "@fullcalendar/luxon3": "npm:6.1.19"
    "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.2"
    "@lezer/highlight": "npm:1.2.1"
    "@lit-labs/motion": "npm:1.0.9"
    "@lit-labs/observers": "npm:2.0.6"
Author	SHA1	Message	Date
Petar Petrov	c595392abe	Support opening a new config flow when the current one is finished (#26964 )	2025-09-11 15:49:09 +02:00
Aidan Timson	5bcffd0dbe	Fix hass-subpage toolbar position (#27003 )	2025-09-11 15:26:14 +02:00
Aidan Timson	df801833fc	Move close to the secondary action to allow enter key to submit (#27005 )	2025-09-11 13:16:02 +00:00
Paul Bottein	5ba5c00c70	Include non-primary entities targeted directly by label (#26952 )	2025-09-11 15:12:20 +02:00
Paul Bottein	dcea227f4a	Add themes variables to tile card to change border radius (#26999 )	2025-09-11 14:55:07 +02:00
Wendelin	1abedcd5f0	Migrate tab-group to webawesome (#26951 )	2025-09-11 11:15:24 +02:00
Lukas Waslowski	9e29693293	nitpick: Rename `HaFormExpendable` to `HaFormExpandable` (#26994 ) nitpick: Rename HaFormExpendable to HaFormExpandable	2025-09-10 21:38:07 +02:00
Lukas Waslowski	3bfafc794f	fix: Import `ha-expansion-panel` in `ha-form-expandable` (#26996 ) fix: Import ha-expansion-panel in ha-form-expandable The current usages of ha-form-expandable only work correctly because ha-expansion-panel is already imported somewhere else by coincidence. This adds an explicit import to avoid breakages when using ha-form-expandable in a standalone context (e.g. within ./hassio).	2025-09-10 21:37:37 +02:00
Simon Lamon	89c43b2b33	Don't show "condition did not pass" before testing (#26987 ) Testing wrapper	2025-09-10 16:58:26 +03:00
Wendelin	466115d916	Prettier one line format in style .globals.ts files (#26991 )	2025-09-10 14:54:34 +02:00
Wendelin	a34ca3c085	Fix disabled automation style (#26988 ) * Update disabled state logic in action and condition editors to account for indent property * Remove opacity	2025-09-10 14:01:05 +02:00