Fix control select menu color in ios (#29892)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

package.json

@@ -92,7 +92,7 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.8",
+    "barcode-detector": "3.1.0",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
     "core-js": "3.48.0",

src/common/entity/compute_state_display.ts

@@ -133,33 +133,34 @@ const computeStateToPartsFromEntityAttributes = (
           ),
         });
       } catch (_err) {
-        // fallback to default
+        // fallback to default numeric formatting below
       }
 
-      const TYPE_MAP: Record<string, ValuePart["type"]> = {
-        integer: "value",
-        group: "value",
-        decimal: "value",
-        fraction: "value",
-        literal: "literal",
-        currency: "unit",
-      };
+      if (parts.length) {
+        const TYPE_MAP: Record<string, ValuePart["type"]> = {
+          integer: "value",
+          group: "value",
+          decimal: "value",
+          fraction: "value",
+          literal: "literal",
+          currency: "unit",
+        };
 
-      const valueParts: ValuePart[] = [];
+        const valueParts: ValuePart[] = [];
 
-      for (const part of parts) {
-        const type = TYPE_MAP[part.type];
-        if (!type) continue;
-        const last = valueParts[valueParts.length - 1];
-        // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
-        if (type === "value" && last?.type === "value") {
-          last.value += part.value;
-        } else {
-          valueParts.push({ type, value: part.value });
+        for (const part of parts) {
+          const type = TYPE_MAP[part.type];
+          if (!type) continue;
+          const last = valueParts[valueParts.length - 1];
+          // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
+          if (type === "value" && last?.type === "value") {
+            last.value += part.value;
+          } else {
+            valueParts.push({ type, value: part.value });
+          }
         }
+        return valueParts;
       }
-
-      return valueParts;
     }
 
     // default processing of numeric values

src/components/ha-button.ts

@@ -245,7 +245,7 @@ export class HaButton extends Button {
         }
 
         .label {
-          overflow: hidden;
+          overflow: var(--ha-button-label-overflow, hidden);
           text-overflow: ellipsis;
           padding: var(--ha-space-1) 0;
         }

src/components/ha-control-select-menu.ts

@@ -1,11 +1,9 @@
 import { mdiMenuDown } from "@mdi/js";
-import type { HassEntity } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import type { HomeAssistant } from "../types";
-import "./ha-attribute-icon";
 import "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-icon";
@@ -16,17 +14,10 @@ export interface SelectOption {
   value: string;
   iconPath?: string;
   icon?: string;
-  attributeIcon?: {
-    stateObj: HassEntity;
-    attribute: string;
-    attributeValue?: string;
-  };
 }
 
 @customElement("ha-control-select-menu")
 export class HaControlSelectMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ type: Boolean, attribute: "show-arrow" })
   public showArrow = false;
 
