Clone button enhancements (#33362) (#33404)

Backport #33362 by @silverwind

- Add box-shadow to default tippy theme
- Make colors for tabs match the ones from `.ui.tabular.menu`
- Remove tippy arrow and slightly offset tooltip closer to the button
- Fix setting of `aria-haspopup` when default role is used with tippy

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/8633ebac-a43f-457a-86bd-7a88a83519ee"
/>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/modules/tippy.ts

@@ -42,16 +42,17 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
       visibleInstances.add(instance);
       return onShow?.(instance);
     },
-    arrow: arrow || (theme === 'bare' ? false : arrowSvg),
+    arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
     // HTML role attribute, ideally the default role would be "popover" but it does not exist
     role: role || 'menu',
     // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare"
     theme: theme || role || 'default',
+    offset: [0, arrow ? 10 : 6],
     plugins: [followCursor],
     ...other,
   } satisfies Partial<Props>);
 
-  if (role === 'menu') {
+  if (instance.props.role === 'menu') {
     target.setAttribute('aria-haspopup', 'true');
   }