Group floor and area, add label icon, remove remove group

nitpick: Rename HaFormExpendable to HaFormExpandable

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

@@ -149,7 +149,7 @@ class HassioAddonConfig extends LitElement {
       )
   );
 
-  private _filteredShchema = memoizeOne(
+  private _filteredSchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
   );
@@ -161,7 +161,7 @@ class HassioAddonConfig extends LitElement {
       showForm &&
       JSON.stringify(this.addon.schema) !==
         JSON.stringify(
-          this._filteredShchema(this.addon.options, this.addon.schema!)
+          this._filteredSchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -207,7 +207,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredShchema(
+                    : this._filteredSchema(
                         this.addon.options,
                         this.addon.schema!
                       )

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

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

package.json

@@ -51,7 +51,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.2",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

prettier.config.js

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

src/components/ha-control-slider.ts

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

src/components/ha-expansion-panel.ts

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

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

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

src/components/ha-tab-group.ts

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

src/components/ha-target-picker.ts

@@ -1,39 +1,16 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import "@material/mwc-menu/mwc-menu-surface";
-import {
-  mdiClose,
-  mdiDevices,
-  mdiHome,
-  mdiLabel,
-  mdiPlus,
-  mdiTextureBox,
-  mdiUnfoldMoreVertical,
-} from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
-import type {
-  HassEntity,
-  HassServiceTarget,
-  UnsubscribeFunc,
-} from "home-assistant-js-websocket";
+import type { HassServiceTarget } 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";
@@ -41,12 +18,13 @@ 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) {
@@ -58,6 +36,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
+  @property({ type: Boolean }) public compact = false;
+
   @property({ attribute: false, type: Array }) public createDomains?: string[];
 
   /**
@@ -96,18 +76,8 @@ 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()} `;
@@ -116,87 +86,68 @@ 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="mdc-chip-set items">
-        ${this.value?.floor_id
-          ? 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
-          ? 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
-              );
-            })
+      <div class="item-groups">
+        ${this.value?.floor_id || this.value?.area_id
+          ? html`
+              <ha-target-picker-item-group
+                @remove-target-item=${this._handleRemove}
+                type="area"
+                .hass=${this.hass}
+                .items=${{
+                  floor: ensureArray(this.value?.floor_id),
+                  area: ensureArray(this.value?.area_id),
+                }}
+                .collapsed=${this.compact}
+              >
+              </ha-target-picker-item-group>
+            `
           : nothing}
         ${this.value?.device_id
-          ? 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
-              );
-            })
+          ? html`
+              <ha-target-picker-item-group
+                @remove-target-item=${this._handleRemove}
+                type="device"
+                .hass=${this.hass}
+                .items=${{ device: ensureArray(this.value?.device_id) }}
+                .collapsed=${this.compact}
+              >
+              </ha-target-picker-item-group>
+            `
           : nothing}
         ${this.value?.entity_id
-          ? 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
-              );
-            })
+          ? html`
+              <ha-target-picker-item-group
+                @remove-target-item=${this._handleRemove}
+                type="entity"
+                .hass=${this.hass}
+                .items=${{ entity: ensureArray(this.value?.entity_id) }}
+                .collapsed=${this.compact}
+              >
+              </ha-target-picker-item-group>
+            `
           : nothing}
         ${this.value?.label_id
-          ? 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
-              );
-            })
+          ? html`
+              <ha-target-picker-item-group
+                @remove-target-item=${this._handleRemove}
+                type="label"
+                .hass=${this.hass}
+                .items=${{ label: ensureArray(this.value?.label_id) }}
+                .collapsed=${this.compact}
+              >
+              </ha-target-picker-item-group>
+            `
           : nothing}
       </div>
     `;
@@ -299,89 +250,6 @@ 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;
@@ -524,130 +392,31 @@ 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 target = ev.currentTarget as any;
+    const { type, id } = ev.detail;
     fireEvent(this, "value-changed", {
-      value: this._removeItem(this.value, target.type, target.id),
+      value: this._removeItem(this.value, type, id),
     });
   }
 
-  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: string,
+    type: TargetType,
     id: string
   ): this["value"] {
-    const newVal = ensureArray(value![type])!.filter(
+    const typeId = `${type}_id`;
+
+    const newVal = ensureArray(value![typeId])!.filter(
       (val) => String(val) !== id
     );
     if (newVal.length) {
       return {
         ...value,
-        [type]: newVal,
+        [typeId]: newVal,
       };
     }
     const val = { ...value }!;
-    delete val[type];
+    delete val[typeId];
     if (Object.keys(val).length) {
       return val;
     }
@@ -679,80 +448,6 @@ 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)}
@@ -811,41 +506,6 @@ 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;
       }
@@ -865,6 +525,12 @@ 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);
+      }
     `;
   }
 }
@@ -873,4 +539,12 @@ 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

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

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

@@ -0,0 +1,78 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+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";
+
+  @property({ attribute: false }) public items!: Partial<
+    Record<"entity" | "device" | "area" | "label" | "floor", string[]>
+  >;
+
+  @property({ type: Boolean }) public collapsed = false;
+
+  protected render() {
+    let count = 0;
+    Object.values(this.items).forEach((items) => {
+      if (items) {
+        count += items.length;
+      }
+    });
+
+    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,
+          }
+        )}
+      </div>
+      <ha-md-list>
+        ${Object.entries(this.items).map(([type, items]) =>
+          items
+            ? items.map(
+                (item) =>
+                  html`<ha-target-picker-item-row
+                    .hass=${this.hass}
+                    .type=${type as "entity" | "device" | "area" | "label"}
+                    .itemId=${item}
+                  ></ha-target-picker-item-row>`
+              )
+            : nothing
+        )}
+      </ha-md-list>
+    </ha-expansion-panel>`;
+  }
+
+  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;
+    }
+    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

@@ -0,0 +1,478 @@
+import { consume } from "@lit/context";
+import {
+  mdiChevronDown,
+  mdiClose,
+  mdiDevices,
+  mdiHome,
+  mdiLabel,
+  mdiTextureBox,
+} from "@mdi/js";
+import { css, html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, query, 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 { labelsContext } from "../../data/context";
+import { domainToName } from "../../data/integration";
+import type { LabelRegistryEntry } from "../../data/label_registry";
+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";
+import type { HaMdList } from "../ha-md-list";
+import "../ha-md-list-item";
+import type { HaMdListItem } from "../ha-md-list-item";
+import "../ha-state-icon";
+import "../ha-svg-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({ attribute: "item-id" }) public itemId!: 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;
+
+  @state()
+  @consume({ context: labelsContext, subscribe: true })
+  _labelRegistry!: LabelRegistryEntry[];
+
+  @query("ha-md-list-item") public item?: HaMdListItem;
+
+  @query("ha-md-list") public list?: HaMdList;
+
+  @query("ha-target-picker-item-row") public itemRow?: HaTargetPickerItemRow;
+
+  protected willUpdate(changedProps: PropertyValues) {
+    if (!this.subEntry && changedProps.has("itemId")) {
+      this._updateItemData();
+      this._expanded = false;
+    }
+  }
+
+  protected render() {
+    const { name, context, iconPath, fallbackIconPath, stateObject } =
+      this._itemData(this.type, this.itemId);
+
+    const showDevices = ["floor", "area", "label"].includes(this.type);
+    const showEntities = this.type !== "entity";
+
+    const entries = this.parentEntries || this._entries;
+
+    // Don't show sub entries that have no entities
+    if (
+      this.subEntry &&
+      this.type !== "entity" &&
+      (!entries || entries.referenced_entities.length === 0)
+    ) {
+      return nothing;
+    }
+
+    return html`
+      <ha-md-list-item
+        .disabled=${entries?.referenced_entities.length === 0}
+        .type=${this.type === "entity" ? "text" : "button"}
+        @click=${this._toggleExpand}
+      >
+        ${this.type !== "entity"
+          ? html`<ha-svg-icon
+              class="expand-button ${entries?.referenced_entities.length &&
+              this._expanded
+                ? "expanded"
+                : ""}"
+              .path=${mdiChevronDown}
+              slot="start"
+            ></ha-svg-icon>`
+          : 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-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.itemId
+          )
+        : [];
+
+    return html`
+      <ha-md-list class="entries">
+        ${rows1.map(
+          (itemId, index) => html`
+            <ha-target-picker-item-row
+              sub-entry
+              .hass=${this.hass}
+              .type=${nextType}
+              .itemId=${itemId}
+              .parentEntries=${rows1Entries?.[index]}
+            ></ha-target-picker-item-row>
+          `
+        )}
+        ${rows2.map(
+          (itemId) => html`
+            <ha-target-picker-item-row
+              sub-entry
+              .hass=${this.hass}
+              type="entity"
+              .itemId=${itemId}
+            ></ha-target-picker-item-row>
+          `
+        )}
+      </ha-md-list>
+    `;
+  }
+
+  private async _updateItemData() {
+    try {
+      this._entries = await extractFromTarget(this.hass, {
+        [`${this.type}_id`]: [this.itemId],
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to extract target", 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,
+      };
+    }
+
+    // type label
+    const label = this._labelRegistry.find((lab) => lab.label_id === item);
+    return {
+      name: label?.name || item,
+      iconPath: label?.icon,
+      fallbackIconPath: mdiLabel,
+    };
+  });
+
+  private _setDomainName(domain: string) {
+    this._domainName = domainToName(this.hass.localize, domain);
+  }
+
+  private _removeItem(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "remove-target-item", {
+      type: this.type,
+      id: this.itemId,
+    });
+  }
+
+  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() {
+    const entries = this.parentEntries || this._entries;
+
+    if (
+      this.type === "entity" ||
+      !entries ||
+      entries.referenced_entities.length === 0
+    ) {
+      return;
+    }
+    this._expanded = !this._expanded;
+  }
+
+  static styles = css`
+    :host {
+      --md-list-item-top-space: 0;
+      --md-list-item-bottom-space: 0;
+      --md-list-item-leading-space: 8px;
+      --md-list-item-trailing-space: 8px;
+      --md-list-item-two-line-container-height: 56px;
+    }
+
+    state-badge {
+      color: var(--ha-color-on-neutral-quiet);
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .expand-button {
+      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: 0;
+      padding-left: 40px;
+      overflow: hidden;
+      transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+      border-bottom: 1px solid var(--ha-color-border-neutral-quiet);
+    }
+
+    :host([sub-entry]) .entries {
+      border-bottom: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker-item-row": HaTargetPickerItemRow;
+  }
+}

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

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

src/data/ai_task.ts

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

src/data/data_entry_flow.ts

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

src/data/recorder.ts

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

src/data/target.ts

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

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

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

src/layouts/hass-subpage.ts

@@ -99,28 +99,27 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
+          background-color: var(--app-header-background-color);
           padding-top: var(--safe-area-inset-top);
           padding-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .toolbar {
           padding-left: var(--safe-area-inset-left);
-          background-color: var(--app-header-background-color);
-          border-bottom: var(--app-header-border-bottom, none);
-          box-sizing: border-box;
         }
 
         .toolbar-content {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          padding: 8px 12px;
+          height: var(--header-height);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
+          border-bottom: var(--app-header-border-bottom, none);
+          box-sizing: border-box;
+          padding: 8px 12px;
         }
-        @media (max-width: 599px) {
-          .toolbar-content {
-            padding: 4px;
-          }
-        }
-        .toolbar-content a {
+
+        .toolbar a {
           color: var(--sidebar-text-color);
           text-decoration: none;
         }
@@ -149,9 +148,7 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(
-            100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
-          );
+          height: calc(100% - 1px - var(--header-height));
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

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

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

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

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

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

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

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

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

src/panels/config/automation/styles.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -182,6 +182,7 @@ 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,6 +104,7 @@ 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,8 +26,12 @@ export const cardFeatureStyles = css`
     --control-button-padding: 0px;
   }
   ha-control-button {
+    --control-button-border-radius: var(--feature-border-radius);
     --control-button-focus-color: var(--feature-color);
   }
+  ha-control-number-buttons {
+    --control-number-buttons-border-radius: var(--feature-border-radius);
+  }
   ha-control-slider {
     --control-slider-color: var(--feature-color);
     --control-slider-background: var(--feature-color);

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

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

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -225,7 +225,7 @@ class HuiEnergySankeyCard
       if (consumption.total.battery_to_grid > 0) {
         links.push({
           source: "battery",
-          target: "grid",
+          target: "grid_return",
           value: consumption.total.battery_to_grid,
         });
       }
@@ -457,9 +457,6 @@ class HuiEnergySankeyCard
     return { areas, floors };
   }
 
-  /**
-   * Organizes device nodes into hierarchical sections based on parent-child relationships.
-   */
   protected _getDeviceSections(
     parentLinks: Record<string, string>,
     deviceNodes: Node[]
@@ -468,34 +465,20 @@ class HuiEnergySankeyCard
     const childSection: Node[] = [];
     const parentIds = Object.values(parentLinks);
     const remainingLinks: typeof parentLinks = {};
-
     deviceNodes.forEach((deviceNode) => {
-      const isChild = deviceNode.id in parentLinks;
-      const isParent = parentIds.includes(deviceNode.id);
-      if (isParent && !isChild) {
-        // Top-level parents (have children but no parents themselves)
+      if (parentIds.includes(deviceNode.id)) {
         parentSection.push(deviceNode);
+        remainingLinks[deviceNode.id] = parentLinks[deviceNode.id];
       } else {
         childSection.push(deviceNode);
       }
     });
-
-    // Filter out links where parent is already in current parent section
-    Object.entries(parentLinks).forEach(([child, parent]) => {
-      if (!parentSection.some((node) => node.id === parent)) {
-        remainingLinks[child] = parent;
-      }
-    });
-
     if (parentSection.length > 0) {
-      // Recursively process child section with remaining links
       return [
-        parentSection,
-        ...this._getDeviceSections(remainingLinks, childSection),
+        ...this._getDeviceSections(remainingLinks, parentSection),
+        childSection,
       ];
     }
-
-    // Base case: no more parent-child relationships to process
     return [deviceNodes];
   }
 

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -221,25 +221,36 @@ export class HuiEnergySourcesTableCard
 
     let totalGrid = 0;
     let totalGridCost = 0;
-    let totalSolar = 0;
     let totalBattery = 0;
-    let totalGas = 0;
-    let totalGasCost = 0;
-    let totalWater = 0;
-    let totalWaterCost = 0;
 
     let hasGridCost = false;
-    let hasGasCost = false;
-    let hasWaterCost = false;
 
     let totalGridCompare = 0;
     let totalGridCostCompare = 0;
-    let totalSolarCompare = 0;
     let totalBatteryCompare = 0;
-    let totalGasCompare = 0;
-    let totalGasCostCompare = 0;
-    let totalWaterCompare = 0;
-    let totalWaterCostCompare = 0;
+
+    const totals = {
+      gas: 0,
+      water: 0,
+      solar: 0,
+    };
+    const totalsCompare = {
+      gas: 0,
+      water: 0,
+      solar: 0,
+    };
+    const totalCosts = {
+      gas: 0,
+      water: 0,
+    };
+    const totalCostsCompare = {
+      gas: 0,
+      water: 0,
+    };
+    const hasCosts = {
+      gas: false,
+      water: false,
+    };
 
     const types = energySourcesByType(this._data.prefs);
 
@@ -266,12 +277,111 @@ export class HuiEnergySourcesTableCard
       )
     );
 
-    const gasUnit = this._data.gasUnit;
-
-    const waterUnit = this._data.waterUnit;
+    const units = {
+      solar: "kWh",
+      gas: this._data.gasUnit,
+      water: this._data.waterUnit,
+    };
 
     const compare = this._data.statsCompare !== undefined;
 
+    const _extractStatData = (
+      statId: string,
+      costStatId: string | null
+    ): {
+      hasData: boolean;
+      energy: number;
+      energyCompare: number;
+      cost: number;
+      costCompare: number;
+    } => {
+      const energy = calculateStatisticSumGrowth(this._data!.stats[statId]);
+
+      const compareEnergy =
+        compare &&
+        calculateStatisticSumGrowth(this._data!.statsCompare[statId]);
+
+      const cost =
+        (costStatId &&
+          calculateStatisticSumGrowth(this._data!.stats[costStatId])) ||
+        0;
+
+      const costCompare =
+        (compare &&
+          costStatId &&
+          calculateStatisticSumGrowth(this._data!.statsCompare[costStatId])) ||
+        0;
+
+      if (energy === null && (!compare || compareEnergy === null)) {
+        return {
+          hasData: false,
+          energy: energy || 0,
+          energyCompare: compareEnergy || 0,
+          cost,
+          costCompare,
+        };
+      }
+
+      return {
+        hasData: true,
+        energy: energy || 0,
+        energyCompare: compareEnergy || 0,
+        cost,
+        costCompare,
+      };
+    };
+
+    const _renderSimpleCategory = (type: "solar" | "gas" | "water") =>
+      html` ${types[type]?.map((source, idx) => {
+        const cost_stat =
+          type in hasCosts &&
+          (source.stat_cost ||
+            this._data!.info.cost_sensors[source.stat_energy_from]);
+
+        const { hasData, energy, energyCompare, cost, costCompare } =
+          _extractStatData(source.stat_energy_from, cost_stat || null);
+
+        if (!hasData && !cost && !costCompare) {
+          return nothing;
+        }
+
+        totals[type] += energy;
+        totalsCompare[type] += energyCompare;
+        if (cost_stat) {
+          hasCosts[type] = true;
+          totalCosts[type] += cost;
+          totalCostsCompare[type] += costCompare;
+        }
+
+        return this._renderRow(
+          computedStyles,
+          type,
+          source.stat_energy_from,
+          idx,
+          energy,
+          energyCompare,
+          units[type],
+          cost_stat ? cost : null,
+          cost_stat ? costCompare : null,
+          showCosts,
+          compare
+        );
+      })}
+      ${types[type]
+        ? this._renderTotalRow(
+            this.hass.localize(
+              `ui.panel.lovelace.cards.energy.energy_sources_table.${type}_total`
+            ),
+            totals[type],
+            totalsCompare[type],
+            units[type],
+            hasCosts[type] ? totalCosts[type] : null,
+            hasCosts[type] ? totalCostsCompare[type] : null,
+            showCosts,
+            compare
+          )
+        : ""}`;
+
     return html` <ha-card>
       ${this._config.title
         ? html`<h1 class="card-header">${this._config.title}</h1>`
@@ -336,72 +446,24 @@ export class HuiEnergySourcesTableCard
               </tr>
             </thead>
             <tbody class="mdc-data-table__content">
-              ${types.solar?.map((source, idx) => {
-                const energy =
-                  calculateStatisticSumGrowth(
-                    this._data!.stats[source.stat_energy_from]
-                  ) || 0;
-                totalSolar += energy;
-
-                const compareEnergy =
-                  (compare &&
-                    calculateStatisticSumGrowth(
-                      this._data!.statsCompare[source.stat_energy_from]
-                    )) ||
-                  0;
-                totalSolarCompare += compareEnergy;
-
-                return this._renderRow(
-                  computedStyles,
-                  "solar",
-                  source.stat_energy_from,
-                  idx,
-                  energy,
-                  compareEnergy,
-                  "kWh",
-                  null,
-                  null,
-                  showCosts,
-                  compare
-                );
-              })}
-              ${types.solar
-                ? this._renderTotalRow(
-                    this.hass.localize(
-                      "ui.panel.lovelace.cards.energy.energy_sources_table.solar_total"
-                    ),
-                    totalSolar,
-                    totalSolarCompare,
-                    "kWh",
-                    null,
-                    null,
-                    showCosts,
-                    compare
-                  )
-                : ""}
+              ${_renderSimpleCategory("solar")}
               ${types.battery?.map((source, idx) => {
-                const energyFrom =
-                  calculateStatisticSumGrowth(
-                    this._data!.stats[source.stat_energy_from]
-                  ) || 0;
-                const energyTo =
-                  calculateStatisticSumGrowth(
-                    this._data!.stats[source.stat_energy_to]
-                  ) || 0;
-                totalBattery += energyFrom - energyTo;
+                const {
+                  hasData: hasFromData,
+                  energy: energyFrom,
+                  energyCompare: energyFromCompare,
+                } = _extractStatData(source.stat_energy_from, null);
+                const {
+                  hasData: hasToData,
+                  energy: energyTo,
+                  energyCompare: energyToCompare,
+                } = _extractStatData(source.stat_energy_to, null);
 
-                const energyFromCompare =
-                  (compare &&
-                    calculateStatisticSumGrowth(
-                      this._data!.statsCompare[source.stat_energy_from]
-                    )) ||
-                  0;
-                const energyToCompare =
-                  (compare &&
-                    calculateStatisticSumGrowth(
-                      this._data!.statsCompare[source.stat_energy_to]
-                    )) ||
-                  0;
+                if (!hasFromData && !hasToData) {
+                  return nothing;
+                }
+
+                totalBattery += energyFrom - energyTo;
                 totalBatteryCompare += energyFromCompare - energyToCompare;
 
                 return html` ${this._renderRow(
@@ -447,50 +509,39 @@ export class HuiEnergySourcesTableCard
               ${types.grid?.map(
                 (source) =>
                   html`${source.flow_from.map((flow, idx) => {
-                    const energy =
-                      calculateStatisticSumGrowth(
-                        this._data!.stats[flow.stat_energy_from]
-                      ) || 0;
-                    totalGrid += energy;
-
-                    const compareEnergy =
-                      (compare &&
-                        calculateStatisticSumGrowth(
-                          this._data!.statsCompare[flow.stat_energy_from]
-                        )) ||
-                      0;
-                    totalGridCompare += compareEnergy;
-
                     const cost_stat =
                       flow.stat_cost ||
                       this._data!.info.cost_sensors[flow.stat_energy_from];
-                    const cost = cost_stat
-                      ? calculateStatisticSumGrowth(
-                          this._data!.stats[cost_stat]
-                        ) || 0
-                      : null;
-                    if (cost !== null) {
+                    const {
+                      hasData,
+                      energy,
+                      energyCompare,
+                      cost,
+                      costCompare,
+                    } = _extractStatData(
+                      flow.stat_energy_from,
+                      cost_stat || null
+                    );
+
+                    if (!hasData && !cost && !costCompare) {
+                      return nothing;
+                    }
+
+                    totalGrid += energy;
+                    totalGridCompare += energyCompare;
+
+                    if (cost_stat) {
                       hasGridCost = true;
                       totalGridCost += cost;
-                    }
-
-                    const costCompare =
-                      compare && cost_stat
-                        ? calculateStatisticSumGrowth(
-                            this._data!.statsCompare[cost_stat]
-                          ) || 0
-                        : null;
-                    if (costCompare !== null) {
                       totalGridCostCompare += costCompare;
                     }
-
                     return this._renderRow(
                       computedStyles,
                       "grid_consumption",
                       flow.stat_energy_from,
                       idx,
                       energy,
-                      compareEnergy,
+                      energyCompare,
                       "kWh",
                       cost,
                       costCompare,
@@ -499,52 +550,41 @@ export class HuiEnergySourcesTableCard
                     );
                   })}
                   ${source.flow_to.map((flow, idx) => {
-                    const energy =
-                      (calculateStatisticSumGrowth(
-                        this._data!.stats[flow.stat_energy_to]
-                      ) || 0) * -1;
-                    totalGrid += energy;
                     const cost_stat =
                       flow.stat_compensation ||
                       this._data!.info.cost_sensors[flow.stat_energy_to];
-                    const cost = cost_stat
-                      ? (calculateStatisticSumGrowth(
-                          this._data!.stats[cost_stat]
-                        ) || 0) * -1
-                      : null;
-                    if (cost !== null) {
+                    const {
+                      hasData,
+                      energy,
+                      energyCompare,
+                      cost,
+                      costCompare,
+                    } = _extractStatData(
+                      flow.stat_energy_to,
+                      cost_stat || null
+                    );
+
+                    if (!hasData && !cost && !costCompare) {
+                      return nothing;
+                    }
+                    totalGrid -= energy;
+                    totalGridCompare -= energyCompare;
+
+                    if (cost_stat !== null) {
                       hasGridCost = true;
-                      totalGridCost += cost;
+                      totalGridCost -= cost;
+                      totalGridCostCompare -= costCompare;
                     }
-
-                    const energyCompare =
-                      ((compare &&
-                        calculateStatisticSumGrowth(
-                          this._data!.statsCompare[flow.stat_energy_to]
-                        )) ||
-                        0) * -1;
-                    totalGridCompare += energyCompare;
-
-                    const costCompare =
-                      compare && cost_stat
-                        ? (calculateStatisticSumGrowth(
-                            this._data!.statsCompare[cost_stat]
-                          ) || 0) * -1
-                        : null;
-                    if (costCompare !== null) {
-                      totalGridCostCompare += costCompare;
-                    }
-
                     return this._renderRow(
                       computedStyles,
                       "grid_return",
                       flow.stat_energy_to,
                       idx,
-                      energy,
-                      energyCompare,
+                      -energy,
+                      -energyCompare,
                       "kWh",
-                      cost,
-                      costCompare,
+                      -cost,
+                      -costCompare,
                       showCosts,
                       compare
                     );
@@ -566,138 +606,9 @@ export class HuiEnergySourcesTableCard
                     compare
                   )
                 : ""}
-              ${types.gas?.map((source, idx) => {
-                const energy =
-                  calculateStatisticSumGrowth(
-                    this._data!.stats[source.stat_energy_from]
-                  ) || 0;
-                totalGas += energy;
-
-                const energyCompare =
-                  (compare &&
-                    calculateStatisticSumGrowth(
-                      this._data!.statsCompare[source.stat_energy_from]
-                    )) ||
-                  0;
-                totalGasCompare += energyCompare;
-
-                const cost_stat =
-                  source.stat_cost ||
-                  this._data!.info.cost_sensors[source.stat_energy_from];
-                const cost = cost_stat
-                  ? calculateStatisticSumGrowth(this._data!.stats[cost_stat]) ||
-                    0
-                  : null;
-                if (cost !== null) {
-                  hasGasCost = true;
-                  totalGasCost += cost;
-                }
-
-                const costCompare =
-                  compare && cost_stat
-                    ? calculateStatisticSumGrowth(
-                        this._data!.statsCompare[cost_stat]
-                      ) || 0
-                    : null;
-                if (costCompare !== null) {
-                  totalGasCostCompare += costCompare;
-                }
-
-                return this._renderRow(
-                  computedStyles,
-                  "gas",
-                  source.stat_energy_from,
-                  idx,
-                  energy,
-                  energyCompare,
-                  gasUnit,
-                  cost,
-                  costCompare,
-                  showCosts,
-                  compare
-                );
-              })}
-              ${types.gas
-                ? this._renderTotalRow(
-                    this.hass.localize(
-                      "ui.panel.lovelace.cards.energy.energy_sources_table.gas_total"
-                    ),
-                    totalGas,
-                    totalGasCompare,
-                    gasUnit,
-                    hasGasCost ? totalGasCost : null,
-                    hasGasCost ? totalGasCostCompare : null,
-                    showCosts,
-                    compare
-                  )
-                : ""}
-              ${types.water?.map((source, idx) => {
-                const energy =
-                  calculateStatisticSumGrowth(
-                    this._data!.stats[source.stat_energy_from]
-                  ) || 0;
-                totalWater += energy;
-
-                const energyCompare =
-                  (compare &&
-                    calculateStatisticSumGrowth(
-                      this._data!.statsCompare[source.stat_energy_from]
-                    )) ||
-                  0;
-                totalWaterCompare += energyCompare;
-
-                const cost_stat =
-                  source.stat_cost ||
-                  this._data!.info.cost_sensors[source.stat_energy_from];
-                const cost = cost_stat
-                  ? calculateStatisticSumGrowth(this._data!.stats[cost_stat]) ||
-                    0
-                  : null;
-                if (cost !== null) {
-                  hasWaterCost = true;
-                  totalWaterCost += cost;
-                }
-
-                const costCompare =
-                  compare && cost_stat
-                    ? calculateStatisticSumGrowth(
-                        this._data!.statsCompare[cost_stat]
-                      ) || 0
-                    : null;
-                if (costCompare !== null) {
-                  totalWaterCostCompare += costCompare;
-                }
-
-                return this._renderRow(
-                  computedStyles,
-                  "water",
-                  source.stat_energy_from,
-                  idx,
-                  energy,
-                  energyCompare,
-                  waterUnit,
-                  cost,
-                  costCompare,
-                  showCosts,
-                  compare
-                );
-              })}
-              ${types.water
-                ? this._renderTotalRow(
-                    this.hass.localize(
-                      "ui.panel.lovelace.cards.energy.energy_sources_table.water_total"
-                    ),
-                    totalWater,
-                    totalWaterCompare,
-                    waterUnit,
-                    hasWaterCost ? totalWaterCost : null,
-                    hasWaterCost ? totalWaterCostCompare : null,
-                    showCosts,
-                    compare
-                  )
-                : ""}
-              ${[hasGasCost, hasWaterCost, hasGridCost].filter(Boolean).length >
-              1
+              ${_renderSimpleCategory("gas")} ${_renderSimpleCategory("water")}
+              ${[hasCosts.gas, hasCosts.water, hasGridCost].filter(Boolean)
+                .length > 1
                 ? this._renderTotalRow(
                     this.hass.localize(
                       "ui.panel.lovelace.cards.energy.energy_sources_table.total_costs"
@@ -705,10 +616,10 @@ export class HuiEnergySourcesTableCard
                     null,
                     null,
                     "",
-                    totalGasCost + totalGridCost + totalWaterCost,
-                    totalGasCostCompare +
+                    totalCosts.gas + totalGridCost + totalCosts.water,
+                    totalCostsCompare.gas +
                       totalGridCostCompare +
-                      totalWaterCostCompare,
+                      totalCostsCompare.water,
                     showCosts,
                     compare
                   )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/panels/lovelace/hui-root.ts

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

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

@@ -117,10 +117,7 @@ export const colorStyles = css`
     /* state color */
     --state-active-color: var(--amber-color);
     --state-inactive-color: var(--grey-color);
-    --state-unavailable-color: var(
-      --state-icon-unavailable-color,
-      var(--disabled-text-color)
-    );
+    --state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));
 
     /* state domain colors */
     --state-alarm_control_panel-armed_away-color: var(--green-color);
@@ -198,15 +195,9 @@ export const colorStyles = css`
     --sidebar-selected-icon-color: var(--primary-color);
     --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
     --switch-checked-color: var(--primary-color);
-    --switch-checked-button-color: var(
-      --switch-checked-color,
-      var(--primary-background-color)
-    );
+    --switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
     --switch-checked-track-color: var(--switch-checked-color, #000000);
-    --switch-unchecked-button-color: var(
-      --switch-unchecked-color,
-      var(--primary-background-color)
-    );
+    --switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
     --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
     --slider-color: var(--primary-color);
     --slider-secondary-color: var(--light-primary-color);
@@ -252,15 +243,9 @@ export const colorStyles = css`
     --mdc-text-field-idle-line-color: var(--input-idle-line-color);
     --mdc-text-field-hover-line-color: var(--input-hover-line-color);
     --mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
-    --mdc-text-field-outlined-idle-border-color: var(
-      --input-outlined-idle-border-color
-    );
-    --mdc-text-field-outlined-hover-border-color: var(
-      --input-outlined-hover-border-color
-    );
-    --mdc-text-field-outlined-disabled-border-color: var(
-      --input-outlined-disabled-border-color
-    );
+    --mdc-text-field-outlined-idle-border-color: var(--input-outlined-idle-border-color);
+    --mdc-text-field-outlined-hover-border-color: var(--input-outlined-hover-border-color);
+    --mdc-text-field-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
     --mdc-text-field-fill-color: var(--input-fill-color);
     --mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
     --mdc-text-field-ink-color: var(--input-ink-color);
@@ -269,15 +254,9 @@ export const colorStyles = css`
 
     --mdc-select-idle-line-color: var(--input-idle-line-color);
     --mdc-select-hover-line-color: var(--input-hover-line-color);
-    --mdc-select-outlined-idle-border-color: var(
-      --input-outlined-idle-border-color
-    );
-    --mdc-select-outlined-hover-border-color: var(
-      --input-outlined-hover-border-color
-    );
-    --mdc-select-outlined-disabled-border-color: var(
-      --input-outlined-disabled-border-color
-    );
+    --mdc-select-outlined-idle-border-color: var(--input-outlined-idle-border-color);
+    --mdc-select-outlined-hover-border-color: var(--input-outlined-hover-border-color);
+    --mdc-select-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
     --mdc-select-fill-color: var(--input-fill-color);
     --mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
     --mdc-select-ink-color: var(--input-ink-color);
@@ -285,14 +264,8 @@ export const colorStyles = css`
     --mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
     --mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
     --mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
-    --ha-assist-chip-filled-container-color: rgba(
-      var(--rgb-primary-text-color),
-      0.15
-    );
-    --ha-assist-chip-active-container-color: rgba(
-      var(--rgb-primary-color),
-      0.15
-    );
+    --ha-assist-chip-filled-container-color: rgba(var(--rgb-primary-text-color), 0.15);
+    --ha-assist-chip-active-container-color: rgba(var(--rgb-primary-color), 0.15);
     --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
 
     /* Vaadin */
@@ -354,8 +327,7 @@ export const darkColorStyles = css`
     --codemirror-qualifier: #decb6b;
     --codemirror-type: #decb6b;
     --energy-grid-return-color: #a280db;
-    --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2)
-      saturate(0.3);
+    --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(0.3);
     --disabled-color: #464646;
 
     --ha-button-primary-light-color: #4082a040;
@@ -367,9 +339,5 @@ export const darkColorStyles = css`
   }
 `;
 
-export const DefaultPrimaryColor = extractVar(
-  colorStyles,
-  "primary-color",
-  coreColorVariables
-);
+export const DefaultPrimaryColor = extractVar(colorStyles, "primary-color", coreColorVariables);
 export const DefaultAccentColor = extractVar(colorStyles, "accent-color");

src/resources/theme/main.globals.ts

@@ -28,22 +28,10 @@ export const mainStyles = css`
     --margin-title-rtl: 0 24px 0 0;
 
     /* safe-area-insets */
-    --safe-area-inset-top: var(
-      --app-safe-area-inset-top,
-      env(safe-area-inset-top, 0)
-    );
-    --safe-area-inset-bottom: var(
-      --app-safe-area-inset-bottom,
-      env(safe-area-inset-bottom, 0)
-    );
-    --safe-area-inset-left: var(
-      --app-safe-area-inset-left,
-      env(safe-area-inset-left, 0)
-    );
-    --safe-area-inset-right: var(
-      --app-safe-area-inset-right,
-      env(safe-area-inset-right, 0)
-    );
+    --safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
+    --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
+    --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0));
+    --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0));
   }
 `;
 

src/resources/theme/typography.globals.ts

@@ -1,8 +1,5 @@
 import { css } from "lit";
-import {
-  extractDerivedVars,
-  extractVar,
-} from "../../common/style/derived-css-vars";
+import { extractDerivedVars, extractVar } from "../../common/style/derived-css-vars";
 
 export const typographyStyles = css`
   html {
@@ -17,16 +14,10 @@ export const typographyStyles = css`
     --ha-font-size-m: calc(14px * var(--ha-font-size-scale)); /* 1rem */
     --ha-font-size-l: calc(16px * var(--ha-font-size-scale)); /* 1.142857rem */
     --ha-font-size-xl: calc(20px * var(--ha-font-size-scale)); /* 1.428571rem */
-    --ha-font-size-2xl: calc(
-      24px * var(--ha-font-size-scale)
-    ); /* 1.714286rem */
+    --ha-font-size-2xl: calc(24px * var(--ha-font-size-scale)); /* 1.714286rem */
     --ha-font-size-3xl: calc(28px * var(--ha-font-size-scale)); /* 2rem */
-    --ha-font-size-4xl: calc(
-      32px * var(--ha-font-size-scale)
-    ); /* 2.285714rem */
-    --ha-font-size-5xl: calc(
-      40px * var(--ha-font-size-scale)
-    ); /* 2.857143rem */
+    --ha-font-size-4xl: calc(32px * var(--ha-font-size-scale)); /* 2.285714rem */
+    --ha-font-size-5xl: calc(40px * var(--ha-font-size-scale)); /* 2.857143rem */
 
     --ha-font-weight-light: 300;
     --ha-font-weight-normal: 400;
@@ -60,17 +51,8 @@ export const typographyStyles = css`
 
 export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
 
-export const haFontFamilyBody = extractVar(
-  typographyStyles,
-  "ha-font-family-body"
-);
+export const haFontFamilyBody = extractVar(typographyStyles, "ha-font-family-body");
 
-export const haFontSmoothing = extractVar(
-  typographyStyles,
-  "ha-font-smoothing"
-);
+export const haFontSmoothing = extractVar(typographyStyles, "ha-font-smoothing");
 
-export const haMozOsxFontSmoothing = extractVar(
-  typographyStyles,
-  "ha-moz-osx-font-smoothing"
-);
+export const haMozOsxFontSmoothing = extractVar(typographyStyles, "ha-moz-osx-font-smoothing");

src/resources/theme/wa.globals.ts

@@ -6,12 +6,17 @@ export const waMainStyles = css`
     --wa-focus-ring-style: solid;
     --wa-focus-ring-width: 2px;
     --wa-focus-ring-offset: 2px;
-    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-      var(--wa-focus-ring-color);
+    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-focus-ring-color);
 
     --wa-space-l: 24px;
     --wa-shadow-l: 0 8px 8px -4px rgba(0, 0, 0, 0.2);
     --wa-form-control-padding-block: 0.75em;
+
+    --wa-font-weight-action: var(--ha-font-weight-medium);
+    --wa-transition-fast: 75ms;
+    --wa-transition-easing: ease;
+    --wa-border-width-l: var(--ha-border-radius-l);
+    --wa-space-xl: 32px;
   }
 `;
 

src/translations/en.json

@@ -661,20 +661,35 @@
       },
       "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"