@@ -47,6 +38,9 @@ export class HaControlSelectMenu extends LitElement {
 
   @property({ attribute: false }) public options: SelectOption[] = [];
 
+  @property({ attribute: false })
+  public renderIcon?: (value: string) => TemplateResult<1> | typeof nothing;
+
   @query("button") private _triggerButton!: HTMLButtonElement;
 
   public override render() {
@@ -94,14 +88,8 @@ export class HaControlSelectMenu extends LitElement {
         ? html`<ha-svg-icon slot="icon" .path=${option.iconPath}></ha-svg-icon>`
         : option.icon
           ? html`<ha-icon slot="icon" .icon=${option.icon}></ha-icon>`
-          : option.attributeIcon
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${option.attributeIcon.stateObj}
-                .attribute=${option.attributeIcon.attribute}
-                .attributeValue=${option.attributeIcon.attributeValue}
-              ></ha-attribute-icon>`
+          : this.renderIcon
+            ? html`<span slot="icon">${this.renderIcon(option.value)}</span>`
             : nothing}
       ${option.label}</ha-dropdown-item
     >`;
@@ -119,24 +107,20 @@ export class HaControlSelectMenu extends LitElement {
   }
 
   private _renderIcon() {
-    const { iconPath, icon, attributeIcon } =
-      this.getValueObject(this.options, this.value) ?? {};
+    const value = this.getValueObject(this.options, this.value);
     const defaultIcon = this.querySelector("[slot='icon']");
 
     return html`
       <div class="icon">
-        ${iconPath
-          ? html`<ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>`
-          : icon
-            ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
-            : attributeIcon
-              ? html`<ha-attribute-icon
-                  slot="icon"
-                  .hass=${this.hass}
-                  .stateObj=${attributeIcon.stateObj}
-                  .attribute=${attributeIcon.attribute}
-                  .attributeValue=${attributeIcon.attributeValue}
-                ></ha-attribute-icon>`
+        ${value?.iconPath
+          ? html`<ha-svg-icon
+              slot="icon"
+              .path=${value.iconPath}
+            ></ha-svg-icon>`
+          : value?.icon
+            ? html`<ha-icon slot="icon" .icon=${value.icon}></ha-icon>`
+            : this.renderIcon && this.value
+              ? this.renderIcon(this.value)
               : defaultIcon
                 ? html`<slot name="icon"></slot>`
                 : nothing}
@@ -172,12 +156,12 @@ export class HaControlSelectMenu extends LitElement {
         font-size: var(--ha-font-size-m);
         line-height: 1.4;
         width: auto;
-        color: var(--primary-text-color);
         -webkit-tap-highlight-color: transparent;
       }
       .select-anchor {
         border: none;
         text-align: left;
+        color: var(--primary-text-color);
         height: var(--control-select-menu-height);
         padding: var(--control-select-menu-padding);
         overflow: hidden;

src/components/ha-icon-button.ts

@@ -74,6 +74,7 @@ export class HaIconButton extends LitElement {
       );
       --wa-color-on-normal: currentColor;
       --wa-color-fill-quiet: transparent;
+      --ha-button-label-overflow: visible;
     }
     ha-button::after {
       content: "";

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

@@ -9,6 +9,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attribute-icon";
 import "../../../components/ha-control-select-menu";
 import "../../../components/ha-icon-button-group";
 import "../../../components/ha-icon-button-toggle";
@@ -39,6 +40,38 @@ class MoreInfoClimate extends LitElement {
 
   @state() private _mainControl: MainControl = "temperature";
 
+  private _renderPresetModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="preset_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
+  private _renderFanModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="fan_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
+  private _renderSwingModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="swing_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
+  private _renderSwingHorizontalModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="swing_horizontal_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   protected willUpdate(changedProps: PropertyValues): void {
     if (
       changedProps.has("stateObj") &&
@@ -205,12 +238,8 @@ class MoreInfoClimate extends LitElement {
                     "preset_mode",
                     mode
                   ),
-                  attributeIcon: {
-                    stateObj,
-                    attribute: "preset_mode",
-                    attributeValue: mode,
-                  },
                 }))}
+                .renderIcon=${this._renderPresetModeIcon}
               >
                 <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
@@ -234,12 +263,8 @@ class MoreInfoClimate extends LitElement {
                     "fan_mode",
                     mode
                   ),
-                  attributeIcon: {
-                    stateObj,
-                    attribute: "fan_mode",
-                    attributeValue: mode,
-                  },
                 }))}
+                .renderIcon=${this._renderFanModeIcon}
               >
                 <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
               </ha-control-select-menu>
@@ -263,12 +288,8 @@ class MoreInfoClimate extends LitElement {
                     "swing_mode",
                     mode
                   ),
-                  attributeIcon: {
-                    stateObj,
-                    attribute: "swing_mode",
-                    attributeValue: mode,
-                  },
                 }))}
+                .renderIcon=${this._renderSwingModeIcon}
               >
                 <ha-svg-icon
                   slot="icon"
@@ -297,13 +318,9 @@ class MoreInfoClimate extends LitElement {
                       "swing_horizontal_mode",
                       mode
                     ),
-                    attributeIcon: {
-                      stateObj,
-                      attribute: "swing_horizontal_mode",
-                      attributeValue: mode,
-                    },
                   })
                 )}
+                .renderIcon=${this._renderSwingHorizontalModeIcon}
               >
                 <ha-svg-icon
                   slot="icon"

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

@@ -40,6 +40,22 @@ class MoreInfoFan extends LitElement {
 
   @state() public _presetMode?: string;
 
+  private _renderPresetModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="preset_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
+  private _renderDirectionIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="direction"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private _toggle = () => {
     const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
     forwardHaptic(this, "light");
@@ -192,15 +208,9 @@ class MoreInfoFan extends LitElement {
                       "preset_mode",
                       mode
                     ),
-                    attributeIcon: this.stateObj
-                      ? {
-                          stateObj: this.stateObj,
-                          attribute: "preset_mode",
-                          attributeValue: mode,
-                        }
-                      : undefined,
                   })
                 )}
+                .renderIcon=${this._renderPresetModeIcon}
               >
                 <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>
@@ -226,14 +236,8 @@ class MoreInfoFan extends LitElement {
                         direction
                       )
                     : direction,
-                  attributeIcon: this.stateObj
-                    ? {
-                        stateObj: this.stateObj,
-                        attribute: "direction",
-                        attributeValue: direction,
-                      }
-                    : undefined,
                 }))}
+                .renderIcon=${this._renderDirectionIcon}
               >
                 <ha-attribute-icon
                   slot="icon"

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

@@ -23,6 +23,14 @@ class MoreInfoHumidifier extends LitElement {
 
   @state() public _mode?: string;
 
+  private _renderModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("stateObj")) {
@@ -106,14 +114,8 @@ class MoreInfoHumidifier extends LitElement {
                         mode
                       )
                     : mode,
-                  attributeIcon: stateObj
-                    ? {
-                        stateObj,
-                        attribute: "mode",
-                        attributeValue: mode,
-                      }
-                    : undefined,
                 })) || []}
+                .renderIcon=${this._renderModeIcon}
               >
                 <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
               </ha-control-select-menu>

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

@@ -55,6 +55,14 @@ class MoreInfoLight extends LitElement {
 
   @state() private _mainControl: MainControl = "brightness";
 
+  private _renderEffectIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="effect"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   protected updated(changedProps: PropertyValues<typeof this>): void {
     if (changedProps.has("stateObj")) {
       this._effect = this.stateObj?.attributes.effect;
@@ -271,15 +279,9 @@ class MoreInfoLight extends LitElement {
                             effect
                           )
                         : effect,
-                      attributeIcon: this.stateObj
-                        ? {
-                            stateObj: this.stateObj,
-                            attribute: "effect",
-                            attributeValue: effect,
-                          }
-                        : undefined,
                     })
                   )}
+                  .renderIcon=${this._renderEffectIcon}
                 >
                   <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
                 </ha-control-select-menu>

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

@@ -24,6 +24,14 @@ class MoreInfoWaterHeater extends LitElement {
 
   @property({ attribute: false }) public stateObj?: WaterHeaterEntity;
 
+  private _renderOperationModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+      attribute="operation_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   protected render() {
     if (!this.stateObj) {
       return nothing;
@@ -85,12 +93,8 @@ class MoreInfoWaterHeater extends LitElement {
                   .map((mode) => ({
                     value: mode,
                     label: this.hass.formatEntityState(stateObj, mode),
-                    attributeIcon: {
-                      stateObj,
-                      attribute: "operation_mode",
-                      attributeValue: mode,
-                    },
                   }))}
+                .renderIcon=${this._renderOperationModeIcon}
               >
                 <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
               </ha-control-select-menu>

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

@@ -2,17 +2,27 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
+import checkValidDate from "../../common/datetime/check_valid_date";
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import "../../components/ha-attribute-value";
 import "../../components/ha-card";
+import type { LocalizeKeys } from "../../common/translations/localize";
 import { computeShownAttributes } from "../../data/entity/entity_attributes";
 import type { ExtEntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
+import "../../components/ha-yaml-editor";
 
 interface DetailsViewParams {
   entityId: string;
 }
 
+interface DetailEntry {
+  translationKey: LocalizeKeys;
+  value: string;
+}
+
 @customElement("ha-more-info-details")
 class HaMoreInfoDetails extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -21,6 +31,8 @@ class HaMoreInfoDetails extends LitElement {
 
   @property({ attribute: false }) public params?: DetailsViewParams;
 
+  @property({ attribute: false }) public yamlMode = false;
+
   @state() private _stateObj?: HassEntity;
 
   protected willUpdate(changedProps: PropertyValues): void {
@@ -37,60 +49,127 @@ class HaMoreInfoDetails extends LitElement {
       return nothing;
     }
 
-    const translatedState = this.hass.formatEntityState(this._stateObj);
-    const detailsAttributes = computeShownAttributes(this._stateObj);
-    const detailsAttributeSet = new Set(detailsAttributes);
-    const builtInAttributes = Object.keys(this._stateObj.attributes).filter(
-      (attribute) => !detailsAttributeSet.has(attribute)
+    const { stateEntries, attributes, yamlData } = this._getDetailData(
+      this._stateObj
     );
-    const allAttributes = [...detailsAttributes, ...builtInAttributes];
 
     return html`
       <div class="content">
-        <section class="section">
-          <h2 class="section-title">
-            ${this.hass.localize(
-              "ui.components.entity.entity-state-picker.state"
-            )}
-          </h2>
-          <ha-card>
-            <div class="card-content">
-              <div class="attribute-group">
-                <div class="data-entry">
-                  <div class="key">
-                    ${this.hass.localize(
-                      "ui.dialogs.more_info_control.translated"
-                    )}
+        ${this.yamlMode
+          ? html`<ha-yaml-editor
+              .hass=${this.hass}
+              .value=${yamlData}
+              read-only
+              auto-update
+            ></ha-yaml-editor>`
+          : html`
+              <section class="section">
+                <h2 class="section-title">
+                  ${this.hass.localize(
+                    "ui.components.entity.entity-state-picker.state"
+                  )}
+                </h2>
+                <ha-card>
+                  <div class="card-content">
+                    <div class="data-group">
+                      ${stateEntries.map(
+                        (entry) =>
+                          html`<div class="data-entry">
+                            <div class="key">
+                              ${this.hass.localize(entry.translationKey)}
+                            </div>
+                            <div class="value">${entry.value}</div>
+                          </div>`
+                      )}
+                    </div>
                   </div>
-                  <div class="value">${translatedState}</div>
-                </div>
-                <div class="data-entry">
-                  <div class="key">
-                    ${this.hass.localize("ui.dialogs.more_info_control.raw")}
-                  </div>
-                  <div class="value">${this._stateObj.state}</div>
-                </div>
-              </div>
-            </div>
-          </ha-card>
-        </section>
+                </ha-card>
+              </section>
 
-        <section class="section">
-          <h2 class="section-title">
-            ${this.hass.localize("ui.dialogs.more_info_control.attributes")}
-          </h2>
-          <ha-card>
-            <div class="card-content">
-              <div class="attribute-group">
-                ${this._renderAttributes(allAttributes)}
-              </div>
-            </div>
-          </ha-card>
-        </section>
+              <section class="section">
+                <h2 class="section-title">
+                  ${this.hass.localize(
+                    "ui.dialogs.more_info_control.attributes"
+                  )}
+                </h2>
+                <ha-card>
+                  <div class="card-content">
+                    <div class="data-group">
+                      ${this._renderAttributes(attributes)}
+                    </div>
+                  </div>
+                </ha-card>
+              </section>
+            `}
       </div>
     `;
   }
 
+  private _getDetailData = memoizeOne(
+    (
+      stateObj: HassEntity
+    ): {
+      stateEntries: DetailEntry[];
+      attributes: string[];
+      yamlData: {
+        state: {
+          translated: string;
+          raw: string;
+          last_changed: string;
+          last_updated: string;
+        };
+        attributes: Record<string, string>;
+      };
+    } => {
+      const translatedState = this.hass.formatEntityState(stateObj);
+
+      const detailsAttributes = computeShownAttributes(stateObj);
+      const detailsAttributeSet = new Set(detailsAttributes);
+      const builtInAttributes = Object.keys(stateObj.attributes).filter(
+        (attribute) => !detailsAttributeSet.has(attribute)
+      );
+
+      return {
+        stateEntries: [
+          {
+            translationKey: "ui.dialogs.more_info_control.translated",
+            value: translatedState,
+          },
+          {
+            translationKey: "ui.dialogs.more_info_control.raw",
+            value: stateObj.state,
+          },
+          {
+            translationKey: "ui.dialogs.more_info_control.last_changed",
+            value: this._formatTimestamp(stateObj.last_changed),
+          },
+          {
+            translationKey: "ui.dialogs.more_info_control.last_updated",
+            value: this._formatTimestamp(stateObj.last_updated),
+          },
+        ],
+        attributes: [...detailsAttributes, ...builtInAttributes],
+        yamlData: {
+          state: {
+            translated: translatedState,
+            raw: stateObj.state,
+            last_changed: stateObj.last_changed,
+            last_updated: stateObj.last_updated,
+          },
+          attributes: stateObj.attributes,
+        },
+      };
+    }
+  );
+
+  private _formatTimestamp(value: string): string {
+    const date = new Date(value);
+
+    return checkValidDate(date)
+      ? formatDateTimeWithSeconds(date, this.hass.locale, this.hass.config)
+      : value;
+  }
+
   private _renderAttributes(attributes: string[]) {
     if (attributes.length === 0) {
       return html`<div class="empty">
@@ -159,7 +238,7 @@ class HaMoreInfoDetails extends LitElement {
       border-bottom: 1px solid var(--divider-color);
     }
 
-    .attribute-group .data-entry:last-of-type {
+    .data-group .data-entry:last-of-type {
       border-bottom: none;
     }
 

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

@@ -1,6 +1,7 @@
 import {
   mdiChartBoxOutline,
   mdiClose,
+  mdiCodeBraces,
   mdiCogOutline,
   mdiDevices,
   mdiDotsVertical,
@@ -132,6 +133,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
   @state() private _infoEditMode = false;
 
+  @state() private _detailsYamlMode = false;
+
   @state() private _isEscapeEnabled = true;
 
   @state() private _sensorNumericDeviceClasses?: string[] = [];
@@ -182,6 +185,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._parentEntityIds = [];
     this._entry = undefined;
     this._infoEditMode = false;
+    this._detailsYamlMode = false;
     this._initialView = DEFAULT_VIEW;
     this._currView = DEFAULT_VIEW;
     this._childView = undefined;
@@ -251,6 +255,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   private _goBack() {
     if (this._childView) {
       this._childView = undefined;
+      this._detailsYamlMode = false;
       return;
     }
     if (this._initialView !== this._currView) {
@@ -314,6 +319,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._infoEditMode = !this._infoEditMode;
   }
 
+  private _toggleDetailsYamlMode() {
+    this._detailsYamlMode = !this._detailsYamlMode;
+  }
+
   private _handleToggleInfoEditModeEvent(ev) {
     this._infoEditMode = ev.detail;
   }
@@ -637,7 +646,18 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                   </ha-dropdown-item>
                 </ha-dropdown>
               `
-            : nothing}
+            : this._childView?.viewTag === "ha-more-info-details"
+              ? html`
+                  <ha-icon-button
+                    slot="headerActionItems"
+                    .label=${this.hass.localize(
+                      "ui.dialogs.more_info_control.toggle_yaml_mode"
+                    )}
+                    .path=${mdiCodeBraces}
+                    @click=${this._toggleDetailsYamlMode}
+                  ></ha-icon-button>
+                `
+              : nothing}
         <div
           class=${classMap({
             "content-wrapper": true,
@@ -663,6 +683,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                             hass: this.hass,
                             entry: this._entry,
                             params: this._childView.viewParams,
+                            yamlMode: this._detailsYamlMode,
                           })}
                         </div>
                       `
@@ -731,6 +752,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     if (changedProps.has("_currView")) {
       this._childView = undefined;
       this._infoEditMode = false;
+      this._detailsYamlMode = false;
     }
   }
 

src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts

@@ -49,6 +49,14 @@ class HuiClimateFanModesCardFeature
 
   @state() _currentFanMode?: string;
 
+  private _renderFanModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="fan_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -175,14 +183,8 @@ class HuiClimateFanModesCardFeature
         .value=${this._currentFanMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj: stateObj,
-            attribute: "fan_mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderFanModeIcon}
         ><ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
       </ha-control-select-menu>
     `;

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -48,6 +48,14 @@ class HuiClimatePresetModesCardFeature
 
   @state() _currentPresetMode?: string;
 
+  private _renderPresetModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="preset_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -179,14 +187,8 @@ class HuiClimatePresetModesCardFeature
         .value=${this._currentPresetMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj: stateObj,
-            attribute: "preset_mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderPresetModeIcon}
       >
         <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
       </ha-control-select-menu>

src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts

@@ -48,6 +48,14 @@ class HuiClimateSwingHorizontalModesCardFeature
 
   @state() _currentSwingHorizontalMode?: string;
 
+  private _renderSwingHorizontalModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="swing_horizontal_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -187,14 +195,8 @@ class HuiClimateSwingHorizontalModesCardFeature
         .value=${this._currentSwingHorizontalMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj: stateObj,
-            attribute: "swing_horizontal_mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderSwingHorizontalModeIcon}
       >
         <ha-svg-icon slot="icon" .path=${mdiArrowOscillating}></ha-svg-icon>
       </ha-control-select-menu>

src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts

@@ -48,6 +48,14 @@ class HuiClimateSwingModesCardFeature
 
   @state() _currentSwingMode?: string;
 
+  private _renderSwingModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="swing_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -179,14 +187,8 @@ class HuiClimateSwingModesCardFeature
         .value=${this._currentSwingMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj,
-            attribute: "swing_mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderSwingModeIcon}
         ><ha-svg-icon slot="icon" .path=${mdiArrowOscillating}></ha-svg-icon>
       </ha-control-select-menu>
     `;

src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts

@@ -47,6 +47,14 @@ class HuiFanPresetModesCardFeature
 
   @state() _currentPresetMode?: string;
 
+  private _renderPresetModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="preset_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -173,14 +181,8 @@ class HuiFanPresetModesCardFeature
         .value=${this._currentPresetMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj: stateObj,
-            attribute: "preset_mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderPresetModeIcon}
       >
         <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
       </ha-control-select-menu>

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts

@@ -48,6 +48,14 @@ class HuiHumidifierModesCardFeature
 
   @state() _currentMode?: string;
 
+  private _renderModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -174,14 +182,8 @@ class HuiHumidifierModesCardFeature
         .value=${this._currentMode}
         .disabled=${this._stateObj.state === UNAVAILABLE}
         @wa-select=${this._valueChanged}
-        .options=${options.map((option) => ({
-          ...option,
-          attributeIcon: {
-            stateObj,
-            attribute: "mode",
-            attributeValue: option.value,
-          },
-        }))}
+        .options=${options}
+        .renderIcon=${this._renderModeIcon}
       >
         <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
       </ha-control-select-menu>

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -49,6 +49,14 @@ class HuiWaterHeaterOperationModeCardFeature
 
   @state() _currentOperationMode?: OperationMode;
 
+  private _renderOperationModeIcon = (value: string) =>
+    html`<ha-attribute-icon
+      .hass=${this.hass}
+      .stateObj=${this._stateObj}
+      attribute="operation_mode"
+      .attributeValue=${value}
+    ></ha-attribute-icon>`;
+
   private get _stateObj() {
     if (!this.hass || !this.context || !this.context.entity_id) {
       return undefined;
@@ -153,14 +161,8 @@ class HuiWaterHeaterOperationModeCardFeature
           .value=${this._currentOperationMode}
           .disabled=${this._stateObj.state === UNAVAILABLE}
           @wa-select=${this._valueChanged}
-          .options=${options.map((option) => ({
-            ...option,
-            attributeIcon: {
-              stateObj: this._stateObj,
-              attribute: "operation_mode",
-              attributeValue: option.value,
-            },
-          }))}
+          .options=${options}
+          .renderIcon=${this._renderOperationModeIcon}
         >
           <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
         </ha-control-select-menu>

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -218,7 +218,9 @@ function formatTooltip(
   }
   // when comparing the first value is offset to match the main period
   // and the real date is in the third value
-  const date = new Date(params[0].value?.[2] ?? params[0].value?.[0]);
+  // find the first param with the real date to handle gap-filled entries
+  const origDate = params.find((p) => p.value?.[2] != null)?.value?.[2];
+  const date = new Date(origDate ?? params[0].value?.[0]);
   let period: string;
 
   if (suggestedPeriod === "month") {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -6,6 +6,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-spinner";
+import type { HistoryStates } from "../../../data/history";
 import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
 import type { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
@@ -66,6 +67,8 @@ export class HuiGraphHeaderFooter
 
   private _error?: string;
 
+  private _history?: HistoryStates;
+
   private _interval?: number;
 
   private _subscribed?: Promise<(() => Promise<void>) | undefined>;
@@ -161,24 +164,8 @@ export class HuiGraphHeaderFooter
           // Message came in before we had a chance to unload
           return;
         }
-        const width = this.clientWidth || this.offsetWidth;
-        // sample to 1 point per hour or 1 point per 5 pixels
-        const maxDetails = Math.max(
-          10,
-          this._config.detail! > 1
-            ? Math.max(width / 5, this._config.hours_to_show!)
-            : this._config.hours_to_show!
-        );
-        const useMean = this._config.detail !== 2;
-        const { points } = coordinatesMinimalResponseCompressedState(
-          combinedHistory[this._config.entity],
-          width,
-          width / 5,
-          maxDetails,
-          { minY: this._config.limits?.min, maxY: this._config.limits?.max },
-          useMean
-        );
-        this._coordinates = points;
+        this._history = combinedHistory;
+        this._computeCoordinates();
       },
       this._config.hours_to_show!,
       [this._config.entity]
@@ -190,10 +177,63 @@ export class HuiGraphHeaderFooter
     this._setRedrawTimer();
   }
 
-  private _redrawGraph() {
-    if (this._coordinates) {
-      this._coordinates = [...this._coordinates];
+  private _computeCoordinates() {
+    if (!this._history || !this._config) {
+      return;
     }
+    const entityHistory = this._history[this._config.entity];
+    if (!entityHistory?.length) {
+      return;
+    }
+    const width = this.clientWidth || this.offsetWidth;
+    // sample to 1 point per hour or 1 point per 5 pixels
+    const maxDetails = Math.max(
+      10,
+      this._config.detail! > 1
+        ? Math.max(width / 5, this._config.hours_to_show!)
+        : this._config.hours_to_show!
+    );
+    const useMean = this._config.detail !== 2;
+    const { points } = coordinatesMinimalResponseCompressedState(
+      entityHistory,
+      width,
+      width / 5,
+      maxDetails,
+      { minY: this._config.limits?.min, maxY: this._config.limits?.max },
+      useMean
+    );
+    this._coordinates = points;
+  }
+
+  private _redrawGraph() {
+    if (!this._history || !this._config?.hours_to_show) {
+      return;
+    }
+    const entityId = this._config.entity;
+    const entityHistory = this._history[entityId];
+    if (entityHistory?.length) {
+      const purgeBeforeTimestamp =
+        (Date.now() - this._config.hours_to_show * 60 * 60 * 1000) / 1000;
+      let purgedHistory = entityHistory.filter(
+        (entry) => entry.lu >= purgeBeforeTimestamp
+      );
+      if (purgedHistory.length !== entityHistory.length) {
+        if (
+          !purgedHistory.length ||
+          purgedHistory[0].lu !== purgeBeforeTimestamp
+        ) {
+          // Preserve the last expired state as the start boundary
+          const lastExpiredState = {
+            ...entityHistory[entityHistory.length - purgedHistory.length - 1],
+          };
+          lastExpiredState.lu = purgeBeforeTimestamp;
+          delete lastExpiredState.lc;
+          purgedHistory = [lastExpiredState, ...purgedHistory];
+        }
+        this._history = { ...this._history, [entityId]: purgedHistory };
+      }
+    }
+    this._computeCoordinates();
   }
 
   private _setRedrawTimer() {
@@ -211,6 +251,7 @@ export class HuiGraphHeaderFooter
       this._subscribed.then((unsub) => unsub?.());
       this._subscribed = undefined;
     }
+    this._history = undefined;
   }
 
   protected updated(changedProps: PropertyValues) {

src/panels/lovelace/hui-root.ts

@@ -1485,6 +1485,8 @@ class HUIRoot extends LitElement {
           padding-inline-start: var(--safe-area-inset-left);
         }
         hui-view-container > * {
+          display: flex;
+          flex-direction: column;
           flex: 1 1 100%;
           max-width: 100%;
         }

src/panels/lovelace/views/hui-sections-view.ts

@@ -461,6 +461,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       --column-min-width: var(--ha-view-sections-column-min-width, 320px);
       --top-margin: var(--ha-view-sections-extra-top-margin, 80px);
       display: block;
+      flex: 1;
     }
 
     @media (max-width: 600px) {
@@ -470,7 +471,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     }
 
     .wrapper {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      min-height: calc(100% - 2 * var(--row-gap));
       padding: var(--row-gap) var(--column-gap);
       box-sizing: content-box;
       margin: 0 auto;
@@ -503,6 +506,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       gap: var(--row-gap) var(--column-gap);
       padding: var(--row-gap) 0;
       align-items: flex-start;
+      flex: 1 0 auto;
     }
 
     .wrapper.has-sidebar .container {

src/translations/en.json

@@ -1524,6 +1524,7 @@
         "settings": "Settings",
         "edit": "Edit entity",
         "details": "Details",
+        "toggle_yaml_mode": "Toggle YAML mode",
         "translated": "Translated",
         "raw": "Raw",
         "back_to_info": "Back to info",

yarn.lock

@@ -6086,12 +6086,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"barcode-detector@npm:3.0.8":
-  version: 3.0.8
-  resolution: "barcode-detector@npm:3.0.8"
+"barcode-detector@npm:3.1.0":
+  version: 3.1.0
+  resolution: "barcode-detector@npm:3.1.0"
   dependencies:
-    zxing-wasm: "npm:2.2.4"
-  checksum: 10/7de6225f659c69a0f4101d080a9e0812f2404c485fa2406424b8b13eaff274f6e7405c94de24827a09def52c32a63b19b9c9fba61c5274b074d558f696ec1684
+    zxing-wasm: "npm:3.0.0"
+  checksum: 10/60767161081b827e290b60bb3416999dee616bab39291ee55565df9b72d59f0bbbf511fd3bb85db18eee7c0ad9acf1ff90359cdb21e10f80793acd0105c86a1d
   languageName: node
   linkType: hard
 
@@ -9268,7 +9268,7 @@ __metadata:
     app-datepicker: "npm:5.1.1"
     babel-loader: "npm:10.0.0"
     babel-plugin-template-html-minifier: "npm:4.1.0"
-    barcode-detector: "npm:3.0.8"
+    barcode-detector: "npm:3.1.0"
     browserslist-useragent-regexp: "npm:4.1.3"
     color-name: "npm:2.1.0"
     comlink: "npm:4.4.2"
@@ -14139,12 +14139,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^5.2.0":
-  version: 5.4.1
-  resolution: "type-fest@npm:5.4.1"
+"type-fest@npm:^5.4.4":
+  version: 5.4.4
+  resolution: "type-fest@npm:5.4.4"
   dependencies:
     tagged-tag: "npm:^1.0.0"
-  checksum: 10/be7d4749e1e5cf2e2c9904fa1aaf9da5eef6c47c130881bf93bfd5a670b2ab59c5502466768e42c521281056a2375b1617176a75cf6c52b575f4bbabbd450b21
+  checksum: 10/0bbdca645f95740587f389a2d712fe8d5e9ab7d13e74aac97cf396112510abcaab6b75fd90d65172bc13b02fdfc827e6a871322cc9c1c1a5a2754d9ab264c6f5
   languageName: node
   linkType: hard
 
@@ -15703,14 +15703,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zxing-wasm@npm:2.2.4":
-  version: 2.2.4
-  resolution: "zxing-wasm@npm:2.2.4"
+"zxing-wasm@npm:3.0.0":
+  version: 3.0.0
+  resolution: "zxing-wasm@npm:3.0.0"
   dependencies:
     "@types/emscripten": "npm:^1.41.5"
-    type-fest: "npm:^5.2.0"
+    type-fest: "npm:^5.4.4"
   peerDependencies:
     "@types/emscripten": ">=1.39.6"
-  checksum: 10/e5928cbb066c854c970cbf724e978e502c3469d69de2469bd37d1f6ab8f5d2a2acdbaa9dea32d35cfc058e2b482e29a9c4f12161d9df3e1e952c30dda3a96d8c
+  checksum: 10/0acf04829acf8f3987173af011784642792fc877c7765f79222fe33efff8af09fbf95bf5d590d2490ae39ec411e6c4de06ea24e96d4eb48189b9d06f7502eaa2
   languageName: node
   linkType: hard