// html file 
<template>
    <!-- sfdcboy -->
    <lightning-card  variant="Narrow"  title="Source Component" icon-name="standard:account">
        <lightning-combobox
            name="Contact"
            label="Contact Records"
            value={value}
            placeholder="Select Contacts"
            options={options}
            onchange={handleChange} ></lightning-combobox>
    </lightning-card>
</template>
// html end 

// js start 
import { LightningElement,wire,track } from 'lwc';
import allContact from '@salesforce/apex/AccountController.allContact';
export default class SourceDI extends LightningElement {
    @wire(allContact)
    allContact ({error, data}) {
        if (error) {
    // TODO add error logic 
        } else if (data) {
            this.options = data.map((e) => ({ label: e.Name, value: e.Id }));  // #3 this approach works 
        }
    }
    handleChange(event){
        let data = event.target.value; 
        let label = event.target.options.find(opt=> opt.value === event.detail.value).label;
        const selectedEvent = new CustomEvent('testevent', { detail: { recordId : data , name : label}, });
 // Dispatches the event.
 this.dispatchEvent(selectedEvent);
    }
}
// js end 

// xml file start 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
        <event name ="testevent" label ="test event" description="this is my test event">
            <schema>
                {
                    "type" : "object",
                    "properties" :{ 
                        "recordId" : {
                            "type" : "string",
                            "title" : "Record Id",
                            "description" : "Holds record id of contact"
                        },
                        "name": {
                            "type" : "string",
                            "title" : "Contact Name",
                            "description" : "Holds Contact Name"
                        }
                    }
                }
            </schema>
        </event>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>