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
   }
 ]" />
 
@@ -114,6 +120,7 @@
 | `name` | The name of the field. Submitted with its owning form as part of a name/value pair. | `string` | No | - |
 | `open` | The controlled open state of the Select. Can be bind as v-model:open. | `boolean` | No | - |
 | `required` | When true, indicates that the user must set the value before the owning form can be submitted. | `boolean` | No | - |
+| `id` | Id of the element | `string` | No | - |
 
 **Events**
 

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> = {
@@ -87,7 +89,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { required, disabled, multiple, dir: propDir } = toRefs(props)
+const { id, required, disabled, multiple, dir: propDir } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   // @ts-expect-error Missing infer for AcceptableValue
@@ -201,7 +203,8 @@ provideSelectRootContext({
     />
 
     <BubbleSelect
-      v-if="isFormControl && name"
+      v-if="isFormControl && (name || id)"
+      :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"
           >