A combobox with auto-highlight enabled

<script setup lang="ts">
/**
 * Оригинал передаёт `autoHighlight` в `Combobox` (Base UI: подсвечивает
 * первый совпавший пункт при вводе). У reka-ui `ComboboxRoot` нет прямого
 * аналога (см. docs/PORTING.md, раздел про `autocomplete`) — проп не
 * поддержан. Кейс проверяет только закрытое состояние, где `autoHighlight`
 * визуально не проявляется.
 */
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
</script>

<template>
  <Field class="max-w-xs">
    <Combobox>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  </Field>
</template>