Basic autocomplete control

<!--
  Кейс проверяет только закрытое состояние (см. docs/PORTING.md §5,
  "autocomplete"): попап не раскрывается ни здесь, ни в react.tsx —
  Base UI и reka-ui позиционируют плавающие слои разными движками.
-->
<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>