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

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`NavigationMenu > renders with arrow correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--teleport start-->
    <!--teleport end-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with class correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 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="" 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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with custom slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with item slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0">Item slot</button>
        <!---->
        <!--teleport start-->
        <!---->
        <!--teleport end-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-navigation-menu-v-0-content-1">Item slot</button>
        <!---->
        <!--teleport start-->
        <!---->
        <!--teleport end-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-collection-item="">Item slot</a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-collection-item="">Item slot</button>
        <!--v-if-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors" 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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors" 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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0">Item leading slot<span class="truncate">Documentation<!--v-if--></span><span class="ms-auto inline-flex"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-navigation-menu-v-0-content-1">Item leading slot<span class="truncate">Components<!--v-if--></span><span class="ms-auto inline-flex"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-collection-item="">Item leading slot<span class="truncate">Help<!--v-if--></span>
          <!--v-if-->
        </button>
        <!--v-if-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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">Item trailing slot</span></button>
        <!---->
        <!--teleport start-->
        <!---->
        <!--teleport end-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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">Item trailing slot</span></button>
        <!---->
        <!--teleport start-->
        <!---->
        <!--teleport end-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><span class="ms-auto inline-flex">Item trailing slot</span></a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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">Item trailing slot</span></button>
        <!--v-if-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with items correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with labelKey correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-heroicons-book-open<!--v-if--></span><span class="ms-auto inline-flex"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-heroicons-cube-transparent<!--v-if--></span><span class="ms-auto inline-flex"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)] transition-colors" 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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">i-heroicons-question-mark-circle<!--v-if--></span>
          <!--v-if-->
        </button>
        <!--v-if-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant link highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 text-[var(--ui-text-highlighted)] after:bg-[var(--ui-bg-inverted)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with neutral variant pill highlight neutral correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-bg-inverted)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-border-inverted)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 flex-col">
  <div style="position: relative;">
    <ul class="isolate min-w-0" data-orientation="vertical">
      <li data-state="closed" class="min-w-0" value="0"><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-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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="radix-vue-collapsible-content-v-1" data-state="closed" hidden="" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;">
          <!---->
        </div>
      </li>
      <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-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-active="" aria-current="page" data-radix-vue-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-[var(--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"><!--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="radix-vue-collapsible-content-v-2" data-state="closed" hidden="" style="--radix-collapsible-content-height: 0px; --radix-collapsible-content-width: 0px;">
          <!---->
        </div>
      </li>
    </ul>
  </div>
  <div class="px-2 h-px bg-[var(--ui-border)]"></div>
  <div style="position: relative;">
    <ul class="isolate min-w-0" data-orientation="vertical">
      <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-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <!--v-if-->
</nav>"
`;

exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with primary variant link highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 text-[var(--ui-primary)] after:bg-[var(--ui-primary)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with primary variant pill highlight correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--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 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50 text-[var(--ui-primary)] hover:before:bg-[var(--ui-bg-elevated)]/50 before:transition-colors after:bg-[var(--ui-primary)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <li data-menu-item="" class="min-w-0 py-2 -mb-px"><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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--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" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;

exports[`NavigationMenu > renders with ui correctly 1`] = `
"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" data-radix-navigation-menu="" class="relative flex gap-1.5 w-full items-center justify-between">
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-state="closed" aria-expanded="false" active="false" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-0" aria-controls="radix-navigation-menu-v-0-content-0"><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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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"><!--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-->
      </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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-primary)] before:bg-[var(--ui-bg-elevated)]" data-state="closed" aria-expanded="false" active="true" data-radix-vue-collection-item="" id="radix-navigation-menu-v-0-trigger-1" aria-controls="radix-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-[var(--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"><!--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-->
      </li>
    </ul>
  </div>
  <!--v-if-->
  <div style="position: relative;">
    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-highlighted)] hover:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:text-[var(--ui-text-highlighted)] transition-colors before:transition-colors data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50" data-radix-vue-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-[var(--ui-text-dimmed)] group-hover:text-[var(--ui-text)] group-data-[state=open]:text-[var(--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-[var(--ui-text-dimmed)]" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
          <!--v-if-->
        </a>
        <!--v-if-->
      </li>
      <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-[var(--ui-primary)] px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-[var(--ui-text-muted)] cursor-not-allowed opacity-75" data-radix-vue-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-[var(--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>
  <!--v-if-->
  <div class="absolute top-full inset-x-0 flex w-full">
    <!--v-if-->
    <!---->
  </div>
</nav>"
`;