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

* Create ha-divider and use it inside color picker

* rename divider

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">

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;
+  }
+}

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}

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,

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">

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")}

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

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")}

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`

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(

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(