UPD: TabSelect transition

src/components/config/TabSelect.vue

@@ -2,6 +2,7 @@
   <div class="relative">
     <div
       :style="backgroundStyle"
+      :class="{'hidden': !showBackground}"
       class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
     <div class="flex font-heading px-4 py-2 gap-2 relative">
       <TabSelectButton
@@ -29,6 +30,8 @@ const model = defineModel({
 
 const buttons = ref({})
 
+const showBackground = ref(false)
+
 const backgroundStyle = ref({
   top: '0',
   left: '0',
@@ -48,7 +51,10 @@ const updateBackgroundStyle = () => {
   }
 }
 
-watch([model, buttons], updateBackgroundStyle)
+watch([model, buttons], () => {
+  updateBackgroundStyle()
+  showBackground.value = true
+})
 
 let observer = null
 

src/components/config/TabSelectButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-colors"
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
+    :class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />