Expand pasting capabilities of automation editor

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

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

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.2",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

prettier.config.js

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

src/components/ha-control-slider.ts

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

src/components/ha-expansion-panel.ts

@@ -49,7 +49,6 @@ export class HaExpansionPanel extends LitElement {
           tabindex=${this.noCollapse ? -1 : 0}
           aria-expanded=${this.expanded}
           aria-controls="sect1"
-          part="summary"
         >
           ${this.leftChevron ? chevronIcon : nothing}
           <slot name="leading-icon"></slot>

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

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

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

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

src/components/ha-tab-group.ts

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

src/components/ha-target-picker.ts

@@ -1,16 +1,39 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import "@material/mwc-menu/mwc-menu-surface";
-import { mdiPlus } from "@mdi/js";
+import {
+  mdiClose,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiPlus,
+  mdiTextureBox,
+  mdiUnfoldMoreVertical,
+} from "@mdi/js";
 import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
-import type { HassServiceTarget } from "home-assistant-js-websocket";
+import type {
+  HassEntity,
+  HassServiceTarget,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ensureArray } from "../common/array/ensure-array";
+import { computeCssColor } from "../common/color/compute-color";
+import { hex2rgb } from "../common/color/convert-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
+import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
 import { isValidEntityId } from "../common/entity/valid_entity_id";
+import type { AreaRegistryEntry } from "../data/area_registry";
+import type { DeviceRegistryEntry } from "../data/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
+import type { LabelRegistryEntry } from "../data/label_registry";
+import { subscribeLabelRegistry } from "../data/label_registry";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../types";
 import "./device/ha-device-picker";
@@ -18,13 +41,12 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./entity/ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-floor-picker";
+import { floorDefaultIconPath } from "./ha-floor-icon";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-label-picker";
 import "./ha-svg-icon";
 import "./ha-tooltip";
-import "./target-picker/ha-target-picker-item-group";
-import type { TargetType } from "./target-picker/ha-target-picker-item-row";
 
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -36,8 +58,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) public compact = false;
-
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 
   /**
@@ -76,8 +96,18 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @query(".add-container", true) private _addContainer?: HTMLDivElement;
 
+  @state() private _labels?: LabelRegistryEntry[];
+
   private _opened = false;
 
+  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
+    return [
+      subscribeLabelRegistry(this.hass.connection, (labels) => {
+        this._labels = labels;
+      }),
+    ];
+  }
+
   protected render() {
     if (this.addOnTop) {
       return html` ${this._renderChips()} ${this._renderItems()} `;
@@ -86,82 +116,87 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _renderItems() {
-    if (
-      !this.value?.floor_id &&
-      !this.value?.area_id &&
-      !this.value?.device_id &&
-      !this.value?.entity_id &&
-      !this.value?.label_id
-    ) {
-      return nothing;
-    }
-
     return html`
-      <div class="item-groups">
+      <div class="mdc-chip-set items">
         ${this.value?.floor_id
-          ? html`
-              <ha-target-picker-item-group
-                @remove-target-item=${this._handleRemove}
-                @remove-target-group=${this._handleRemoveGroup}
-                type="floor"
-                .hass=${this.hass}
-                .items=${ensureArray(this.value?.floor_id)}
-                .collapsed=${this.compact}
-              >
-              </ha-target-picker-item-group>
-            `
-          : nothing}
+          ? ensureArray(this.value.floor_id).map((floor_id) => {
+              const floor = this.hass.floors[floor_id];
+              return this._renderChip(
+                "floor_id",
+                floor_id,
+                floor?.name || floor_id,
+                undefined,
+                floor?.icon,
+                floor ? floorDefaultIconPath(floor) : mdiHome
+              );
+            })
+          : ""}
         ${this.value?.area_id
-          ? html`
-              <ha-target-picker-item-group
-                @remove-target-item=${this._handleRemove}
-                @remove-target-group=${this._handleRemoveGroup}
-                type="area"
-                .hass=${this.hass}
-                .items=${ensureArray(this.value?.area_id)}
-                .collapsed=${this.compact}
-              >
-              </ha-target-picker-item-group>
-            `
+          ? ensureArray(this.value.area_id).map((area_id) => {
+              const area = this.hass.areas![area_id];
+              return this._renderChip(
+                "area_id",
+                area_id,
+                area?.name || area_id,
+                undefined,
+                area?.icon,
+                mdiTextureBox
+              );
+            })
           : nothing}
         ${this.value?.device_id
-          ? html`
-              <ha-target-picker-item-group
-                @remove-target-item=${this._handleRemove}
-                @remove-target-group=${this._handleRemoveGroup}
-                type="device"
-                .hass=${this.hass}
-                .items=${ensureArray(this.value?.device_id)}
-                .collapsed=${this.compact}
-              >
-              </ha-target-picker-item-group>
-            `
+          ? ensureArray(this.value.device_id).map((device_id) => {
+              const device = this.hass.devices![device_id];
+              return this._renderChip(
+                "device_id",
+                device_id,
+                device
+                  ? computeDeviceNameDisplay(device, this.hass)
+                  : device_id,
+                undefined,
+                undefined,
+                mdiDevices
+              );
+            })
           : nothing}
         ${this.value?.entity_id
-          ? html`
-              <ha-target-picker-item-group
-                @remove-target-item=${this._handleRemove}
-                @remove-target-group=${this._handleRemoveGroup}
-                type="entity"
-                .hass=${this.hass}
-                .items=${ensureArray(this.value?.entity_id)}
-                .collapsed=${this.compact}
-              >
-              </ha-target-picker-item-group>
-            `
+          ? ensureArray(this.value.entity_id).map((entity_id) => {
+              const entity = this.hass.states[entity_id];
+              return this._renderChip(
+                "entity_id",
+                entity_id,
+                entity ? computeStateName(entity) : entity_id,
+                entity
+              );
+            })
           : nothing}
         ${this.value?.label_id
-          ? html`
-              <ha-target-picker-item-group
-                @remove-target-item=${this._handleRemove}
-                @remove-target-group=${this._handleRemoveGroup}
-                type="label"
-                .hass=${this.hass}
-                .items=${ensureArray(this.value?.label_id)}
-                .collapsed=${this.compact}
-              >
-              </ha-target-picker-item-group>
-            `
+          ? ensureArray(this.value.label_id).map((label_id) => {
+              const label = this._labels?.find(
+                (lbl) => lbl.label_id === label_id
+              );
+              let color = label?.color
+                ? computeCssColor(label.color)
+                : undefined;
+              if (color?.startsWith("var(")) {
+                const computedStyles = getComputedStyle(this);
+                color = computedStyles.getPropertyValue(
+                  color.substring(4, color.length - 1)
+                );
+              }
+              if (color?.startsWith("#")) {
+                color = hex2rgb(color).join(",");
+              }
+              return this._renderChip(
+                "label_id",
+                label_id,
+                label ? label.name : label_id,
+                undefined,
+                label?.icon,
+                mdiLabel,
+                color
+              );
+            })
           : nothing}
       </div>
     `;
@@ -264,6 +299,89 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     this._addMode = ev.currentTarget.type;
   }
 
+  private _renderChip(
+    type: "floor_id" | "area_id" | "device_id" | "entity_id" | "label_id",
+    id: string,
+    name: string,
+    entityState?: HassEntity,
+    icon?: string | null,
+    fallbackIconPath?: string,
+    color?: string
+  ) {
+    return html`
+      <div
+        class="mdc-chip ${classMap({
+          [type]: true,
+        })}"
+        style=${color
+          ? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
+          : ""}
+      >
+        ${icon
+          ? html`<ha-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .icon=${icon}
+            ></ha-icon>`
+          : fallbackIconPath
+            ? html`<ha-svg-icon
+                class="mdc-chip__icon mdc-chip__icon--leading"
+                .path=${fallbackIconPath}
+              ></ha-svg-icon>`
+            : ""}
+        ${entityState
+          ? html`<ha-state-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .hass=${this.hass}
+              .stateObj=${entityState}
+            ></ha-state-icon>`
+          : ""}
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text">${name}</span>
+          </span>
+        </span>
+        ${type === "entity_id"
+          ? ""
+          : html`<span role="gridcell">
+              <ha-tooltip
+                .content=${this.hass.localize(
+                  `ui.components.target-picker.expand_${type}`
+                )}
+              >
+                <ha-icon-button
+                  class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                  .label=${this.hass.localize(
+                    "ui.components.target-picker.expand"
+                  )}
+                  .path=${mdiUnfoldMoreVertical}
+                  hide-title
+                  .id=${id}
+                  .type=${type}
+                  @click=${this._handleExpand}
+                ></ha-icon-button>
+              </ha-tooltip>
+            </span>`}
+        <span role="gridcell">
+          <ha-tooltip
+            .content=${this.hass.localize(
+              `ui.components.target-picker.remove_${type}`
+            )}
+          >
+            <ha-icon-button
+              class="mdc-chip__icon mdc-chip__icon--trailing"
+              .label=${this.hass.localize("ui.components.target-picker.remove")}
+              .path=${mdiClose}
+              hide-title
+              .id=${id}
+              .type=${type}
+              @click=${this._handleRemove}
+            ></ha-icon-button>
+          </ha-tooltip>
+        </span>
+      </div>
+    `;
+  }
+
   private _renderPicker() {
     if (!this._addMode) {
       return nothing;
@@ -406,44 +524,130 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     });
   }
 
+  private _handleExpand(ev) {
+    const target = ev.currentTarget as any;
+    const newAreas: string[] = [];
+    const newDevices: string[] = [];
+    const newEntities: string[] = [];
+
+    if (target.type === "floor_id") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.floor_id === target.id &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          this._areaMeetsFilter(area)
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+    } else if (target.type === "area_id") {
+      Object.values(this.hass.devices).forEach((device) => {
+        if (
+          device.area_id === target.id &&
+          !this.value!.device_id?.includes(device.id) &&
+          this._deviceMeetsFilter(device)
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.area_id === target.id &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          this._entityRegMeetsFilter(entity)
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (target.type === "device_id") {
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.device_id === target.id &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          this._entityRegMeetsFilter(entity)
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (target.type === "label_id") {
+      Object.values(this.hass.areas).forEach((area) => {
+        if (
+          area.labels.includes(target.id) &&
+          !this.value!.area_id?.includes(area.area_id) &&
+          this._areaMeetsFilter(area)
+        ) {
+          newAreas.push(area.area_id);
+        }
+      });
+      Object.values(this.hass.devices).forEach((device) => {
+        if (
+          device.labels.includes(target.id) &&
+          !this.value!.device_id?.includes(device.id) &&
+          this._deviceMeetsFilter(device)
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      Object.values(this.hass.entities).forEach((entity) => {
+        if (
+          entity.labels.includes(target.id) &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          this._entityRegMeetsFilter(entity)
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else {
+      return;
+    }
+    let value = this.value;
+    if (newEntities.length) {
+      value = this._addItems(value, "entity_id", newEntities);
+    }
+    if (newDevices.length) {
+      value = this._addItems(value, "device_id", newDevices);
+    }
+    if (newAreas.length) {
+      value = this._addItems(value, "area_id", newAreas);
+    }
+    value = this._removeItem(value, target.type, target.id);
+    fireEvent(this, "value-changed", { value });
+  }
+
   private _handleRemove(ev) {
-    const { type, id } = ev.detail;
+    const target = ev.currentTarget as any;
     fireEvent(this, "value-changed", {
-      value: this._removeItem(this.value, type, id),
+      value: this._removeItem(this.value, target.type, target.id),
     });
   }
 
-  private _handleRemoveGroup(ev) {
-    const type = ev.detail;
-    fireEvent(this, "value-changed", {
-      value: this._removeGroup(type),
-    });
-  }
-
-  private _removeGroup(type: TargetType): this["value"] {
-    const newVal = { ...this.value };
-    delete newVal[`${type}_id`];
-    return newVal;
+  private _addItems(
+    value: this["value"],
+    type: string,
+    ids: string[]
+  ): this["value"] {
+    return {
+      ...value,
+      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
+    };
   }
 
   private _removeItem(
     value: this["value"],
-    type: TargetType,
+    type: string,
     id: string
   ): this["value"] {
-    const typeId = `${type}_id`;
-
-    const newVal = ensureArray(value![typeId])!.filter(
+    const newVal = ensureArray(value![type])!.filter(
       (val) => String(val) !== id
     );
     if (newVal.length) {
       return {
         ...value,
-        [typeId]: newVal,
+        [type]: newVal,
       };
     }
     const val = { ...value }!;
-    delete val[typeId];
+    delete val[type];
     if (Object.keys(val).length) {
       return val;
     }
@@ -475,6 +679,80 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     ev.preventDefault();
   }
 
+  private _areaMeetsFilter(area: AreaRegistryEntry): boolean {
+    const areaDevices = Object.values(this.hass.devices).filter(
+      (device) => device.area_id === area.area_id
+    );
+
+    if (areaDevices.some((device) => this._deviceMeetsFilter(device))) {
+      return true;
+    }
+
+    const areaEntities = Object.values(this.hass.entities).filter(
+      (entity) => entity.area_id === area.area_id
+    );
+
+    if (areaEntities.some((entity) => this._entityRegMeetsFilter(entity))) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private _deviceMeetsFilter(device: DeviceRegistryEntry): boolean {
+    const devEntities = Object.values(this.hass.entities).filter(
+      (entity) => entity.device_id === device.id
+    );
+
+    if (!devEntities.some((entity) => this._entityRegMeetsFilter(entity))) {
+      return false;
+    }
+
+    if (this.deviceFilter) {
+      if (!this.deviceFilter(device)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  private _entityRegMeetsFilter(entity: EntityRegistryDisplayEntry): boolean {
+    if (entity.hidden || entity.entity_category) {
+      return false;
+    }
+
+    if (
+      this.includeDomains &&
+      !this.includeDomains.includes(computeDomain(entity.entity_id))
+    ) {
+      return false;
+    }
+    if (this.includeDeviceClasses) {
+      const stateObj = this.hass.states[entity.entity_id];
+      if (!stateObj) {
+        return false;
+      }
+      if (
+        !stateObj.attributes.device_class ||
+        !this.includeDeviceClasses!.includes(stateObj.attributes.device_class)
+      ) {
+        return false;
+      }
+    }
+
+    if (this.entityFilter) {
+      const stateObj = this.hass.states[entity.entity_id];
+      if (!stateObj) {
+        return false;
+      }
+      if (!this.entityFilter!(stateObj)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
@@ -533,6 +811,41 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         margin-inline-end: 0;
         margin-inline-start: initial;
       }
+      .mdc-chip.area_id:not(.add),
+      .mdc-chip.floor_id:not(.add) {
+        border: 1px solid #fed6a4;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.area_id.add,
+      .mdc-chip.floor_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.floor_id.add {
+        background: #fed6a4;
+      }
+      .mdc-chip.device_id:not(.add) {
+        border: 1px solid #a8e1fb;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.device_id.add {
+        background: #a8e1fb;
+      }
+      .mdc-chip.entity_id:not(.add) {
+        border: 1px solid #d2e7b9;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.entity_id.add {
+        background: #d2e7b9;
+      }
+      .mdc-chip.label_id:not(.add) {
+        border: 1px solid var(--color, #e0e0e0);
+        background: var(--card-background-color);
+      }
+      .mdc-chip.label_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.label_id.add {
+        background: var(--background-color, #e0e0e0);
+      }
       .mdc-chip:hover {
         z-index: 5;
       }
@@ -552,12 +865,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       ha-tooltip {
         --ha-tooltip-arrow-size: 0;
       }
-
-      .item-groups {
-        overflow: hidden;
-        border: 2px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-lg);
-      }
     `;
   }
 }
@@ -566,12 +873,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-target-picker": HaTargetPicker;
   }
-
-  interface HASSDomEvents {
-    "remove-target-item": {
-      type: string;
-      id: string;
-    };
-    "remove-target-group": string;
-  }
 }

src/components/sl-tab-group.ts

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

src/components/target-picker/ha-target-picker-item-group.ts

@@ -1,88 +0,0 @@
-import { mdiBroom } from "@mdi/js";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
-import "../ha-expansion-panel";
-import "../ha-md-list";
-import "./ha-target-picker-item-row";
-
-@customElement("ha-target-picker-item-group")
-export class HaTargetPickerItemGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public type!: "entity" | "device" | "area" | "label" | "floor";
-
-  @property({ attribute: false }) public items!: string[];
-
-  @property({ type: Boolean }) public collapsed = false;
-
-  protected render() {
-    return html`<ha-expansion-panel .expanded=${!this.collapsed} left-chevron>
-      <div slot="header" class="heading">
-        ${this.hass.localize(
-          `ui.components.target-picker.selected.${this.type}`,
-          {
-            count: this.items.length,
-          }
-        )}
-      </div>
-      <div slot="icons" class="icons">
-        <ha-icon-button
-          title=${this.hass.localize(
-            `ui.components.target-picker.remove_${this.type}s`
-          )}
-          .path=${mdiBroom}
-          @click=${this._removeGroup}
-        ></ha-icon-button>
-      </div>
-
-      <ha-md-list>
-        ${this.items.map(
-          (item) =>
-            html`<ha-target-picker-item-row
-              .hass=${this.hass}
-              .type=${this.type}
-              .item=${item}
-            ></ha-target-picker-item-row>`
-        )}
-      </ha-md-list>
-    </ha-expansion-panel>`;
-  }
-
-  private _removeGroup() {
-    fireEvent(this, "remove-target-group", this.type);
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      --expansion-panel-content-padding: 0;
-    }
-    ha-expansion-panel::part(summary) {
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: 4px 8px;
-      font-weight: var(--ha-font-weight-bold);
-      color: var(--secondary-text-color);
-      display: flex;
-      justify-content: space-between;
-      min-height: unset;
-    }
-    .icons {
-      display: flex;
-    }
-    .icons ha-icon-button {
-      --mdc-icon-size: 16px;
-      --mdc-icon-button-size: 24px;
-    }
-    ha-md-list {
-      padding: 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-group": HaTargetPickerItemGroup;
-  }
-}

src/components/target-picker/ha-target-picker-item-row.ts

@@ -1,448 +0,0 @@
-import {
-  mdiChevronDown,
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiTextureBox,
-} from "@mdi/js";
-import { css, html, LitElement, nothing, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeAreaName } from "../../common/entity/compute_area_name";
-import {
-  computeDeviceName,
-  computeDeviceNameDisplay,
-} from "../../common/entity/compute_device_name";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { computeEntityName } from "../../common/entity/compute_entity_name";
-import { getEntityContext } from "../../common/entity/context/get_entity_context";
-import { computeRTL } from "../../common/util/compute_rtl";
-import { getConfigEntry } from "../../data/config_entries";
-import { domainToName } from "../../data/integration";
-import {
-  extractFromTarget,
-  type ExtractFromTargetResult,
-} from "../../data/target";
-import type { HomeAssistant } from "../../types";
-import { brandsUrl } from "../../util/brands-url";
-import { floorDefaultIconPath } from "../ha-floor-icon";
-import "../ha-icon-button";
-import "../ha-md-list-item";
-import "../ha-state-icon";
-
-export type TargetType = "entity" | "device" | "area" | "label" | "floor";
-
-@customElement("ha-target-picker-item-row")
-export class HaTargetPickerItemRow extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ reflect: true }) public type!: TargetType;
-
-  @property() public item!: string;
-
-  @property({ type: Boolean, attribute: "sub-entry", reflect: true })
-  public subEntry = false;
-
-  @property({ attribute: false })
-  public parentEntries?: ExtractFromTargetResult;
-
-  @state() private _expanded = false;
-
-  @state() private _iconImg?: string;
-
-  @state() private _domainName?: string;
-
-  @state() private _entries?: ExtractFromTargetResult;
-
-  protected willUpdate(changedProps: PropertyValues) {
-    if (!this.subEntry && changedProps.has("item")) {
-      this._updateItemData();
-      this._expanded = false;
-    }
-  }
-
-  protected render() {
-    const { name, context, iconPath, fallbackIconPath, stateObject } =
-      this._itemData(this.type, this.item);
-
-    const showDevices = ["floor", "area", "label"].includes(this.type);
-    const showEntities = this.type !== "entity";
-
-    const entries = this.parentEntries || this._entries;
-
-    return html`
-      <ha-md-list-item>
-        ${
-          this.type !== "entity"
-            ? html`<ha-icon-button
-                class="expand-button ${entries?.referenced_entities.length &&
-                this._expanded
-                  ? "expanded"
-                  : ""}"
-                .path=${mdiChevronDown}
-                slot="start"
-                @click=${this._toggleExpand}
-                .disabled=${entries?.referenced_entities.length === 0}
-              ></ha-icon-button>`
-            : nothing
-        }
-        ${
-          iconPath
-            ? html`<ha-icon slot="start" .icon=${iconPath}></ha-icon>`
-            : this._iconImg
-              ? html`<img
-                  slot="start"
-                  alt=${this._domainName || ""}
-                  crossorigin="anonymous"
-                  referrerpolicy="no-referrer"
-                  src=${this._iconImg}
-                />`
-              : fallbackIconPath
-                ? html`<ha-svg-icon
-                    slot="start"
-                    .path=${fallbackIconPath}
-                  ></ha-svg-icon>`
-                : stateObject
-                  ? html`
-                      <ha-state-icon
-                        .hass=${this.hass}
-                        .stateObj=${stateObject}
-                        slot="start"
-                      >
-                      </ha-state-icon>
-                    `
-                  : nothing
-        }
-        <div slot="headline">${name}</div>
-        ${
-          context && !this.subEntry
-            ? html`<span slot="supporting-text">${context}</span>`
-            : nothing
-        }
-        ${
-          showEntities || showDevices || this._domainName
-            ? html`
-                <div slot="end" class="summary">
-                  ${showEntities
-                    ? html`<span class="main"
-                        >${this.hass.localize(
-                          "ui.components.target-picker.entities_count",
-                          {
-                            count: entries?.referenced_entities.length,
-                          }
-                        )}</span
-                      >`
-                    : nothing}
-                  ${showDevices
-                    ? html`<span class="secondary"
-                        >${this.hass.localize(
-                          "ui.components.target-picker.devices_count",
-                          {
-                            count: entries?.referenced_devices.length,
-                          }
-                        )}</span
-                      >`
-                    : nothing}
-                  ${this._domainName && !showDevices
-                    ? html`<span class="secondary domain"
-                        >${this._domainName}</span
-                      >`
-                    : nothing}
-                </div>
-              `
-            : nothing
-        }
-  ${
-    !this.subEntry
-      ? html`
-          <ha-icon-button
-            .path=${mdiClose}
-            slot="end"
-            @click=${this._removeItem}
-          ></ha-icon-button>
-        `
-      : nothing
-  }
-        </ha-icon-button>
-      </ha-md-list-item>
-      ${this._expanded && entries && entries.referenced_entities ? this._renderEntries() : nothing}
-    `;
-  }
-
-  private _renderEntries() {
-    const entries = this.parentEntries || this._entries;
-
-    let nextType =
-      this.type === "floor"
-        ? "area"
-        : this.type === "area"
-          ? "device"
-          : "entity";
-
-    if (this.type === "label") {
-      if (entries?.referenced_areas.length) {
-        nextType = "area";
-      } else if (entries?.referenced_devices.length) {
-        nextType = "device";
-      }
-    }
-
-    const rows1 =
-      (nextType === "area"
-        ? entries?.referenced_areas
-        : nextType === "device"
-          ? entries?.referenced_devices
-          : entries?.referenced_entities) || [];
-
-    const rows1Entries =
-      nextType === "entity"
-        ? undefined
-        : rows1.map((rowItem) => {
-            const nextEntries = {
-              missing_areas: [] as string[],
-              missing_devices: [] as string[],
-              missing_floors: [] as string[],
-              missing_labels: [] as string[],
-              referenced_areas: [] as string[],
-              referenced_devices: [] as string[],
-              referenced_entities: [] as string[],
-            };
-
-            if (nextType === "area") {
-              nextEntries.referenced_devices =
-                entries?.referenced_devices.filter(
-                  (device_id) =>
-                    this.hass.devices?.[device_id]?.area_id === rowItem &&
-                    entries?.referenced_entities.some(
-                      (entity_id) =>
-                        this.hass.entities?.[entity_id]?.device_id === device_id
-                    )
-                ) || ([] as string[]);
-
-              nextEntries.referenced_entities =
-                entries?.referenced_entities.filter((entity_id) => {
-                  const entity = this.hass.entities[entity_id];
-                  return (
-                    entity.area_id === rowItem ||
-                    !entity.device_id ||
-                    nextEntries.referenced_devices.includes(entity.device_id)
-                  );
-                }) || ([] as string[]);
-
-              return nextEntries;
-            }
-
-            nextEntries.referenced_entities =
-              entries?.referenced_entities.filter(
-                (entity_id) =>
-                  this.hass.entities?.[entity_id]?.device_id === rowItem
-              ) || ([] as string[]);
-
-            return nextEntries;
-          });
-
-    const rows2 =
-      nextType === "device" && entries
-        ? entries.referenced_entities.filter(
-            (entity_id) => this.hass.entities[entity_id].area_id === this.item
-          )
-        : [];
-
-    return html`
-      <div class="entries ${this._expanded ? "expanded" : ""}">
-        ${rows1.map(
-          (item, index) =>
-            html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                .type=${nextType}
-                .item=${item}
-                .parentEntries=${rows1Entries?.[index]}
-              ></ha-target-picker-item-row>
-            </ha-md-list-item>`
-        )}
-        ${rows2.map(
-          (item) =>
-            html`
-              <ha-target-picker-item-row
-                sub-entry
-                .hass=${this.hass}
-                type="entity"
-                .item=${item}
-              ></ha-target-picker-item-row>
-            </ha-md-list-item>`
-        )}
-      </div>
-    `;
-  }
-
-  private async _updateItemData() {
-    try {
-      this._entries = await extractFromTarget(this.hass, {
-        [`${this.type}_id`]: [this.item],
-      });
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Failed to update item data", e);
-    }
-  }
-
-  private _itemData = memoizeOne((type: TargetType, item: string) => {
-    if (type === "floor") {
-      const floor = this.hass.floors?.[item];
-      return {
-        name: floor?.name || item,
-        iconPath: floor?.icon,
-        fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
-      };
-    }
-    if (type === "area") {
-      const area = this.hass.areas?.[item];
-      return {
-        name: area?.name || item,
-        context: area.floor_id && this.hass.floors?.[area.floor_id]?.name,
-        iconPath: area?.icon,
-        fallbackIconPath: mdiTextureBox,
-      };
-    }
-    if (type === "device") {
-      const device = this.hass.devices?.[item];
-
-      if (device.primary_config_entry) {
-        this._getDeviceDomain(device.primary_config_entry);
-      }
-
-      return {
-        name: device ? computeDeviceNameDisplay(device, this.hass) : item,
-        context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
-        fallbackIconPath: mdiDevices,
-      };
-    }
-    if (type === "entity") {
-      this._setDomainName(computeDomain(item));
-
-      const stateObject = this.hass.states[item];
-      const entityName = computeEntityName(stateObject, this.hass);
-      const { area, device } = getEntityContext(stateObject, this.hass);
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
-      const context = [areaName, entityName ? deviceName : undefined]
-        .filter(Boolean)
-        .join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
-      return {
-        name: entityName || deviceName || item,
-        context,
-        stateObject,
-      };
-    }
-    return { name: item };
-  });
-
-  private _setDomainName(domain: string) {
-    this._domainName = domainToName(this.hass.localize, domain);
-  }
-
-  private _removeItem() {
-    fireEvent(this, "remove-target-item", {
-      type: this.type,
-      id: this.item,
-    });
-  }
-
-  private async _getDeviceDomain(configEntryId: string) {
-    try {
-      const data = await getConfigEntry(this.hass, configEntryId);
-      const domain = data.config_entry.domain;
-      this._iconImg = brandsUrl({
-        domain: domain,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-
-      this._setDomainName(domain);
-    } catch {
-      // failed to load config entry -> ignore
-    }
-  }
-
-  private _toggleExpand() {
-    this._expanded = !this._expanded;
-  }
-
-  static styles = css`
-    :host {
-      --md-list-item-top-space: 0;
-      --md-list-item-bottom-space: 0;
-      --md-list-item-trailing-space: 8px;
-      --md-list-item-two-line-container-height: 56px;
-    }
-
-    :host([type="entity"]) {
-      --md-list-item-leading-space: 8px;
-    }
-
-    state-badge {
-      color: var(--ha-color-on-neutral-quiet);
-    }
-    img {
-      width: 24px;
-      height: 24px;
-    }
-    .expand-button {
-      margin: 0 -12px;
-      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .expand-button.expanded {
-      transform: rotate(180deg);
-    }
-    ha-icon-button {
-      --mdc-icon-button-size: 32px;
-    }
-    .summary {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      line-height: var(--ha-line-height-condensed);
-    }
-    :host([sub-entry]) .summary {
-      margin-right: 48px;
-    }
-    .summary .main {
-      font-weight: var(--ha-font-weight-medium);
-    }
-    .summary .secondary {
-      font-size: var(--ha-font-size-s);
-      color: var(--secondary-text-color);
-    }
-    .summary .secondary.domain {
-      font-family: var(--ha-font-family-code);
-    }
-
-    @media all and (max-width: 870px) {
-      :host([sub-entry]) .summary {
-        display: none;
-      }
-    }
-
-    .entries {
-      padding-left: 32px;
-      overflow: hidden;
-      transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .entries.expanded {
-      border-bottom: 1px solid var(--ha-color-border-neutral-quiet);
-    }
-    :host([sub-entry]) .entries.expanded {
-      border-bottom: none;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker-item-row": HaTargetPickerItemRow;
-  }
-}

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

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

src/data/automation.ts

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

src/data/data_entry_flow.ts

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

src/data/script.ts

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

src/data/target.ts

@@ -1,21 +0,0 @@
-import type { HassServiceTarget } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
-
-export interface ExtractFromTargetResult {
-  missing_areas: string[];
-  missing_devices: string[];
-  missing_floors: string[];
-  missing_labels: string[];
-  referenced_areas: string[];
-  referenced_devices: string[];
-  referenced_entities: string[];
-}
-
-export const extractFromTarget = async (
-  hass: HomeAssistant,
-  target: HassServiceTarget
-) =>
-  hass.callWS<ExtractFromTargetResult>({
-    type: "extract_from_target",
-    target,
-  });

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

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

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

@@ -3,7 +3,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
@@ -12,9 +11,8 @@ import "../../../components/ha-relative-time";
 import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-tab-group";
-import "../../../components/ha-tab-group-tab";
 import "../../../components/ha-tooltip";
+import "../../../components/sl-tab-group";
 import type {
   ForecastEvent,
   ModernForecastType,
@@ -32,6 +30,7 @@ import {
   weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
+import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -300,18 +299,18 @@ class MoreInfoWeather extends LitElement {
         ${this.hass.localize("ui.card.weather.forecast")}:
       </div>
       ${supportedForecasts?.length > 1
-        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
+        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
             ${supportedForecasts.map(
               (forecastType) =>
-                html`<ha-tab-group-tab
+                html`<sl-tab
                   slot="nav"
                   .panel=${forecastType}
                   .active=${this._forecastType === forecastType}
                 >
                   ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
-                </ha-tab-group-tab>`
+                </sl-tab>`
             )}
-          </ha-tab-group>`
+          </sl-tab-group>`
         : nothing}
       <div class="forecast">
         ${forecast?.length
@@ -420,11 +419,11 @@ class MoreInfoWeather extends LitElement {
           font-size: 1.2em;
         }
 
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
 
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/layouts/hass-subpage.ts

@@ -99,27 +99,28 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
-          background-color: var(--app-header-background-color);
           padding-top: var(--safe-area-inset-top);
           padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .toolbar {
           padding-left: var(--safe-area-inset-left);
+          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);
-          height: var(--header-height);
+          padding: 8px 12px;
           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;
         }
-
-        .toolbar a {
+        @media (max-width: 599px) {
+          .toolbar-content {
+            padding: 4px;
+          }
+        }
+        .toolbar-content a {
           color: var(--sidebar-text-color);
           text-decoration: none;
         }
@@ -148,7 +149,9 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          height: calc(
+            100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
+          );
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

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

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

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

@@ -15,6 +15,7 @@ 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";
@@ -25,6 +26,7 @@ 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";
@@ -61,7 +63,7 @@ import type {
   NonConditionAction,
   RepeatAction,
 } from "../../../../data/script";
-import { getActionType } from "../../../../data/script";
+import { getActionType, isAction } from "../../../../data/script";
 import { describeAction } from "../../../../data/script_i18n";
 import { callExecuteScript } from "../../../../data/service";
 import {
@@ -507,6 +509,7 @@ export default class HaAutomationActionRow extends LitElement {
       ...this._clipboard,
       action: deepClone(this.action),
     };
+    copyToClipboard(dump(this.action));
   }
 
   private _onDisable = () => {
@@ -637,6 +640,18 @@ 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, {
@@ -725,6 +740,7 @@ export default class HaAutomationActionRow extends LitElement {
       copy: this._copyAction,
       cut: this._cutAction,
       duplicate: this._duplicateAction,
+      insertAfter: this._insertAfter,
       run: this._runAction,
       config: {
         action: sidebarAction,

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

@@ -26,6 +26,7 @@ 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 {
@@ -91,6 +92,7 @@ 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}
@@ -362,7 +364,21 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.concat(deepClone(this.actions[index])),
+      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),
     });
   }
 

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

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

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

@@ -19,6 +19,7 @@ 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";
@@ -38,7 +39,7 @@ import type {
   Condition,
   ConditionSidebarConfig,
 } from "../../../../data/automation";
-import { testCondition } from "../../../../data/automation";
+import { isCondition, testCondition } from "../../../../data/automation";
 import { describeCondition } from "../../../../data/automation_i18n";
 import {
   CONDITION_BUILDING_BLOCKS,
@@ -69,6 +70,7 @@ 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;
@@ -386,12 +388,12 @@ export default class HaAutomationConditionRow extends LitElement {
             error: this._testingResult === false,
           })}"
         >
-          ${this._testingResult === undefined
-            ? nothing
+          ${this._testingResult
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_pass"
+              )
             : this.hass.localize(
-                `ui.panel.config.automation.editor.conditions.testing_${
-                  this._testingResult ? "pass" : "error"
-                }`
+                "ui.panel.config.automation.editor.conditions.testing_error"
               )}
         </div>
       </ha-card>
@@ -440,6 +442,7 @@ export default class HaAutomationConditionRow extends LitElement {
       ...this._clipboard,
       condition: deepClone(this.condition),
     };
+    copyToClipboard(dump(this.condition));
   }
 
   private _onDisable = () => {
@@ -585,6 +588,18 @@ 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, {
@@ -696,6 +711,7 @@ export default class HaAutomationConditionRow extends LitElement {
       disable: this._onDisable,
       delete: this._onDelete,
       duplicate: this._duplicateCondition,
+      insertAfter: this._insertAfter,
       copy: this._copyCondition,
       cut: this._cutCondition,
       test: this._testCondition,

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

@@ -24,6 +24,7 @@ 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 {
@@ -169,6 +170,7 @@ 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}
@@ -381,7 +383,21 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.concat(deepClone(this.conditions[index])),
+      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),
     });
   }
 

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

@@ -41,6 +41,8 @@ import type {
   AutomationConfig,
   AutomationEntity,
   BlueprintAutomationConfig,
+  Condition,
+  Trigger,
 } from "../../../data/automation";
 import {
   deleteAutomation,
@@ -60,6 +62,7 @@ import {
   type EntityRegistryEntry,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import type { Action } from "../../../data/script";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -96,6 +99,9 @@ declare global {
     "move-down": undefined;
     "move-up": undefined;
     duplicate: undefined;
+    "insert-after": {
+      value: Trigger | Condition | Action | Trigger[] | Condition[] | Action[];
+    };
     "save-automation": undefined;
   }
 }

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

@@ -34,7 +34,6 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
-  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -160,7 +159,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}
@@ -207,7 +206,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}
@@ -252,7 +251,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}
@@ -495,6 +494,22 @@ 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();
 
@@ -504,6 +519,7 @@ 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",
@@ -624,21 +640,30 @@ 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 as ActionSidebarConfig)?.copy) {
-      (this._sidebarConfig as ActionSidebarConfig).copy();
+    if (this._sidebarConfig && "copy" in this._sidebarConfig) {
+      this._sidebarConfig.copy();
     }
   }
 
   public cutSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
-      (this._sidebarConfig as ActionSidebarConfig).cut();
+    if (this._sidebarConfig && "cut" in this._sidebarConfig) {
+      this._sidebarConfig.cut();
     }
   }
 
   public deleteSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
-      (this._sidebarConfig as ActionSidebarConfig).delete();
+    if (this._sidebarConfig && "delete" in this._sidebarConfig) {
+      this._sidebarConfig.delete();
     }
   }
 

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

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

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

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

src/panels/config/automation/styles.ts

@@ -44,6 +44,7 @@ export const rowStyles = css`
 
 export const editorStyles = css`
   .disabled {
+    opacity: 0.5;
     pointer-events: none;
   }
 

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

@@ -141,6 +141,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
       haStyle,
       css`
         .disabled {
+          opacity: 0.5;
           pointer-events: none;
         }
 

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

@@ -19,6 +19,7 @@ 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";
@@ -40,7 +41,7 @@ import type {
   Trigger,
   TriggerSidebarConfig,
 } from "../../../../data/automation";
-import { subscribeTrigger } from "../../../../data/automation";
+import { isTrigger, subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -75,6 +76,7 @@ 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;
@@ -511,6 +513,7 @@ 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,
@@ -532,6 +535,8 @@ export default class HaAutomationTriggerRow extends LitElement {
       ...this._clipboard,
       trigger: this.trigger,
     };
+
+    copyToClipboard(dump(this.trigger));
   }
 
   private _onDelete = () => {
@@ -639,6 +644,18 @@ export default class HaAutomationTriggerRow extends LitElement {
     fireEvent(this, "duplicate");
   };
 
+  private _insertAfter = (value: Trigger | Trigger[]) => {
+    if (
+      Array.isArray(value) &&
+      !value.every((val) => isTrigger(val)) &&
+      !isTrigger(value)
+    ) {
+      return false;
+    }
+    fireEvent(this, "insert-after", { value });
+    return true;
+  };
+
   private _copyTrigger = () => {
     this._setClipboard();
     showToast(this, {

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

@@ -25,6 +25,7 @@ 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 {
@@ -84,6 +85,7 @@ 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}
@@ -321,7 +323,21 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.triggers.concat(deepClone(this.triggers[index])),
+      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),
     });
   }
 

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

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

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

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

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

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

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

@@ -15,10 +15,9 @@ 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,
@@ -100,19 +99,19 @@ export class HassioNetwork extends LitElement {
           ${this.hass.localize("ui.panel.config.network.supervisor.title")}
           ${this._interfaces.length > 1
             ? html`
-                <ha-tab-group @wa-tab-show=${this._handleTabActivated}
+                <sl-tab-group @sl-tab-show=${this._handleTabActivated}
                   >${this._interfaces.map(
                     (device, i) =>
-                      html`<ha-tab-group-tab
+                      html`<sl-tab
                         slot="nav"
                         .active=${this._curTabIndex === i}
                         .panel=${i.toString()}
                         .id=${device.interface}
                       >
                         ${device.interface}
-                      </ha-tab-group-tab>`
+                      </sl-tab>`
                   )}
-                </ha-tab-group>
+                </sl-tab-group>
               `
             : nothing}
         </div>
@@ -834,13 +833,13 @@ export class HassioNetwork extends LitElement {
           margin-bottom: 16px;
         }
 
-        ha-tab-group {
+        sl-tab-group {
           line-height: var(--ha-line-height-normal);
         }
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

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

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

@@ -182,7 +182,6 @@ class HaPanelHistory extends LitElement {
               .disabled=${this._isLoading}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
           ${this._isLoading

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

@@ -104,7 +104,6 @@ export class HaPanelLogbook extends LitElement {
               .value=${this._targetPickerValue}
               add-on-top
               @value-changed=${this._targetsChanged}
-              compact
             ></ha-target-picker>
           </div>
 

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

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

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

@@ -8,17 +8,6 @@ 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;
@@ -55,10 +44,7 @@ export class HuiCardFeatures extends LitElement {
     :host {
       --feature-color: var(--state-icon-color);
       --feature-height: 42px;
-      --feature-border-radius: var(
-        --ha-card-features-border-radius,
-        var(--ha-border-radius-lg)
-      );
+      --feature-border-radius: 12px;
       --feature-button-spacing: 12px;
       pointer-events: none;
       position: relative;

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

@@ -18,18 +18,17 @@ 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,
@@ -37,6 +36,8 @@ 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);
@@ -47,6 +48,11 @@ 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> {
@@ -312,10 +318,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"
@@ -459,16 +465,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       animation: pulse 1s infinite;
     }
 
-    /* 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)
-      );
+    ha-tile-badge.not-found {
+      --tile-badge-background-color: var(--red-color);
     }
 
     @keyframes pulse {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -17,31 +17,30 @@ 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;
 
@@ -196,10 +195,10 @@ export class HuiDialogEditSection
           </ha-button-menu>
           ${!this._yamlMode
             ? html`
-                <ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+                <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                   ${TABS.map(
                     (tab) => html`
-                      <ha-tab-group-tab
+                      <sl-tab
                         slot="nav"
                         .panel=${tab}
                         .active=${this._currTab === tab}
@@ -207,10 +206,10 @@ export class HuiDialogEditSection
                         ${this.hass!.localize(
                           `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                         )}
-                      </ha-tab-group-tab>
+                      </sl-tab>
                     `
                   )}
-                </ha-tab-group>
+                </sl-tab-group>
               `
             : nothing}
         </ha-dialog-header>
@@ -434,10 +433,10 @@ export class HuiDialogEditSection
         ha-dialog.yaml-mode {
           --dialog-content-padding: 0;
         }
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

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

@@ -20,8 +20,6 @@ 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 {
@@ -55,6 +53,7 @@ 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;
 
@@ -275,10 +274,10 @@ export class HuiDialogEditView extends LitElement {
               `
             : nothing}
           ${!this._yamlMode
-            ? html`<ha-tab-group @wa-tab-show=${this._handleTabChanged}>
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                 ${TABS.map(
                   (tab) => html`
-                    <ha-tab-group-tab
+                    <sl-tab
                       slot="nav"
                       .panel=${tab}
                       .active=${this._currTab === tab}
@@ -286,10 +285,10 @@ export class HuiDialogEditView extends LitElement {
                       ${this.hass!.localize(
                         `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
                       )}
-                    </ha-tab-group-tab>
+                    </sl-tab>
                   `
                 )}
-              </ha-tab-group>`
+              </sl-tab-group>`
             : nothing}
         </ha-dialog-header>
         ${content}
@@ -652,10 +651,10 @@ export class HuiDialogEditView extends LitElement {
           font-size: inherit;
           font-weight: inherit;
         }
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

src/panels/lovelace/hui-root.ts

@@ -45,8 +45,7 @@ import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-svg-icon";
-import "../../components/ha-tab-group";
-import "../../components/ha-tab-group-tab";
+import "../../components/sl-tab-group";
 import { createAreaRegistryEntry } from "../../data/area_registry";
 import type { LovelacePanelConfig } from "../../data/lovelace";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
@@ -410,12 +409,12 @@ class HUIRoot extends LitElement {
         !view.visible.some((e) => e.user === this.hass!.user?.id)) ||
         view.visible === false);
 
-    const tabs = html`<ha-tab-group @wa-tab-show=${this._handleViewSelected}>
+    const tabs = html`<sl-tab-group @sl-tab-show=${this._handleViewSelected}>
       ${views.map((view, index) => {
         const hidden =
           !this._editMode && (view.subview || _isTabHiddenForUser(view));
         return html`
-          <ha-tab-group-tab
+          <sl-tab
             slot="nav"
             panel=${index}
             .active=${this._curView === index}
@@ -472,10 +471,10 @@ class HUIRoot extends LitElement {
                   ></ha-icon-button-arrow-next>
                 `
               : nothing}
-          </ha-tab-group-tab>
+          </sl-tab>
         `;
       })}
-    </ha-tab-group>`;
+    </sl-tab-group>`;
 
     const isSubview = curViewConfig?.subview;
     const hasTabViews = views.filter((view) => !view.subview).length > 1;
@@ -1268,7 +1267,7 @@ class HUIRoot extends LitElement {
           display: flex;
           align-items: center;
         }
-        ha-tab-group {
+        sl-tab-group {
           --ha-tab-indicator-color: var(
             --app-header-selection-bar-color,
             var(--app-header-text-color, white)
@@ -1280,10 +1279,10 @@ class HUIRoot extends LitElement {
           min-width: 0;
           height: 100%;
         }
-        ha-tab-group::part(nav) {
+        sl-tab-group::part(nav) {
           padding: 0;
         }
-        ha-tab-group::part(scroll-button) {
+        sl-tab-group::part(scroll-button) {
           background-color: var(--app-header-background-color);
           background: linear-gradient(
             90deg,
@@ -1292,14 +1291,14 @@ class HUIRoot extends LitElement {
           );
           z-index: 1;
         }
-        ha-tab-group::part(scroll-button-end) {
+        sl-tab-group::part(scroll-button--end) {
           background: linear-gradient(
             270deg,
             var(--app-header-background-color),
             transparent
           );
         }
-        .edit-mode ha-tab-group::part(scroll-button) {
+        .edit-mode sl-tab-group::part(scroll-button) {
           background-color: var(--app-header-edit-background-color, #455a64);
           background: linear-gradient(
             90deg,
@@ -1307,7 +1306,7 @@ class HUIRoot extends LitElement {
             transparent
           );
         }
-        .edit-mode ha-tab-group::part(scroll-button--end) {
+        .edit-mode sl-tab-group::part(scroll-button--end) {
           background: linear-gradient(
             270deg,
             var(--app-header-edit-background-color, #455a64),
@@ -1320,35 +1319,41 @@ class HUIRoot extends LitElement {
         .tab-bar {
           display: flex;
         }
-        .edit-mode ha-tab-group {
+        .edit-mode sl-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);
         }
-        ha-tab-group-tab {
-          --ha-tab-group-tab-height: var(--header-height, 56px);
+        sl-tab {
+          --sl-tab-height: var(--header-height, 56px);
+          height: calc(var(--sl-tab-height) - 2px);
         }
-        ha-tab-group-tab[aria-selected="true"] .edit-icon {
+        sl-tab[aria-selected="true"] .edit-icon {
           display: inline-flex;
         }
-        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-inline-start: var(
+            --ha-tab-padding-start,
+            var(--sl-spacing-large)
+          );
+          padding-inline-end: var(
+            --ha-tab-padding-end,
+            var(--sl-spacing-large)
           );
         }
-        .tab-bar ha-tab-group-tab {
-          --ha-tab-group-tab-height: var(--tab-bar-height, 56px);
+        sl-tab::part(base) {
+          padding-top: calc((var(--sl-tab-height) - 20px) / 2);
+          padding-bottom: calc((var(--sl-tab-height) - 20px) / 2 - 2px);
         }
-        .edit-mode ha-tab-group-tab[aria-selected="true"]::part(base) {
+        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) {
           padding: 0;
           margin-top: calc((var(--tab-bar-height, 56px) - 48px) / 2);
         }

src/resources/log-message.ts

@@ -44,9 +44,7 @@ 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) {

src/resources/theme/color/color.globals.ts

@@ -117,7 +117,10 @@ 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);
@@ -195,9 +198,15 @@ 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);
@@ -243,9 +252,15 @@ 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);
@@ -254,9 +269,15 @@ 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);
@@ -264,8 +285,14 @@ 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 */
@@ -327,7 +354,8 @@ 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;
@@ -339,5 +367,9 @@ 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");

