chore(deps): update all non-major dependencies (v3) (#3293)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap

@@ -4,15 +4,15 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -22,18 +22,20 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
     </ul>
-    <!---->
+    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" style="--reka-navigation-menu-indicator-size: 0px; --reka-navigation-menu-indicator-position: 0px;" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
+      <div class="relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"></div>
+    </div>
   </div>
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
@@ -51,8 +53,8 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 "<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -60,7 +62,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -71,12 +73,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -95,8 +97,8 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -104,7 +106,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -115,12 +117,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -139,15 +141,15 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -157,12 +159,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -184,8 +186,8 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -193,7 +195,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -204,12 +206,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -228,14 +230,14 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -246,10 +248,10 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
         <!--v-if-->
       </li>
     </ul>
@@ -266,8 +268,8 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -275,7 +277,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -286,12 +288,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -310,8 +312,8 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -319,7 +321,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -330,12 +332,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -354,14 +356,14 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -372,10 +374,10 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
       </li>
     </ul>
@@ -392,8 +394,8 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -401,7 +403,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -412,12 +414,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -436,8 +438,8 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -445,7 +447,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -456,12 +458,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-simple-icons-github<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -480,15 +482,15 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -498,12 +500,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -525,8 +527,8 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -534,7 +536,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -545,12 +547,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -569,8 +571,8 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -578,7 +580,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -589,12 +591,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -613,8 +615,8 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -622,7 +624,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -633,12 +635,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -657,8 +659,8 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -666,7 +668,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -677,12 +679,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -701,8 +703,8 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -710,7 +712,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -721,12 +723,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -745,8 +747,8 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -754,7 +756,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -765,12 +767,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -789,20 +791,20 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
+      <li data-menu-item="" class="min-w-0">
         <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </div>
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -813,13 +815,13 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
   <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -836,13 +838,13 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
+      <li data-menu-item="" class="min-w-0">
         <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if--><span class="truncate">Links<!--v-if--></span>
           <!--v-if-->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-state="closed" class="min-w-0" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!--v-if-->
@@ -850,7 +852,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
           <!---->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-state="closed" class="min-w-0" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!--v-if-->
         <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
           <!---->
@@ -861,12 +863,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
   <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -882,8 +884,8 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -891,7 +893,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -902,12 +904,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -926,8 +928,8 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -935,7 +937,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -946,12 +948,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -970,8 +972,8 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -979,7 +981,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -990,12 +992,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1014,8 +1016,8 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1023,7 +1025,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1034,12 +1036,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1058,8 +1060,8 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1067,7 +1069,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1078,12 +1080,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1102,8 +1104,8 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
@@ -1111,7 +1113,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1122,12 +1124,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1146,15 +1148,15 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-1" aria-controls="reka-navigation-menu-v-0-content-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-2" aria-controls="reka-navigation-menu-v-0-content-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -1164,12 +1166,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-(--ui-text-dimmed)" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->

test/components/__snapshots__/NavigationMenu.spec.ts.snap

@@ -4,15 +4,15 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -22,18 +22,20 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
     </ul>
-    <!---->
+    <div aria-hidden="true" data-state="visible" data-orientation="horizontal" style="--reka-navigation-menu-indicator-size: 0px; --reka-navigation-menu-indicator-position: 0px;" class="absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200">
+      <div class="relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"></div>
+    </div>
   </div>
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
@@ -51,8 +53,8 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
 "<section aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -60,7 +62,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -71,12 +73,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -95,8 +97,8 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between w-48">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -104,7 +106,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -115,12 +117,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -139,15 +141,15 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -157,12 +159,12 @@ exports[`NavigationMenu > renders with content orientation vertical correctly 1`
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -184,8 +186,8 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -193,7 +195,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -204,12 +206,12 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -228,14 +230,14 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item slot</button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -246,10 +248,10 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item slot</a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item slot</button>
         <!--v-if-->
       </li>
     </ul>
@@ -266,8 +268,8 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -275,7 +277,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -286,12 +288,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Item label slot<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -310,8 +312,8 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -319,7 +321,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -330,12 +332,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item="">Item leading slot<span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -354,14 +356,14 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -372,10 +374,10 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
       </li>
     </ul>
@@ -392,8 +394,8 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -401,7 +403,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -412,12 +414,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -436,8 +438,8 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-lucide-book-open<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -445,7 +447,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -456,12 +458,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">i-simple-icons-github<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">i-lucide-circle-help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">i-lucide-circle-help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -480,15 +482,15 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -498,12 +500,12 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -525,8 +527,8 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -534,7 +536,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -545,12 +547,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -569,8 +571,8 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -578,7 +580,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -589,12 +591,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -613,8 +615,8 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -622,7 +624,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-text-highlighted) after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -633,12 +635,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -657,8 +659,8 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -666,7 +668,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -677,12 +679,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -701,8 +703,8 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -710,7 +712,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -721,12 +723,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -745,8 +747,8 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -754,7 +756,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-bg-inverted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -765,12 +767,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -789,20 +791,20 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
+      <li data-menu-item="" class="min-w-0">
         <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
         </div>
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated) px-1.5" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -813,13 +815,13 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
   <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
+      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span>
           <!--v-if-->
           <!--v-if-->
         </button>
@@ -836,13 +838,13 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 flex-col">
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0">
+      <li data-menu-item="" class="min-w-0">
         <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5">
           <!--v-if--><span class="truncate">Links<!--v-if--></span>
           <!--v-if-->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="1" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-state="closed" class="min-w-0" value="1"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!--v-if-->
@@ -850,7 +852,7 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
           <!---->
         </div>
       </li>
-      <li data-state="closed" class="min-w-0" item="[object Object]" index="2" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-state="closed" class="min-w-0" value="2"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
           <!---->
@@ -861,12 +863,12 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
   <div class="px-2 h-px bg-(--ui-border)"></div>
   <div style="position: relative;">
     <ul class="isolate min-w-0" data-orientation="vertical">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -882,8 +884,8 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -891,7 +893,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -902,12 +904,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -926,8 +928,8 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -935,7 +937,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-(--ui-primary) after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -946,12 +948,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) transition-colors data-[state=open]:text-(--ui-text-highlighted)" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -970,8 +972,8 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -979,7 +981,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -990,12 +992,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1014,8 +1016,8 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1023,7 +1025,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-(--ui-bg-elevated)/50 text-(--ui-primary) hover:before:bg-(--ui-bg-elevated)/50 before:transition-colors after:bg-(--ui-primary)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1034,12 +1036,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1058,8 +1060,8 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1067,7 +1069,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1078,12 +1080,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1102,8 +1104,8 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
