@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-SUORTZUY.mjs → chunk-GS4SV2HK.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-YZBQ6IR7.mjs";
 import {
   Loading
-} from "./chunk-O6BN5R6J.mjs";
+} from "./chunk-AUMTHL6N.mjs";
 import {
   Text
 } from "./chunk-NN6AINLG.mjs";
@@ -27,6 +27,34 @@ import {
   buildNotificationGroups,
   formatActivityTime
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/notification-center-styles.ts
+var notificationCenterItemClasses = "tiger-motion-aware group relative flex items-start gap-3.5 w-full p-3.5 rounded-[var(--tiger-radius-lg,0.75rem)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterUnreadItemClasses = "bg-[var(--tiger-outline-bg-hover,#eff6ff)] border-l-[3px] border-l-[var(--tiger-primary,#2563eb)] -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadItemClasses = "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadTitleClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterUnreadTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadDotClasses = "tiger-motion-aware w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] shrink-0 shadow-sm animate-pulse";
+var notificationCenterTimeClasses = "text-[11px] text-[var(--tiger-text-muted,#6b7280)] font-medium whitespace-nowrap flex-shrink-0 self-center";
+var notificationCenterReadDescriptionClasses = "text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterUnreadDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterItemActionClasses = "tiger-motion-aware opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--tiger-surface-muted,#f3f4f6)] hover:bg-[var(--tiger-fill-hover,#e5e7eb)] text-[var(--tiger-text-secondary,#374151)] border-0 flex-shrink-0 self-center [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterEmptyIconWrapperClasses = "p-3.5 bg-[var(--tiger-surface-muted,#f9fafb)] rounded-full mb-3 shadow-inner";
+var notificationCenterEmptyIconClasses = "tiger-motion-aware w-8 h-8 text-[var(--tiger-text-muted,#9ca3af)] animate-pulse";
+var notificationCenterEmptyTextClasses = "font-semibold text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
+var notificationCenterCardClasses = "tiger-motion-aware w-full rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-glass,0_8px_30px_rgb(0_0_0_/_0.04))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] overflow-hidden";
+var notificationCenterTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadBadgeClasses = "tiger-motion-aware inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white shadow-sm animate-pulse";
+var notificationCenterMarkAllBaseClasses = "tiger-motion-aware text-xs font-semibold transition-colors";
+var notificationCenterMarkAllEnabledClasses = "text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)]";
+var notificationCenterMarkAllDisabledClasses = "text-[var(--tiger-text-muted,#9ca3af)]";
+var notificationCenterFilterGroupClasses = "inline-flex items-center gap-0.5 p-0.5 rounded-[var(--tiger-radius-md,0.5rem)] bg-[var(--tiger-surface-muted,#f3f4f6)] self-start";
+var notificationCenterFilterButtonClasses = "tiger-motion-aware px-3.5 py-1 text-xs font-semibold rounded-[var(--tiger-radius-sm,0.375rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterFilterActiveClasses = "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text,#111827)] shadow-sm";
+var notificationCenterFilterIdleClasses = "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]";
+
+// src/components/NotificationCenter.ts
 var getGroupKey = (group, index) => {
   return group.key ?? group.title ?? index;
 };
@@ -275,7 +303,7 @@ var NotificationCenter = defineComponent({
       return h(
         "div",
         {
-          class: "inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 self-start"
+          class: notificationCenterFilterGroupClasses
         },
         options.map(
           (option) => h(
@@ -283,8 +311,8 @@ var NotificationCenter = defineComponent({
             {
               key: option.key,
               class: classNames(
-                "px-3.5 py-1 text-xs font-semibold rounded-md transition-all duration-200",
-                currentReadFilter.value === option.key ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm scale-102" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                notificationCenterFilterButtonClasses,
+                currentReadFilter.value === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses
               ),
               onClick: () => handleReadFilterChange(option.key)
             },
@@ -300,8 +328,8 @@ var NotificationCenter = defineComponent({
         "div",
         {
           class: classNames(
-            "group relative flex items-start gap-3.5 w-full p-3.5 rounded-xl transition-all duration-300 hover:bg-gray-50/60 dark:hover:bg-gray-800/30",
-            !isRead ? "bg-blue-50/20 dark:bg-blue-950/5 hover:bg-blue-50/40 dark:hover:bg-blue-950/10 border-l-[3px] border-l-blue-500/80 -ml-[3px] pl-[calc(0.875rem-3px)]" : "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]"
+            notificationCenterItemClasses,
+            isRead ? notificationCenterReadItemClasses : notificationCenterUnreadItemClasses
           )
         },
         [
@@ -314,18 +342,18 @@ var NotificationCenter = defineComponent({
                     tag: "span",
                     size: "sm",
                     weight: isRead ? "normal" : "semibold",
-                    class: isRead ? "text-gray-600 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"
+                    class: isRead ? notificationCenterReadTitleClasses : notificationCenterUnreadTitleClasses
                   },
                   { default: () => item.title }
                 ),
                 !isRead ? h("span", {
-                  class: "w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0 shadow-sm shadow-blue-500/40 animate-pulse"
+                  class: notificationCenterUnreadDotClasses
                 }) : null
               ]),
               timeText ? h(
                 "span",
                 {
-                  class: "text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap flex-shrink-0 self-center"
+                  class: notificationCenterTimeClasses
                 },
                 timeText
               ) : null
@@ -335,7 +363,7 @@ var NotificationCenter = defineComponent({
               {
                 class: classNames(
                   "mt-1 text-xs leading-relaxed line-clamp-2",
-                  isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-600 dark:text-gray-300"
+                  isRead ? notificationCenterReadDescriptionClasses : notificationCenterUnreadDescriptionClasses
                 )
               },
               item.description
@@ -346,7 +374,7 @@ var NotificationCenter = defineComponent({
             {
               size: "sm",
               variant: "ghost",
-              class: "opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all duration-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 flex-shrink-0 self-center",
+              class: notificationCenterItemActionClasses,
               onClick: (event) => {
                 event.stopPropagation();
                 handleItemReadChange(item, !isRead);
@@ -366,13 +394,13 @@ var NotificationCenter = defineComponent({
             h(
               "div",
               {
-                class: "p-3.5 bg-gray-50 dark:bg-gray-900 rounded-full mb-3 shadow-inner"
+                class: notificationCenterEmptyIconWrapperClasses
               },
               [
                 h(
                   "svg",
                   {
-                    class: "w-8 h-8 text-gray-400 dark:text-gray-600 animate-pulse",
+                    class: notificationCenterEmptyIconClasses,
                     fill: "none",
                     viewBox: "0 0 24 24",
                     stroke: "currentColor",
@@ -394,7 +422,7 @@ var NotificationCenter = defineComponent({
                 tag: "div",
                 size: "sm",
                 color: "muted",
-                class: "font-semibold text-gray-400 dark:text-gray-500"
+                class: notificationCenterEmptyTextClasses
               },
               { default: () => props.emptyText }
             )
@@ -454,14 +482,14 @@ var NotificationCenter = defineComponent({
                 tag: "div",
                 size: "base",
                 weight: "bold",
-                class: "text-gray-900 dark:text-gray-100"
+                class: notificationCenterTitleClasses
               },
               { default: () => props.title }
             ),
             totalUnread.value > 0 ? h(
               "span",
               {
-                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/20 animate-pulse"
+                class: notificationCenterUnreadBadgeClasses
               },
               String(totalUnread.value)
             ) : null
@@ -473,8 +501,8 @@ var NotificationCenter = defineComponent({
               variant: "ghost",
               disabled: !hasUnread.value,
               class: classNames(
-                "text-xs font-semibold transition-colors duration-200",
-                hasUnread.value ? "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300" : "text-gray-400 dark:text-gray-600"
+                notificationCenterMarkAllBaseClasses,
+                hasUnread.value ? notificationCenterMarkAllEnabledClasses : notificationCenterMarkAllDisabledClasses
               ),
               onClick: handleMarkAllRead
             },
@@ -486,7 +514,7 @@ var NotificationCenter = defineComponent({
       const content = props.loading ? h("div", { class: "flex items-center justify-center py-16" }, [
         h(Loading, {
           text: props.loadingText,
-          class: "text-blue-500 dark:text-blue-400 font-medium"
+          class: notificationCenterLoadingClasses
         })
       ]) : resolvedGroups.value.length > 0 ? h("div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : h("div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
         renderList(filteredFlatItems.value)
@@ -507,7 +535,7 @@ var NotificationCenter = defineComponent({
             Card,
             {
               variant: "bordered",
-              className: "w-full rounded-2xl border border-gray-100/80 dark:border-gray-800/80 bg-white/95 dark:bg-gray-950/90 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 overflow-hidden"
+              className: notificationCenterCardClasses
             },
             {
               header: () => header,

package/dist/{chunk-EUSODI5E.mjs → chunk-HKYRRQS7.mjs}

@@ -1,9 +1,9 @@
 import {
   useFloatingPopup
-} from "./chunk-KE6RGD4Y.mjs";
+} from "./chunk-26OI3TEA.mjs";
 import {
-  renderVueBodyTeleport
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Tooltip.ts
 import { defineComponent, computed, h } from "vue";
@@ -47,6 +47,9 @@ var Tooltip = defineComponent({
       triggerRef,
       floatingRef,
       floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
       triggerHandlers
     } = useFloatingPopup({ props, emit });
     const tooltipId = createTooltipId();
@@ -85,12 +88,14 @@ var Tooltip = defineComponent({
             defaultSlot
           ),
           // Tooltip content (positioned with Floating UI)
-          currentVisible.value ? renderVueBodyTeleport(
+          currentVisible.value ? renderVueOverlayTeleport(
             h(
               "div",
               {
                 ref: floatingRef,
+                class: floatingClasses.value,
                 style: floatingStyles.value,
+                "data-positioned": positioned.value,
                 "aria-hidden": false
               },
               [
@@ -104,7 +109,8 @@ var Tooltip = defineComponent({
                   slots.content ? slots.content() : props.content
                 )
               ]
-            )
+            ),
+            overlayTarget.value
           ) : null
         ]
       );

package/dist/{chunk-D4APFWWS.mjs → chunk-IPGPLFUZ.mjs}

@@ -6,7 +6,7 @@ import {
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-BDTPFPSB.mjs";
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
@@ -216,6 +216,7 @@ var Modal = defineComponent({
     const instanceId = ref(createModalId());
     const hasBeenOpened = ref(props.open);
     const dialogRef = ref(null);
+    const rootRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
     let touchStartPoint = null;
@@ -290,9 +291,13 @@ var Modal = defineComponent({
     const overlayOpen = computed(() => props.open);
     let cleanupEscape;
     useVueBodyScrollLock(overlayOpen);
-    useVueFocusTrap({ enabled: overlayOpen, containerRef: dialogRef });
+    useVueFocusTrap({ enabled: overlayOpen, containerRef: rootRef });
     onMounted(() => {
-      cleanupEscape = useVueEscapeKey({ enabled: overlayOpen, onEscape: handleClose });
+      cleanupEscape = useVueEscapeKey({
+        enabled: overlayOpen,
+        onEscape: handleClose,
+        layerRef: rootRef
+      });
     });
     onBeforeUnmount(() => {
       cleanupEscape?.();
@@ -350,6 +355,7 @@ var Modal = defineComponent({
       );
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
       const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.title ? titleId.value : void 0);
+      const overlayHostId = `${instanceId.value}-overlay-host`;
       const mergedClass = classNames(contentClasses.value, coerceClassValue(attrs.class));
       const widthStyle = props.width ? {
         width: typeof props.width === "number" ? `${props.width}px` : props.width,
@@ -430,9 +436,11 @@ var Modal = defineComponent({
         "div",
         {
           class: modalWrapperClasses,
+          ref: rootRef,
           style: { zIndex: props.zIndex },
           hidden: !props.open,
           "aria-hidden": !props.open ? "true" : void 0,
+          "data-tiger-overlay-layer": "",
           "data-tiger-modal-root": ""
         },
         [
@@ -457,6 +465,7 @@ var Modal = defineComponent({
                   role: "dialog",
                   "aria-modal": "true",
                   "aria-labelledby": ariaLabelledby,
+                  "aria-owns": overlayHostId,
                   tabindex: -1,
                   ref: dialogRef,
                   onTouchstart: handleTouchStart,
@@ -468,7 +477,12 @@ var Modal = defineComponent({
                 [header, body, footer]
               )
             ]
-          )
+          ),
+          h("div", {
+            id: overlayHostId,
+            class: "contents",
+            "data-tiger-overlay-host": ""
+          })
         ]
       );
       return renderVueBodyTeleport([renderedWrapper]);

package/dist/{chunk-IMFHJEUX.mjs → chunk-JALHMWKW.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-LPZBXTJ6.mjs";
 import {
   useFloatingPopup
-} from "./chunk-KE6RGD4Y.mjs";
+} from "./chunk-26OI3TEA.mjs";
 import {
-  renderVueBodyTeleport
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Image.ts
 import {
@@ -86,8 +86,16 @@ var Image = defineComponent({
       triggerRef: hoverTriggerRef,
       floatingRef: hoverFloatingRef,
       floatingStyles: hoverFloatingStyles,
+      floatingClasses: hoverFloatingClasses,
+      positioned: hoverPositioned,
+      overlayTarget: hoverOverlayTarget,
       triggerHandlers: hoverTriggerHandlers
-    } = useFloatingPopup({ props: floatingPopupProps, emit });
+    } = useFloatingPopup({
+      props: floatingPopupProps,
+      // Hover visibility is internal; popup model events are not Image events.
+      emit: () => {
+      }
+    });
     const setContainerRef = (el) => {
       containerRef.value = el;
       hoverTriggerRef.value = el;
@@ -232,14 +240,18 @@ var Image = defineComponent({
           emit("preview-open-change", val);
         }
       }) : null;
-      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueBodyTeleport(
+      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueOverlayTeleport(
         h(
           "div",
           {
             ref: hoverFloatingRef,
             style: hoverFloatingStyles.value,
+            "data-positioned": hoverPositioned.value,
             "aria-hidden": true,
-            class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+            class: classNames(
+              hoverFloatingClasses.value,
+              "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+            )
           },
           [
             h("img", {
@@ -248,7 +260,8 @@ var Image = defineComponent({
               class: "block max-w-[16rem] max-h-[16rem] object-contain"
             })
           ]
-        )
+        ),
+        hoverOverlayTarget.value
       ) : null;
       return h(
         "div",

package/dist/{chunk-OHPXOLNB.mjs → chunk-K3WTQBE4.mjs}

@@ -4,6 +4,10 @@ import {
 import {
   FORM_ITEM_CONTROL_INJECTION_KEY
 } from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/FormItem.ts
 import {
@@ -108,6 +112,8 @@ var FormItem = defineComponent({
     const errorMessage = ref("");
     const shakeTrigger = ref(0);
     const prevFormError = ref("");
+    const contentRef = ref(null);
+    const errorRef = ref(null);
     const instanceId = ++formItemIdCounter;
     const baseId = `tiger-form-item-${instanceId}`;
     const labelId = `${baseId}-label`;
@@ -226,6 +232,16 @@ var FormItem = defineComponent({
     const hasError = computed(() => {
       return !!errorMessage.value;
     });
+    const popupErrorVisible = computed(
+      () => props.showMessage && hasError.value && props.errorDisplayMode === "popup"
+    );
+    const overlay = useVueAnchoredOverlay({
+      enabled: popupErrorVisible,
+      referenceRef: contentRef,
+      floatingRef: errorRef,
+      placement: "bottom-start",
+      offset: 4
+    });
     provide(FORM_ITEM_CONTROL_INJECTION_KEY, {
       status: computed(() => hasError.value ? "error" : void 0),
       errorMessage: computed(
@@ -317,6 +333,7 @@ var FormItem = defineComponent({
       const contentElement = h(
         "div",
         {
+          ref: contentRef,
           class: classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
@@ -333,21 +350,29 @@ var FormItem = defineComponent({
             },
             fieldChildren
           ),
-          props.showMessage && h(
-            "div",
-            {
-              id: hasError.value ? errorId : void 0,
-              role: hasError.value ? "alert" : void 0,
-              class: props.errorDisplayMode === "block" ? classNames(
-                "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
-                !hasError.value && "hidden"
-              ) : props.errorDisplayMode === "popup" ? classNames(
-                "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
-                !hasError.value && "hidden"
-              ) : errorClasses.value,
-              "aria-hidden": hasError.value ? void 0 : "true"
-            },
-            hasError.value ? errorMessage.value : ""
+          props.showMessage && renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: errorRef,
+                id: hasError.value ? errorId : void 0,
+                role: hasError.value ? "alert" : void 0,
+                class: props.errorDisplayMode === "block" ? classNames(
+                  "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+                  !hasError.value && "hidden"
+                ) : props.errorDisplayMode === "popup" ? classNames(
+                  "px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+                  overlay.floatingClasses.value,
+                  !hasError.value && "hidden"
+                ) : errorClasses.value,
+                style: props.errorDisplayMode === "popup" ? overlay.floatingStyles.value : void 0,
+                "data-positioned": props.errorDisplayMode === "popup" ? overlay.positioned.value : void 0,
+                "aria-hidden": hasError.value ? void 0 : "true"
+              },
+              hasError.value ? errorMessage.value : ""
+            ),
+            overlay.target.value,
+            props.errorDisplayMode !== "popup"
           )
         ]
       );

package/dist/{chunk-VMYV5EWI.mjs → chunk-KICZSLOX.mjs}

@@ -1,9 +1,9 @@
 import {
   useFloatingPopup
-} from "./chunk-KE6RGD4Y.mjs";
+} from "./chunk-26OI3TEA.mjs";
 import {
-  renderVueBodyTeleport
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Popconfirm.ts
 import { defineComponent, computed, h, cloneVNode, isVNode } from "vue";
@@ -93,6 +93,9 @@ var Popconfirm = defineComponent({
       floatingRef,
       closeAndRestoreFocus,
       floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
       actualPlacement
     } = useFloatingPopup({ props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
@@ -118,9 +121,6 @@ var Popconfirm = defineComponent({
       );
     });
     const triggerClasses = computed(() => getPopconfirmTriggerClasses(props.disabled));
-    const contentWrapperClasses = computed(
-      () => classNames("absolute z-50", currentVisible.value ? "block" : "hidden")
-    );
     const arrowClasses = computed(() => getPopconfirmArrowClasses(actualPlacement.value));
     const contentClasses = getPopconfirmContentClasses();
     const titleClasses = getPopconfirmTitleClasses();
@@ -211,8 +211,9 @@ var Popconfirm = defineComponent({
         "div",
         {
           ref: floatingRef,
-          class: contentWrapperClasses.value,
+          class: floatingClasses.value,
           style: floatingStyles.value,
+          "data-positioned": positioned.value,
           hidden: !currentVisible.value,
           "aria-hidden": !currentVisible.value
         },
@@ -272,7 +273,7 @@ var Popconfirm = defineComponent({
           class: containerClasses.value,
           style: mergeStyleValues(attrs.style, props.style)
         },
-        [trigger, renderVueBodyTeleport(content)]
+        [trigger, renderVueOverlayTeleport(content, overlayTarget.value)]
       );
     };
   }

package/dist/{chunk-BNNTDSLJ.mjs → chunk-KROVW4AW.mjs}

@@ -1,9 +1,7 @@
 import {
-  renderVueBodyTeleport,
-  useVueClickOutside,
-  useVueEscapeKey,
-  useVueFloating
-} from "./chunk-BDTPFPSB.mjs";
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 
 // src/components/Dropdown.ts
 import {
@@ -29,9 +27,7 @@ import {
   getDropdownChevronClasses,
   getDropdownMenuClasses,
   getDropdownItemClasses,
-  getTransformOrigin,
   injectDropdownStyles,
-  FLOATING_OVERLAY_Z_INDEX,
   DROPDOWN_CHEVRON_PATH,
   DROPDOWN_ENTER_CLASS,
   handleMenuNavigation,
@@ -312,54 +308,22 @@ var Dropdown = defineComponent({
         handleMenuNavigation(floatingRef.value, event);
       }
     };
-    const {
-      x,
-      y,
-      placement: currentPlacement
-    } = useVueFloating({
+    const clickOutsideEnabled = computed(() => props.trigger === "click");
+    const portalEnabled = computed(() => props.portal);
+    const overlay = useVueAnchoredOverlay({
       referenceRef: triggerRef,
       floatingRef,
       enabled: currentVisible,
       placement: props.placement,
-      offset: props.offset
+      offset: props.offset,
+      portal: portalEnabled,
+      containerRef,
+      dismissOnOutside: clickOutsideEnabled,
+      dismissOnEscape: true,
+      onDismiss: () => setVisible(false)
     });
-    const clickOutsideEnabled = computed(() => currentVisible.value && props.trigger === "click");
-    let cleanupClickOutside = null;
-    watch(
-      clickOutsideEnabled,
-      (enabled) => {
-        cleanupClickOutside?.();
-        cleanupClickOutside = null;
-        if (enabled) {
-          cleanupClickOutside = useVueClickOutside({
-            enabled: currentVisible,
-            refs: [containerRef, floatingRef],
-            onOutsideClick: () => setVisible(false),
-            defer: true
-          });
-        }
-      },
-      { immediate: true }
-    );
-    let cleanupEscapeKey = null;
-    watch(
-      currentVisible,
-      (visible) => {
-        cleanupEscapeKey?.();
-        cleanupEscapeKey = null;
-        if (visible) {
-          cleanupEscapeKey = useVueEscapeKey({
-            enabled: currentVisible,
-            onEscape: () => setVisible(false)
-          });
-        }
-      },
-      { immediate: true }
-    );
     onBeforeUnmount(() => {
       if (hoverTimer) clearTimeout(hoverTimer);
-      cleanupClickOutside?.();
-      cleanupEscapeKey?.();
     });
     const containerClasses = computed(
       () => classNames(
@@ -371,14 +335,9 @@ var Dropdown = defineComponent({
     );
     const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
     const triggerClasses = computed(() => getDropdownTriggerClasses(props.disabled));
-    const menuWrapperClasses = classNames("absolute", DROPDOWN_ENTER_CLASS);
-    const menuWrapperStyles = computed(() => ({
-      position: "absolute",
-      left: `${x.value}px`,
-      top: `${y.value}px`,
-      zIndex: FLOATING_OVERLAY_Z_INDEX,
-      transformOrigin: getTransformOrigin(currentPlacement.value)
-    }));
+    const menuWrapperClasses = computed(
+      () => classNames(overlay.floatingClasses.value, DROPDOWN_ENTER_CLASS)
+    );
     const dropdownContext = reactive({
       closeOnClick: props.closeOnClick,
       handleItemClick
@@ -390,7 +349,6 @@ var Dropdown = defineComponent({
       }
     );
     provide(DropdownContextKey, dropdownContext);
-    const _menuItemTabIndex = -1;
     return () => {
       const defaultSlot = slots.default?.();
       const triggerSlot = slots.trigger?.({ open: currentVisible.value });
@@ -444,8 +402,9 @@ var Dropdown = defineComponent({
         "div",
         {
           ref: floatingRef,
-          class: menuWrapperClasses,
-          style: menuWrapperStyles.value,
+          class: menuWrapperClasses.value,
+          style: overlay.floatingStyles.value,
+          "data-positioned": overlay.positioned.value,
           "data-tiger-dropdown-menu": "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
@@ -454,7 +413,7 @@ var Dropdown = defineComponent({
         },
         [cloneVNode(menuNode, { id: menuId })]
       ) : null;
-      const menu = menuWrapper ? renderVueBodyTeleport(menuWrapper, !props.portal) : null;
+      const menu = menuWrapper ? renderVueOverlayTeleport(menuWrapper, overlay.target.value, !props.portal) : null;
       const {
         class: _class,
         style: _style,