More info light redesign (#15482)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

package.json

@@ -71,6 +71,7 @@
     "@material/mwc-textfield": "^0.27.0",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
+    "@material/web": "=1.0.0-pre.2",
     "@mdi/js": "7.1.96",
     "@mdi/svg": "7.1.96",
     "@polymer/app-layout": "^3.1.0",

src/components/ha-control-slider.ts

@@ -44,7 +44,7 @@ const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
 
 @customElement("ha-control-slider")
 export class HaControlSlider extends LitElement {
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   public disabled = false;
 
   @property()
@@ -245,14 +245,16 @@ export class HaControlSlider extends LitElement {
       >
         <div class="slider-track-background"></div>
         ${this.mode === "cursor"
-          ? html`
-              <div
-                class=${classMap({
-                  "slider-track-cursor": true,
-                  vertical: this.vertical,
-                })}
-              ></div>
-            `
+          ? this.value != null
+            ? html`
+                <div
+                  class=${classMap({
+                    "slider-track-cursor": true,
+                    vertical: this.vertical,
+                  })}
+                ></div>
+              `
+            : null
           : html`
               <div
                 class=${classMap({
@@ -319,7 +321,8 @@ export class HaControlSlider extends LitElement {
         height: 100%;
         width: 100%;
         background-color: var(--control-slider-color);
-        transition: transform 180ms ease-in-out;
+        transition: transform 180ms ease-in-out,
+          background-color 180ms ease-in-out;
       }
       .slider .slider-track-bar.show-handle {
         --slider-size: calc(
@@ -446,6 +449,9 @@ export class HaControlSlider extends LitElement {
       :host([pressed]) .slider-track-cursor {
         transition: none;
       }
+      :host(:disabled) .slider {
+        cursor: not-allowed;
+      }
     `;
   }
 }

src/components/ha-control-switch.ts

@@ -12,7 +12,7 @@ import "./ha-svg-icon";
 
 @customElement("ha-control-switch")
 export class HaControlSwitch extends LitElement {
-  @property({ type: Boolean, attribute: "disabled" })
+  @property({ type: Boolean, reflect: true })
   public disabled = false;
 
   @property({ type: Boolean })
@@ -40,7 +40,7 @@ export class HaControlSwitch extends LitElement {
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
-    if (changedProps.has("value")) {
+    if (changedProps.has("checked")) {
       this.setAttribute("aria-checked", this.checked ? "true" : "false");
     }
   }
@@ -107,6 +107,7 @@ export class HaControlSwitch extends LitElement {
         border-radius: var(--control-switch-border-radius);
         outline: none;
         transition: box-shadow 180ms ease-in-out;
+        -webkit-tap-highlight-color: transparent;
       }
       :host(:focus-visible) {
         box-shadow: 0 0 0 2px var(--control-switch-off-color);

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -0,0 +1,85 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, TemplateResult, css, CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { isUnavailableState } from "../../../data/entity";
+import { LightEntity } from "../../../data/light";
+import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
+import "../../../panels/lovelace/components/hui-timestamp-display";
+import { HomeAssistant } from "../../../types";
+
+@customElement("ha-more-info-state-header")
+export class HaMoreInfoStateHeader extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: LightEntity;
+
+  @property({ attribute: false }) public stateOverride?: string;
+
+  private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
+    if (
+      stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP &&
+      !isUnavailableState(stateObj.state)
+    ) {
+      return html`
+        <hui-timestamp-display
+          .hass=${this.hass}
+          .ts=${new Date(stateObj.state)}
+          format="relative"
+          capitalize
+        ></hui-timestamp-display>
+      `;
+    }
+
+    const stateDisplay = computeStateDisplay(
+      this.hass!.localize,
+      stateObj,
+      this.hass!.locale,
+      this.hass!.entities
+    );
+
+    return stateDisplay;
+  }
+
+  protected render(): TemplateResult {
+    const name = this.stateObj.attributes.friendly_name;
+
+    const stateDisplay =
+      this.stateOverride ?? this._computeStateDisplay(this.stateObj);
+
+    return html`
+      <p class="name">${name}</p>
+      <p class="state">${stateDisplay}</p>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      p {
+        text-align: center;
+        margin: 0;
+      }
+      .name {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 36px;
+        margin-bottom: 4px;
+      }
+      .state {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+        margin-bottom: 24px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-state-header": HaMoreInfoStateHeader;
+  }
+}

src/dialogs/more-info/components/ha-more-info-toggle.ts

@@ -0,0 +1,149 @@
+import { mdiFlash, mdiFlashOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { stateActive } from "../../../common/entity/state_active";
+import { stateColorCss } from "../../../common/entity/state_color";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-switch";
+import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+
+@customElement("ha-more-info-toggle")
+export class HaMoreInfoToggle extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ attribute: false }) public iconPathOn?: string;
+
+  @property({ attribute: false }) public iconPathOff?: string;
+
+  private _valueChanged(ev) {
+    const checked = ev.target.checked as boolean;
+
+    if (checked) {
+      this._turnOn();
+    } else {
+      this._turnOff();
+    }
+  }
+
+  private _turnOn() {
+    const domain = computeDomain(this.stateObj!.entity_id);
+    this.hass.callService(domain, "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+    });
+  }
+
+  private _turnOff() {
+    const domain = computeDomain(this.stateObj!.entity_id);
+    this.hass.callService(domain, "turn_off", {
+      entity_id: this.stateObj!.entity_id,
+    });
+  }
+
+  protected render(): TemplateResult {
+    const color = stateColorCss(this.stateObj);
+    const isOn = this.stateObj.state === "on";
+    const isOff = this.stateObj.state === "off";
+
+    if (
+      this.stateObj.attributes.assumed_state ||
+      this.stateObj.state === UNKNOWN
+    ) {
+      return html`
+        <div class="buttons">
+          <ha-control-button
+            .label=${this.hass.localize("ui.dialogs.more_info_control.turn_on")}
+            @click=${this._turnOn}
+            .disabled=${this.stateObj.state === UNAVAILABLE}
+            class=${classMap({
+              active: isOn,
+            })}
+            style=${styleMap({
+              "--color": color,
+            })}
+          >
+            <ha-svg-icon .path=${this.iconPathOn || mdiFlash}></ha-svg-icon>
+          </ha-control-button>
+          <ha-control-button
+            .label=${this.hass.localize(
+              "ui.dialogs.more_info_control.turn_off"
+            )}
+            @click=${this._turnOff}
+            .disabled=${this.stateObj.state === UNAVAILABLE}
+            class=${classMap({
+              active: isOff,
+            })}
+            style=${styleMap({
+              "--color": color,
+            })}
+          >
+            <ha-svg-icon .path=${this.iconPathOff || mdiFlashOff}></ha-svg-icon>
+          </ha-control-button>
+        </div>
+      `;
+    }
+
+    return html`
+      <ha-control-switch
+        .pathOn=${this.iconPathOn || mdiFlash}
+        .pathOff=${this.iconPathOff || mdiFlashOff}
+        vertical
+        reversed
+        .checked=${isOn}
+        .showHandle=${stateActive(this.stateObj)}
+        @change=${this._valueChanged}
+        .ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
+        style=${styleMap({
+          "--control-switch-on-color": color,
+        })}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+      >
+      </ha-control-switch>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-control-switch {
+        height: 320px;
+        --control-switch-thickness: 100px;
+        --control-switch-border-radius: 24px;
+        --control-switch-padding: 6px;
+        --mdc-icon-size: 24px;
+      }
+      .buttons {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        height: 320px;
+        padding: 6px;
+        box-sizing: border-box;
+      }
+      ha-control-button {
+        flex: 1;
+        width: 100%;
+        --button-bar-border-radius: 18px;
+      }
+      ha-control-button.active {
+        --button-bar-icon-color: white;
+        --button-bar-background-color: var(--color);
+        --button-bar-background-opacity: 1;
+      }
+      ha-control-button:not(:last-child) {
+        margin-bottom: 6px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-toggle": HaMoreInfoToggle;
+  }
+}

src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts

@@ -0,0 +1,102 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import {
+  hsv2rgb,
+  rgb2hex,
+  rgb2hsv,
+} from "../../../../common/color/convert-color";
+import { stateActive } from "../../../../common/entity/state_active";
+import { stateColorCss } from "../../../../common/entity/state_color";
+import "../../../../components/ha-control-slider";
+import { UNAVAILABLE } from "../../../../data/entity";
+import { LightEntity } from "../../../../data/light";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("ha-more-info-light-brightness")
+export class HaMoreInfoLightBrightness extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: LightEntity;
+
+  @state() value?: number;
+
+  protected updated(changedProp: Map<string | number | symbol, unknown>): void {
+    if (changedProp.has("stateObj")) {
+      this.value =
+        this.stateObj.attributes.brightness != null
+          ? Math.max(
+              Math.round((this.stateObj.attributes.brightness * 100) / 255),
+              1
+            )
+          : undefined;
+    }
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    const value = (ev.detail as any).value;
+    if (isNaN(value)) return;
+
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      brightness_pct: value,
+    });
+  }
+
+  protected render(): TemplateResult {
+    let color = stateColorCss(this.stateObj);
+
+    if (this.stateObj.attributes.rgb_color) {
+      const hsvColor = rgb2hsv(this.stateObj.attributes.rgb_color);
+
+      // Modify the real rgb color for better contrast
+      if (hsvColor[1] < 0.4) {
+        // Special case for very light color (e.g: white)
+        if (hsvColor[1] < 0.1) {
+          hsvColor[2] = 225;
+        } else {
+          hsvColor[1] = 0.4;
+        }
+      }
+      color = rgb2hex(hsv2rgb(hsvColor));
+    }
+
+    return html`
+      <ha-control-slider
+        vertical
+        .value=${this.value}
+        min="1"
+        max="100"
+        .showHandle=${stateActive(this.stateObj)}
+        @value-changed=${this._valueChanged}
+        .ariaLabel=${this.hass.localize(
+          "ui.dialogs.more_info_control.light.brightness"
+        )}
+        style=${styleMap({
+          "--control-slider-color": color,
+        })}
+        .disabled=${this.stateObj.state === UNAVAILABLE}
+      >
+      </ha-control-slider>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-control-slider {
+        height: 320px;
+        --control-slider-thickness: 100px;
+        --control-slider-border-radius: 24px;
+        --control-slider-color: var(--primary-color);
+        --control-slider-background: var(--disabled-color);
+        --control-slider-background-opacity: 0.2;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-light-brightness": HaMoreInfoLightBrightness;
+  }
+}

src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts

@@ -0,0 +1,551 @@
+import "@material/mwc-button";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import { mdiPalette } from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../../components/ha-button-toggle-group";
+import "../../../../components/ha-color-picker";
+import "../../../../components/ha-control-slider";
+import "../../../../components/ha-icon-button-prev";
+import "../../../../components/ha-labeled-slider";
+import {
+  getLightCurrentModeRgbColor,
+  LightColorMode,
+  LightEntity,
+  lightSupportsColor,
+  lightSupportsColorMode,
+} from "../../../../data/light";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import { LightColorPickerViewParams } from "./show-view-light-color-picker";
+
+type Mode = "color_temp" | "color";
+
+@customElement("ha-more-info-view-light-color-picker")
+class MoreInfoViewLightColorPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public params?: LightColorPickerViewParams;
+
+  @state() private _ctSliderValue?: number;
+
+  @state() private _cwSliderValue?: number;
+
+  @state() private _wwSliderValue?: number;
+
+  @state() private _wvSliderValue?: number;
+
+  @state() private _colorBrightnessSliderValue?: number;
+
+  @state() private _brightnessAdjusted?: number;
+
+  @state() private _hueSegments = 24;
+
+  @state() private _saturationSegments = 8;
+
+  @state() private _colorPickerColor?: [number, number, number];
+
+  @state() private _mode?: Mode;
+
+  @state() private _modes: Mode[] = [];
+
+  get stateObj() {
+    return this.params
+      ? (this.hass.states[this.params.entityId] as LightEntity)
+      : undefined;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.params || !this.stateObj) {
+      return html``;
+    }
+
+    const supportsRgbww = lightSupportsColorMode(
+      this.stateObj,
+      LightColorMode.RGBWW
+    );
+
+    const supportsRgbw =
+      !supportsRgbww &&
+      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
+
+    return html`
+      <div>
+        ${this._modes.length > 1
+          ? html`
+              <mwc-tab-bar
+                .activeIndex=${this._mode ? this._modes.indexOf(this._mode) : 0}
+                @MDCTabBar:activated=${this._handleTabChanged}
+              >
+                ${this._modes.map(
+                  (value) =>
+                    html`<mwc-tab
+                      .label=${this.hass.localize(
+                        `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                      )}
+                    ></mwc-tab>`
+                )}
+              </mwc-tab-bar>
+            `
+          : ""}
+        <div class="content">
+          ${this._mode === LightColorMode.COLOR_TEMP
+            ? html`
+                <ha-control-slider
+                  vertical
+                  class="color_temp"
+                  label=${this.hass.localize("ui.card.light.color_temperature")}
+                  min="1"
+                  max="100"
+                  mode="cursor"
+                  .value=${this._ctSliderValue}
+                  @value-changed=${this._ctSliderChanged}
+                  .min=${this.stateObj.attributes.min_color_temp_kelvin!}
+                  .max=${this.stateObj.attributes.max_color_temp_kelvin!}
+                >
+                </ha-control-slider>
+              `
+            : ""}
+          ${this._mode === "color"
+            ? html`
+                <div class="segmentationContainer">
+                  <ha-color-picker
+                    class="color"
+                    @colorselected=${this._colorPicked}
+                    .desiredRgbColor=${this._colorPickerColor}
+                    throttle="500"
+                    .hueSegments=${this._hueSegments}
+                    .saturationSegments=${this._saturationSegments}
+                  >
+                  </ha-color-picker>
+                  <ha-icon-button
+                    .path=${mdiPalette}
+                    @click=${this._segmentClick}
+                    class="segmentationButton"
+                  ></ha-icon-button>
+                </div>
+
+                ${supportsRgbw || supportsRgbww
+                  ? html`<ha-labeled-slider
+                      .caption=${this.hass.localize(
+                        "ui.card.light.color_brightness"
+                      )}
+                      icon="hass:brightness-7"
+                      max="100"
+                      .value=${this._colorBrightnessSliderValue}
+                      @change=${this._colorBrightnessSliderChanged}
+                      pin
+                    ></ha-labeled-slider>`
+                  : ""}
+                ${supportsRgbw
+                  ? html`
+                      <ha-labeled-slider
+                        .caption=${this.hass.localize(
+                          "ui.card.light.white_value"
+                        )}
+                        icon="hass:file-word-box"
+                        max="100"
+                        .name=${"wv"}
+                        .value=${this._wvSliderValue}
+                        @change=${this._wvSliderChanged}
+                        pin
+                      ></ha-labeled-slider>
+                    `
+                  : ""}
+                ${supportsRgbww
+                  ? html`
+                      <ha-labeled-slider
+                        .caption=${this.hass.localize(
+                          "ui.card.light.cold_white_value"
+                        )}
+                        icon="hass:file-word-box-outline"
+                        max="100"
+                        .name=${"cw"}
+                        .value=${this._cwSliderValue}
+                        @change=${this._wvSliderChanged}
+                        pin
+                      ></ha-labeled-slider>
+                      <ha-labeled-slider
+                        .caption=${this.hass.localize(
+                          "ui.card.light.warm_white_value"
+                        )}
+                        icon="hass:file-word-box"
+                        max="100"
+                        .name=${"ww"}
+                        .value=${this._wwSliderValue}
+                        @change=${this._wvSliderChanged}
+                        pin
+                      ></ha-labeled-slider>
+                    `
+                  : ""}
+              `
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  public _updateSliderValues() {
+    const stateObj = this.stateObj;
+
+    if (stateObj?.state === "on") {
+      this._brightnessAdjusted = undefined;
+      if (
+        stateObj.attributes.color_mode === LightColorMode.RGB &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
+        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
+      ) {
+        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
+
+        if (maxVal < 255) {
+          this._brightnessAdjusted = maxVal;
+        }
+      }
+      this._ctSliderValue = stateObj.attributes.color_temp_kelvin;
+      this._wvSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBW
+          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
+          : undefined;
+      this._cwSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
+          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
+          : undefined;
+      this._wwSliderValue =
+        stateObj.attributes.color_mode === LightColorMode.RGBWW
+          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
+          : undefined;
+
+      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
+
+      this._colorBrightnessSliderValue = currentRgbColor
+        ? Math.round((Math.max(...currentRgbColor.slice(0, 3)) * 100) / 255)
+        : undefined;
+
+      this._colorPickerColor = currentRgbColor?.slice(0, 3) as [
+        number,
+        number,
+        number
+      ];
+    } else {
+      this._colorPickerColor = [0, 0, 0];
+      this._ctSliderValue = undefined;
+      this._wvSliderValue = undefined;
+      this._cwSliderValue = undefined;
+      this._wwSliderValue = undefined;
+    }
+  }
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!changedProps.has("params") || !changedProps.has("hass")) {
+      return;
+    }
+
+    if (changedProps.has("params")) {
+      const supportsTemp = lightSupportsColorMode(
+        this.stateObj!,
+        LightColorMode.COLOR_TEMP
+      );
+
+      const supportsColor = lightSupportsColor(this.stateObj!);
+
+      const modes: Mode[] = [];
+      if (supportsColor) {
+        modes.push("color");
+      }
+      if (supportsTemp) {
+        modes.push("color_temp");
+      }
+
+      this._modes = modes;
+      this._mode =
+        this.stateObj!.attributes.color_mode === LightColorMode.COLOR_TEMP
+          ? LightColorMode.COLOR_TEMP
+          : "color";
+    }
+
+    this._updateSliderValues();
+  }
+
+  private _handleTabChanged(ev: CustomEvent): void {
+    const newMode = this._modes[ev.detail.index];
+    if (newMode === this._mode) {
+      return;
+    }
+    this._mode = newMode;
+  }
+
+  private _ctSliderChanged(ev: CustomEvent) {
+    const ct = ev.detail.value;
+
+    if (isNaN(ct)) {
+      return;
+    }
+
+    this._ctSliderValue = ct;
+
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      color_temp_kelvin: ct,
+    });
+  }
+
+  private _wvSliderChanged(ev: CustomEvent) {
+    const target = ev.target as any;
+    let wv = Number(target.value);
+    const name = target.name;
+
+    if (isNaN(wv)) {
+      return;
+    }
+
+    if (name === "wv") {
+      this._wvSliderValue = wv;
+    } else if (name === "cw") {
+      this._cwSliderValue = wv;
+    } else if (name === "ww") {
+      this._wwSliderValue = wv;
+    }
+
+    wv = Math.min(255, Math.round((wv * 255) / 100));
+
+    const rgb = getLightCurrentModeRgbColor(this.stateObj!);
+
+    if (name === "wv") {
+      const rgbw_color = rgb || [0, 0, 0, 0];
+      rgbw_color[3] = wv;
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbw_color,
+      });
+      return;
+    }
+
+    const rgbww_color = rgb || [0, 0, 0, 0, 0];
+    while (rgbww_color.length < 5) {
+      rgbww_color.push(0);
+    }
+    rgbww_color[name === "cw" ? 3 : 4] = wv;
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      rgbww_color,
+    });
+  }
+
+  private _colorBrightnessSliderChanged(ev: CustomEvent) {
+    const target = ev.target as any;
+    let value = Number(target.value);
+
+    if (isNaN(value)) {
+      return;
+    }
+
+    const oldValue = this._colorBrightnessSliderValue;
+    this._colorBrightnessSliderValue = value;
+
+    value = (value * 255) / 100;
+
+    const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
+      255, 255, 255,
+    ]) as [number, number, number];
+
+    this._setRgbWColor(
+      this._adjustColorBrightness(
+        // first normalize the value
+        oldValue
+          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
+          : rgb,
+        value
+      )
+    );
+  }
+
+  private _segmentClick() {
+    if (this._hueSegments === 24 && this._saturationSegments === 8) {
+      this._hueSegments = 0;
+      this._saturationSegments = 0;
+    } else {
+      this._hueSegments = 24;
+      this._saturationSegments = 8;
+    }
+  }
+
+  private _adjustColorBrightness(
+    rgbColor: [number, number, number],
+    value?: number,
+    invert = false
+  ) {
+    if (value !== undefined && value !== 255) {
+      let ratio = value / 255;
+      if (invert) {
+        ratio = 1 / ratio;
+      }
+      rgbColor[0] = Math.min(255, Math.round(rgbColor[0] * ratio));
+      rgbColor[1] = Math.min(255, Math.round(rgbColor[1] * ratio));
+      rgbColor[2] = Math.min(255, Math.round(rgbColor[2] * ratio));
+    }
+    return rgbColor;
+  }
+
+  private _setRgbWColor(rgbColor: [number, number, number]) {
+    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
+      const rgbww_color: [number, number, number, number, number] = this
+        .stateObj!.attributes.rgbww_color
+        ? [...this.stateObj!.attributes.rgbww_color]
+        : [0, 0, 0, 0, 0];
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
+      });
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
+      const rgbw_color: [number, number, number, number] = this.stateObj!
+        .attributes.rgbw_color
+        ? [...this.stateObj!.attributes.rgbw_color]
+        : [0, 0, 0, 0];
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        rgbw_color: rgbColor.concat(rgbw_color.slice(3)),
+      });
+    }
+  }
+
+  /**
+   * Called when a new color has been picked.
+   * should be throttled with the 'throttle=' attribute of the color picker
+   */
+  private _colorPicked(
+    ev: CustomEvent<{
+      hs: { h: number; s: number };
+      rgb: { r: number; g: number; b: number };
+    }>
+  ) {
+    this._colorPickerColor = [
+      ev.detail.rgb.r,
+      ev.detail.rgb.g,
+      ev.detail.rgb.b,
+    ];
+
+    if (
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
+    ) {
+      this._setRgbWColor(
+        this._colorBrightnessSliderValue
+          ? this._adjustColorBrightness(
+              [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
+              (this._colorBrightnessSliderValue * 255) / 100
+            )
+          : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
+      );
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
+      const rgb_color: [number, number, number] = [
+        ev.detail.rgb.r,
+        ev.detail.rgb.g,
+        ev.detail.rgb.b,
+      ];
+      if (this._brightnessAdjusted) {
+        const brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
+        const brightnessPercentage = Math.round(
+          ((this.stateObj!.attributes.brightness || 0) * brightnessAdjust) / 255
+        );
+        this.hass.callService("light", "turn_on", {
+          entity_id: this.stateObj!.entity_id,
+          brightness_pct: brightnessPercentage,
+          rgb_color: this._adjustColorBrightness(
+            rgb_color,
+            this._brightnessAdjusted,
+            true
+          ),
+        });
+      } else {
+        this.hass.callService("light", "turn_on", {
+          entity_id: this.stateObj!.entity_id,
+          rgb_color,
+        });
+      }
+    } else {
+      this.hass.callService("light", "turn_on", {
+        entity_id: this.stateObj!.entity_id,
+        hs_color: [ev.detail.hs.h, ev.detail.hs.s * 100],
+      });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 16px;
+        }
+
+        .segmentationContainer {
+          position: relative;
+          max-height: 500px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .segmentationButton {
+          position: absolute;
+          top: 5%;
+          left: 0;
+          color: var(--secondary-text-color);
+        }
+
+        ha-color-picker {
+          --ha-color-picker-wheel-borderwidth: 5;
+          --ha-color-picker-wheel-bordercolor: white;
+          --ha-color-picker-wheel-shadow: none;
+          --ha-color-picker-marker-borderwidth: 2;
+          --ha-color-picker-marker-bordercolor: white;
+        }
+
+        ha-control-slider {
+          height: 320px;
+          margin: 20px 0;
+        }
+
+        ha-labeled-slider {
+          width: 100%;
+        }
+
+        .color_temp {
+          --control-slider-thickness: 100px;
+          --control-slider-border-radius: 24px;
+          --control-slider-background: -webkit-linear-gradient(
+            top,
+            rgb(166, 209, 255) 0%,
+            white 50%,
+            rgb(255, 160, 0) 100%
+          );
+          --control-slider-background-opacity: 1;
+        }
+
+        hr {
+          border-color: var(--divider-color);
+          border-bottom: none;
+          margin: 16px 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-view-light-color-picker": MoreInfoViewLightColorPicker;
+  }
+}

src/dialogs/more-info/components/lights/show-view-light-color-picker.ts

@@ -0,0 +1,21 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+export interface LightColorPickerViewParams {
+  entityId: string;
+}
+
+export const loadLightColorPickerView = () =>
+  import("./ha-more-info-view-light-color-picker");
+
+export const showLightColorPickerView = (
+  element: HTMLElement,
+  title: string,
+  params: LightColorPickerViewParams
+): void => {
+  fireEvent(element, "show-child-view", {
+    viewTag: "ha-more-info-view-light-color-picker",
+    viewImport: loadLightColorPickerView,
+    viewTitle: title,
+    viewParams: params,
+  });
+};

src/dialogs/more-info/const.ts

@@ -13,7 +13,8 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
  * Entity Domains that should always be editable; {@see shouldShowEditIcon}.
  * */
 export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];
-
+/** Domains with with new more info design. */
+export const DOMAINS_WITH_NEW_MORE_INFO = ["light"];
 /** Domains with separate more info dialog. */
 export const DOMAINS_WITH_MORE_INFO = [
   "alarm_control_panel",

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

@@ -1,5 +1,12 @@
 import "@material/mwc-list/mwc-list-item";
-import { mdiPalette } from "@mdi/js";
+import "@material/web/iconbutton/outlined-icon-button";
+import {
+  mdiCreation,
+  mdiLightbulb,
+  mdiLightbulbOff,
+  mdiPalette,
+  mdiPower,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -9,26 +16,26 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-attributes";
-import "../../../components/ha-button-toggle-group";
-import "../../../components/ha-color-picker";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-labeled-slider";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-select";
+import { UNAVAILABLE } from "../../../data/entity";
 import {
-  getLightCurrentModeRgbColor,
   LightColorMode,
   LightEntity,
   LightEntityFeature,
-  lightIsInColorMode,
+  lightSupportsBrightness,
   lightSupportsColor,
   lightSupportsColorMode,
-  lightSupportsBrightness,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import "../components/ha-more-info-state-header";
+import "../components/ha-more-info-toggle";
+import "../components/lights/ha-more-info-light-brightness";
+import { showLightColorPickerView } from "../components/lights/show-view-light-color-picker";
 
 @customElement("more-info-light")
 class MoreInfoLight extends LitElement {
@@ -36,198 +43,152 @@ class MoreInfoLight extends LitElement {
 
   @property({ attribute: false }) public stateObj?: LightEntity;
 
-  @state() private _brightnessSliderValue = 0;
+  @state() private _selectedBrightness?: number;
 
-  @state() private _ctSliderValue?: number;
+  private _brightnessChanged(ev) {
+    const value = (ev.detail as any).value;
+    if (isNaN(value)) return;
+    this._selectedBrightness = value;
+  }
 
-  @state() private _cwSliderValue?: number;
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("stateObj")) {
+      this._selectedBrightness = this.stateObj?.attributes.brightness
+        ? Math.round((this.stateObj.attributes.brightness * 100) / 255)
+        : undefined;
+    }
+  }
 
-  @state() private _wwSliderValue?: number;
-
-  @state() private _wvSliderValue?: number;
-
-  @state() private _colorBrightnessSliderValue?: number;
-
-  @state() private _brightnessAdjusted?: number;
-
-  @state() private _hueSegments = 24;
-
-  @state() private _saturationSegments = 8;
-
-  @state() private _colorPickerColor?: [number, number, number];
-
-  @state() private _mode?: "color" | LightColorMode;
-
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | null {
     if (!this.hass || !this.stateObj) {
-      return html``;
+      return null;
     }
 
-    const supportsTemp = lightSupportsColorMode(
+    const supportsColorTemp = lightSupportsColorMode(
       this.stateObj,
       LightColorMode.COLOR_TEMP
     );
 
-    const supportsWhite = lightSupportsColorMode(
+    const supportsColor = lightSupportsColor(this.stateObj);
+
+    const supportsBrightness = lightSupportsBrightness(this.stateObj);
+
+    const supportsEffects = supportsFeature(
       this.stateObj,
-      LightColorMode.WHITE
+      LightEntityFeature.EFFECT
     );
 
-    const supportsRgbww = lightSupportsColorMode(
-      this.stateObj,
-      LightColorMode.RGBWW
-    );
-
-    const supportsRgbw =
-      !supportsRgbww &&
-      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
-
-    const supportsColor =
-      supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
+    const stateOverride = this._selectedBrightness
+      ? `${Math.round(this._selectedBrightness)}${blankBeforePercent(
+          this.hass!.locale
+        )}%`
+      : undefined;
 
     return html`
       <div class="content">
-        ${lightSupportsBrightness(this.stateObj)
-          ? html`
-              <ha-labeled-slider
-                caption=${this.hass.localize("ui.card.light.brightness")}
-                icon="hass:brightness-5"
-                min="1"
-                max="100"
-                value=${this._brightnessSliderValue}
-                @change=${this._brightnessSliderChanged}
-                pin
-              ></ha-labeled-slider>
-            `
-          : ""}
-        ${this.stateObj.state === "on"
-          ? html`
-              ${supportsTemp || supportsColor ? html`<hr />` : ""}
-              ${supportsColor && (supportsTemp || supportsWhite)
-                ? html`<ha-button-toggle-group
-                    fullWidth
-                    .buttons=${this._toggleButtons(supportsTemp, supportsWhite)}
-                    .active=${this._mode}
-                    @value-changed=${this._modeChanged}
-                  ></ha-button-toggle-group>`
-                : ""}
-              ${supportsTemp &&
-              ((!supportsColor && !supportsWhite) ||
-                this._mode === LightColorMode.COLOR_TEMP)
-                ? html`
-                    <ha-labeled-slider
-                      class="color_temp"
-                      caption=${this.hass.localize(
-                        "ui.card.light.color_temperature"
-                      )}
-                      icon="hass:thermometer"
-                      .min=${this.stateObj.attributes.min_color_temp_kelvin}
-                      .max=${this.stateObj.attributes.max_color_temp_kelvin}
-                      .value=${this._ctSliderValue}
-                      @change=${this._ctSliderChanged}
-                      pin
-                    ></ha-labeled-slider>
-                  `
-                : ""}
-              ${supportsColor &&
-              ((!supportsTemp && !supportsWhite) || this._mode === "color")
-                ? html`
-                    <div class="segmentationContainer">
-                      <ha-color-picker
-                        class="color"
-                        @colorselected=${this._colorPicked}
-                        .desiredRgbColor=${this._colorPickerColor}
-                        throttle="500"
-                        .hueSegments=${this._hueSegments}
-                        .saturationSegments=${this._saturationSegments}
-                      >
-                      </ha-color-picker>
-                      <ha-icon-button
-                        .path=${mdiPalette}
-                        @click=${this._segmentClick}
-                        class="segmentationButton"
-                      ></ha-icon-button>
-                    </div>
-
-                    ${supportsRgbw || supportsRgbww
-                      ? html`<ha-labeled-slider
-                          .caption=${this.hass.localize(
-                            "ui.card.light.color_brightness"
+        <ha-more-info-state-header
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+          .stateOverride=${stateOverride}
+        ></ha-more-info-state-header>
+        </ha-more-info-light-toggle>
+        ${
+          supportsBrightness
+            ? html`
+                <ha-more-info-light-brightness
+                  .stateObj=${this.stateObj}
+                  .hass=${this.hass}
+                  @slider-moved=${this._brightnessChanged}
+                >
+                </ha-more-info-light-brightness>
+              `
+            : html`
+                <ha-more-info-toggle
+                  .stateObj=${this.stateObj}
+                  .hass=${this.hass}
+                  .iconPathOn=${mdiLightbulb}
+                  .iconPathOff=${mdiLightbulbOff}
+                ></ha-more-info-toggle>
+              `
+        }
+        ${
+          supportsColorTemp ||
+          supportsColor ||
+          supportsEffects ||
+          supportsBrightness
+            ? html`
+                <div class="buttons">
+                  ${supportsBrightness
+                    ? html`
+                        <md-outlined-icon-button
+                          .disabled=${this.stateObj.state === UNAVAILABLE}
+                          .title=${this.hass.localize(
+                            "ui.dialogs.more_info_control.light.toggle"
                           )}
-                          icon="hass:brightness-7"
-                          max="100"
-                          .value=${this._colorBrightnessSliderValue}
-                          @change=${this._colorBrightnessSliderChanged}
-                          pin
-                        ></ha-labeled-slider>`
-                      : ""}
-                    ${supportsRgbw
-                      ? html`
-                          <ha-labeled-slider
-                            .caption=${this.hass.localize(
-                              "ui.card.light.white_value"
+                          .ariaLabel=${this.hass.localize(
+                            "ui.dialogs.more_info_control.light.toggle"
+                          )}
+                          @click=${this._toggle}
+                        >
+                          <ha-svg-icon .path=${mdiPower}></ha-svg-icon>
+                        </md-outlined-icon-button>
+                      `
+                    : null}
+                  ${supportsColorTemp || supportsColor
+                    ? html`
+                        <md-outlined-icon-button
+                          .disabled=${this.stateObj.state === UNAVAILABLE}
+                          .title=${this.hass.localize(
+                            "ui.dialogs.more_info_control.light.change_color"
+                          )}
+                          .ariaLabel=${this.hass.localize(
+                            "ui.dialogs.more_info_control.light.change_color"
+                          )}
+                          @click=${this._showLightColorPickerView}
+                        >
+                          <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
+                        </md-outlined-icon-button>
+                      `
+                    : null}
+                  ${supportsEffects
+                    ? html`
+                        <ha-button-menu
+                          corner="BOTTOM_START"
+                          @action=${this._handleEffectButton}
+                          @closed=${stopPropagation}
+                          fixed
+                          .disabled=${this.stateObj.state === UNAVAILABLE}
+                        >
+                          <md-outlined-icon-button
+                            .disabled=${this.stateObj.state === UNAVAILABLE}
+                            slot="trigger"
+                            .title=${this.hass.localize(
+                              "ui.dialogs.more_info_control.light.select_effect"
                             )}
-                            icon="hass:file-word-box"
-                            max="100"
-                            .name=${"wv"}
-                            .value=${this._wvSliderValue}
-                            @change=${this._wvSliderChanged}
-                            pin
-                          ></ha-labeled-slider>
-                        `
-                      : ""}
-                    ${supportsRgbww
-                      ? html`
-                          <ha-labeled-slider
-                            .caption=${this.hass.localize(
-                              "ui.card.light.cold_white_value"
+                            .ariaLabel=${this.hass.localize(
+                              "ui.dialogs.more_info_control.light.select_effect"
                             )}
-                            icon="hass:file-word-box-outline"
-                            max="100"
-                            .name=${"cw"}
-                            .value=${this._cwSliderValue}
-                            @change=${this._wvSliderChanged}
-                            pin
-                          ></ha-labeled-slider>
-                          <ha-labeled-slider
-                            .caption=${this.hass.localize(
-                              "ui.card.light.warm_white_value"
-                            )}
-                            icon="hass:file-word-box"
-                            max="100"
-                            .name=${"ww"}
-                            .value=${this._wwSliderValue}
-                            @change=${this._wvSliderChanged}
-                            pin
-                          ></ha-labeled-slider>
-                        `
-                      : ""}
-                  `
-                : ""}
-              ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
-              this.stateObj!.attributes.effect_list?.length
-                ? html`
-                    <hr />
-                    <ha-select
-                      .label=${this.hass.localize("ui.card.light.effect")}
-                      .value=${this.stateObj.attributes.effect || ""}
-                      fixedMenuPosition
-                      naturalMenuWidth
-                      @selected=${this._effectChanged}
-                      @closed=${stopPropagation}
-                    >
-                      ${this.stateObj.attributes.effect_list.map(
-                        (effect: string) => html`
-                          <mwc-list-item .value=${effect}>
-                            ${effect}
-                          </mwc-list-item>
-                        `
-                      )}
-                    </ha-select>
-                  `
-                : ""}
-            `
-          : ""}
+                          >
+                            <ha-svg-icon .path=${mdiCreation}></ha-svg-icon>
+                          </md-outlined-icon-button>
+                          ${this.stateObj.attributes.effect_list!.map(
+                            (effect: string) => html`
+                              <mwc-list-item
+                                .value=${effect}
+                                .activated=${this.stateObj!.attributes
+                                  .effect === effect}
+                              >
+                                ${effect}
+                              </mwc-list-item>
+                            `
+                          )}
+                        </ha-button-menu>
+                      `
+                    : null}
+                </div>
+              `
+            : null
+        }
         <ha-attributes
           .hass=${this.hass}
           .stateObj=${this.stateObj}
@@ -237,332 +198,39 @@ class MoreInfoLight extends LitElement {
     `;
   }
 
-  public willUpdate(changedProps: PropertyValues<this>) {
-    super.willUpdate(changedProps);
-
-    if (!changedProps.has("stateObj")) {
-      return;
-    }
-    const stateObj = this.stateObj! as LightEntity;
-    const oldStateObj = changedProps.get("stateObj") as LightEntity | undefined;
-
-    if (stateObj.state === "on") {
-      // Don't change tab when the color mode changes
-      if (
-        oldStateObj?.entity_id !== stateObj.entity_id ||
-        oldStateObj?.state !== stateObj.state
-      ) {
-        this._mode = lightIsInColorMode(this.stateObj!)
-          ? "color"
-          : this.stateObj!.attributes.color_mode;
-      }
-
-      let brightnessAdjust = 100;
-      this._brightnessAdjusted = undefined;
-      if (
-        stateObj.attributes.color_mode === LightColorMode.RGB &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
-      ) {
-        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
-        if (maxVal < 255) {
-          this._brightnessAdjusted = maxVal;
-          brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
-        }
-      }
-      this._brightnessSliderValue = Math.round(
-        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
-      );
-      this._ctSliderValue = stateObj.attributes.color_temp_kelvin;
-      this._wvSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBW
-          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
-          : undefined;
-      this._cwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
-          : undefined;
-      this._wwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
-          : undefined;
-
-      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
-
-      this._colorBrightnessSliderValue = currentRgbColor
-        ? Math.round((Math.max(...currentRgbColor.slice(0, 3)) * 100) / 255)
-        : undefined;
-
-      this._colorPickerColor = currentRgbColor?.slice(0, 3) as [
-        number,
-        number,
-        number
-      ];
-    } else {
-      this._brightnessSliderValue = 0;
-    }
-  }
-
-  private _toggleButtons = memoizeOne(
-    (supportsTemp: boolean, supportsWhite: boolean) => {
-      const modes = [{ label: "Color", value: "color" }];
-      if (supportsTemp) {
-        modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
-      }
-      if (supportsWhite) {
-        modes.push({ label: "White", value: LightColorMode.WHITE });
-      }
-      return modes;
-    }
-  );
-
-  private _modeChanged(ev: CustomEvent) {
-    this._mode = ev.detail.value;
-  }
-
-  private _effectChanged(ev) {
-    const newVal = ev.target.value;
-
-    if (!newVal || this.stateObj!.attributes.effect === newVal) {
-      return;
-    }
-
-    this.hass.callService("light", "turn_on", {
+  private _toggle = () => {
+    this.hass.callService("light", "toggle", {
       entity_id: this.stateObj!.entity_id,
-      effect: newVal,
     });
-  }
+  };
 
-  private _brightnessSliderChanged(ev: CustomEvent) {
-    const bri = Number((ev.target as any).value);
-
-    if (isNaN(bri)) {
-      return;
-    }
-
-    this._brightnessSliderValue = bri;
-
-    if (this._mode === LightColorMode.WHITE) {
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        white: Math.min(255, Math.round((bri * 255) / 100)),
-      });
-      return;
-    }
-
-    if (this._brightnessAdjusted) {
-      const rgb =
-        this.stateObj!.attributes.rgb_color ||
-        ([0, 0, 0] as [number, number, number]);
-
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        brightness_pct: bri,
-        rgb_color: this._adjustColorBrightness(
-          rgb,
-          this._brightnessAdjusted,
-          true
-        ),
-      });
-      return;
-    }
-
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      brightness_pct: bri,
-    });
-  }
-
-  private _ctSliderChanged(ev: CustomEvent) {
-    const ct = Number((ev.target as any).value);
-
-    if (isNaN(ct)) {
-      return;
-    }
-
-    this._ctSliderValue = ct;
-
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      color_temp_kelvin: ct,
-    });
-  }
-
-  private _wvSliderChanged(ev: CustomEvent) {
-    const target = ev.target as any;
-    let wv = Number(target.value);
-    const name = target.name;
-
-    if (isNaN(wv)) {
-      return;
-    }
-
-    if (name === "wv") {
-      this._wvSliderValue = wv;
-    } else if (name === "cw") {
-      this._cwSliderValue = wv;
-    } else if (name === "ww") {
-      this._wwSliderValue = wv;
-    }
-
-    wv = Math.min(255, Math.round((wv * 255) / 100));
-
-    const rgb = getLightCurrentModeRgbColor(this.stateObj!);
-
-    if (name === "wv") {
-      const rgbw_color = rgb || [0, 0, 0, 0];
-      rgbw_color[3] = wv;
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbw_color,
-      });
-      return;
-    }
-
-    const rgbww_color = rgb || [0, 0, 0, 0, 0];
-    while (rgbww_color.length < 5) {
-      rgbww_color.push(0);
-    }
-    rgbww_color[name === "cw" ? 3 : 4] = wv;
-    this.hass.callService("light", "turn_on", {
-      entity_id: this.stateObj!.entity_id,
-      rgbww_color,
-    });
-  }
-
-  private _colorBrightnessSliderChanged(ev: CustomEvent) {
-    const target = ev.target as any;
-    let value = Number(target.value);
-
-    if (isNaN(value)) {
-      return;
-    }
-
-    const oldValue = this._colorBrightnessSliderValue;
-    this._colorBrightnessSliderValue = value;
-
-    value = (value * 255) / 100;
-
-    const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
-      255, 255, 255,
-    ]) as [number, number, number];
-
-    this._setRgbWColor(
-      this._adjustColorBrightness(
-        // first normalize the value
-        oldValue
-          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
-          : rgb,
-        value
-      )
+  private _showLightColorPickerView = () => {
+    showLightColorPickerView(
+      this,
+      this.hass.localize(
+        "ui.dialogs.more_info_control.light.color_picker.title"
+      ),
+      {
+        entityId: this.stateObj!.entity_id,
+      }
     );
-  }
+  };
 
-  private _segmentClick() {
-    if (this._hueSegments === 24 && this._saturationSegments === 8) {
-      this._hueSegments = 0;
-      this._saturationSegments = 0;
-    } else {
-      this._hueSegments = 24;
-      this._saturationSegments = 8;
+  private _handleEffectButton(ev) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    const index = ev.detail.index;
+    const effect = this.stateObj!.attributes.effect_list![index];
+
+    if (!effect || this.stateObj!.attributes.effect === effect) {
+      return;
     }
-  }
 
-  private _adjustColorBrightness(
-    rgbColor: [number, number, number],
-    value?: number,
-    invert = false
-  ) {
-    if (value !== undefined && value !== 255) {
-      let ratio = value / 255;
-      if (invert) {
-        ratio = 1 / ratio;
-      }
-      rgbColor[0] = Math.min(255, Math.round(rgbColor[0] * ratio));
-      rgbColor[1] = Math.min(255, Math.round(rgbColor[1] * ratio));
-      rgbColor[2] = Math.min(255, Math.round(rgbColor[2] * ratio));
-    }
-    return rgbColor;
-  }
-
-  private _setRgbWColor(rgbColor: [number, number, number]) {
-    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
-      const rgbww_color: [number, number, number, number, number] = this
-        .stateObj!.attributes.rgbww_color
-        ? [...this.stateObj!.attributes.rgbww_color]
-        : [0, 0, 0, 0, 0];
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
-      });
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
-      const rgbw_color: [number, number, number, number] = this.stateObj!
-        .attributes.rgbw_color
-        ? [...this.stateObj!.attributes.rgbw_color]
-        : [0, 0, 0, 0];
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        rgbw_color: rgbColor.concat(rgbw_color.slice(3)),
-      });
-    }
-  }
-
-  /**
-   * Called when a new color has been picked.
-   * should be throttled with the 'throttle=' attribute of the color picker
-   */
-  private _colorPicked(
-    ev: CustomEvent<{
-      hs: { h: number; s: number };
-      rgb: { r: number; g: number; b: number };
-    }>
-  ) {
-    this._colorPickerColor = [
-      ev.detail.rgb.r,
-      ev.detail.rgb.g,
-      ev.detail.rgb.b,
-    ];
-
-    if (
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
-    ) {
-      this._setRgbWColor(
-        this._colorBrightnessSliderValue
-          ? this._adjustColorBrightness(
-              [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
-              (this._colorBrightnessSliderValue * 255) / 100
-            )
-          : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
-      );
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
-      const rgb_color: [number, number, number] = [
-        ev.detail.rgb.r,
-        ev.detail.rgb.g,
-        ev.detail.rgb.b,
-      ];
-      if (this._brightnessAdjusted) {
-        this.hass.callService("light", "turn_on", {
-          entity_id: this.stateObj!.entity_id,
-          brightness_pct: this._brightnessSliderValue,
-          rgb_color: this._adjustColorBrightness(
-            rgb_color,
-            this._brightnessAdjusted,
-            true
-          ),
-        });
-      } else {
-        this.hass.callService("light", "turn_on", {
-          entity_id: this.stateObj!.entity_id,
-          rgb_color,
-        });
-      }
-    } else {
-      this.hass.callService("light", "turn_on", {
-        entity_id: this.stateObj!.entity_id,
-        hs_color: [ev.detail.hs.h, ev.detail.hs.s * 100],
-      });
-    }
+    this.hass.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      effect,
+    });
   }
 
   static get styles(): CSSResultGroup {
@@ -573,52 +241,31 @@ class MoreInfoLight extends LitElement {
         align-items: center;
       }
 
-      .content > * {
+      .buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 12px;
+      }
+      .buttons > * {
+        margin: 4px;
+      }
+
+      ha-more-info-light-brightness,
+      ha-more-info-light-toggle {
+        margin-bottom: 24px;
+      }
+
+      ha-attributes {
         width: 100%;
       }
 
-      .color_temp {
-        --ha-slider-background: -webkit-linear-gradient(
-          var(--float-end),
-          rgb(166, 209, 255) 0%,
-          white 50%,
-          rgb(255, 160, 0) 100%
-        );
-        /* The color temp minimum value shouldn't be rendered differently. It's not "off". */
-        --paper-slider-knob-start-border-color: var(--primary-color);
-        margin-bottom: 4px;
-      }
-
-      .segmentationContainer {
-        position: relative;
-        max-height: 500px;
-        display: flex;
-        justify-content: center;
-      }
-
-      ha-button-toggle-group {
-        margin-bottom: 8px;
-      }
-
-      ha-color-picker {
-        --ha-color-picker-wheel-borderwidth: 5;
-        --ha-color-picker-wheel-bordercolor: white;
-        --ha-color-picker-wheel-shadow: none;
-        --ha-color-picker-marker-borderwidth: 2;
-        --ha-color-picker-marker-bordercolor: white;
-      }
-
-      .segmentationButton {
-        position: absolute;
-        top: 5%;
-        left: 0;
-        color: var(--secondary-text-color);
-      }
-
-      hr {
-        border-color: var(--divider-color);
-        border-bottom: none;
-        margin: 16px 0;
+      md-outlined-icon-button-toggle,
+      md-outlined-icon-button {
+        --md-sys-color-on-surface: var(--secondary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
+        --md-sys-color-outline: var(--secondary-text-color);
       }
     `;
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -11,6 +11,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
+import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -31,6 +32,7 @@ import { HomeAssistant } from "../../types";
 import {
   computeShowHistoryComponent,
   computeShowLogBookComponent,
+  DOMAINS_WITH_NEW_MORE_INFO,
   DOMAINS_WITH_MORE_INFO,
   EDITABLE_DOMAINS_WITH_ID,
   EDITABLE_DOMAINS_WITH_UNIQUE_ID,
@@ -50,6 +52,19 @@ export interface MoreInfoDialogParams {
 
 type View = "info" | "history" | "settings" | "related";
 
+type ChildView = {
+  viewTag: string;
+  viewTitle?: string;
+  viewImport?: () => Promise<unknown>;
+  viewParams?: any;
+};
+
+declare global {
+  interface HASSDomEvents {
+    "show-child-view": ChildView;
+  }
+}
+
 @customElement("ha-more-info-dialog")
 export class MoreInfoDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -60,6 +75,8 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _currView: View = "info";
 
+  @state() private _childView?: ChildView;
+
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
     if (!this._entityId) {
@@ -67,11 +84,13 @@ export class MoreInfoDialog extends LitElement {
       return;
     }
     this._currView = params.view || "info";
+    this._childView = undefined;
     this.large = false;
   }
 
   public closeDialog() {
     this._entityId = undefined;
+    this._childView = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -110,8 +129,12 @@ export class MoreInfoDialog extends LitElement {
     return entity?.device_id ?? null;
   }
 
-  private back() {
-    this._currView = "info";
+  private _goBack() {
+    if (this._childView) {
+      this._childView = undefined;
+    } else {
+      this._currView = "info";
+    }
   }
 
   private _goToHistory() {
@@ -122,6 +145,14 @@ export class MoreInfoDialog extends LitElement {
     this._currView = "settings";
   }
 
+  private async _showChildView(ev: CustomEvent): Promise<void> {
+    const view = ev.detail as ChildView;
+    if (view.viewImport) {
+      await view.viewImport();
+    }
+    this._childView = view;
+  }
+
   private _goToDevice(ev): void {
     if (!shouldHandleRequestSelectedEvent(ev)) return;
     const deviceId = this._getDeviceId();
@@ -167,17 +198,21 @@ export class MoreInfoDialog extends LitElement {
 
     const deviceId = this._getDeviceId();
 
+    const title = this._childView?.viewTitle ?? name;
+
+    const isInfoView = this._currView === "info" && !this._childView;
+
     return html`
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${name}
+        .heading=${title}
         hideActions
         data-domain=${domain}
       >
         <div slot="heading" class="heading">
           <ha-header-bar>
-            ${this._currView === "info"
+            ${isInfoView
               ? html`
                   <ha-icon-button
                     slot="navigationIcon"
@@ -191,21 +226,23 @@ export class MoreInfoDialog extends LitElement {
               : html`
                   <ha-icon-button-prev
                     slot="navigationIcon"
-                    @click=${this.back}
+                    @click=${this._goBack}
                     .label=${this.hass.localize(
                       "ui.dialogs.more_info_control.back_to_info"
                     )}
                   ></ha-icon-button-prev>
                 `}
-            <div
-              slot="title"
-              class="main-title"
-              .title=${name}
-              @click=${this._enlarge}
-            >
-              ${name}
-            </div>
-            ${this._currView === "info"
+            ${!isInfoView || !DOMAINS_WITH_NEW_MORE_INFO.includes(domain)
+              ? html`<div
+                  slot="title"
+                  class="main-title"
+                  .title=${title}
+                  @click=${this._enlarge}
+                >
+                  ${title}
+                </div>`
+              : null}
+            ${isInfoView
               ? html`
                   ${this.shouldShowHistory(domain)
                     ? html`
@@ -291,39 +328,50 @@ export class MoreInfoDialog extends LitElement {
               : null}
           </ha-header-bar>
         </div>
-
-        <div class="content" tabindex="-1" dialogInitialFocus>
-          ${cache(
-            this._currView === "info"
-              ? html`
-                  <ha-more-info-info
-                    dialogInitialFocus
-                    .hass=${this.hass}
-                    .entityId=${this._entityId}
-                  ></ha-more-info-info>
-                `
-              : this._currView === "history"
-              ? html`
-                  <ha-more-info-history-and-logbook
-                    .hass=${this.hass}
-                    .entityId=${this._entityId}
-                  ></ha-more-info-history-and-logbook>
-                `
-              : this._currView === "settings"
-              ? html`
-                  <ha-more-info-settings
-                    .hass=${this.hass}
-                    .entityId=${this._entityId}
-                  ></ha-more-info-settings>
-                `
-              : html`
-                  <ha-related-items
-                    .hass=${this.hass}
-                    .itemId=${entityId}
-                    itemType="entity"
-                  ></ha-related-items>
-                `
-          )}
+        <div
+          class="content"
+          tabindex="-1"
+          dialogInitialFocus
+          @show-child-view=${this._showChildView}
+        >
+          ${this._childView
+            ? dynamicElement(this._childView.viewTag, {
+                hass: this.hass,
+                params: this._childView.viewParams,
+              })
+            : cache(
+                this._currView === "info"
+                  ? html`
+                      <ha-more-info-info
+                        dialogInitialFocus
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-info>
+                    `
+                  : this._currView === "history"
+                  ? html`
+                      <ha-more-info-history-and-logbook
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-history-and-logbook>
+                    `
+                  : this._currView === "settings"
+                  ? html`
+                      <ha-more-info-settings
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-settings>
+                    `
+                  : this._currView === "related"
+                  ? html`
+                      <ha-related-items
+                        .hass=${this.hass}
+                        .itemId=${entityId}
+                        itemType="entity"
+                      ></ha-related-items>
+                    `
+                  : null
+              )}
         </div>
       </ha-dialog>
     `;
@@ -338,6 +386,10 @@ export class MoreInfoDialog extends LitElement {
     super.updated(changedProps);
     if (changedProps.has("_currView")) {
       this.setAttribute("view", this._currView);
+      this._childView = undefined;
+    }
+    if (changedProps.has("_childView")) {
+      this.toggleAttribute("has-child-view", !!this._childView);
     }
   }
 
@@ -374,10 +426,6 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
-        ha-dialog .content {
-          padding: var(--content-padding);
-        }
-
         :host([view="settings"]) ha-dialog {
           --content-padding: 0;
         }
@@ -388,6 +436,14 @@ export class MoreInfoDialog extends LitElement {
           --video-max-height: calc(100vh - 65px - 72px);
         }
 
+        :host([has-child-view]) ha-dialog {
+          --content-padding: 0;
+        }
+
+        .content {
+          padding: var(--content-padding);
+        }
+
         .main-title {
           overflow: hidden;
           text-overflow: ellipsis;

src/dialogs/more-info/ha-more-info-info.ts

@@ -12,6 +12,7 @@ import {
   computeShowLogBookComponent,
   DOMAINS_NO_INFO,
   DOMAINS_WITH_MORE_INFO,
+  DOMAINS_WITH_NEW_MORE_INFO,
 } from "./const";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
@@ -47,7 +48,8 @@ export class MoreInfoInfo extends LitElement {
             )}
           </ha-alert>`
         : ""}
-      ${DOMAINS_NO_INFO.includes(domain)
+      ${DOMAINS_NO_INFO.includes(domain) ||
+      DOMAINS_WITH_NEW_MORE_INFO.includes(domain)
         ? ""
         : html`
             <state-card-content

src/dialogs/more-info/state_more_info_control.ts

@@ -1,9 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  DOMAINS_WITH_MORE_INFO,
-  DOMAINS_HIDE_DEFAULT_MORE_INFO,
-} from "./const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
+import {
+  DOMAINS_HIDE_DEFAULT_MORE_INFO,
+  DOMAINS_WITH_MORE_INFO,
+} from "./const";
 
 const LAZY_LOADED_MORE_INFO_CONTROL = {
   alarm_control_panel: () => import("./controls/more-info-alarm_control_panel"),
@@ -33,7 +33,6 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
 
 export const stateMoreInfoType = (stateObj: HassEntity): string => {
   const domain = computeStateDomain(stateObj);
-
   return domainMoreInfoType(domain);
 };
 

src/translations/en.json

@@ -841,6 +841,9 @@
         "last_changed": "Last changed",
         "last_updated": "Last updated",
         "show_more": "Show more",
+        "turn_on": "Turn on",
+        "turn_off": "Turn off",
+        "toggle": "Toggle",
         "script": {
           "last_action": "Last action",
           "last_triggered": "Last triggered"
@@ -892,6 +895,19 @@
         },
         "zone": {
           "graph_unit": "People home"
+        },
+        "light": {
+          "toggle": "Toggle",
+          "change_color": "Change color",
+          "select_effect": "Select effect",
+          "brightness": "Brightness",
+          "color_picker": {
+            "title": "Change color",
+            "mode": {
+              "color": "Color",
+              "color_temp": "Temperature"
+            }
+          }
         }
       },
       "entity_registry": {

yarn.lock

@@ -3095,6 +3095,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@material/web@npm:=1.0.0-pre.2":
+  version: 1.0.0-pre.2
+  resolution: "@material/web@npm:1.0.0-pre.2"
+  dependencies:
+    lit: ^2.3.0
+    tslib: ^2.4.0
+  checksum: 7c6733fae5fb67c43d7c49fab70f7893defd95e4fcbe996d06057882e47c0121760546cc5d1c407a9dbd11c5f02f3f278016c52922e6a9e97db0c0b52d7133f2
+  languageName: node
+  linkType: hard
+
 "@mdi/js@npm:7.1.96":
   version: 7.1.96
   resolution: "@mdi/js@npm:7.1.96"
@@ -9540,6 +9550,7 @@ fsevents@^1.2.7:
     "@material/mwc-textfield": ^0.27.0
     "@material/mwc-top-app-bar-fixed": ^0.27.0
     "@material/top-app-bar": =14.0.0-canary.53b3cad2f.0
+    "@material/web": =1.0.0-pre.2
     "@mdi/js": 7.1.96
     "@mdi/svg": 7.1.96
     "@octokit/auth-oauth-device": ^4.0.4
@@ -11336,7 +11347,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.5.0, lit@npm:^2.6.1":
+"lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.3.0, lit@npm:^2.5.0, lit@npm:^2.6.1":
   version: 2.6.1
   resolution: "lit@npm:2.6.1"
   dependencies: