fix(forms)!: bind $attrs to elements (#279)

docs/components/ThemeSelect.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex items-center shadow-sm">
-    <ClientOnly>
+  <ClientOnly>
+    <div class="inline-flex shadow-sm rounded-md">
       <USelectMenu
         v-model="primary"
         name="primary"
-        class="w-full [&>div>button]:!rounded-r-none"
+        class="!rounded-r-none !shadow-none focus:z-[1]"
         color="gray"
         :ui="{ width: 'w-[194px]' }"
         :popper="{ placement: 'bottom-start' }"
@@ -22,15 +22,13 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
 
-    <ClientOnly>
       <USelectMenu
         v-model="gray"
         name="gray"
-        class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+        class="!rounded-l-none !shadow-none"
         color="gray"
-        :ui="{ width: 'w-[194px]' }"
+        :ui="{ width: 'w-[194px]', wrapper: '-ml-px' }"
         :popper="{ placement: 'bottom-end' }"
         :options="grayOptions"
       >
@@ -46,8 +44,8 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
-  </div>
+    </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">

docs/components/content/ComponentCard.vue

@@ -8,18 +8,16 @@
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
           variant="none"
-          class="justify-center"
+          :ui="{ wrapper: 'relative flex items-start justify-center' }"
         />
         <USelectMenu
           v-else-if="prop.type === 'string' && prop.options.length"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"
-          :label="componentProps[prop.name]"
           variant="none"
-          class="inline-flex"
-          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
-          :ui-select="{ custom: '!py-0' }"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
+          class="!py-0"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
         <UInput
@@ -29,7 +27,7 @@
           :name="`prop-${prop.name}`"
           variant="none"
           autocomplete="off"
-          :ui="{ custom: '!py-0' }"
+          class="!py-0"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>