From abaa405fb6ff59e7ac37b09588619694ceb9b0f0 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Mon, 6 Nov 2023 21:12:28 +0100
Subject: [PATCH 1/9] initial attempt at clearable time selector

---
 src/components/ha-base-time-input.ts          | 36 ++++++++++++++++++-
 .../ha-selector/ha-selector-time.ts           |  1 +
 src/components/ha-time-input.ts               |  7 +++-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 54490e047bbb..d9733aa0f950 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -1,10 +1,12 @@
 import "@material/mwc-list/mwc-list-item";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { mdiClose } from "@mdi/js";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
+import "./ha-icon-button";
 import { HaTextField } from "./ha-textfield";
 import "./ha-input-helper-text";
 
@@ -124,6 +126,8 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() amPm: "AM" | "PM" = "AM";
 
+  @property({ type: Boolean, reflect: true }) public clearable?: boolean;
+
   protected render(): TemplateResult {
     return html`
       ${this.label
@@ -249,6 +253,13 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="AM">AM</mwc-list-item>
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
+        ${this.clearable && !this.required && !this.disabled
+          ? html`<ha-icon-button
+              label="clear"
+              @click=${this._clearValue}
+              .path=${mdiClose}
+            ></ha-icon-button>`
+          : nothing}
       </div>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
@@ -256,6 +267,14 @@ export class HaBaseTimeInput extends LitElement {
     `;
   }
 