src/resources/theme/main.globals.ts

@@ -28,10 +28,22 @@ 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)
+    );
   }
 `;
 

src/resources/theme/typography.globals.ts

@@ -1,5 +1,8 @@
 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 {
@@ -14,10 +17,16 @@ 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;
@@ -51,8 +60,17 @@ 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"
+);

src/resources/theme/wa.globals.ts

@@ -6,17 +6,12 @@ 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;
   }
 `;
 

src/translations/en.json

@@ -661,35 +661,20 @@
       },
       "target-picker": {
         "expand": "Expand",
-        "collapse": "Collapse",
         "expand_floor_id": "Split this floor into separate areas.",
         "expand_area_id": "Split this area into separate devices and entities.",
         "expand_device_id": "Split this device into separate entities.",
         "expand_label_id": "Split this label into separate areas, devices and entities.",
         "remove": "Remove",
         "remove_floor_id": "Remove floor",
-        "remove_floors": "Remove floors",
         "remove_area_id": "Remove area",
-        "remove_areas": "Remove areas",
         "remove_device_id": "Remove device",
-        "remove_devices": "Remove devices",
         "remove_entity_id": "Remove entity",
-        "remove_entitys": "Remove entities",
         "remove_label_id": "Remove label",
-        "remove_labels": "Remove labels",
         "add_area_id": "Choose area",
         "add_device_id": "Choose device",
         "add_entity_id": "Choose entity",
-        "add_label_id": "Choose label",
-        "devices_count": "{count} {count, plural,\n one {device}\n other {devices}\n}",
-        "entities_count": "{count} {count, plural,\n one {entity}\n other {entities}\n}",
-        "selected": {
-          "entity": "{count} {count, plural,\n one {entity}\n other {entities}\n}",
-          "device": "{count} {count, plural,\n one {device}\n other {devices}\n}",
-          "area": "{count} {count, plural,\n one {area}\n other {areas}\n}",
-          "label": "{count} {count, plural,\n one {label}\n other {labels}\n}",
-          "floor": "{count} {count, plural,\n one {floor}\n other {floors}\n}"
-        }
+        "add_label_id": "Choose label"
       },
       "subpage-data-table": {
         "filters": "Filters",

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     // Language Options
-    "target": "ES2021",
-    "lib": ["ES2021", "DOM", "DOM.Iterable", "WebWorker"],
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable", "WebWorker"],
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     // Modules

yarn.lock

@@ -1905,9 +1905,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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"
+"@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"
   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/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9
+  checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
   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.2"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"