Add optional touch target span inside interactive components like <USlideover> close button and <UButton> icons

[pmochine]

Description

It would be super helpful to have an optional <span> inside some interactive components like the close button in <USlideover> or icon buttons like <UButton> so we can target it with css to increase the touch area for mobile devises without messing up the visual layout

I just watched this video from the TailwindCreator and he speaks about this topic here: https://www.youtube.com/watch?v=soFSSkf4oVY

why

currently it's not really possible without workarounds
for example when I use something like this

<UButton
  icon="i-lucide-menu"
  color="white"
  variant="ghost"
  aria-label="Open menu"
  class="md:hidden"
  :ui="{ leadingIcon: 'size-7!' }"
  @click="open = true"
/>

looks clean but I can't increase the touch target to 48x48 unless I manually recreate the button content and wrap the icon with a span
same with the close button in <USlideover>
there's no way to make it more thumb-friendly out of the box

idea

maybe you could include an optional invisible span inside those components
position absolute
centered
we could then style it using :ui
like

:ui="{ touch: 'size-12' }"

or even a simple touchTarget: true option that adds a 48x48 span behind the icon

benefits

better usability on mobile
keeps component usage clean
no need for negative margins or layout hacks
works nicely with pointer: coarse media query

thanks for all your great work with nuxt ui
would love to see this added

EDIT 1

To create the same button effect like in the video:

    <UButton
      color="white"
      variant="ghost"
      aria-label="Open menu"
      class="relative flex items-center justify-center p-0 md:hidden"
      @click="open = true"
    >
      <span class="absolute size-12 pointer-coarse:hidden"/>
      <UIcon name="lucide:menu" class="text-white size-7" />
    </UButton>

I think it's important that NuxtUI focus on the target touch recommendation of at least 44px x 44px