Only show "required" indicator if we have a selector label (#12241)

src/components/ha-base-time-input.ts

@@ -131,7 +131,7 @@ export class HaBaseTimeInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.label
-        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
+        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
         : ""}
       <div class="time-input-wrap">
         ${this.enableDay

src/components/ha-labeled-slider.js

@@ -53,7 +53,7 @@ class HaLabeledSlider extends PolymerElement {
   }
 
   _getTitle() {
-    return `${this.caption}${this.required ? "*" : ""}`;
+    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
   }
 
   static get properties() {

src/components/ha-selector/ha-selector-color-temp.ts

@@ -26,7 +26,7 @@ export class HaColorTempSelector extends LitElement {
       <ha-labeled-slider
         pin
         icon="hass:thermometer"
-        .caption=${this.label}
+        .caption=${this.label || ""}
         .min=${this.selector.color_temp.min_mireds ?? 153}
         .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}

src/components/ha-selector/ha-selector-number.ts

@@ -30,7 +30,7 @@ export class HaNumberSelector extends LitElement {
     const isBox = this.selector.number.mode === "box";
 
     return html`
-      ${this.label}${this.required ? "*" : ""}
+      ${this.label ? html`${this.label}${this.required ? " *" : ""}` : ""}
       <div class="input">
         ${!isBox
           ? html`<ha-slider

src/components/ha-yaml-editor.ts

@@ -61,7 +61,9 @@ export class HaYamlEditor extends LitElement {
       return html``;
     }
     return html`
-      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
+      ${this.label
+        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
+        : ""}
       <ha-code-editor
         .hass=${this.hass}
         .value=${this._yaml}