+        "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": "Entities: {count}",
+          "device": "Devices: {count}",
+          "area": "Areas: {count}",
+          "label": "Labels: {count}",
+          "floor": "Floors: {count}"
+        }
       },
       "subpage-data-table": {
         "filters": "Filters",
@@ -2312,7 +2327,9 @@
           "header": "AI suggestions",
           "description": "Home Assistant can use generative AI to help you with tasks. Look for the button with the {button} icon throughout Home Assistant to get suggestions. Select an AI task entity to use this feature.",
           "gen_data_header": "Data generation tasks",
-          "gen_data_description": "Suggest automation names."
+          "gen_data_description": "Suggest automation names.",
+          "gen_image_header": "Image generation tasks",
+          "gen_image_description": "Generate images."
         },
         "category": {
           "caption": "Categories",

yarn.lock

@@ -1905,9 +1905,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1":
-  version: 3.0.0-beta.4.ha.1
-  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.1"
+"@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2":
+  version: 3.0.0-beta.4.ha.2
+  resolution: "@home-assistant/webawesome@npm:3.0.0-beta.4.ha.2"
   dependencies:
     "@ctrl/tinycolor": "npm:^4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1919,7 +1919,7 @@ __metadata:
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
     style-observer: "npm:^0.0.7"
-  checksum: 10/18cd9d16057289f7b10ccf681bc7bdfaeaaf814a985c2d259bf8bffefdd5cbb8e27c5ea15c9829247b0eb746c3557aeef3798174aad5d8e742097d11c06a1144
+  checksum: 10/0ac66d43050571e2b86bb7b0181d428aa2a064e25745075b207a8fe96d873398eaead663172130dfe8d9ac0be575028f8f9f6b9f8a9cd12f81c8c82e9f60a0e9
   languageName: node
   linkType: hard
 
@@ -8505,7 +8505,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.4.4, fdir@npm:^6.4.6":
+"fdir@npm:^6.5.0":
   version: 6.5.0
   resolution: "fdir@npm:6.5.0"
   peerDependencies:
@@ -9334,7 +9334,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.1"
+    "@home-assistant/webawesome": "npm:3.0.0-beta.4.ha.2"
     "@lezer/highlight": "npm:1.2.1"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"
@@ -14208,13 +14208,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.14":
-  version: 0.2.14
-  resolution: "tinyglobby@npm:0.2.14"
+"tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.15":
+  version: 0.2.15
+  resolution: "tinyglobby@npm:0.2.15"
   dependencies:
-    fdir: "npm:^6.4.4"
-    picomatch: "npm:^4.0.2"
-  checksum: 10/3d306d319718b7cc9d79fb3f29d8655237aa6a1f280860a217f93417039d0614891aee6fc47c5db315f4fcc6ac8d55eb8e23e2de73b2c51a431b42456d9e5764
+    fdir: "npm:^6.5.0"
+    picomatch: "npm:^4.0.3"
+  checksum: 10/d72bd826a8b0fa5fa3929e7fe5ba48fceb2ae495df3a231b6c5408cd7d8c00b58ab5a9c2a76ba56a62ee9b5e083626f1f33599734bed1ffc4b792406408f0ca2
   languageName: node
   linkType: hard
 
@@ -14934,16 +14934,16 @@ __metadata:
   linkType: hard
 
 "vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0":
-  version: 7.1.2
-  resolution: "vite@npm:7.1.2"
+  version: 7.1.5
+  resolution: "vite@npm:7.1.5"
   dependencies:
     esbuild: "npm:^0.25.0"
-    fdir: "npm:^6.4.6"
+    fdir: "npm:^6.5.0"
     fsevents: "npm:~2.3.3"
     picomatch: "npm:^4.0.3"
     postcss: "npm:^8.5.6"
     rollup: "npm:^4.43.0"
-    tinyglobby: "npm:^0.2.14"
+    tinyglobby: "npm:^0.2.15"
   peerDependencies:
     "@types/node": ^20.19.0 || >=22.12.0
     jiti: ">=1.21.0"
@@ -14984,7 +14984,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10/942188896db181bd5f95c576303eb617cd08580eb129d0223bc87a8ed9b8dc0d60d8487c077fd9a01087c55600af132c5fc677e51b4b48a4a54a376056969edb
+  checksum: 10/59edeef7e98757a668b2ad8a1731a5657fa83e22a165a36b7359225ea98a9be39b2f486710c0cf5085edb85daee7c8b6b6b0bd85d0ef32a1aa84aef71aabd0f0
   languageName: node
   linkType: hard