Create ha-divider and use it inside color picker (#22074)

* Create ha-divider and use it inside color picker * rename divider
2025-07-24 09:46:36 +00:00 · 2024-09-25 10:59:00 +02:00 · 2024-09-25 10:59:00 +02:00 · e77508b8a8
commit e77508b8a8
parent a5db44a167
11 changed files with 92 additions and 62 deletions
--- a/src/components/ha-color-picker.ts
+++ b/src/components/ha-color-picker.ts
@ -9,6 +9,7 @@ import { LocalizeKeys } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
 import "./ha-select";
+import "./ha-md-divider";

@customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
@ -93,6 +94,9 @@ export class HaColorPicker extends LitElement {
              </ha-list-item>
            `
          : nothing}
+        ${this.includeState || this.includeNone
+          ? html`<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+          : nothing}
        ${Array.from(THEME_COLORS).map(
          (color) => html`
            <ha-list-item .value=${color} graphic="icon">
--- a/src/components/ha-md-divider.ts
+++ b/src/components/ha-md-divider.ts
@ -0,0 +1,21 @@
+import { MdDivider } from "@material/web/divider/divider";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-md-divider")
+export class HaMdDivider extends MdDivider {
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-divider-color: var(--divider-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-divider": HaMdDivider;
+  }
+}
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@ -1,7 +1,6 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
-import "@material/web/divider/divider";
 import {
  mdiArrowDown,
  mdiArrowUp,
@ -37,6 +36,7 @@ import type {
 } from "../components/data-table/ha-data-table";
 import "../components/ha-md-button-menu";
 import "../components/ha-dialog";
+import "../components/ha-md-divider";
 import { HaMenu } from "../components/ha-menu";
 import "../components/ha-md-menu-item";
 import "../components/search-input-outlined";
@ -364,7 +364,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                      )}
                    </div>
                  </ha-md-menu-item>
-                  <md-divider role="separator" tabindex="-1"></md-divider>
+                  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
                  <ha-md-menu-item
                    .value=${undefined}
                    @click=${this._disableSelectMode}
@ -501,7 +501,7 @@ export class HaTabsSubpageDataTable extends LitElement {
        >
          ${localize("ui.components.subpage-data-table.dont_group_by")}
        </ha-md-menu-item>
-        <md-divider role="separator" tabindex="-1"></md-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
        <ha-md-menu-item
          @click=${this._collapseAllGroups}
          .disabled=${this._groupColumn === undefined}
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@ -1,4 +1,3 @@
-import "@material/web/divider/divider";
 import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
 import Fuse, { IFuseOptions } from "fuse.js";
 import {
@ -24,12 +23,13 @@ import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-dialog";
 import type { HaDialog } from "../../../components/ha-dialog";
 import "../../../components/ha-dialog-header";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-md-list-item";
 import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
 import "../../../components/ha-service-icon";
 import "../../../components/search-input";
 import {
@ -559,7 +559,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                  ></ha-svg-icon
                  ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                </ha-md-list-item>
-                <md-divider role="separator" tabindex="-1"></md-divider>`
+                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
            : ""}
          ${repeat(
            items,
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@ -1,7 +1,6 @@
 import { consume } from "@lit-labs/context";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/web/divider/divider";
 import {
  mdiChevronRight,
  mdiCog,
@ -56,6 +55,7 @@ import type {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
@ -65,10 +65,10 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
-import "../../../components/ha-menu";
-import type { HaMenu } from "../../../components/ha-menu";
 import "../../../components/ha-md-menu-item";
 import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
+import "../../../components/ha-menu";
+import type { HaMenu } from "../../../components/ha-menu";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@ -87,6 +87,11 @@ import {
  subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
+import {
+  DataTableFilters,
+  deserializeFilters,
+  serializeFilters,
+} from "../../../data/data_table_filters";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
  EntityRegistryEntry,
@ -115,11 +120,6 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
-import {
-  DataTableFilters,
-  deserializeFilters,
-  serializeFilters,
-} from "../../../data/data_table_filters";

 type AutomationItem = AutomationEntity & {
  name: string;
@ -420,7 +420,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateCategory}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.category.editor.add")}
@ -457,7 +457,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          </ha-label>
        </ha-md-menu-item>`;
      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
@ -486,7 +486,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateArea}>
        <div slot="headline">
          ${this.hass.localize(
@ -867,7 +867,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
            )}
          </div>
        </ha-md-menu-item>
-        <md-divider role="separator" tabindex="-1"></md-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
        <ha-md-menu-item .clickAction=${this._duplicate}>
          <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
          <div slot="headline">
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@ -47,6 +47,7 @@ import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
@ -649,7 +650,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateArea}>
        <div slot="headline">
          ${this.hass.localize(
@ -688,7 +689,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
          </ha-label>
        </ha-md-menu-item>`;
      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@ -29,6 +29,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoize from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
+import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { storage } from "../../../common/decorators/storage";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -52,6 +53,7 @@ import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-domains";
 import "../../../components/ha-filter-floor-areas";
@ -65,6 +67,10 @@ import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import { fullEntitiesContext } from "../../../data/context";
+import {
+  DataTableFiltersItems,
+  DataTableFiltersValues,
+} from "../../../data/data_table_filters";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
  EntityRegistryEntry,
@ -98,11 +104,6 @@ import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import {
-  DataTableFiltersValues,
-  DataTableFiltersItems,
-} from "../../../data/data_table_filters";
-import { formatShortDateTime } from "../../../common/datetime/format_date_time";

 export interface StateEntity
  extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@ -720,7 +721,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
          </ha-label>
        </ha-md-menu-item>`;
      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
@ -830,7 +831,7 @@ ${
            </ha-md-menu-item>
            <ha-menu slot="menu">${labelItems}</ha-menu>
          </ha-sub-menu>
-          <md-divider role="separator" tabindex="-1"></md-divider>`
+          <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
      : nothing
  }

@ -853,7 +854,7 @@ ${
      )}
    </div>
  </ha-md-menu-item>
-  <md-divider role="separator" tabindex="-1"></md-divider>
+  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

  <ha-md-menu-item @click=${this._unhideSelected}>
    <ha-svg-icon
@ -877,7 +878,7 @@ ${
      )}
    </div>
  </ha-md-menu-item>
-  <md-divider role="separator" tabindex="-1"></md-divider>
+  <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

  <ha-md-menu-item @click=${this._removeSelected} class="warning">
    <ha-svg-icon
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@ -44,6 +44,7 @@ import {
  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
@ -65,12 +66,18 @@ import {
 } from "../../../data/config_entries";
 import { getConfigFlowHandlers } from "../../../data/config_flow";
 import { fullEntitiesContext } from "../../../data/context";
+import {
+  DataTableFilters,
+  deserializeFilters,
+  serializeFilters,
+} from "../../../data/data_table_filters";
 import {
  EntityRegistryEntry,
  UpdateEntityRegistryEntryResult,
  subscribeEntityRegistry,
  updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
 import {
  IntegrationManifest,
  domainToName,
@ -101,12 +108,6 @@ import "../integrations/ha-integration-overflow-menu";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
-import {
-  serializeFilters,
-  deserializeFilters,
-  DataTableFilters,
-} from "../../../data/data_table_filters";
-import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";

 type HelperItem = {
  id: string;
@ -496,7 +497,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateCategory}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.category.editor.add")}
@ -531,7 +532,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
            ${label.name}
          </ha-label>
        </ha-md-menu-item> `;
-      })}<md-divider role="separator" tabindex="-1"></md-divider>
+      })}<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@ -1,6 +1,5 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-list/mwc-list";
-import "@material/web/divider/divider";
 import {
  mdiAlertCircle,
  mdiBookshelf,
@ -45,11 +44,12 @@ import { isDevVersion } from "../../../common/config/version";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
-import "../../../components/ha-md-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-list-item";
-import "../../../components/ha-md-list-item";
+import "../../../components/ha-md-button-menu";
 import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
 import "../../../components/ha-md-menu-item";
 import {
  deleteApplicationCredential,
@ -79,6 +79,7 @@ import {
  EntityRegistryEntry,
  subscribeEntityRegistry,
 } from "../../../data/entity_registry";
+import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";
 import { getErrorLogDownloadUrl } from "../../../data/error_log";
 import {
  IntegrationLogInfo,
@ -109,7 +110,6 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { fileDownload } from "../../../util/file_download";
 import { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
-import { fetchEntitySourcesWithCache } from "../../../data/entity_sources";

@customElement("ha-config-integration-page")
 class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
@ -533,10 +533,10 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                      (item, index) =>
                        html`${this._renderConfigEntry(item)}
                        ${index < attentionEntries.length - 1
-                          ? html` <md-divider
+                          ? html` <ha-md-divider
                              role="separator"
                              tabindex="-1"
-                            ></md-divider>`
+                            ></ha-md-divider>`
                          : ""} `
                    )}
                  </ha-md-list>
@ -573,10 +573,10 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                  (item, index) =>
                    html`${this._renderConfigEntry(item)}
                    ${index < normalEntries.length - 1
-                      ? html` <md-divider
+                      ? html` <ha-md-divider
                          role="separator"
                          tabindex="-1"
-                        ></md-divider>`
+                        ></ha-md-divider>`
                      : ""} `
                )}
              </ha-md-list>
@ -882,7 +882,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
          )}
        </ha-md-menu-item>

-        <md-divider role="separator" tabindex="-1"></md-divider>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

        ${this._diagnosticHandler && item.state === "loaded"
          ? html`
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@ -50,6 +50,7 @@ import {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-button";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-categories";
 import "../../../components/ha-filter-devices";
@ -69,6 +70,11 @@ import {
  subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
+import {
+  DataTableFilters,
+  deserializeFilters,
+  serializeFilters,
+} from "../../../data/data_table_filters";
 import { isUnavailableState } from "../../../data/entity";
 import {
  EntityRegistryEntry,
@ -104,11 +110,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import {
-  serializeFilters,
-  deserializeFilters,
-  DataTableFilters,
-} from "../../../data/data_table_filters";

 type SceneItem = SceneEntity & {
  name: string;
@ -440,7 +441,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateCategory}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.category.editor.add")}
@ -477,7 +478,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
          </ha-label>
        </ha-md-menu-item>`;
      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
@ -506,7 +507,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateArea}>
        <div slot="headline">
          ${this.hass.localize(
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@ -50,6 +50,7 @@ import {
  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/data-table/ha-data-table-labels";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
 import "../../../components/ha-filter-categories";
@ -69,6 +70,11 @@ import {
  subscribeCategoryRegistry,
 } from "../../../data/category_registry";
 import { fullEntitiesContext } from "../../../data/context";
+import {
+  DataTableFilters,
+  deserializeFilters,
+  serializeFilters,
+} from "../../../data/data_table_filters";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
  EntityRegistryEntry,
@ -106,11 +112,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
-import {
-  serializeFilters,
-  deserializeFilters,
-  DataTableFilters,
-} from "../../../data/data_table_filters";

 type ScriptItem = ScriptEntity & {
  name: string;
@ -429,7 +430,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
            "ui.panel.config.automation.picker.bulk_actions.no_category"
          )}
        </div> </ha-md-menu-item
-      ><md-divider role="separator" tabindex="-1"></md-divider>
+      ><ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateCategory}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.category.editor.add")}
@ -466,7 +467,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
          </ha-label>
        </ha-md-menu-item>`;
      })}
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateLabel}>
        <div slot="headline">
          ${this.hass.localize("ui.panel.config.labels.add_label")}
@ -495,7 +496,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
          )}
        </div>
      </ha-md-menu-item>
-      <md-divider role="separator" tabindex="-1"></md-divider>
+      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
      <ha-md-menu-item @click=${this._bulkCreateArea}>
        <div slot="headline">
          ${this.hass.localize(