+  private _clearValue(): void {
+    const value = undefined;
+
+    fireEvent(this, "value-changed", {
+      value,
+    });
+  }
+
   private _valueChanged(ev: InputEvent) {
     const textField = ev.currentTarget as HaTextField;
     this[textField.name] =
@@ -302,6 +321,9 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   static styles = css`
+    :host([clearable]) {
+      position: relative;
+    }
     :host {
       display: block;
     }
@@ -335,6 +357,18 @@ export class HaBaseTimeInput extends LitElement {
       --mdc-shape-small: 0;
       width: 85px;
     }
+    :host([clearable]) .mdc-select__anchor {
+        padding-inline-end: var(--select-selected-text-padding-end, 12px);
+    }
+    ha-icon-button {
+      position: relative
+      --mdc-icon-button-size: 36px;
+      --mdc-icon-size: 20px;
+      color: var(--secondary-text-color);
+      direction: var(--direction);
+      display: flex;
+      align-items: center;
+    }
     label {
       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased;
diff --git a/src/components/ha-selector/ha-selector-time.ts b/src/components/ha-selector/ha-selector-time.ts
index ceb8d9fe93eb..bacba114fc87 100644
--- a/src/components/ha-selector/ha-selector-time.ts
+++ b/src/components/ha-selector/ha-selector-time.ts
@@ -27,6 +27,7 @@ export class HaTimeSelector extends LitElement {
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .required=${this.required}
+        clearable
         .helper=${this.helper}
         .label=${this.label}
         enable-second
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 29893298dc60..9f09a2b5a2eb 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -23,6 +23,8 @@ export class HaTimeInput extends LitElement {
   @property({ type: Boolean, attribute: "enable-second" })
   public enableSecond = false;
 
+  @property({ type: Boolean, reflect: true }) public clearable?: boolean;
+
   protected render() {
     const useAMPM = useAmPm(this.locale);
 
@@ -48,6 +50,7 @@ export class HaTimeInput extends LitElement {
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
         .required=${this.required}
+        .clearable=${this.clearable}
         .helper=${this.helper}
       ></ha-base-time-input>
     `;
@@ -60,7 +63,9 @@ export class HaTimeInput extends LitElement {
     const useAMPM = useAmPm(this.locale);
     let value;
 
-    if (
+    if (typeof eventValue === "undefined") {
+      value = undefined;
+    } else if (
       !isNaN(eventValue.hours) ||
       !isNaN(eventValue.minutes) ||
       !isNaN(eventValue.seconds)

From e23062975ce620e5a9861ca898c367cc08ae6f86 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Thu, 9 Nov 2023 22:13:50 +0100
Subject: [PATCH 2/9] only show clear button if there is a value

---
 src/components/ha-time-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 9f09a2b5a2eb..5d35d56395b8 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -50,7 +50,7 @@ export class HaTimeInput extends LitElement {
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
         .required=${this.required}
-        .clearable=${this.clearable}
+        .clearable=${this.clearable && this.value !== undefined}
         .helper=${this.helper}
       ></ha-base-time-input>
     `;

From de78b87779873b802a22189fbdfd51ab74063752 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Thu, 16 Nov 2023 19:09:37 +0100
Subject: [PATCH 3/9] use null instead of undefined.

---
 src/components/ha-base-time-input.ts |  4 +---
 src/components/ha-time-input.ts      | 15 ++++++++-------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index d9733aa0f950..61fa7946a1ee 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -268,10 +268,8 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   private _clearValue(): void {
-    const value = undefined;
-
     fireEvent(this, "value-changed", {
-      value,
+      value: null,
     });
   }
 
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 5d35d56395b8..908a5830efe5 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -56,19 +56,20 @@ export class HaTimeInput extends LitElement {
     `;
   }
 
-  private _timeChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+  private _timeChanged(ev: CustomEvent<{ value: TimeChangedEvent | null }>) {
     ev.stopPropagation();
     const eventValue = ev.detail.value;
 
     const useAMPM = useAmPm(this.locale);
     let value;
 
-    if (typeof eventValue === "undefined") {
-      value = undefined;
-    } else if (
-      !isNaN(eventValue.hours) ||
-      !isNaN(eventValue.minutes) ||
-      !isNaN(eventValue.seconds)
+    // An eventValue of null means the value is being cleared,
+    // and value will (intentionally) be left undefined.
+    if (
+      eventValue !== null &&
+      (!isNaN(eventValue.hours) ||
+        !isNaN(eventValue.minutes) ||
+        !isNaN(eventValue.seconds))
     ) {
       let hours = eventValue.hours || 0;
       if (eventValue && useAMPM) {

From 3f1ec346e7e256b3322f038e7bfa66b93ea692ca Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 2 Dec 2023 15:06:38 +0100
Subject: [PATCH 4/9] leave event value undefined

---
 src/components/ha-base-time-input.ts | 4 +---
 src/components/ha-time-input.ts      | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 61fa7946a1ee..811e525f19a3 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -268,9 +268,7 @@ export class HaBaseTimeInput extends LitElement {
   }
 
   private _clearValue(): void {
-    fireEvent(this, "value-changed", {
-      value: null,
-    });
+    fireEvent(this, "value-changed");
   }
 
   private _valueChanged(ev: InputEvent) {
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 908a5830efe5..5287ea51d0ec 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -56,17 +56,17 @@ export class HaTimeInput extends LitElement {
     `;
   }
 
-  private _timeChanged(ev: CustomEvent<{ value: TimeChangedEvent | null }>) {
+  private _timeChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
     ev.stopPropagation();
     const eventValue = ev.detail.value;
 
     const useAMPM = useAmPm(this.locale);
     let value;
 
-    // An eventValue of null means the value is being cleared,
-    // and value will (intentionally) be left undefined.
+    // An undefined eventValue means the time selector is being cleared,
+    // the `value` variable will (intentionally) be left undefined.
     if (
-      eventValue !== null &&
+      eventValue !== undefined &&
       (!isNaN(eventValue.hours) ||
         !isNaN(eventValue.minutes) ||
         !isNaN(eventValue.seconds))

From 4a8b1541f26ececd6dcaf7b0007ae7c3fd0145f9 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 13 Jul 2024 15:52:01 +0200
Subject: [PATCH 5/9] move clear button into input

---
 src/components/ha-base-time-input.ts | 47 +++++++++++++++-------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 811e525f19a3..dab71209f352 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -79,27 +79,27 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * Label for the day input
    */
-  @property() dayLabel = "";
+  @property() dayLabel = "Day";
 
   /**
    * Label for the hour input
    */
-  @property() hourLabel = "";
+  @property() hourLabel = "Hour";
 
   /**
    * Label for the min input
    */
-  @property() minLabel = "";
+  @property() minLabel = "Minute";
 
   /**
    * Label for the sec input
    */
-  @property() secLabel = "";
+  @property() secLabel = "Second";
 
   /**
    * Label for the milli sec input
    */
-  @property() millisecLabel = "";
+  @property() millisecLabel = "Milisecond";
 
   /**
    * show the sec field
@@ -238,21 +238,6 @@ export class HaBaseTimeInput extends LitElement {
             >
             </ha-textfield>`
           : ""}
-        ${this.format === 24
-          ? ""
-          : html`<ha-select
-              .required=${this.required}
-              .value=${this.amPm}
-              .disabled=${this.disabled}
-              name="amPm"
-              naturalMenuWidth
-              fixedMenuPosition
-              @selected=${this._valueChanged}
-              @closed=${stopPropagation}
-            >
-              <mwc-list-item value="AM">AM</mwc-list-item>
-              <mwc-list-item value="PM">PM</mwc-list-item>
-            </ha-select>`}
         ${this.clearable && !this.required && !this.disabled
           ? html`<ha-icon-button
               label="clear"
@@ -261,6 +246,22 @@ export class HaBaseTimeInput extends LitElement {
             ></ha-icon-button>`
           : nothing}
       </div>
+
+      ${this.format === 24
+        ? ""
+        : html`<ha-select
+            .required=${this.required}
+            .value=${this.amPm}
+            .disabled=${this.disabled}
+            name="amPm"
+            naturalMenuWidth
+            fixedMenuPosition
+            @selected=${this._valueChanged}
+            @closed=${stopPropagation}
+          >
+            <mwc-list-item value="AM">AM</mwc-list-item>
+            <mwc-list-item value="PM">PM</mwc-list-item>
+          </ha-select>`}
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
         : ""}
@@ -321,7 +322,7 @@ export class HaBaseTimeInput extends LitElement {
       position: relative;
     }
     :host {
-      display: block;
+      display: flex;
     }
     .time-input-wrap {
       display: flex;
@@ -329,9 +330,10 @@ export class HaBaseTimeInput extends LitElement {
       overflow: hidden;
       position: relative;
       direction: ltr;
+      padding-right: 3px;
     }
     ha-textfield {
-      width: 40px;
+      width: 55px;
       text-align: center;
       --mdc-shape-small: 0;
       --text-field-appearance: none;
@@ -364,6 +366,7 @@ export class HaBaseTimeInput extends LitElement {
       direction: var(--direction);
       display: flex;
       align-items: center;
+      background-color:var(--mdc-text-field-fill-color, whitesmoke)
     }
     label {
       -moz-osx-font-smoothing: grayscale;

From 122f0bf7cc123929c21222e30fd2e4f91b1621e8 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Wed, 17 Jul 2024 20:07:05 +0200
Subject: [PATCH 6/9] add line

---
 src/components/ha-base-time-input.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index dab71209f352..6a80b2f4f0f2 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -366,7 +366,9 @@ export class HaBaseTimeInput extends LitElement {
       direction: var(--direction);
       display: flex;
       align-items: center;
-      background-color:var(--mdc-text-field-fill-color, whitesmoke)
+      background-color:var(--mdc-text-field-fill-color, whitesmoke);
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
     }
     label {
       -moz-osx-font-smoothing: grayscale;

From f78139545740d81f3f890c16ac973fb16cfd73eb Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Fri, 19 Jul 2024 12:10:40 +0200
Subject: [PATCH 7/9] Update src/components/ha-time-input.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/ha-time-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 5287ea51d0ec..696dbef4aac5 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -61,7 +61,7 @@ export class HaTimeInput extends LitElement {
     const eventValue = ev.detail.value;
 
     const useAMPM = useAmPm(this.locale);
-    let value;
+    let value: string | undefined;
 
     // An undefined eventValue means the time selector is being cleared,
     // the `value` variable will (intentionally) be left undefined.

From 5227541f72777b284a1a785ad5fb3eb24553772e Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 20 Jul 2024 12:35:00 +0200
Subject: [PATCH 8/9] improve label appearance

---
 src/components/ha-base-time-input.ts | 239 ++++++++++++++-------------
 1 file changed, 122 insertions(+), 117 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 6a80b2f4f0f2..7c9e75035229 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -133,138 +133,140 @@ export class HaBaseTimeInput extends LitElement {
       ${this.label
         ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
         : ""}
-      <div class="time-input-wrap">
-        ${this.enableDay
-          ? html`
-              <ha-textfield
-                id="day"
+      <div class="time-input-wrap-wrap">
+        <div class="time-input-wrap">
+          ${this.enableDay
+            ? html`
+                <ha-textfield
+                  id="day"
+                  type="number"
+                  inputmode="numeric"
+                  .value=${this.days.toFixed()}
+                  .label=${this.dayLabel}
+                  name="days"
+                  @change=${this._valueChanged}
+                  @focusin=${this._onFocus}
+                  no-spinner
+                  .required=${this.required}
+                  .autoValidate=${this.autoValidate}
+                  min="0"
+                  .disabled=${this.disabled}
+                  suffix=":"
+                  class="hasSuffix"
+                >
+                </ha-textfield>
+              `
+            : ""}
+
+          <ha-textfield
+            id="hour"
+            type="number"
+            inputmode="numeric"
+            .value=${this.hours.toFixed()}
+            .label=${this.hourLabel}
+            name="hours"
+            @change=${this._valueChanged}
+            @focusin=${this._onFocus}
+            no-spinner
+            .required=${this.required}
+            .autoValidate=${this.autoValidate}
+            maxlength="2"
+            max=${ifDefined(this._hourMax)}
+            min="0"
+            .disabled=${this.disabled}
+            suffix=":"
+            class="hasSuffix"
+          >
+          </ha-textfield>
+          <ha-textfield
+            id="min"
+            type="number"
+            inputmode="numeric"
+            .value=${this._formatValue(this.minutes)}
+            .label=${this.minLabel}
+            @change=${this._valueChanged}
+            @focusin=${this._onFocus}
+            name="minutes"
+            no-spinner
+            .required=${this.required}
+            .autoValidate=${this.autoValidate}
+            maxlength="2"
+            max="59"
+            min="0"
+            .disabled=${this.disabled}
+            .suffix=${this.enableSecond ? ":" : ""}
+            class=${this.enableSecond ? "has-suffix" : ""}
+          >
+          </ha-textfield>
+          ${this.enableSecond
+            ? html`<ha-textfield
+                id="sec"
                 type="number"
                 inputmode="numeric"
-                .value=${this.days.toFixed()}
-                .label=${this.dayLabel}
-                name="days"
+                .value=${this._formatValue(this.seconds)}
+                .label=${this.secLabel}
                 @change=${this._valueChanged}
                 @focusin=${this._onFocus}
+                name="seconds"
                 no-spinner
                 .required=${this.required}
                 .autoValidate=${this.autoValidate}
+                maxlength="2"
+                max="59"
                 min="0"
                 .disabled=${this.disabled}
-                suffix=":"
-                class="hasSuffix"
+                .suffix=${this.enableMillisecond ? ":" : ""}
+                class=${this.enableMillisecond ? "has-suffix" : ""}
               >
-              </ha-textfield>
-            `
-          : ""}
-
-        <ha-textfield
-          id="hour"
-          type="number"
-          inputmode="numeric"
-          .value=${this.hours.toFixed()}
-          .label=${this.hourLabel}
-          name="hours"
-          @change=${this._valueChanged}
-          @focusin=${this._onFocus}
-          no-spinner
-          .required=${this.required}
-          .autoValidate=${this.autoValidate}
-          maxlength="2"
-          max=${ifDefined(this._hourMax)}
-          min="0"
-          .disabled=${this.disabled}
-          suffix=":"
-          class="hasSuffix"
-        >
-        </ha-textfield>
-        <ha-textfield
-          id="min"
-          type="number"
-          inputmode="numeric"
-          .value=${this._formatValue(this.minutes)}
-          .label=${this.minLabel}
-          @change=${this._valueChanged}
-          @focusin=${this._onFocus}
-          name="minutes"
-          no-spinner
-          .required=${this.required}
-          .autoValidate=${this.autoValidate}
-          maxlength="2"
-          max="59"
-          min="0"
-          .disabled=${this.disabled}
-          .suffix=${this.enableSecond ? ":" : ""}
-          class=${this.enableSecond ? "has-suffix" : ""}
-        >
-        </ha-textfield>
-        ${this.enableSecond
-          ? html`<ha-textfield
-              id="sec"
-              type="number"
-              inputmode="numeric"
-              .value=${this._formatValue(this.seconds)}
-              .label=${this.secLabel}
-              @change=${this._valueChanged}
-              @focusin=${this._onFocus}
-              name="seconds"
-              no-spinner
-              .required=${this.required}
-              .autoValidate=${this.autoValidate}
-              maxlength="2"
-              max="59"
-              min="0"
-              .disabled=${this.disabled}
-              .suffix=${this.enableMillisecond ? ":" : ""}
-              class=${this.enableMillisecond ? "has-suffix" : ""}
-            >
-            </ha-textfield>`
-          : ""}
-        ${this.enableMillisecond
-          ? html`<ha-textfield
-              id="millisec"
-              type="number"
-              .value=${this._formatValue(this.milliseconds, 3)}
-              .label=${this.millisecLabel}
-              @change=${this._valueChanged}
-              @focusin=${this._onFocus}
-              name="milliseconds"
-              no-spinner
+              </ha-textfield>`
+            : ""}
+          ${this.enableMillisecond
+            ? html`<ha-textfield
+                id="millisec"
+                type="number"
+                .value=${this._formatValue(this.milliseconds, 3)}
+                .label=${this.millisecLabel}
+                @change=${this._valueChanged}
+                @focusin=${this._onFocus}
+                name="milliseconds"
+                no-spinner
+                .required=${this.required}
+                .autoValidate=${this.autoValidate}
+                maxlength="3"
+                max="999"
+                min="0"
+                .disabled=${this.disabled}
+              >
+              </ha-textfield>`
+            : ""}
+          ${this.clearable && !this.required && !this.disabled
+            ? html`<ha-icon-button
+                label="clear"
+                @click=${this._clearValue}
+                .path=${mdiClose}
+              ></ha-icon-button>`
+            : nothing}
+        </div>
+
+        ${this.format === 24
+          ? ""
+          : html`<ha-select
               .required=${this.required}
-              .autoValidate=${this.autoValidate}
-              maxlength="3"
-              max="999"
-              min="0"
+              .value=${this.amPm}
               .disabled=${this.disabled}
+              name="amPm"
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._valueChanged}
+              @closed=${stopPropagation}
             >
-            </ha-textfield>`
+              <mwc-list-item value="AM">AM</mwc-list-item>
+              <mwc-list-item value="PM">PM</mwc-list-item>
+            </ha-select>`}
+        ${this.helper
+          ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
           : ""}
-        ${this.clearable && !this.required && !this.disabled
-          ? html`<ha-icon-button
-              label="clear"
-              @click=${this._clearValue}
-              .path=${mdiClose}
-            ></ha-icon-button>`
-          : nothing}
       </div>
-
-      ${this.format === 24
-        ? ""
-        : html`<ha-select
-            .required=${this.required}
-            .value=${this.amPm}
-            .disabled=${this.disabled}
-            name="amPm"
-            naturalMenuWidth
-            fixedMenuPosition
-            @selected=${this._valueChanged}
-            @closed=${stopPropagation}
-          >
-            <mwc-list-item value="AM">AM</mwc-list-item>
-            <mwc-list-item value="PM">PM</mwc-list-item>
-          </ha-select>`}
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
     `;
   }
 
@@ -322,6 +324,9 @@ export class HaBaseTimeInput extends LitElement {
       position: relative;
     }
     :host {
+      display: block;
+    }
+    .time-input-wrap-wrap {
       display: flex;
     }
     .time-input-wrap {

From 274037e65230d0ac583ed76cc614ccd8738a27e7 Mon Sep 17 00:00:00 2001
From: schelv <13403863+schelv@users.noreply.github.com>
Date: Sat, 20 Jul 2024 13:48:36 +0200
Subject: [PATCH 9/9] remove the label values

---
 src/components/ha-base-time-input.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 7c9e75035229..71870d27490d 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -79,27 +79,27 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * Label for the day input
    */
-  @property() dayLabel = "Day";
+  @property() dayLabel = "";
 
   /**
    * Label for the hour input
    */
-  @property() hourLabel = "Hour";
+  @property() hourLabel = "";
 
   /**
    * Label for the min input
    */
-  @property() minLabel = "Minute";
+  @property() minLabel = "";
 
   /**
    * Label for the sec input
    */
-  @property() secLabel = "Second";
+  @property() secLabel = "";
 
   /**
    * Label for the milli sec input
    */
-  @property() millisecLabel = "Milisecond";
+  @property() millisecLabel = "";
 
   /**
    * show the sec field