initial attempt at clearable time selector

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,13 +253,28 @@ 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>`
         : ""}
     `;
   }
 
+  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;

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

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)