fix: wrapper deleted

src/components/input/MultiSelect.stories.ts

@@ -200,8 +200,8 @@ export const MultipleSelectors: Story = {
         </div>
         
         <div class="p-4 bg-gray-50 dark-theme:bg-zinc-800 rounded">
-          <h4 class="font-medium mb-2">Current Selection:</h4>
-          <div class="space-y-1 text-sm">
+          <h4 class="font-medium mt-0">Current Selection:</h4>
+          <div class="flex flex-col text-sm">
             <p>Frameworks: {{ selectedFrameworks.length > 0 ? selectedFrameworks.map(s => s.name).join(', ') : 'None' }}</p>
             <p>Projects: {{ selectedProjects.length > 0 ? selectedProjects.map(s => s.name).join(', ') : 'None' }}</p>
             <p>Tags: {{ selectedTags.length > 0 ? selectedTags.map(s => s.name).join(', ') : 'None' }}</p>

src/components/input/MultiSelect.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="relative inline-block">
   <MultiSelect
     v-model="selectedItems"
     :options="options"
@@ -53,6 +52,12 @@
       <span class="text-sm text-zinc-700 dark-theme:text-gray-200">
         {{ label }}
       </span>
+      <span
+        v-if="selectedCount > 0"
+        class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
+      >
+        {{ selectedCount }}
+      </span>
     </template>
 
     <!-- Chevron size identical to current -->
@@ -82,15 +87,6 @@
       </div>
     </template>
   </MultiSelect>
-
-    <!-- Selected count badge -->
-    <div
-      v-if="selectedCount > 0"
-      class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
-    >
-      {{ selectedCount }}
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -138,7 +134,7 @@ const selectedCount = computed(() => selectedItems.value.length)
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
     class: [
-      'relative inline-flex cursor-pointer select-none w-full',
+      'relative inline-flex cursor-pointer select-none',
       'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
       'transition-all duration-200 ease-in-out',
       'border-[2.5px] border-solid',

src/components/input/SingleSelect.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="relative inline-flex items-center">
   <Select
     v-model="selectedItem"
     :options="options"
@@ -43,7 +42,6 @@
       </div>
     </template>
   </Select>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -77,7 +75,7 @@ const pt = computed(() => ({
   }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
     class: [
       // container
-      'relative inline-flex w-full cursor-pointer select-none items-center',
+      'relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
       'rounded-md',
       'bg-transparent text-neutral dark-theme:text-white',