Time Field

<script setup lang="ts">
import { Label, TimeFieldInput, TimeFieldRoot } from 'akar';

import './styles.css';
</script>

<template>
  <div class="akar-demo akar-demo-TimeField">
    <div class="TimeFieldWrapper">
      <Label
        class="TimeFieldLabel"
        for="time-field"
      >Appointment</Label>
      <TimeFieldRoot
        id="time-field"
        v-slot="{ segments }"
        granularity="second"
        class="TimeField"
      >
        <template
          v-for="item in segments"
          :key="item.part"
        >
          <TimeFieldInput
            v-if="item.part === 'literal'"
            :part="item.part"
            class="TimeFieldLiteral"
          >
            {{ item.value }}
          </TimeFieldInput>
          <TimeFieldInput
            v-else
            :part="item.part"
            class="TimeFieldSegment"
          >
            {{ item.value }}
          </TimeFieldInput>
        </template>
      </TimeFieldRoot>
    </div>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/mauve.css';
@import '../_colors/grass.css';

@scope (.akar-demo-TimeField) {
  .TimeFieldWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .TimeFieldLabel {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-9);
  }

  .TimeField {
    display: flex;
    padding: 0.5rem;
    align-items: center;
    border-radius: 0.25rem;
    border-width: 1px;
    text-align: center;
    background-color: #ffffff;
    user-select: none;
    color: var(--green-10);
    border: 1px solid var(--gray-9);
  }

  .TimeField::placeholder {
    color: var(--mauve-5);
  }

  .TimeField[data-invalid] {
    border: 1px solid var(--red-500);
  }

  .TimeFieldLiteral {
    padding: 0.25rem;
  }

  .TimeFieldSegment {
    padding: 0.25rem;
  }

  .TimeFieldSegment:hover {
    background-color: var(--grass-4);
  }

  .TimeFieldSegment:focus {
    background-color: var(--grass-2);
  }

  .TimeFieldSegment[aria-valuetext='Empty'] {
    color: var(--grass-6);
  }
}