Cleanup some styling on disabled entity picker (#25632)

src/components/ha-generic-picker.ts

@@ -72,7 +72,9 @@ export class HaGenericPicker extends LitElement {
 
   protected render() {
     return html`
-      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      ${this.label
+        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
+        : nothing}
       <div class="container">
         ${!this._opened
           ? html`
@@ -116,7 +118,9 @@ export class HaGenericPicker extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      ? html`<ha-input-helper-text .disabled=${this.disabled}
+          >${this.helper}</ha-input-helper-text
+        >`
       : nothing;
   }
 
@@ -165,6 +169,9 @@ export class HaGenericPicker extends LitElement {
           position: relative;
           display: block;
         }
+        label[disabled] {
+          color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
+        }
         label {
           display: block;
           margin: 0 0 8px;

src/components/ha-input-helper-text.ts

@@ -1,9 +1,11 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-input-helper-text")
 class InputHelperText extends LitElement {
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
   protected render(): TemplateResult {
     return html`<slot></slot>`;
   }
@@ -18,6 +20,9 @@ class InputHelperText extends LitElement {
       padding-inline-start: 16px;
       padding-inline-end: 16px;
     }
+    :host([disabled]) {
+      color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
+    }
   `;
 }
 

src/components/ha-multi-textfield.ts

@@ -85,7 +85,9 @@ class HaMultiTextField extends LitElement {
         </ha-button>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }

src/components/ha-picker-field.ts

@@ -88,6 +88,12 @@ export class HaPickerField extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       css`
+        ha-combo-box-item[disabled] {
+          background-color: var(
+            --mdc-text-field-disabled-fill-color,
+            whitesmoke
+          );
+        }
         ha-combo-box-item {
           background-color: var(--mdc-text-field-fill-color, whitesmoke);
           border-radius: 4px;
@@ -106,6 +112,12 @@ export class HaPickerField extends LitElement {
         }
 
         /* Add Similar focus style as the text field */
+        ha-combo-box-item[disabled]:after {
+          background-color: var(
+            --mdc-text-field-disabled-line-color,
+            rgba(0, 0, 0, 0.42)
+          );
+        }
         ha-combo-box-item:after {
           display: block;
           content: "";