<div
  #dateFieldGroup
  [formGroup]="internalForm"
  class="tw-flex tw-flex-wrap tw-gap-1"
  (focusout)="onGroupBlur($event)"
>
  <bit-form-field class="tw-flex-1">
    <bit-label>{{ monthLabel() }}</bit-label>
    <bit-select formControlName="month">
      @for (month of months; track month.value) {
        <bit-option [value]="month.value" [label]="month.name"></bit-option>
      }
    </bit-select>
  </bit-form-field>

  <bit-form-field class="tw-flex-1">
    <bit-label>{{ dayLabel() }}</bit-label>
    <input bitInput type="text" inputmode="numeric" maxlength="2" formControlName="day" />
  </bit-form-field>

  <bit-form-field class="tw-flex-1">
    <bit-label>{{ yearLabel() }}</bit-label>
    <input bitInput type="text" inputmode="numeric" maxlength="4" formControlName="year" />
  </bit-form-field>
</div>
