Auto highlight option as you type

<!--
  Кейс проверяет только закрытое состояние (см. docs/PORTING.md §5).

  Расхождение API: оригинальный `AutocompletePrimitive.Root` принимает
  проп `autoHighlight` — у reka-ui `AutocompleteRoot` прямого аналога нет
  (ближайшее — `highlightOnHover`, другая семантика по умолчанию `true`),
  проп не поддержан, см. docs/PORTING.md §5. Проп проявляется только в
  раскрытом состоянии (какой пункт подсвечен изначально), которое кейс
  не проверяет.
-->
<script setup lang="ts">
import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList } from "@/components/reui/autocomplete"

interface Item {
  id: string
  value: string
}

const items: Item[] = [
  { id: "t1", value: "feature" },
  { id: "t2", value: "fix" },
  { id: "t3", value: "bug" },
  { id: "t4", value: "docs" },
  { id: "t5", value: "internal" },
  { id: "t6", value: "mobile" },
  { id: "c-accordion", value: "component: accordion" },
  { id: "c-alert-dialog", value: "component: alert dialog" },
  { id: "c-autocomplete", value: "component: autocomplete" },
  { id: "c-avatar", value: "component: avatar" },
]
</script>

<template>
  <div class="w-full max-w-xs">
    <Autocomplete>
      <AutocompleteInput placeholder="Search items" />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          <AutocompleteItem v-for="item in items" :key="item.id" :value="item.value">
            {{ item.value }}
          </AutocompleteItem>
        </AutocompleteList>
      </AutocompleteContent>
    </Autocomplete>
  </div>
</template>