Replace mwc-tab -> sl-tab (#25166)

* Replace mwc-tab -> sl-tab
2025-07-27 11:16:35 +00:00 · 2025-04-25 19:05:04 +02:00 · 2025-04-25 19:05:04 +02:00 · d75ea3bb8d
commit d75ea3bb8d
parent 40fbeaae1c
8 changed files with 177 additions and 151 deletions
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@ -1,5 +1,3 @@
-import "@material/mwc-tab";
-import "@material/mwc-tab-bar";
 import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@ -8,8 +6,11 @@ import memoizeOne from "memoize-one";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
+import "../../../components/sl-tab-group";
 import type {
  ForecastEvent,
  ModernForecastType,
@ -18,8 +19,8 @@ import type {
 import {
  getDefaultForecastType,
  getForecast,
-  getSupportedForecastTypes,
  getSecondaryWeatherAttribute,
+  getSupportedForecastTypes,
  getWeatherStateIcon,
  getWeatherUnit,
  getWind,
@ -27,8 +28,6 @@ import {
  weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-relative-time";
-import "../../../components/ha-state-icon";
 import { DragScrollController } from "../../../common/controllers/drag-scroll-controller";

@customElement("more-info-weather")
@ -299,21 +298,22 @@ class MoreInfoWeather extends LitElement {
              ${this.hass.localize("ui.card.weather.forecast")}:
            </div>
            ${supportedForecasts.length > 1
-              ? html`<mwc-tab-bar
-                  .activeIndex=${supportedForecasts.findIndex(
-                    (item) => item === this._forecastType
-                  )}
-                  @MDCTabBar:activated=${this._handleForecastTypeChanged}
+              ? html`<sl-tab-group
+                  @sl-tab-show=${this._handleForecastTypeChanged}
                >
                  ${supportedForecasts.map(
                    (forecastType) =>
-                      html`<mwc-tab
-                        .label=${this.hass!.localize(
+                      html`<sl-tab
+                        slot="nav"
+                        .panel=${forecastType}
+                        .active=${this._forecastType === forecastType}
+                      >
+                        ${this.hass!.localize(
                          `ui.card.weather.${forecastType}`
                        )}
-                      ></mwc-tab>`
+                      </sl-tab>`
                  )}
-                </mwc-tab-bar>`
+                </sl-tab-group>`
              : nothing}
            <div class="forecast">
              ${forecast.map((item) =>
@ -403,9 +403,7 @@ class MoreInfoWeather extends LitElement {
  }

  private _handleForecastTypeChanged(ev: CustomEvent): void {
-    this._forecastType = this._supportedForecasts(this.stateObj!)[
-      ev.detail.index
-    ];
+    this._forecastType = ev.detail.name;
  }

  static get styles(): CSSResultGroup {
@ -419,15 +417,20 @@ class MoreInfoWeather extends LitElement {
          margin-inline-end: initial;
        }

-        mwc-tab-bar {
-          margin-bottom: 4px;
-        }
-
        .section {
          margin: 16px 0 8px 0;
          font-size: 1.2em;
        }

+        sl-tab {
+          flex: 1;
+        }
+
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
+
        .flex {
          display: flex;
          height: 32px;
--- a/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
@ -1,8 +1,7 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
+import "../../../../components/sl-tab-group";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { getBadgeElementClass } from "../../create-element/create-badge-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
@ -38,7 +37,7 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = tabs[ev.detail.index];
+    const newTab = ev.detail.name;
    if (newTab === this._currTab) {
      return;
    }
@ -68,21 +67,17 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
        break;
    }
    return html`
-      <mwc-tab-bar
-        .activeIndex=${tabs.indexOf(this._currTab)}
-        @MDCTabBar:activated=${this._handleTabChanged}
-      >
+      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
        ${tabs.map(
          (tab) => html`
-            <mwc-tab
-              .label=${this.hass.localize(
+            <sl-tab slot="nav" .panel=${tab} .active=${this._currTab === tab}>
+              ${this.hass!.localize(
                `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
              )}
-            >
-            </mwc-tab>
+            </sl-tab>
          `
        )}
-      </mwc-tab-bar>
+      </sl-tab-group>
      ${content}
    `;
  }
@ -91,10 +86,15 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor<LovelaceBadgeCo
    return [
      HuiTypedElementEditor.styles,
      css`
-        mwc-tab-bar {
-          text-transform: uppercase;
+        sl-tab-group {
          margin-bottom: 16px;
-          border-bottom: 1px solid var(--divider-color);
+        }
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
        }
      `,
    ];
--- a/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
+++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
@ -1,5 +1,3 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@ -13,6 +11,7 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
 import type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
+import "../../../../components/sl-tab-group";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@ -48,7 +47,7 @@ export class HuiCreateDialogBadge

  @state() private _selectedEntities: string[] = [];

-  @state() private _currTabIndex = 0;
+  @state() private _currTab: "badge" | "entity" = "badge";

  public async showDialog(params: CreateBadgeDialogParams): Promise<void> {
    this._params = params;
@ -67,7 +66,7 @@ export class HuiCreateDialogBadge

  public closeDialog(): boolean {
    this._params = undefined;
-    this._currTabIndex = 0;
+    this._currTab = "badge";
    this._selectedEntities = [];
    fireEvent(this, "dialog-closed", { dialog: this.localName });
    return true;
@ -92,7 +91,7 @@ export class HuiCreateDialogBadge
        @keydown=${this._ignoreKeydown}
        @closed=${this._cancel}
        .heading=${title}
-        class=${classMap({ table: this._currTabIndex === 1 })}
+        class=${classMap({ table: this._currTab === "entity" })}
      >
        <ha-dialog-header show-border slot="heading">
          <ha-icon-button
@ -102,25 +101,29 @@ export class HuiCreateDialogBadge
            .path=${mdiClose}
          ></ha-icon-button>
          <span slot="title">${title}</span>
-          <mwc-tab-bar
-            .activeIndex=${this._currTabIndex}
-            @MDCTabBar:activated=${this._handleTabChanged}
+          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+            <sl-tab
+              slot="nav"
+              .active=${this._currTab === "badge"}
+              panel="badge"
+              dialogInitialFocus
            >
-            <mwc-tab
-              .label=${this.hass!.localize(
+              ${this.hass!.localize(
                "ui.panel.lovelace.editor.badge_picker.by_badge"
              )}
-              dialogInitialFocus
-            ></mwc-tab>
-            <mwc-tab
-              .label=${this.hass!.localize(
+            </sl-tab>
+            <sl-tab
+              slot="nav"
+              .active=${this._currTab === "entity"}
+              panel="entity"
+              >${this.hass!.localize(
                "ui.panel.lovelace.editor.badge_picker.by_entity"
-              )}
-            ></mwc-tab>
-          </mwc-tab-bar>
+              )}</sl-tab
+            >
+          </sl-tab-group>
        </ha-dialog-header>
        ${cache(
-          this._currTabIndex === 0
+          this._currTab === "badge"
            ? html`
                <hui-badge-picker
                  .suggestedBadges=${this._params.suggestedBadges}
@ -194,7 +197,13 @@ export class HuiCreateDialogBadge
            --mdc-dialog-min-width: 1000px;
          }
        }
-
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
        hui-badge-picker {
          --badge-picker-search-shape: 0;
          --badge-picker-search-margin: -2px -24px 0;
@ -234,12 +243,12 @@ export class HuiCreateDialogBadge
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = ev.detail.index;
-    if (newTab === this._currTabIndex) {
+    const newTab = ev.detail.name;
+    if (newTab === this._currTab) {
      return;
    }

-    this._currTabIndex = ev.detail.index;
+    this._currTab = newTab;
    this._selectedEntities = [];
  }

--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@ -1,15 +1,14 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import type { TemplateResult } from "lit";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../components/sl-tab-group";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
+import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
 import { HuiTypedElementEditor } from "../hui-typed-element-editor";
 import "./hui-card-layout-editor";
 import "./hui-card-visibility-editor";
-import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";

 const tabs = ["config", "visibility", "layout"] as const;

@ -91,27 +90,23 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf
        `;
    }
    return html`
-      <mwc-tab-bar
-        .activeIndex=${tabs.indexOf(this._currTab)}
-        @MDCTabBar:activated=${this._handleTabChanged}
-      >
+      <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
        ${displayedTabs.map(
          (tab) => html`
-            <mwc-tab
-              .label=${this.hass.localize(
+            <sl-tab slot="nav" .active=${this._currTab === tab} panel=${tab}>
+              ${this.hass.localize(
                `ui.panel.lovelace.editor.edit_card.tab_${tab}`
              )}
-            >
-            </mwc-tab>
+            </sl-tab>
          `
        )}
-      </mwc-tab-bar>
+      </sl-tab-group>
      ${content}
    `;
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = tabs[ev.detail.index];
+    const newTab = ev.detail.name;
    if (newTab === this._currTab) {
      return;
    }
@ -120,10 +115,17 @@ export class HuiCardElementEditor extends HuiTypedElementEditor<LovelaceCardConf

  static override styles = [
    css`
-      mwc-tab-bar {
-        text-transform: uppercase;
+      sl-tab-group {
        margin-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
+      }
+
+      sl-tab {
+        flex: 1;
+      }
+
+      sl-tab::part(base) {
+        width: 100%;
+        justify-content: center;
      }
    `,
  ];
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@ -1,5 +1,3 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@ -14,6 +12,7 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
 import type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
+import "../../../../components/sl-tab-group";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@ -60,7 +59,7 @@ export class HuiCreateDialogCard

  @state() private _selectedEntities: string[] = [];

-  @state() private _currTabIndex = 0;
+  @state() private _currTab: "card" | "entity" = "card";

  @state() private _narrow = false;

@ -85,7 +84,7 @@ export class HuiCreateDialogCard

  public closeDialog(): boolean {
    this._params = undefined;
-    this._currTabIndex = 0;
+    this._currTab = "card";
    this._selectedEntities = [];
    fireEvent(this, "dialog-closed", { dialog: this.localName });
    return true;
@ -110,7 +109,7 @@ export class HuiCreateDialogCard
        @keydown=${this._ignoreKeydown}
        @closed=${this._cancel}
        .heading=${title}
-        class=${classMap({ table: this._currTabIndex === 1 })}
+        class=${classMap({ table: this._currTab === "entity" })}
      >
        <ha-dialog-header show-border slot="heading">
          <ha-icon-button
@ -120,25 +119,30 @@ export class HuiCreateDialogCard
            .path=${mdiClose}
          ></ha-icon-button>
          <span slot="title">${title}</span>
-          <mwc-tab-bar
-            .activeIndex=${this._currTabIndex}
-            @MDCTabBar:activated=${this._handleTabChanged}
+
+          <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
+            <sl-tab
+              slot="nav"
+              .active=${this._currTab === "card"}
+              panel="card"
+              dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
            >
-            <mwc-tab
-              .label=${this.hass!.localize(
+              ${this.hass!.localize(
                "ui.panel.lovelace.editor.cardpicker.by_card"
              )}
-              dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
-            ></mwc-tab>
-            <mwc-tab
-              .label=${this.hass!.localize(
+            </sl-tab>
+            <sl-tab
+              slot="nav"
+              .active=${this._currTab === "entity"}
+              panel="entity"
+              >${this.hass!.localize(
                "ui.panel.lovelace.editor.cardpicker.by_entity"
-              )}
-            ></mwc-tab>
-          </mwc-tab-bar>
+              )}</sl-tab
+            >
+          </sl-tab-group>
        </ha-dialog-header>
        ${cache(
-          this._currTabIndex === 0
+          this._currTab === "card"
            ? html`
                <hui-card-picker
                  dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
@ -215,7 +219,13 @@ export class HuiCreateDialogCard
            --mdc-dialog-min-width: 1000px;
          }
        }
-
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
        hui-card-picker {
          --card-picker-search-shape: 0;
          --card-picker-search-margin: 0 -24px 0;
@ -268,12 +278,12 @@ export class HuiCreateDialogCard
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = ev.detail.index;
-    if (newTab === this._currTabIndex) {
+    const newTab = ev.detail.name;
+    if (newTab === this._currTab) {
      return;
    }

-    this._currTabIndex = ev.detail.index;
+    this._currTab = newTab;
    this._selectedEntities = [];
  }

--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@ -1,6 +1,3 @@
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
-import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
 import { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { CSSResultGroup } from "lit";
@ -13,6 +10,7 @@ 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 type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { HomeAssistant } from "../../../../types";
@ -81,21 +79,18 @@ export class HuiConditionalCardEditor
    const isGuiMode = !this._cardEditorEl || this._GUImode;

    return html`
-      <mwc-tab-bar
-        .activeIndex=${this._cardTab ? 1 : 0}
-        @MDCTabBar:activated=${this._selectTab}
-      >
-        <mwc-tab
-          .label=${this.hass!.localize(
+      <sl-tab-group @sl-tab-show=${this._selectTab}>
+        <sl-tab slot="nav" panel="conditions" .active=${!this._cardTab}>
+          ${this.hass!.localize(
            "ui.panel.lovelace.editor.card.conditional.conditions"
          )}
-        ></mwc-tab>
-        <mwc-tab
-          .label=${this.hass!.localize(
+        </sl-tab>
+        <sl-tab slot="nav" panel="card" .active=${this._cardTab}>
+          ${this.hass!.localize(
            "ui.panel.lovelace.editor.card.conditional.card"
          )}
-        ></mwc-tab>
-      </mwc-tab-bar>
+        </sl-tab>
+      </sl-tab-group>
      ${this._cardTab
        ? html`
            <div class="card">
@ -159,8 +154,8 @@ export class HuiConditionalCardEditor
    `;
  }

-  private _selectTab(ev: MDCTabBarActivatedEvent): void {
-    this._cardTab = ev.detail.index === 1;
+  private _selectTab(ev: CustomEvent): void {
+    this._cardTab = ev.detail.name === "card";
  }

  private _toggleMode(): void {
@ -235,8 +230,13 @@ export class HuiConditionalCardEditor
    return [
      configElementStyle,
      css`
-        mwc-tab-bar {
-          border-bottom: 1px solid var(--divider-color);
+        sl-tab {
+          flex: 1;
+        }
+
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
        }
        ha-alert {
          display: block;
--- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
+++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
@ -14,7 +14,9 @@ import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
 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 { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@ -25,9 +27,6 @@ import {
 import "./hui-section-settings-editor";
 import "./hui-section-visibility-editor";
 import type { EditSectionDialogParams } from "./show-edit-section-dialog";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
-import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";

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

@ -169,21 +168,21 @@ export class HuiDialogEditSection
          </ha-button-menu>
          ${!this._yamlMode
            ? html`
-                <mwc-tab-bar
-                  .activeIndex=${TABS.indexOf(this._currTab)}
-                  @MDCTabBar:activated=${this._handleTabChanged}
-                >
+                <sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                  ${TABS.map(
                    (tab) => html`
-                      <mwc-tab
-                        .label=${this.hass!.localize(
+                      <sl-tab
+                        slot="nav"
+                        .panel=${tab}
+                        .active=${this._currTab === tab}
+                      >
+                        ${this.hass!.localize(
                          `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
                        )}
-                      >
-                      </mwc-tab>
+                      </sl-tab>
                    `
                  )}
-                </mwc-tab-bar>
+                </sl-tab-group>
              `
            : nothing}
        </ha-dialog-header>
@ -205,7 +204,7 @@ export class HuiDialogEditSection
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = TABS[ev.detail.index];
+    const newTab = ev.detail.name;
    if (newTab === this._currTab) {
      return;
    }
@ -274,10 +273,12 @@ export class HuiDialogEditSection
        ha-dialog.yaml-mode {
          --dialog-content-padding: 0;
        }
-        mwc-tab-bar {
-          color: var(--primary-text-color);
-          text-transform: uppercase;
-          padding: 0 20px;
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
        }
        @media all and (min-width: 600px) {
          ha-dialog {
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@ -1,6 +1,4 @@
 import type { ActionDetail } from "@material/mwc-list";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 import {
  mdiClose,
  mdiDotsVertical,
@ -55,6 +53,7 @@ import "./hui-view-background-editor";
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import type { EditViewDialogParams } from "./show-edit-view-dialog";
+import "../../../../components/sl-tab-group";

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

@ -272,21 +271,21 @@ export class HuiDialogEditView extends LitElement {
              `
            : nothing}
          ${!this._yamlMode
-            ? html`<mwc-tab-bar
-                .activeIndex=${TABS.indexOf(this._currTab)}
-                @MDCTabBar:activated=${this._handleTabChanged}
-              >
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabChanged}>
                ${TABS.map(
                  (tab) => html`
-                    <mwc-tab
-                      .label=${this.hass!.localize(
+                    <sl-tab
+                      slot="nav"
+                      .panel=${tab}
+                      .active=${this._currTab === tab}
+                    >
+                      ${this.hass!.localize(
                        `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
                      )}
-                    >
-                    </mwc-tab>
+                    </sl-tab>
                  `
                )}
-              </mwc-tab-bar>`
+              </sl-tab-group>`
            : nothing}
        </ha-dialog-header>
        ${content}
@ -515,7 +514,7 @@ export class HuiDialogEditView extends LitElement {
  }

  private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = TABS[ev.detail.index];
+    const newTab = ev.detail.name;
    if (newTab === this._currTab) {
      return;
    }
@ -644,10 +643,12 @@ export class HuiDialogEditView extends LitElement {
          font-size: inherit;
          font-weight: inherit;
        }
-        mwc-tab-bar {
-          color: var(--primary-text-color);
-          text-transform: uppercase;
-          padding: 0 20px;
+        sl-tab {
+          flex: 1;
+        }
+        sl-tab::part(base) {
+          width: 100%;
+          justify-content: center;
        }
        ha-button.warning {
          margin-right: auto;