A combobox used within a dialog

<!--
  Оригинал вызывает `toast(...)` из `sonner` при подтверждении — пакет не
  входит в зависимости воркспейса (см. `c-combobox-11.vue`), не влияет на
  статичный скриншот, обработчик Confirm не переносит вызов toast.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field, FieldLabel } from "@/components/ui/field"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
const open = ref(false)
</script>

<template>
  <Dialog v-model:open="open" :modal="false">
    <DialogTrigger as-child>
      <Button class="w-full max-w-xs">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-sm">
      <DialogHeader>
        <DialogTitle>Select Framework</DialogTitle>
        <DialogDescription>
          Choose your preferred framework from the list below.
        </DialogDescription>
      </DialogHeader>
      <Field class="pt-4">
        <FieldLabel for="framework-dialog" class="sr-only">Framework</FieldLabel>
        <Combobox>
          <ComboboxInput id="framework-dialog" 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>
      <DialogFooter class="pt-4">
        <Button type="button" variant="outline" @click="open = false">Cancel</Button>
        <Button type="button" @click="open = false">Confirm</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>