feat(Select): add 'id' prop to SelectRoot and BubbleSelect components

docs/content/meta/SelectRoot.md

@@ -67,6 +67,12 @@
     'description': '<p>When <code>true</code>, indicates that the user must set the value before the owning form can be submitted.</p>\n',
     'type': 'boolean',
     'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>Id of the element</p>\n',
+    'type': 'string',
+    'required': false
   }
 ]" />
 

packages/core/src/Select/BubbleSelect.vue

@@ -13,6 +13,7 @@ interface BubbleSelectProps {
   required?: boolean
   size?: number
   value?: any
+  id?: string
 }
 
 const props = defineProps<BubbleSelectProps>()

packages/core/src/Select/SelectRoot.vue

@@ -24,6 +24,8 @@ export interface SelectRootProps<T = AcceptableValue> extends FormFieldProps {
   autocomplete?: string
   /** When `true`, prevents the user from interacting with Select */
   disabled?: boolean
+  /** Id of the element */
+  id?: string
 }
 
 export type SelectRootEmits<T = AcceptableValue> = {
@@ -202,6 +204,7 @@ provideSelectRootContext({
 
     <BubbleSelect
       v-if="isFormControl && name"
+      :id="id"
       :key="nativeSelectKey"
       aria-hidden="true"
       tabindex="-1"

packages/core/src/Select/story/SelectForm.story.vue

@@ -42,6 +42,7 @@ function handleChange(event: any) {
         >
           <label for="fruit">Fruit</label>
           <SelectRoot
+            id="fruit"
             name="fruit"
             default-value="Apple"
           >