feat(NavigationMenu): add tooltip and popover props

Resolves #4186

src/theme/navigation-menu.ts

@@ -16,14 +16,15 @@ export default (options: Required<ModuleOptions>) => ({
     linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
     linkLabel: 'truncate',
     linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
-    childList: '',
+    childList: 'isolate',
+    childLabel: 'text-xs text-highlighted',
     childItem: '',
-    childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start',
-    childLinkWrapper: 'flex flex-col items-start',
+    childLink: 'group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
+    childLinkWrapper: 'min-w-0',
     childLinkIcon: 'size-5 shrink-0',
-    childLinkLabel: 'font-semibold text-sm relative inline-flex',
+    childLinkLabel: 'truncate font-medium',
     childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
-    childLinkDescription: 'text-sm text-muted',
+    childLinkDescription: 'text-muted',
     separator: 'px-2 h-px bg-border',
     viewportWrapper: 'absolute top-full left-0 flex w-full',
     viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]',
@@ -35,11 +36,11 @@ export default (options: Required<ModuleOptions>) => ({
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         link: `focus-visible:before:ring-${color}`,
-        childLink: `focus-visible:outline-${color}`
+        childLink: `focus-visible:before:ring-${color}`
       }])),
       neutral: {
         link: 'focus-visible:before:ring-inverted',
-        childLink: 'focus-visible:outline-inverted'
+        childLink: 'focus-visible:before:ring-inverted'
       }
     },
     highlightColor: {
@@ -57,12 +58,14 @@ export default (options: Required<ModuleOptions>) => ({
         item: 'py-2',
         link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0',
         childList: 'grid p-2',
+        childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
         content: 'absolute top-0 left-0 w-full'
       },
       vertical: {
         root: 'flex-col',
         link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
-        content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
+        childLabel: 'px-1.5 py-0.5',
+        childLink: 'p-1.5 gap-1.5 before:inset-y-px before:inset-x-0'
       }
     },
     contentOrientation: {
@@ -76,13 +79,13 @@ export default (options: Required<ModuleOptions>) => ({
     },
     active: {
       true: {
-        childLink: 'bg-elevated text-highlighted',
+        childLink: 'before:bg-elevated text-highlighted',
         childLinkIcon: 'text-default'
       },
       false: {
         link: 'text-muted',
         linkLeadingIcon: 'text-dimmed',
-        childLink: ['hover:bg-elevated/50 text-default hover:text-highlighted', options.theme.transitions && 'transition-colors'],
+        childLink: ['hover:before:bg-elevated/50 text-default hover:text-highlighted', options.theme.transitions && 'transition-colors before:transition-colors'],
         childLinkIcon: ['text-dimmed group-hover:text-default', options.theme.transitions && 'transition-colors']
       }
     },
@@ -114,6 +117,21 @@ export default (options: Required<ModuleOptions>) => ({
       childList: 'gap-1',
       content: 'w-60'
     }
+  }, {
+    orientation: 'vertical',
+    collapsed: false,
+    class: {
+      childList: 'ms-5 border-s border-default',
+      childItem: 'ps-1.5 -ms-px',
+      content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
+    }
+  }, {
+    orientation: 'vertical',
+    collapsed: true,
+    class: {
+      link: 'px-1.5',
+      content: 'shadow-sm rounded-sm min-h-6 p-1'
+    }
   }, {
     orientation: 'horizontal',
     highlight: true,
@@ -241,19 +259,6 @@ export default (options: Required<ModuleOptions>) => ({
     class: {
       link: 'after:bg-inverted'
     }
-  }, {
-    orientation: 'vertical',
-    collapsed: false,
-    class: {
-      childList: 'ms-5 border-s border-default',
-      childItem: 'ps-1.5 -ms-px'
-    }
-  }, {
-    orientation: 'vertical',
-    collapsed: true,
-    class: {
-      link: 'px-1.5'
-    }
   }],
   defaultVariants: {
     color: 'primary',