Setup

src/components/ha-numeric-arrow-input.ts

@@ -40,7 +40,7 @@ export class HaNumericArrowInput extends LitElement {
         .path=${mdiArrowUp}
         @click=${this._up}
       ></ha-icon-button>
-      ${this._value}
+      <span class="numeric-arrow-input-value">${this._value}</span>
       <ha-icon-button
         .label=${this.labelDown ?? ""}
         .path=${mdiArrowDown}
@@ -85,6 +85,15 @@ export class HaNumericArrowInput extends LitElement {
       border: 1px solid var(--ha-border-color);
       border-radius: 4px;
     }
+
+    .numeric-arrow-input-container ha-icon-button {
+      --mdc-icon-button-size: 24px;
+    }
+
+    .numeric-arrow-input-value {
+      font-size: 16px;
+      font-weight: 500;
+    }
   `;
 }
 

src/components/ha-time-picker.ts

@@ -12,14 +12,13 @@ import "./ha-button";
 export class HaTimePicker extends LitElement {
   @property({ attribute: false }) public locale!: FrontendLocaleData;
 
-  @property() public value?: string;
+  @property({ attribute: false }) public value?: string;
 
-  @property({ type: Boolean }) public disabled = false;
+  @property({ attribute: false }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
+  @property({ attribute: false }) public required = false;
 
-  @property({ type: Boolean, attribute: "enable-second" })
-  public enableSecond = false;
+  @property({ attribute: false }) public enableSeconds = false;
 
   @state() private _hours = 0;
 
@@ -83,7 +82,7 @@ export class HaTimePicker extends LitElement {
         @value-changed=${this._minutesChanged}
       ></ha-numeric-arrow-input>
 
-      ${this.enableSecond
+      ${this.enableSeconds
         ? html`
             <ha-numeric-arrow-input
               .disabled=${this.disabled}