Allow to add context to tile card secondary line (#28995)

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

.gitignore

@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-/node_modules/
+node_modules/
 yarn-error.log
 npm-debug.log
 

.nvmrc

@@ -1 +1 @@
-24.12.0
+24.13.0

package.json

@@ -236,6 +236,6 @@
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   }
 }

src/common/util/deep-equal.ts

@@ -1,6 +1,16 @@
 // From https://github.com/epoberezkin/fast-deep-equal
 // MIT License - Copyright (c) 2017 Evgeny Poberezkin
-export const deepEqual = (a: any, b: any): boolean => {
+
+interface DeepEqualOptions {
+  /** Compare Symbol properties in addition to string keys */
+  compareSymbols?: boolean;
+}
+
+export const deepEqual = (
+  a: any,
+  b: any,
+  options?: DeepEqualOptions
+): boolean => {
   if (a === b) {
     return true;
   }
@@ -18,7 +28,7 @@ export const deepEqual = (a: any, b: any): boolean => {
         return false;
       }
       for (i = length; i-- !== 0; ) {
-        if (!deepEqual(a[i], b[i])) {
+        if (!deepEqual(a[i], b[i], options)) {
           return false;
         }
       }
@@ -35,7 +45,7 @@ export const deepEqual = (a: any, b: any): boolean => {
         }
       }
       for (i of a.entries()) {
-        if (!deepEqual(i[1], b.get(i[0]))) {
+        if (!deepEqual(i[1], b.get(i[0]), options)) {
           return false;
         }
       }
@@ -93,11 +103,28 @@ export const deepEqual = (a: any, b: any): boolean => {
     for (i = length; i-- !== 0; ) {
       const key = keys[i];
 
-      if (!deepEqual(a[key], b[key])) {
+      if (!deepEqual(a[key], b[key], options)) {
         return false;
       }
     }
 
+    // Compare Symbol properties if requested
+    if (options?.compareSymbols) {
+      const symbolsA = Object.getOwnPropertySymbols(a);
+      const symbolsB = Object.getOwnPropertySymbols(b);
+      if (symbolsA.length !== symbolsB.length) {
+        return false;
+      }
+      for (const sym of symbolsA) {
+        if (!Object.prototype.hasOwnProperty.call(b, sym)) {
+          return false;
+        }
+        if (!deepEqual(a[sym], b[sym], options)) {
+          return false;
+        }
+      }
+    }
+
     return true;
   }
 

src/components/device/ha-device-automation-picker.ts

@@ -1,8 +1,9 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { fullEntitiesContext } from "../../data/context";
 import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
@@ -11,11 +12,12 @@ import {
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
+import "../ha-generic-picker";
 import "../ha-md-select";
 import "../ha-md-select-option";
+import type { PickerValueRenderer } from "../ha-picker-field";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
-const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
 
 export abstract class HaDeviceAutomationPicker<
   T extends DeviceAutomation,
@@ -28,7 +30,7 @@ export abstract class HaDeviceAutomationPicker<
 
   @property({ type: Object }) public value?: T;
 
-  @state() private _automations: T[] = [];
+  @state() private _automations?: T[];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
@@ -44,12 +46,6 @@ export abstract class HaDeviceAutomationPicker<
     );
   }
 
-  protected get UNKNOWN_AUTOMATION_TEXT() {
-    return this.hass.localize(
-      "ui.panel.config.devices.automation.actions.unknown_action"
-    );
-  }
-
   private _localizeDeviceAutomation: (
     hass: HomeAssistant,
     entityRegistry: EntityRegistryEntry[],
@@ -75,7 +71,7 @@ export abstract class HaDeviceAutomationPicker<
   }
 
   private get _value() {
-    if (!this.value) {
+    if (!this.value || !this._automations) {
       return "";
     }
 
@@ -88,7 +84,7 @@ export abstract class HaDeviceAutomationPicker<
     );
 
     if (idx === -1) {
-      return UNKNOWN_AUTOMATION_KEY;
+      return this.value.alias || this.value.type || "unknown";
     }
 
     return `${this._automations[idx].device_id}_${idx}`;
@@ -99,37 +95,21 @@ export abstract class HaDeviceAutomationPicker<
       return nothing;
     }
     const value = this._value;
-    return html`
-      <ha-md-select
-        .label=${this.label}
-        .value=${value}
-        @change=${this._automationChanged}
-        @closed=${stopPropagation}
-        .disabled=${this._automations.length === 0}
-      >
-        ${value === NO_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${NO_AUTOMATION_KEY}>
-              ${this.NO_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<ha-md-select-option .value=${UNKNOWN_AUTOMATION_KEY}>
-              ${this.UNKNOWN_AUTOMATION_TEXT}
-            </ha-md-select-option>`
-          : nothing}
-        ${this._automations.map(
-          (automation, idx) => html`
-            <ha-md-select-option .value=${`${automation.device_id}_${idx}`}>
-              ${this._localizeDeviceAutomation(
-                this.hass,
-                this._entityReg,
-                automation
-              )}
-            </ha-md-select-option>
-          `
-        )}
-      </ha-md-select>
-    `;
+
+    return html`<ha-generic-picker
+      .hass=${this.hass}
+      .label=${this.label}
+      .value=${value}
+      .disabled=${!this._automations || this._automations.length === 0}
+      .getItems=${this._getItems(value, this._automations)}
+      @value-changed=${this._automationChanged}
+      .valueRenderer=${this._valueRenderer}
+      .unknownItemText=${this.hass.localize(
+        "ui.panel.config.devices.automation.actions.unknown_action"
+      )}
+      hide-clear-icon
+    >
+    </ha-generic-picker>`;
   }
 
   protected updated(changedProps) {
@@ -140,6 +120,57 @@ export abstract class HaDeviceAutomationPicker<
     }
   }
 
+  private _getItems = memoizeOne(
+    (value: string, automations: T[] | undefined) => {
+      if (!automations) {
+        return () => undefined;
+      }
+
+      const automationListItems = automations.map((automation, idx) => {
+        const primary = this._localizeDeviceAutomation(
+          this.hass,
+          this._entityReg,
+          automation
+        );
+        return {
+          id: `${automation.device_id}_${idx}`,
+          primary,
+        };
+      });
+
+      automationListItems.sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.primary,
+          b.primary,
+          this.hass.locale.language
+        )
+      );
+
+      if (value === NO_AUTOMATION_KEY) {
+        automationListItems.unshift({
+          id: NO_AUTOMATION_KEY,
+          primary: this.NO_AUTOMATION_TEXT,
+        });
+      }
+
+      return () => automationListItems;
+    }
+  );
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const automation = this._automations?.find(
+      (a, idx) => value === `${a.device_id}_${idx}`
+    );
+
+    const text = automation
+      ? this._localizeDeviceAutomation(this.hass, this._entityReg, automation)
+      : value === NO_AUTOMATION_KEY
+        ? this.NO_AUTOMATION_TEXT
+        : value;
+
+    return html`<span slot="headline">${text}</span>`;
+  };
+
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
       ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
@@ -161,13 +192,14 @@ export abstract class HaDeviceAutomationPicker<
     this._renderEmpty = false;
   }
 
-  private _automationChanged(ev) {
-    const value = ev.target.value;
-    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+  private _automationChanged(ev: CustomEvent<{ value: string }>) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+    if (!value || NO_AUTOMATION_KEY === value) {
       return;
     }
     const [deviceId, idx] = value.split("_");
-    const automation = this._automations[idx];
+    const automation = this._automations![idx];
     if (automation.device_id !== deviceId) {
       return;
     }

src/components/entity/ha-entity-state-content-picker.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import {
   STATE_DISPLAY_SPECIAL_CONTENT,
   STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS,
@@ -95,6 +96,9 @@ export class HaStateContentPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-name" }) public allowName =
     false;
 
+  @property({ type: Boolean, attribute: "allow-context" }) public allowContext =
+    false;
+
   @property() public label?: string;
 
   @property() public value?: string[] | string;
@@ -106,7 +110,12 @@ export class HaStateContentPicker extends LitElement {
   private _editIndex?: number;
 
   private _getItems = memoizeOne(
-    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
+    (
+      entityId?: string,
+      stateObj?: HassEntity,
+      allowName?: boolean,
+      allowContext?: boolean
+    ) => {
       const domain = entityId ? computeDomain(entityId) : undefined;
       const items: PickerComboBoxItem[] = [
         {
@@ -149,6 +158,52 @@ export class HaStateContentPicker extends LitElement {
             "ui.components.state-content-picker.last_updated"
           ),
         },
+        ...(allowContext && stateObj
+          ? (() => {
+              const context = getEntityContext(
+                stateObj,
+                this.hass.entities,
+                this.hass.devices,
+                this.hass.areas,
+                this.hass.floors
+              );
+              const contextItems: PickerComboBoxItem[] = [];
+              if (context.device) {
+                contextItems.push({
+                  id: "device_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.device_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.device_name"
+                  ),
+                });
+              }
+              if (context.area) {
+                contextItems.push({
+                  id: "area_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.area_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.area_name"
+                  ),
+                });
+              }
+              if (context.floor) {
+                contextItems.push({
+                  id: "floor_name",
+                  primary: this.hass.localize(
+                    "ui.components.state-content-picker.floor_name"
+                  ),
+                  sorting_label: this.hass.localize(
+                    "ui.components.state-content-picker.floor_name"
+                  ),
+                });
+              }
+              return contextItems;
+            })()
+          : []),
         ...(domain
           ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
               STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
@@ -300,7 +355,8 @@ export class HaStateContentPicker extends LitElement {
       const items = this._getItems(
         this.entityId,
         stateObjForItems,
-        this.allowName
+        this.allowName,
+        this.allowContext
       );
       return items.find((item) => item.id === value)?.primary;
     }
@@ -343,7 +399,12 @@ export class HaStateContentPicker extends LitElement {
     const stateObj = this.entityId
       ? this.hass.states[this.entityId]
       : undefined;
-    const items = this._getItems(this.entityId, stateObj, this.allowName);
+    const items = this._getItems(
+      this.entityId,
+      stateObj,
+      this.allowName,
+      this.allowContext
+    );
     const currentValue =
       this._editIndex != null ? this._value[this._editIndex] : undefined;
 
@@ -367,7 +428,12 @@ export class HaStateContentPicker extends LitElement {
     const stateObj = this.entityId
       ? this.hass.states[this.entityId]
       : undefined;
-    const items = this._getItems(this.entityId, stateObj, this.allowName);
+    const items = this._getItems(
+      this.entityId,
+      stateObj,
+      this.allowName,
+      this.allowContext
+    );
 
     // If the search string does not match with the id of any of the items,
     // offer to add it as a custom attribute

src/components/ha-code-editor.ts

@@ -255,6 +255,7 @@ export class HaCodeEditor extends ReactiveElement {
         ...this._loadedCodeMirror.tabKeyBindings,
         saveKeyBinding,
       ]),
+      this._loadedCodeMirror.search({ top: true }),
       this._loadedCodeMirror.langCompartment.of(this._mode),
       this._loadedCodeMirror.haTheme,
       this._loadedCodeMirror.haSyntaxHighlighting,

src/components/ha-label-picker.ts

@@ -1,4 +1,4 @@
-import { mdiLabel, mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
@@ -25,11 +25,9 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 
 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_LABELS = "___NO_LABELS___";
 
 @customElement("ha-label-picker")
 export class HaLabelPicker extends SubscribeMixin(LitElement) {
@@ -108,52 +106,10 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  private _labelMap = memoizeOne(
-    (
-      labels: LabelRegistryEntry[] | undefined
-    ): Map<string, LabelRegistryEntry> => {
-      if (!labels) {
-        return new Map();
-      }
-      return new Map(labels.map((label) => [label.label_id, label]));
-    }
-  );
-
-  private _computeValueRenderer = memoizeOne(
-    (labels: LabelRegistryEntry[] | undefined): PickerValueRenderer =>
-      (value) => {
-        const label = this._labelMap(labels).get(value);
-
-        if (!label) {
-          return html`
-            <ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>
-            <span slot="headline">${value}</span>
-          `;
-        }
-
-        return html`
-          ${label.icon
-            ? html`<ha-icon slot="start" .icon=${label.icon}></ha-icon>`
-            : html`<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>`}
-          <span slot="headline">${label.name}</span>
-        `;
-      }
-  );
-
   private _getLabelsMemoized = memoizeOne(getLabels);
 
-  private _getItems = () => {
-    if (!this._labels || this._labels.length === 0) {
-      return [
-        {
-          id: NO_LABELS,
-          primary: this.hass.localize("ui.components.label-picker.no_labels"),
-          icon_path: mdiLabel,
-        },
-      ];
-    }
-
-    return this._getLabelsMemoized(
+  private _getItems = () =>
+    this._getLabelsMemoized(
       this.hass.states,
       this.hass.areas,
       this.hass.devices,
@@ -166,7 +122,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.entityFilter,
       this.excludeLabels
     );
-  };
 
   private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
     if (!labels) {
@@ -219,8 +174,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       this.placeholder ??
       this.hass.localize("ui.components.label-picker.label");
 
-    const valueRenderer = this._computeValueRenderer(this._labels);
-
     return html`
       <ha-generic-picker
         .disabled=${this.disabled}
@@ -237,7 +190,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
-        .valueRenderer=${valueRenderer}
         .searchKeys=${labelComboBoxKeys}
         @value-changed=${this._valueChanged}
       >
@@ -251,10 +203,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
 
     const value = ev.detail.value;
 
-    if (value === NO_LABELS) {
-      return;
-    }
-
     if (!value) {
       this._setValue(undefined);
       return;

src/components/ha-selector/ha-selector-ui-state-content.ts

@@ -37,6 +37,7 @@ export class HaSelectorUiStateContent extends SubscribeMixin(LitElement) {
         .disabled=${this.disabled}
         .required=${this.required}
         .allowName=${this.selector.ui_state_content?.allow_name || false}
+        .allowContext=${this.selector.ui_state_content?.allow_context || false}
       ></ha-entity-state-content-picker>
     `;
   }

src/data/selector.ts

@@ -377,7 +377,7 @@ interface SelectBoxOptionImage {
 }
 
 export interface SelectOption {
-  value: any;
+  value: string;
   label: string;
   description?: string;
   image?: string | SelectBoxOptionImage;
@@ -501,6 +501,7 @@ export interface UiStateContentSelector {
   ui_state_content: {
     entity_id?: string;
     allow_name?: boolean;
+    allow_context?: boolean;
   } | null;
 }
 

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -58,6 +58,7 @@ import { fullEntitiesContext } from "../../../../data/context";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type {
   Action,
+  DeviceAction,
   NonConditionAction,
   RepeatAction,
   ServiceAction,
@@ -233,6 +234,13 @@ export default class HaAutomationActionRow extends LitElement {
   private _renderRow() {
     const type = getAutomationActionType(this.action);
 
+    const target =
+      type === "service" && "target" in this.action
+        ? (this.action as ServiceAction).target
+        : type === "device_id" && (this.action as DeviceAction).device_id
+          ? { device_id: (this.action as DeviceAction).device_id }
+          : undefined;
+
     return html`
       ${type === "service" && "action" in this.action && this.action.action
         ? html`
@@ -254,9 +262,7 @@ export default class HaAutomationActionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeAction(this.hass, this._entityReg, this.action)
         )}
-        ${type === "service" && "target" in this.action
-          ? this._renderTargets((this.action as ServiceAction).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -1504,14 +1504,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
       box-shadow: inset var(--ha-shadow-offset-x-lg)
         calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
         var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .targets-show-more {
-        box-shadow: inset var(--ha-shadow-offset-x-lg)
-          calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
-          var(--ha-shadow-spread-lg) var(--ha-color-shadow-dark);
-      }
+      z-index: 2;
     }
 
     @media all and (max-width: 870px), all and (max-height: 500px) {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -76,6 +76,7 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
+import type { DeviceCondition } from "../../../../data/device/device_automation";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -184,6 +185,14 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _renderRow() {
+    const target =
+      "target" in (this.conditionDescriptions[this.condition.condition] || {})
+        ? (this.condition as PlatformCondition).target
+        : "device_id" in this.condition &&
+            (this.condition as DeviceCondition).device_id
+          ? { device_id: [(this.condition as DeviceCondition).device_id] }
+          : undefined;
+
     return html`
       <ha-condition-icon
         slot="leading-icon"
@@ -194,10 +203,7 @@ export default class HaAutomationConditionRow extends LitElement {
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
         )}
-        ${"target" in
-        (this.conditionDescriptions[this.condition.condition] || {})
-          ? this._renderTargets((this.condition as PlatformCondition).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/config/automation/ha-automation-picker.ts

@@ -381,12 +381,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.automation.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (automation) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -56,6 +56,7 @@ import { isTrigger, subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
+import type { DeviceTrigger } from "../../../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { TriggerDescriptions } from "../../../../data/trigger";
 import { isTriggerList } from "../../../../data/trigger";
@@ -196,6 +197,15 @@ export default class HaAutomationTriggerRow extends LitElement {
 
     const yamlMode = this._yamlMode || !supported;
 
+    const target =
+      type === "platform" &&
+      "target" in
+        this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
+        ? (this.trigger as PlatformTrigger).target
+        : type === "device" && (this.trigger as DeviceTrigger).device_id
+          ? { device_id: (this.trigger as DeviceTrigger).device_id }
+          : undefined;
+
     return html`
       ${type === "list"
         ? html`<ha-svg-icon
@@ -210,11 +220,7 @@ export default class HaAutomationTriggerRow extends LitElement {
           ></ha-trigger-icon>`}
       <h3 slot="header">
         ${describeTrigger(this.trigger, this.hass, this._entityReg)}
-        ${type === "platform" &&
-        "target" in
-          this.triggerDescriptions[(this.trigger as PlatformTrigger).trigger]
-          ? this._renderTargets((this.trigger as PlatformTrigger).target)
-          : nothing}
+        ${target ? this._renderTargets(target) : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>

src/panels/config/category/ha-category-picker.ts

@@ -20,7 +20,6 @@ import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 import { showCategoryRegistryDetailDialog } from "./show-dialog-category-registry-detail";
 
 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
 
 @customElement("ha-category-picker")
 export class HaCategoryPicker extends SubscribeMixin(LitElement) {
@@ -101,17 +100,11 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   );
 
   private _getCategories = memoizeOne(
-    (categories: CategoryRegistryEntry[] | undefined): PickerComboBoxItem[] => {
-      if (!categories || categories.length === 0) {
-        return [
-          {
-            id: NO_CATEGORIES_ID,
-            primary: this.hass.localize(
-              "ui.components.category-picker.no_categories"
-            ),
-            icon_path: mdiTag,
-          },
-        ];
+    (
+      categories: CategoryRegistryEntry[] | undefined
+    ): PickerComboBoxItem[] | undefined => {
+      if (!categories) {
+        return undefined;
       }
 
       const items = categories.map<PickerComboBoxItem>((category) => ({
@@ -210,10 +203,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
 
     const value = ev.detail.value;
 
-    if (value === NO_CATEGORIES_ID) {
-      return;
-    }
-
     if (!value) {
       this._setValue(undefined);
       return;

src/panels/config/entities/ha-config-entities.ts

@@ -498,12 +498,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       },
       voice_assistants: {
         title: localize(
-          "ui.panel.config.entities.picker.headers.voice_assistants"
+          "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
-        type: "icon",
+        type: "flex",
         defaultHidden: true,
-        minWidth: "100px",
-        maxWidth: "100px",
+        minWidth: "160px",
+        maxWidth: "160px",
         template: (entry) => {
           const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
             this._entities,

src/panels/config/helpers/ha-config-helpers.ts

@@ -487,12 +487,12 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       },
       voice_assistants: {
         title: localize(
-          "ui.panel.config.helpers.picker.headers.voice_assistants"
+          "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
-        type: "icon",
+        type: "flex",
         defaultHidden: true,
-        minWidth: "100px",
-        maxWidth: "100px",
+        minWidth: "160px",
+        maxWidth: "160px",
         template: (helper) => {
           const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
             this._entityReg,

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -23,23 +23,12 @@ import {
   subscribeBluetoothScannersDetails,
 } from "../../../../../data/bluetooth";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
-import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 import "../../../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
+import { bluetoothTabs } from "./bluetooth-config-dashboard";
 import { showBluetoothDeviceInfoDialog } from "./show-dialog-bluetooth-device-info";
 
-export const bluetoothAdvertisementMonitorTabs: PageNavigation[] = [
-  {
-    translationKey: "ui.panel.config.bluetooth.advertisement_monitor",
-    path: "advertisement-monitor",
-  },
-  {
-    translationKey: "ui.panel.config.bluetooth.visualization",
-    path: "visualization",
-  },
-];
-
 @customElement("bluetooth-advertisement-monitor")
 export class BluetoothAdvertisementMonitorPanel extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -232,7 +221,7 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
         @collapsed-changed=${this._handleCollapseChanged}
         filter=${this.address || ""}
         clickable
-        .tabs=${bluetoothAdvertisementMonitorTabs}
+        .tabs=${bluetoothTabs}
       ></hass-tabs-subpage-data-table>
     `;
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts

@@ -1,4 +1,10 @@
-import { mdiCogOutline } from "@mdi/js";
+import {
+  mdiBroadcast,
+  mdiCogOutline,
+  mdiLan,
+  mdiLinkVariant,
+  mdiNetwork,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,7 +14,6 @@ import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-list";
 import "../../../../../components/ha-list-item";
-
 import type {
   BluetoothAllocationsData,
   BluetoothScannerState,
@@ -24,16 +29,44 @@ import type { ConfigEntry } from "../../../../../data/config_entries";
 import { getConfigEntries } from "../../../../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
 import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
-import "../../../../../layouts/hass-subpage";
+import "../../../../../layouts/hass-tabs-subpage";
+import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
+import type { HomeAssistant, Route } from "../../../../../types";
+
+export const bluetoothTabs: PageNavigation[] = [
+  {
+    translationKey: "ui.panel.config.bluetooth.tabs.overview",
+    path: `/config/bluetooth/dashboard`,
+    iconPath: mdiNetwork,
+  },
+  {
+    translationKey: "ui.panel.config.bluetooth.tabs.advertisements",
+    path: `/config/bluetooth/advertisement-monitor`,
+    iconPath: mdiBroadcast,
+  },
+  {
+    translationKey: "ui.panel.config.bluetooth.tabs.visualization",
+    path: `/config/bluetooth/visualization`,
+    iconPath: mdiLan,
+  },
+  {
+    translationKey: "ui.panel.config.bluetooth.tabs.connections",
+    path: `/config/bluetooth/connection-monitor`,
+    iconPath: mdiLinkVariant,
+  },
+];
 
 @customElement("bluetooth-config-dashboard")
 export class BluetoothConfigDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public route!: Route;
+
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
+
   @state() private _configEntries: ConfigEntry[] = [];
 
   @state() private _connectionAllocationData: BluetoothAllocationsData[] = [];
@@ -122,10 +155,12 @@ export class BluetoothConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         header=${this.hass.localize("ui.panel.config.bluetooth.title")}
         .narrow=${this.narrow}
         .hass=${this.hass}
+        .route=${this.route}
+        .tabs=${bluetoothTabs}
       >
         <div class="content">
           <ha-card
@@ -135,60 +170,8 @@ export class BluetoothConfigDashboard extends LitElement {
           >
             <ha-list>${this._renderAdaptersList()}</ha-list>
           </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              "ui.panel.config.bluetooth.advertisement_monitor"
-            )}
-          >
-            <div class="card-content">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.bluetooth.advertisement_monitor_details"
-                )}
-              </p>
-            </div>
-            <div class="card-actions">
-              <ha-button
-                href="/config/bluetooth/advertisement-monitor"
-                appearance="plain"
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.bluetooth.advertisement_monitor"
-                )}
-              </ha-button>
-              <ha-button
-                href="/config/bluetooth/visualization"
-                appearance="plain"
-              >
-                ${this.hass.localize("ui.panel.config.bluetooth.visualization")}
-              </ha-button>
-            </div>
-          </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              "ui.panel.config.bluetooth.connection_slot_allocations_monitor"
-            )}
-          >
-            <div class="card-content">
-              <p>
-                ${this.hass.localize(
-                  "ui.panel.config.bluetooth.connection_slot_allocations_monitor_description"
-                )}
-              </p>
-            </div>
-            <div class="card-actions">
-              <ha-button
-                href="/config/bluetooth/connection-monitor"
-                appearance="plain"
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.bluetooth.connection_monitor"
-                )}
-              </ha-button>
-            </div>
-          </ha-card>
         </div>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-connection-monitor.ts

@@ -24,6 +24,7 @@ import type { DeviceRegistryEntry } from "../../../../../data/device/device_regi
 import "../../../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
+import { bluetoothTabs } from "./bluetooth-config-dashboard";
 
 @customElement("bluetooth-connection-monitor")
 export class BluetoothConnectionMonitorPanel extends LitElement {
@@ -214,6 +215,7 @@ export class BluetoothConnectionMonitorPanel extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
+        .tabs=${bluetoothTabs}
         .columns=${this._columns(this.hass.localize)}
         .data=${this._dataWithNamedSourceAndIds(this._data)}
         .initialGroupColumn=${this._activeGrouping}

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -26,9 +26,9 @@ import {
   subscribeBluetoothScannersDetails,
 } from "../../../../../data/bluetooth";
 import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
-import "../../../../../layouts/hass-subpage";
+import "../../../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../../../types";
-import { bluetoothAdvertisementMonitorTabs } from "./bluetooth-advertisement-monitor";
+import { bluetoothTabs } from "./bluetooth-config-dashboard";
 
 const UPDATE_THROTTLE_TIME = 10000;
 
@@ -123,8 +123,7 @@ export class BluetoothNetworkVisualization extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        header=${this.hass.localize("ui.panel.config.bluetooth.visualization")}
-        .tabs=${bluetoothAdvertisementMonitorTabs}
+        .tabs=${bluetoothTabs}
       >
         <ha-network-graph
           .hass=${this.hass}

src/panels/config/scene/ha-scene-dashboard.ts

@@ -415,12 +415,12 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.scene.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (scene) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,
@@ -1189,13 +1189,19 @@ ${rejected
   private async _duplicate(scene) {
     if (scene.attributes.id) {
       const config = await getSceneConfig(this.hass, scene.attributes.id);
-      showSceneEditor({
-        ...config,
-        id: undefined,
-        name: `${config?.name} (${this.hass.localize(
-          "ui.panel.config.scene.picker.duplicate"
-        )})`,
-      });
+      const entityRegEntry = this._entityReg.find(
+        (reg) => reg.entity_id === scene.entity_id
+      );
+      showSceneEditor(
+        {
+          ...config,
+          id: undefined,
+          name: `${config?.name} (${this.hass.localize(
+            "ui.panel.config.scene.picker.duplicate"
+          )})`,
+        },
+        entityRegEntry?.area_id || undefined
+      );
     }
   }
 

src/panels/config/script/ha-script-picker.ts

@@ -403,12 +403,12 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         },
         voice_assistants: {
           title: localize(
-            "ui.panel.config.script.picker.headers.voice_assistants"
+            "ui.panel.config.voice_assistants.expose.headers.assistants"
           ),
-          type: "icon",
+          type: "flex",
           defaultHidden: true,
-          minWidth: "100px",
-          maxWidth: "100px",
+          minWidth: "160px",
+          maxWidth: "160px",
           template: (script) => {
             const exposedToVoiceAssistantIds = getEntityVoiceAssistantsIds(
               this._entityReg,

src/panels/lovelace/cards/clock/hui-clock-card-analog.ts

@@ -2,8 +2,6 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
 import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
 import type { HomeAssistant } from "../../../../types";
 import type { ClockCardConfig } from "../types";
@@ -28,11 +26,6 @@ function romanize12HourClock(num: number) {
   return numerals[num];
 }
 
-const INTERVAL = 1000;
-const QUARTER_TICKS = Array.from({ length: 4 }, (_, i) => i);
-const HOUR_TICKS = Array.from({ length: 12 }, (_, i) => i);
-const MINUTE_TICKS = Array.from({ length: 60 }, (_, i) => i);
-
 @customElement("hui-clock-card-analog")
 export class HuiClockCardAnalog extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -47,49 +40,6 @@ export class HuiClockCardAnalog extends LitElement {
 
   @state() private _secondOffsetSec?: number;
 
-  @state() private _year = "";
-
-  @state() private _month = "";
-
-  @state() private _day = "";
-
-  private _tickInterval?: undefined | number;
-
-  private _currentDate = new Date();
-
-  public connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("visibilitychange", this._handleVisibilityChange);
-    this._computeDateTime();
-    if (this.config?.date && this.config.date !== "none") {
-      this._startTick();
-    }
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener(
-      "visibilitychange",
-      this._handleVisibilityChange
-    );
-    this._stopTick();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass?.locale) {
-        this._initDate();
-      }
-    }
-  }
-
-  private _handleVisibilityChange = () => {
-    if (!document.hidden) {
-      this._computeDateTime();
-    }
-  };
-
   private _initDate() {
     if (!this.config || !this.hass) {
       return;
@@ -101,27 +51,6 @@ export class HuiClockCardAnalog extends LitElement {
     }
 
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      ...(this.config.date && this.config.date !== "none"
-        ? this.config.date === "day"
-          ? {
-              day: "numeric",
-            }
-          : this.config.date === "day-month"
-            ? {
-                month: "short",
-                day: "numeric",
-              }
-            : this.config.date === "day-month-long"
-              ? {
-                  month: "long",
-                  day: "numeric",
-                }
-              : {
-                  year: "numeric",
-                  month: this.config.date === "long" ? "long" : "short",
-                  day: "numeric",
-                }
-        : {}),
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit",
@@ -131,31 +60,42 @@ export class HuiClockCardAnalog extends LitElement {
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
     });
 
-    this._computeDateTime();
+    this._computeOffsets();
   }
 
-  private _startTick() {
-    this._tick();
-    this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
-  }
-
-  private _stopTick() {
-    if (this._tickInterval) {
-      clearInterval(this._tickInterval);
-      this._tickInterval = undefined;
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!oldHass || oldHass.locale !== this.hass?.locale) {
+        this._initDate();
+      }
     }
   }
 
-  private _updateDate() {
-    this._currentDate = new Date();
+  public connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("visibilitychange", this._handleVisibilityChange);
+    this._computeOffsets();
   }
 
-  private _computeDateTime() {
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener(
+      "visibilitychange",
+      this._handleVisibilityChange
+    );
+  }
+
+  private _handleVisibilityChange = () => {
+    if (!document.hidden) {
+      this._computeOffsets();
+    }
+  };
+
+  private _computeOffsets() {
     if (!this._dateTimeFormat) return;
 
-    this._updateDate();
-
-    const parts = this._dateTimeFormat.formatToParts(this._currentDate);
+    const parts = this._dateTimeFormat.formatToParts();
     const hourStr = parts.find((p) => p.type === "hour")?.value;
     const minuteStr = parts.find((p) => p.type === "minute")?.value;
     const secondStr = parts.find((p) => p.type === "second")?.value;
@@ -163,7 +103,7 @@ export class HuiClockCardAnalog extends LitElement {
     const hour = hourStr ? parseInt(hourStr, 10) : 0;
     const minute = minuteStr ? parseInt(minuteStr, 10) : 0;
     const second = secondStr ? parseInt(secondStr, 10) : 0;
-    const ms = this._currentDate.getMilliseconds();
+    const ms = new Date().getMilliseconds();
     const secondsWithMs = second + ms / 1000;
 
     const hour12 = hour % 12;
@@ -171,38 +111,18 @@ export class HuiClockCardAnalog extends LitElement {
     this._secondOffsetSec = secondsWithMs;
     this._minuteOffsetSec = minute * 60 + secondsWithMs;
     this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs;
-
-    // Also update date parts if date is shown
-    if (this.config?.date && this.config.date !== "none") {
-      this._year = parts.find((p) => p.type === "year")?.value ?? "";
-      this._month = parts.find((p) => p.type === "month")?.value ?? "";
-      this._day = parts.find((p) => p.type === "day")?.value ?? "";
-    }
   }
 
-  private _tick() {
-    this._computeDateTime();
-  }
-
-  private _computeClock = memoizeOne((config: ClockCardConfig) => {
-    const faceParts = config.face_style?.split("_");
-    const isLongDate =
-      config.date === "day-month-long" || config.date === "long";
-
-    return {
-      sizeClass: config.clock_size ? `size-${config.clock_size}` : "",
-      isNumbers: faceParts?.includes("numbers") ?? false,
-      isRoman: faceParts?.includes("roman") ?? false,
-      isUpright: faceParts?.includes("upright") ?? false,
-      isLongDate,
-    };
-  });
-
   render() {
     if (!this.config) return nothing;
 
-    const { sizeClass, isNumbers, isRoman, isUpright, isLongDate } =
-      this._computeClock(this.config);
+    const sizeClass = this.config.clock_size
+      ? `size-${this.config.clock_size}`
+      : "";
+
+    const isNumbers = this.config?.face_style?.startsWith("numbers");
+    const isRoman = this.config?.face_style?.startsWith("roman");
+    const isUpright = this.config?.face_style?.endsWith("upright");
 
     const indicator = (number?: number) => html`
       <div
@@ -243,14 +163,14 @@ export class HuiClockCardAnalog extends LitElement {
           })}
         >
           ${this.config.ticks === "quarter"
-            ? QUARTER_TICKS.map(
+            ? Array.from({ length: 4 }, (_, i) => i).map(
                 (i) =>
                   // 4 ticks (12, 3, 6, 9) at 0°, 90°, 180°, 270°
                   html`
                     <div
                       aria-hidden="true"
                       class="tick hour"
-                      style=${styleMap({ "--tick-rotation": `${i * 90}deg` })}
+                      style=${`--tick-rotation: ${i * 90}deg;`}
                     >
                       ${indicator([12, 3, 6, 9][i])}
                     </div>
@@ -258,30 +178,28 @@ export class HuiClockCardAnalog extends LitElement {
               )
             : !this.config.ticks || // Default to hour ticks
                 this.config.ticks === "hour"
-              ? HOUR_TICKS.map(
+              ? Array.from({ length: 12 }, (_, i) => i).map(
                   (i) =>
                     // 12 ticks (1-12)
                     html`
                       <div
                         aria-hidden="true"
                         class="tick hour"
-                        style=${styleMap({ "--tick-rotation": `${i * 30}deg` })}
+                        style=${`--tick-rotation: ${i * 30}deg;`}
                       >
                         ${indicator(((i + 11) % 12) + 1)}
                       </div>
                     `
                 )
               : this.config.ticks === "minute"
-                ? MINUTE_TICKS.map(
+                ? Array.from({ length: 60 }, (_, i) => i).map(
                     (i) =>
                       // 60 ticks (1-60)
                       html`
                         <div
                           aria-hidden="true"
                           class="tick ${i % 5 === 0 ? "hour" : "minute"}"
-                          style=${styleMap({
-                            "--tick-rotation": `${i * 6}deg`,
-                          })}
+                          style=${`--tick-rotation: ${i * 6}deg;`}
                         >
                           ${i % 5 === 0
                             ? indicator(((i / 5 + 11) % 12) + 1)
@@ -290,33 +208,14 @@ export class HuiClockCardAnalog extends LitElement {
                       `
                   )
                 : nothing}
-          ${this.config?.date && this.config.date !== "none"
-            ? html`<div
-                class=${classMap({
-                  "date-parts": true,
-                  [sizeClass]: true,
-                  "long-date": isLongDate,
-                })}
-              >
-                <span class="date-part day-month"
-                  >${this._day} ${this._month}</span
-                >
-                <span class="date-part year">${this._year}</span>
-              </div>`
-            : nothing}
-
           <div class="center-dot"></div>
           <div
             class="hand hour"
-            style=${styleMap({
-              "animation-delay": `-${this._hourOffsetSec ?? 0}s`,
-            })}
+            style=${`animation-delay: -${this._hourOffsetSec ?? 0}s;`}
           ></div>
           <div
             class="hand minute"
-            style=${styleMap({
-              "animation-delay": `-${this._minuteOffsetSec ?? 0}s`,
-            })}
+            style=${`animation-delay: -${this._minuteOffsetSec ?? 0}s;`}
           ></div>
           ${this.config.show_seconds
             ? html`<div
@@ -325,13 +224,11 @@ export class HuiClockCardAnalog extends LitElement {
                   second: true,
                   step: this.config.seconds_motion === "tick",
                 })}
-                style=${styleMap({
-                  "animation-delay": `-${
-                    (this.config.seconds_motion === "tick"
-                      ? Math.floor(this._secondOffsetSec ?? 0)
-                      : (this._secondOffsetSec ?? 0)) as number
-                  }s`,
-                })}
+                style=${`animation-delay: -${
+                  (this.config.seconds_motion === "tick"
+                    ? Math.floor(this._secondOffsetSec ?? 0)
+                    : (this._secondOffsetSec ?? 0)) as number
+                }s;`}
               ></div>`
             : nothing}
         </div>
@@ -373,14 +270,6 @@ export class HuiClockCardAnalog extends LitElement {
       box-sizing: border-box;
     }
 
-    /* Modern browsers: Use container queries for responsive font sizing */
-    @supports (container-type: inline-size) {
-      .dial {
-        container-type: inline-size;
-        container-name: clock;
-      }
-    }
-
     .dial-border {
       border: 2px solid var(--divider-color);
       border-radius: var(--ha-border-radius-circle);
@@ -518,78 +407,6 @@ export class HuiClockCardAnalog extends LitElement {
         transform: translate(-50%, 0) rotate(360deg);
       }
     }
-
-    .date-parts {
-      position: absolute;
-      top: 68%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: grid;
-      align-items: center;
-      grid-template-areas:
-        "day-month"
-        "year";
-      direction: ltr;
-      color: var(--primary-text-color);
-      font-size: var(--ha-font-size-s);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: var(--ha-line-height-condensed);
-      text-align: center;
-      opacity: 0.8;
-      max-width: 87%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    /* Modern browsers: Use container queries for responsive font sizing */
-    @supports (container-type: inline-size) {
-      /* Small clock with long date: reduce to xs */
-      @container clock (max-width: 139px) {
-        .date-parts.long-date {
-          font-size: var(--ha-font-size-xs);
-        }
-      }
-
-      /* Medium clock: scale up */
-      @container clock (min-width: 140px) {
-        .date-parts {
-          font-size: var(--ha-font-size-l);
-        }
-      }
-
-      /* Large clock: scale up more */
-      @container clock (min-width: 200px) {
-        .date-parts {
-          font-size: var(--ha-font-size-xl);
-        }
-      }
-    }
-
-    /* Legacy browsers: Use existing size classes */
-    @supports not (container-type: inline-size) {
-      /* Small clock (no size class) with long date */
-      .date-parts.long-date:not(.size-medium):not(.size-large) {
-        font-size: var(--ha-font-size-xs);
-      }
-
-      .date-parts.size-medium {
-        font-size: var(--ha-font-size-l);
-      }
-
-      .date-parts.size-large {
-        font-size: var(--ha-font-size-xl);
-      }
-    }
-
-    .date-part.day-month {
-      grid-area: day-month;
-      overflow: hidden;
-    }
-
-    .date-part.year {
-      grid-area: year;
-      overflow: hidden;
-    }
   `;
 }
 

src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

@@ -24,8 +24,6 @@ export class HuiClockCardDigital extends LitElement {
 
   @state() private _timeAmPm?: string;
 
-  @state() private _date?: string;
-
   private _tickInterval?: undefined | number;
 
   private _initDate() {
@@ -41,27 +39,6 @@ export class HuiClockCardDigital extends LitElement {
 
     const h12 = useAmPm(locale);
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      ...(this.config.date && this.config.date !== "none"
-        ? this.config.date === "day"
-          ? {
-              day: "numeric",
-            }
-          : this.config.date === "day-month"
-            ? {
-                month: "short",
-                day: "numeric",
-              }
-            : this.config.date === "day-month-long"
-              ? {
-                  month: "long",
-                  day: "numeric",
-                }
-              : {
-                  year: "numeric",
-                  month: this.config.date === "long" ? "long" : "short",
-                  day: "numeric",
-                }
-        : {}),
       hour: h12 ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
@@ -116,16 +93,6 @@ export class HuiClockCardDigital extends LitElement {
       ? parts.find((part) => part.type === "second")?.value
       : undefined;
     this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
-
-    this._date = this.config?.date
-      ? [
-          parts.find((part) => part.type === "day")?.value,
-          parts.find((part) => part.type === "month")?.value,
-          parts.find((part) => part.type === "year")?.value,
-        ]
-          .filter(Boolean)
-          .join(" ")
-      : undefined;
   }
 
   render() {
@@ -146,9 +113,6 @@ export class HuiClockCardDigital extends LitElement {
           ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
           : nothing}
       </div>
-      ${this.config.date && this.config.date !== "none"
-        ? html`<div class="date ${sizeClass}">${this._date}</div>`
-        : nothing}
     `;
   }
 
@@ -224,20 +188,6 @@ export class HuiClockCardDigital extends LitElement {
       content: ":";
       margin: 0 2px;
     }
-
-    .date {
-      text-align: center;
-      opacity: 0.8;
-      font-size: var(--ha-font-size-s);
-    }
-
-    .date.size-medium {
-      font-size: var(--ha-font-size-l);
-    }
-
-    .date.size-large {
-      font-size: var(--ha-font-size-2xl);
-    }
   `;
 }
 

src/panels/lovelace/cards/hui-card.ts

@@ -73,13 +73,18 @@ export class HuiCard extends ConditionalListenerMixin<LovelaceCardConfig>(
     };
 
     // If the element has fixed rows or columns, we use the values from the element
+    // unless the user has already configured their own
     if (elementOptions.fixed_rows) {
-      mergedConfig.rows = elementOptions.rows;
+      if (configOptions.rows === undefined) {
+        mergedConfig.rows = elementOptions.rows;
+      }
       delete mergedConfig.min_rows;
       delete mergedConfig.max_rows;
     }
     if (elementOptions.fixed_columns) {
-      mergedConfig.columns = elementOptions.columns;
+      if (configOptions.columns === undefined) {
+        mergedConfig.columns = elementOptions.columns;
+      }
       delete mergedConfig.min_columns;
       delete mergedConfig.max_columns;
     }

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -11,7 +11,10 @@ import { findEntities } from "../common/find-entities";
 import type { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
-import type { PictureElementsCardConfig } from "./types";
+import {
+  PREVIEW_CLICK_CALLBACK,
+  type PictureElementsCardConfig,
+} from "./types";
 import type { PersonEntity } from "../../../data/person";
 
 @customElement("hui-picture-elements-card")
@@ -166,6 +169,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
             .aspectRatio=${this._config.aspect_ratio}
             .darkModeFilter=${this._config.dark_mode_filter}
             .darkModeImage=${darkModeImage}
+            @click=${this._handleImageClick}
           ></hui-image>
           ${this._elements}
         </div>
@@ -221,6 +225,19 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       curCardEl === elToReplace ? newCardEl : curCardEl
     );
   }
+
+  private _handleImageClick(ev: MouseEvent): void {
+    if (!this.preview || !this._config?.[PREVIEW_CLICK_CALLBACK]) {
+      return;
+    }
+
+    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = ((ev.clientX - rect.left) / rect.width) * 100;
+    const y = ((ev.clientY - rect.top) / rect.height) * 100;
+
+    // only the edited card has this callback
+    this._config[PREVIEW_CLICK_CALLBACK](x, y);
+  }
 }
 
 declare global {

src/panels/lovelace/cards/types.ts

@@ -421,7 +421,6 @@ export interface ClockCardConfig extends LovelaceCardConfig {
   time_format?: TimeFormat;
   time_zone?: string;
   no_background?: boolean;
-  date?: "none" | "short" | "long" | "day" | "day-month" | "day-month-long";
   // Analog clock options
   border?: boolean;
   ticks?: "none" | "quarter" | "hour" | "minute";
@@ -488,6 +487,10 @@ export interface PictureCardConfig extends LovelaceCardConfig {
   alt_text?: string;
 }
 
+// Symbol for preview click callback - preserved through spreads, not serialized
+// This allows the editor to attach a callback that only exists on the edited card's config
+export const PREVIEW_CLICK_CALLBACK = Symbol("previewClickCallback");
+
 export interface PictureElementsCardConfig extends LovelaceCardConfig {
   title?: string;
   image?: string | MediaSelectorValue;
@@ -502,6 +505,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
   theme?: string;
   dark_mode_image?: string | MediaSelectorValue;
   dark_mode_filter?: string;
+  [PREVIEW_CLICK_CALLBACK]?: (x: number, y: number) => void;
 }
 
 export interface PictureEntityCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-clock-card-editor.ts

@@ -39,19 +39,6 @@ const cardConfigStruct = assign(
     time_zone: optional(enums(Object.keys(timezones))),
     show_seconds: optional(boolean()),
     no_background: optional(boolean()),
-    date: optional(
-      defaulted(
-        union([
-          literal("none"),
-          literal("short"),
-          literal("long"),
-          literal("day"),
-          literal("day-month"),
-          literal("day-month-long"),
-        ]),
-        literal("none")
-      )
-    ),
     // Analog clock options
     border: optional(defaulted(boolean(), false)),
     ticks: optional(
@@ -106,7 +93,7 @@ export class HuiClockCardEditor
           name: "clock_style",
           selector: {
             select: {
-              mode: "box",
+              mode: "dropdown",
               options: ["digital", "analog"].map((value) => ({
                 value,
                 label: localize(
@@ -132,27 +119,6 @@ export class HuiClockCardEditor
         },
         { name: "show_seconds", selector: { boolean: {} } },
         { name: "no_background", selector: { boolean: {} } },
-        {
-          name: "date",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: [
-                "none",
-                "short",
-                "long",
-                "day",
-                "day-month",
-                "day-month-long",
-              ].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.dates.${value}`
-                ),
-              })),
-            },
-          },
-        },
         ...(clockStyle === "digital"
           ? ([
               {
@@ -294,14 +260,13 @@ export class HuiClockCardEditor
       ] as const satisfies readonly HaFormSchema[]
   );
 
-  private _data = memoizeOne((config: ClockCardConfig) => ({
+  private _data = memoizeOne((config) => ({
     clock_style: "digital",
     clock_size: "small",
     time_zone: "auto",
     time_format: "auto",
     show_seconds: false,
     no_background: false,
-    date: "none",
     // Analog clock options
     border: false,
     ticks: "hour",
@@ -325,9 +290,8 @@ export class HuiClockCardEditor
         .data=${this._data(this._config)}
         .schema=${this._schema(
           this.hass.localize,
-          this._data(this._config)
-            .clock_style as ClockCardConfig["clock_style"],
-          this._data(this._config).ticks as ClockCardConfig["ticks"],
+          this._data(this._config).clock_style,
+          this._data(this._config).ticks,
           this._data(this._config).show_seconds
         )}
         .computeLabel=${this._computeLabelCallback}
@@ -403,10 +367,6 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.no_background`
         );
-      case "date":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.date.label`
-        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.label`
@@ -432,10 +392,6 @@ export class HuiClockCardEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
     switch (schema.name) {
-      case "date":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.date.description`
-        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.description`

src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts

@@ -15,12 +15,16 @@ import {
 } from "superstruct";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
-import type { PictureElementsCardConfig } from "../../cards/types";
+import {
+  PREVIEW_CLICK_CALLBACK,
+  type PictureElementsCardConfig,
+} from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
@@ -28,7 +32,6 @@ import type { EditDetailElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "../hui-picture-elements-card-row-editor";
 import type { LovelaceElementConfig } from "../../elements/types";
-import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const genericElementConfigStruct = type({
@@ -66,6 +69,44 @@ export class HuiPictureElementsCardEditor
     this._config = config;
   }
 
+  private _onPreviewClick = (x: number, y: number): void => {
+    if (this._subElementEditorConfig?.type === "element") {
+      this._handlePositionClick(x, y);
+    }
+  };
+
+  private _handlePositionClick(x: number, y: number): void {
+    if (
+      !this._subElementEditorConfig?.elementConfig ||
+      this._subElementEditorConfig.type !== "element" ||
+      this._subElementEditorConfig.elementConfig.type === "conditional"
+    ) {
+      return;
+    }
+
+    const elementConfig = this._subElementEditorConfig
+      .elementConfig as LovelaceElementConfig;
+    const currentPosition = (elementConfig.style as Record<string, string>)
+      ?.position;
+    if (currentPosition && currentPosition !== "absolute") {
+      return;
+    }
+
+    const newElement = {
+      ...elementConfig,
+      style: {
+        ...((elementConfig.style as Record<string, string>) || {}),
+        left: `${Math.round(x)}%`,
+        top: `${Math.round(y)}%`,
+      },
+    };
+
+    const updateEvent = new CustomEvent("config-changed", {
+      detail: { config: newElement },
+    });
+    this._handleSubElementChanged(updateEvent);
+  }
+
   private _schema = memoizeOne(
     (localize: LocalizeFunc) =>
       [
@@ -138,6 +179,16 @@ export class HuiPictureElementsCardEditor
 
     if (this._subElementEditorConfig) {
       return html`
+        ${this._subElementEditorConfig.type === "element" &&
+        this._subElementEditorConfig.elementConfig?.type !== "conditional"
+          ? html`
+              <ha-alert alert-type="info">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.card.picture-elements.position_hint"
+                )}
+              </ha-alert>
+            `
+          : nothing}
         <hui-sub-element-editor
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
@@ -181,6 +232,7 @@ export class HuiPictureElementsCardEditor
       return;
     }
 
+    // no need to attach the preview click callback here, no element is being edited
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
@@ -191,7 +243,8 @@ export class HuiPictureElementsCardEditor
     const config = {
       ...this._config,
       elements: ev.detail.elements as LovelaceElementConfig[],
-    } as LovelaceCardConfig;
+      [PREVIEW_CLICK_CALLBACK]: this._onPreviewClick,
+    } as PictureElementsCardConfig;
 
     fireEvent(this, "config-changed", { config });
 
@@ -232,7 +285,12 @@ export class HuiPictureElementsCardEditor
       elementConfig: value,
     };
 
-    fireEvent(this, "config-changed", { config: this._config });
+    fireEvent(this, "config-changed", {
+      config: {
+        ...this._config,
+        [PREVIEW_CLICK_CALLBACK]: this._onPreviewClick,
+      },
+    });
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -144,7 +144,9 @@ export class HuiTileCardEditor
                   {
                     name: "state_content",
                     selector: {
-                      ui_state_content: {},
+                      ui_state_content: {
+                        allow_context: true,
+                      },
                     },
                     context: {
                       filter_entity: "entity",

src/panels/lovelace/editor/get-element-stub-config.ts

@@ -10,7 +10,9 @@ export const getElementStubConfig = async (
 ): Promise<LovelaceElementConfig> => {
   let elementConfig: LovelaceElementConfig = { type };
 
-  if (type !== "conditional") {
+  if (type === "conditional") {
+    elementConfig = { type, conditions: [], elements: [] };
+  } else {
     elementConfig.style = { left: "50%", top: "50%" };
   }
 

src/panels/lovelace/editor/hui-element-editor.ts

@@ -89,7 +89,11 @@ export abstract class HuiElementEditor<
   }
 
   public set value(config: T | undefined) {
-    if (this._config && deepEqual(config, this._config)) {
+    // Compare symbols to detect callback changes (e.g., preview click handlers)
+    if (
+      this._config &&
+      deepEqual(config, this._config, { compareSymbols: true })
+    ) {
       return;
     }
     this._config = config;

src/panels/lovelace/strategies/usage_prediction/common-controls-section-strategy.ts

@@ -83,6 +83,15 @@ export class CommonControlsSectionStrategy extends ReactiveElement {
             ({
               type: "tile",
               entity: entityId,
+              name: [
+                {
+                  type: "device",
+                },
+                {
+                  type: "entity",
+                },
+              ],
+              state_content: ["state", "area_name"],
               show_entity_picture: true,
             }) satisfies TileCardConfig
         )

src/resources/codemirror.ts

@@ -15,7 +15,11 @@ import { tags } from "@lezer/highlight";
 export { autocompletion } from "@codemirror/autocomplete";
 export { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 export { highlightingFor, foldGutter } from "@codemirror/language";
-export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+export {
+  highlightSelectionMatches,
+  search,
+  searchKeymap,
+} from "@codemirror/search";
 export { EditorState } from "@codemirror/state";
 export {
   crosshairCursor,

src/resources/theme/color/semantic.globals.ts

@@ -15,27 +15,27 @@ export const semanticColorStyles = css`
     --ha-color-text-disabled: var(--ha-color-neutral-60);
     --ha-color-text-link: var(--ha-color-primary-40);
     /* border primary */
-    --ha-color-border-primary-quiet: var(--ha-color-primary-80);
+    --ha-color-border-primary-quiet: var(--ha-color-primary-90);
     --ha-color-border-primary-normal: var(--ha-color-primary-70);
     --ha-color-border-primary-loud: var(--ha-color-primary-40);
 
     /* border neutral */
-    --ha-color-border-neutral-quiet: var(--ha-color-neutral-80);
+    --ha-color-border-neutral-quiet: var(--ha-color-neutral-90);
     --ha-color-border-neutral-normal: var(--ha-color-neutral-60);
     --ha-color-border-neutral-loud: var(--ha-color-neutral-40);
 
     /* border danger */
-    --ha-color-border-danger-quiet: var(--ha-color-red-80);
+    --ha-color-border-danger-quiet: var(--ha-color-red-90);
     --ha-color-border-danger-normal: var(--ha-color-red-70);
     --ha-color-border-danger-loud: var(--ha-color-red-40);
 
     /* border warning */
-    --ha-color-border-warning-quiet: var(--ha-color-orange-80);
+    --ha-color-border-warning-quiet: var(--ha-color-orange-90);
     --ha-color-border-warning-normal: var(--ha-color-orange-70);
     --ha-color-border-warning-loud: var(--ha-color-orange-40);
 
     /* border success */
-    --ha-color-border-success-quiet: var(--ha-color-green-80);
+    --ha-color-border-success-quiet: var(--ha-color-green-90);
     --ha-color-border-success-normal: var(--ha-color-green-70);
     --ha-color-border-success-loud: var(--ha-color-green-40);
 

src/state-display/state-display.ts

@@ -103,6 +103,15 @@ class StateDisplay extends LitElement {
       return html`${this.name}`;
     }
 
+    if (
+      content === "device_name" ||
+      content === "area_name" ||
+      content === "floor_name"
+    ) {
+      const type = content.replace("_name", "") as "device" | "area" | "floor";
+      return this.hass.formatEntityName(stateObj, { type }) || undefined;
+    }
+
     let relativeDateTime: string | Date | undefined;
 
     // Check last-changed for backwards compatibility

src/translations/en.json

@@ -1298,7 +1298,10 @@
         "last_changed": "Last changed",
         "last_updated": "Last updated",
         "remaining_time": "Remaining time",
-        "install_status": "Install status"
+        "install_status": "Install status",
+        "device_name": "Device name",
+        "area_name": "Area name",
+        "floor_name": "Floor name"
       },
       "multi-textfield": {
         "add_item": "Add {item}"
@@ -3341,8 +3344,7 @@
               "type": "Type",
               "editable": "Editable",
               "category": "Category",
-              "area": "Area",
-              "voice_assistants": "Voice assistants"
+              "area": "Area"
             },
             "create_helper": "Create helper",
             "no_helpers": "Looks like you don't have any helpers yet!",
@@ -6018,15 +6020,14 @@
         },
         "bluetooth": {
           "title": "Bluetooth",
+          "tabs": {
+            "overview": "Overview",
+            "advertisements": "Advertisements",
+            "visualization": "Visualization",
+            "connections": "Connections"
+          },
           "settings_title": "Bluetooth adapters",
           "option_flow": "Configure Bluetooth options",
-          "advertisement_monitor": "Advertisement monitor",
-          "advertisement_monitor_details": "The advertisement monitor listens for Bluetooth advertisements and displays the data in a structured format.",
-          "connection_slot_allocations_monitor": "Connection slot allocations monitor",
-          "connection_slot_allocations_monitor_description": "The connection slot allocations monitor displays the (GATT) connection slot allocations for each adapter. Each remote Bluetooth device that requires an active connection will use one connection slot while the Bluetooth device is connecting or connected.",
-          "connection_monitor": "Connection monitor",
-          "visualization": "Visualization",
-          "used_connection_slot_allocations": "Used connection slot allocations",
           "no_connections": "No active connections",
           "active_connections": "connections",
           "no_advertisements_found": "No matching Bluetooth advertisements found",
@@ -6034,8 +6035,6 @@
           "no_connection_slots": "No connection slots",
           "no_scanner_state_available": "No scanner state available",
           "scanner_state_unknown": "State unknown",
-          "current_scanning_mode": "Current scanning mode",
-          "requested_scanning_mode": "Requested scanning mode",
           "scanning_mode_none": "none",
           "scanning_mode_active": "active",
           "scanning_mode_passive": "passive",
@@ -6060,7 +6059,6 @@
           "service_uuids": "Service UUIDs",
           "copy_to_clipboard": "[%key:ui::panel::config::automation::editor::copy_to_clipboard%]",
           "area": "Area",
-          "core": "Home Assistant",
           "scanners": "Scanners",
           "known_devices": "Known devices",
           "unknown_devices": "Unknown devices"
@@ -8241,18 +8239,6 @@
                 "large": "Large"
               },
               "show_seconds": "Display seconds",
-              "date": {
-                "label": "Date",
-                "description": "Whether to show the date on the clock. Can also be a custom date format."
-              },
-              "dates": {
-                "none": "No date",
-                "short": "Short",
-                "long": "Long",
-                "day": "Day only",
-                "day-month": "Day and month",
-                "day-month-long": "Day and month (long)"
-              },
               "time_format": "[%key:ui::panel::profile::time_format::dropdown_label%]",
               "time_formats": {
                 "auto": "Use user settings",
@@ -8338,6 +8324,7 @@
               "dark_mode_image": "Dark mode image path",
               "state_filter": "State filter",
               "dark_mode_filter": "Dark mode state filter",
+              "position_hint": "Click on the image preview to position this element",
               "element_types": {
                 "state-badge": "State badge",
                 "state-icon": "State icon",