@@ -1111,7 +1113,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         <!---->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!---->
@@ -1122,12 +1124,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->
@@ -1146,15 +1148,15 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between">
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"></li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-1" aria-controls="reka-navigation-menu-v-0-0-0-content-1"><span class="iconify i-lucide:book-open shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-[calc(var(--ui-radius))] ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) shrink-0"><!--v-if--><span class="truncate">10</span>
           <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
         </button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="2" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-primary) before:bg-(--ui-bg-elevated)" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" active="true" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-2" aria-controls="reka-navigation-menu-v-0-0-0-content-2"><span class="iconify i-lucide:box shrink-0 size-5 text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!---->
         <!--teleport start-->
         <!--teleport end-->
@@ -1164,12 +1166,12 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
   <!--v-if-->
   <div style="position: relative;">
     <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" item="[object Object]" index="0" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors data-[state=open]:text-(--ui-text-highlighted) data-[state=open]:before:bg-(--ui-bg-elevated)/50" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-(--ui-text-dimmed) group-hover:text-(--ui-text) transition-colors group-data-[state=open]:text-(--ui-text)" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-(--ui-text-dimmed)" aria-hidden="true"></span></span>
           <!--v-if-->
         </a>
         <!--v-if-->
       </li>
-      <li data-menu-item="" item="[object Object]" index="1" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-(--ui-text-muted) cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-(--ui-text-dimmed)" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
           <!--v-if-->
         </button>
         <!--v-if-->