@expcat/tigercat-vue 2.1.0 → 2.1.2

package/dist/{chunk-5E4LINDO.mjs → chunk-LH2V2JMZ.mjs}

@@ -1,5 +1,5 @@
 // src/components/Stepper.ts
-import { defineComponent, h, onBeforeUnmount } from "vue";
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import {
   stepperBaseClasses,
   getStepperInputClasses,
@@ -15,7 +15,8 @@ import {
 var Stepper = defineComponent({
   name: "TigerStepper",
   props: {
-    modelValue: { type: Number, default: 0 },
+    modelValue: { type: Number },
+    defaultValue: { type: Number, default: 0 },
     min: { type: Number, default: -Infinity },
     max: { type: Number, default: Infinity },
     step: { type: Number, default: 1 },
@@ -27,17 +28,32 @@ var Stepper = defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
+    const inner = ref(props.defaultValue ?? 0);
+    const currentValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : inner.value
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value !== void 0) {
+          inner.value = value;
+        }
+      }
+    );
     const repeatController = createRafRepeatActionController();
-    let repeatValue = props.modelValue;
+    let repeatValue = currentValue.value;
     let suppressNextClick = false;
     onBeforeUnmount(() => repeatController.stop());
     function setValue(v) {
       const clamped = clampStepperValue(v, props.min, props.max, props.precision);
+      if (props.modelValue === void 0) {
+        inner.value = clamped;
+      }
       emit("update:modelValue", clamped);
       emit("change", clamped);
       return clamped;
     }
-    function stepBy(direction, baseValue = props.modelValue) {
+    function stepBy(direction, baseValue = currentValue.value) {
       return setValue(direction === "up" ? baseValue + props.step : baseValue - props.step);
     }
     function decrement() {
@@ -60,10 +76,10 @@ var Stepper = defineComponent({
       return (event) => {
         event.preventDefault();
         if (props.disabled) return;
-        if (direction === "down" && props.modelValue <= props.min) return;
-        if (direction === "up" && props.modelValue >= props.max) return;
+        if (direction === "down" && currentValue.value <= props.min) return;
+        if (direction === "up" && currentValue.value >= props.max) return;
         suppressNextClick = true;
-        repeatValue = props.modelValue;
+        repeatValue = currentValue.value;
         repeatController.start(() => {
           const baseValue = repeatValue;
           const nextValue = stepBy(direction, baseValue);
@@ -91,8 +107,8 @@ var Stepper = defineComponent({
       [h("path", { d, "fill-rule": "evenodd", "clip-rule": "evenodd" })]
     );
     return () => {
-      const atMin = props.modelValue <= props.min;
-      const atMax = props.modelValue >= props.max;
+      const atMin = currentValue.value <= props.min;
+      const atMax = currentValue.value >= props.max;
       return h(
         "div",
         {
@@ -119,7 +135,7 @@ var Stepper = defineComponent({
           h("input", {
             type: "text",
             class: getStepperInputClasses(props.size),
-            value: props.precision !== void 0 ? props.modelValue.toFixed(props.precision) : String(props.modelValue),
+            value: props.precision !== void 0 ? currentValue.value.toFixed(props.precision) : String(currentValue.value),
             disabled: props.disabled,
             "aria-label": "Value",
             onChange: handleInput

package/dist/{chunk-PQBKN2NH.mjs → chunk-LRFKHJDU.mjs}

@@ -114,7 +114,13 @@ var Transfer = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
+  emits: [
+    "update:modelValue",
+    "update:targetKeys",
+    "update:searchValue",
+    "change",
+    "search-change"
+  ],
   setup(props, { emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
@@ -183,6 +189,11 @@ var Transfer = defineComponent({
       }
       targetSelectedKeys.value = next;
     }
+    function updateTargetKeys(newTargetKeys, direction, movedKeys) {
+      emit("update:modelValue", newTargetKeys);
+      emit("update:targetKeys", newTargetKeys);
+      emit("change", newTargetKeys, direction, movedKeys);
+    }
     function moveRight() {
       if (!canMoveRight.value) return;
       const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
@@ -192,8 +203,7 @@ var Transfer = defineComponent({
         props.dataSource
       );
       sourceSelectedKeys.value = /* @__PURE__ */ new Set();
-      emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "right", movedKeys);
+      updateTargetKeys(newTargetKeys, "right", movedKeys);
     }
     function moveLeft() {
       if (!canMoveLeft.value) return;
@@ -204,8 +214,7 @@ var Transfer = defineComponent({
         props.dataSource
       );
       targetSelectedKeys.value = /* @__PURE__ */ new Set();
-      emit("update:modelValue", newTargetKeys);
-      emit("change", newTargetKeys, "left", movedKeys);
+      updateTargetKeys(newTargetKeys, "left", movedKeys);
     }
     function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearchInput) {
       return h("div", { class: transferPanelClasses, role: "group", "aria-label": title }, [

package/dist/{chunk-W5XFWVNV.mjs → chunk-M4FWWEMX.mjs}

@@ -1,6 +1,9 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -12,7 +15,7 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
@@ -30,7 +33,6 @@ import {
   ensureBarMinHeight,
   getStableChartGradientPrefix,
   getBarValueLabelY,
-  getChartInnerRect,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
@@ -245,6 +247,7 @@ var BarChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -255,7 +258,12 @@ var BarChart = defineComponent({
       getData: (index) => props.data[index],
       eventNames: { hover: "bar-hover", click: "bar-click" }
     });
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const xDomain = computed(() => props.data.map((item) => String(item.x)));
     const yValues = computed(() => props.data.map((item) => item.y));
     const resolvedXScale = computed(() => {
@@ -379,7 +387,8 @@ var BarChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -452,7 +461,7 @@ var BarChart = defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-VLW3UBIR.mjs → chunk-N2XV37BL.mjs}

@@ -1,6 +1,6 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
 import {
   ChartSeries
 } from "./chunk-2ZUEXCVJ.mjs";
@@ -9,7 +9,7 @@ import {
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
@@ -20,7 +20,9 @@ import {
   chartAxisTickTextClasses,
   chartGridLineClasses,
   classNames,
+  createCircleRingPath,
   createPolygonPath,
+  createPolygonRingPath,
   getChartGridLineDasharray,
   getChartInnerRect,
   getRadarAngles,
@@ -269,6 +271,7 @@ var RadarChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -284,7 +287,7 @@ var RadarChart = defineComponent({
     });
     const hoveredPoint = ref(null);
     const handlePointEnter = (seriesIndex, pointIndex, event) => {
-      if (!props.hoverable) return;
+      if (!props.hoverable && !props.showTooltip) return;
       hoveredPoint.value = { seriesIndex, pointIndex };
       handleHoverEnter(seriesIndex, event);
     };
@@ -547,43 +550,36 @@ var RadarChart = defineComponent({
                 );
               }) : []
             ]) : null,
-            // Split area (alternating fills – ECharts splitArea style)
+            // Split area (alternating fills – evenodd ring, transparent inner)
             ...splitAreaPaths.value.map((area, index) => {
+              const shared = {
+                key: `split-${index}`,
+                fill: area.color,
+                "fill-opacity": props.splitAreaOpacity,
+                stroke: "none",
+                "data-radar-split-area": "true"
+              };
               if (area.type === "circle-ring") {
-                return h("g", { key: `split-${index}` }, [
-                  h("circle", {
-                    cx: area.cx,
-                    cy: area.cy,
-                    r: area.outerRadius,
-                    fill: area.color,
-                    "fill-opacity": props.splitAreaOpacity,
-                    stroke: "none",
-                    "data-radar-split-area": "true"
-                  }),
-                  area.innerRadius > 0 ? h("circle", {
-                    cx: area.cx,
-                    cy: area.cy,
-                    r: area.innerRadius,
-                    fill: "var(--tiger-bg,#fff)",
-                    stroke: "none"
-                  }) : null
-                ]);
+                if (area.innerRadius > 0) {
+                  return h("path", {
+                    ...shared,
+                    d: createCircleRingPath(area.cx, area.cy, area.outerRadius, area.innerRadius),
+                    "fill-rule": "evenodd"
+                  });
+                }
+                return h("circle", {
+                  ...shared,
+                  cx: area.cx,
+                  cy: area.cy,
+                  r: area.outerRadius
+                });
+              }
+              if (area.innerPoints.length > 0) {
+                const d2 = createPolygonRingPath(area.outerPoints, area.innerPoints);
+                return d2 ? h("path", { ...shared, d: d2, "fill-rule": "evenodd" }) : null;
               }
-              const outerPath = createPolygonPath(area.outerPoints);
-              return h("g", { key: `split-${index}` }, [
-                outerPath ? h("path", {
-                  d: outerPath,
-                  fill: area.color,
-                  "fill-opacity": props.splitAreaOpacity,
-                  stroke: "none",
-                  "data-radar-split-area": "true"
-                }) : null,
-                area.innerPoints.length > 0 ? h("path", {
-                  d: createPolygonPath(area.innerPoints),
-                  fill: "var(--tiger-bg,#fff)",
-                  stroke: "none"
-                }) : null
-              ]);
+              const d = createPolygonPath(area.outerPoints);
+              return d ? h("path", { ...shared, d }) : null;
             }),
             // Grid lines
             ...gridPaths.value.map(
@@ -694,9 +690,9 @@ var RadarChart = defineComponent({
                         "data-series-index": seriesIndex,
                         "data-series-key": item.seriesKey,
                         "data-point-index": point.index,
-                        onMouseenter: props.showTooltip && props.hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
-                        onMousemove: props.showTooltip && props.hoverable ? handlePointMove : void 0,
-                        onMouseleave: props.showTooltip && props.hoverable ? handlePointLeave : void 0,
+                        onMouseenter: props.showTooltip || props.hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
+                        onMousemove: props.showTooltip || props.hoverable ? handlePointMove : void 0,
+                        onMouseleave: props.showTooltip || props.hoverable ? handlePointLeave : void 0,
                         onFocus: props.showTooltip && props.hoverable ? (e) => showPointTooltipFromElement(
                           e.currentTarget,
                           seriesIndex,
@@ -753,7 +749,7 @@ var RadarChart = defineComponent({
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: hoveredPoint.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-2LIIMWBR.mjs → chunk-OYU47A57.mjs}

@@ -19,7 +19,6 @@ import {
   getPageRange,
   validateCurrentPage,
   getPageNumbers,
-  defaultTotalText,
   formatPaginationTotal,
   getPaginationContainerClasses,
   getPaginationButtonBaseClasses,
@@ -357,7 +356,7 @@ var Pagination = defineComponent({
       const prevDisabled = page <= 1 || props.disabled;
       const nextDisabled = page >= pages || props.disabled;
       if (props.showTotal) {
-        const totalTextFn = props.totalText || (props.labels?.totalText || mergedLocale.value?.pagination?.totalText ? (value, range) => formatPaginationTotal(labels.value.totalText, value, range, localeCode.value) : defaultTotalText);
+        const totalTextFn = props.totalText || ((value, range) => formatPaginationTotal(labels.value.totalText, value, range, localeCode.value));
         elements.push(
           h("span", { class: getTotalTextClasses(size) }, totalTextFn(props.total, pageRange.value))
         );

package/dist/{chunk-KU2Q5V3L.mjs → chunk-P62TYR3M.mjs}

@@ -102,6 +102,9 @@ var CollapsePanel = defineComponent({
         collapseContext.handlePanelClick(props.panelKey);
       }
     };
+    const handleExtraClick = (event) => {
+      event.stopPropagation();
+    };
     const handleKeydown = (event) => {
       if (props.disabled) {
         return;
@@ -163,7 +166,16 @@ var CollapsePanel = defineComponent({
         )
       );
       if (extraSlot) {
-        headerContent.push(h("span", { class: "ml-auto" }, extraSlot));
+        headerContent.push(
+          h(
+            "span",
+            {
+              class: "ml-auto",
+              onClick: handleExtraClick
+            },
+            extraSlot
+          )
+        );
       }
       if (props.showArrow && collapseContext.expandIconPosition === "end") {
         headerContent.push(arrowIcon);
@@ -187,7 +199,11 @@ var CollapsePanel = defineComponent({
           ref: contentRef,
           "data-tiger-collapse-content": "",
           class: collapsePanelContentWrapperClasses,
-          style: initialContentStyle
+          style: initialContentStyle,
+          ...isActive.value ? {} : {
+            inert: true,
+            "aria-hidden": "true"
+          }
         },
         [
           h(

package/dist/{chunk-P5FDKBXG.mjs → chunk-P7X46BAW.mjs}

@@ -3,7 +3,15 @@ import {
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/Signature.ts
-import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from "vue";
 import {
   classNames,
   clampSignatureLineWidth,
@@ -61,8 +69,10 @@ var Signature = defineComponent({
     const canvasRef = ref(null);
     const strokes = ref([]);
     const activeStroke = ref(null);
+    const capturedPointerId = ref(null);
     const isDisabled = computed(() => props.disabled || props.readonly);
     const normalizedLineWidth = computed(() => clampSignatureLineWidth(props.lineWidth));
+    let documentPointerListening = false;
     const draw = (nextStrokes) => {
       const canvas = canvasRef.value;
       const context = canvas?.getContext("2d");
@@ -90,6 +100,8 @@ var Signature = defineComponent({
         if (value === "" && !isSignatureEmpty(strokes.value)) {
           strokes.value = [];
           activeStroke.value = null;
+          detachDocumentPointerListeners();
+          releaseCanvasPointer();
           draw([]);
         }
       }
@@ -130,6 +142,8 @@ var Signature = defineComponent({
     const clear = () => {
       strokes.value = [];
       activeStroke.value = null;
+      detachDocumentPointerListeners();
+      releaseCanvasPointer();
       draw([]);
       emitChange([]);
       emit("clear");
@@ -144,10 +158,55 @@ var Signature = defineComponent({
       };
       return getSignaturePoint(event.clientX, event.clientY, rect, props.width, props.height);
     };
+    const captureCanvasPointer = (pointerId) => {
+      capturedPointerId.value = pointerId;
+      const canvas = canvasRef.value;
+      if (!canvas || typeof canvas.setPointerCapture !== "function") return;
+      try {
+        canvas.setPointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const releaseCanvasPointer = () => {
+      const canvas = canvasRef.value;
+      const pointerId = capturedPointerId.value;
+      capturedPointerId.value = null;
+      if (!canvas || pointerId == null || typeof canvas.releasePointerCapture !== "function") return;
+      if (typeof canvas.hasPointerCapture === "function") {
+        try {
+          if (!canvas.hasPointerCapture(pointerId)) return;
+        } catch {
+          return;
+        }
+      }
+      try {
+        canvas.releasePointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const handleDocumentPointerEnd = () => {
+      finishStroke();
+    };
+    const attachDocumentPointerListeners = () => {
+      if (documentPointerListening || !isBrowser()) return;
+      document.addEventListener("pointerup", handleDocumentPointerEnd);
+      document.addEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListening = true;
+    };
+    const detachDocumentPointerListeners = () => {
+      if (!documentPointerListening || !isBrowser()) return;
+      document.removeEventListener("pointerup", handleDocumentPointerEnd);
+      document.removeEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListening = false;
+    };
     const handlePointerDown = (event) => {
       if (isDisabled.value) return;
       event.preventDefault();
       canvasRef.value?.focus();
+      const pointerId = event.pointerId;
+      if (typeof pointerId === "number") {
+        captureCanvasPointer(pointerId);
+      }
       const stroke = {
         color: props.penColor,
         lineWidth: normalizedLineWidth.value,
@@ -155,6 +214,7 @@ var Signature = defineComponent({
       };
       activeStroke.value = stroke;
       strokes.value = [...strokes.value, stroke];
+      attachDocumentPointerListeners();
       emit("begin");
     };
     const handlePointerMove = (event) => {
@@ -163,12 +223,18 @@ var Signature = defineComponent({
       activeStroke.value.points.push(getPointFromEvent(event));
       strokes.value = [...strokes.value];
     };
-    const finishStroke = () => {
+    function finishStroke() {
       if (!activeStroke.value) return;
       activeStroke.value = null;
       const payload = emitChange(strokes.value);
       emit("end", payload);
-    };
+      detachDocumentPointerListeners();
+      releaseCanvasPointer();
+    }
+    onUnmounted(() => {
+      detachDocumentPointerListeners();
+      releaseCanvasPointer();
+    });
     const handleKeyDown = (event) => {
       if (!props.clearable || isDisabled.value) return;
       if (event.key !== "Delete" && event.key !== "Backspace") return;
@@ -213,6 +279,7 @@ var Signature = defineComponent({
               onPointermove: handlePointerMove,
               onPointerup: finishStroke,
               onPointercancel: finishStroke,
+              onLostpointercapture: finishStroke,
               onKeydown: handleKeyDown
             })
           ]),

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

@@ -101,6 +101,15 @@ var DropdownItem = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * When set, overrides the parent Dropdown `closeOnClick`.
+     * Omitted inherits the parent. Must default to undefined (not false): a
+     * bare Boolean would coerce omitted to false and break parent inheritance.
+     */
+    closeOnClick: {
+      type: Boolean,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -125,8 +134,9 @@ var DropdownItem = defineComponent({
         return;
       }
       emit("click", event);
-      if (context?.closeOnClick) {
-        context.handleItemClick();
+      const shouldClose = props.closeOnClick ?? context?.closeOnClick ?? true;
+      if (shouldClose) {
+        context?.handleItemClick();
       }
     };
     const itemClasses = computed(() => {
@@ -286,7 +296,7 @@ var Dropdown = defineComponent({
       }
     };
     const handleItemClick = () => {
-      if (props.closeOnClick) setVisible(false);
+      setVisible(false);
     };
     let hoverTimer = null;
     const handleMouseEnter = () => {

package/dist/{chunk-26OI3TEA.mjs → chunk-PMQSXEMT.mjs}

@@ -3,9 +3,10 @@ import {
 } from "./chunk-Q7Y22OFX.mjs";
 
 // src/utils/use-floating-popup.ts
-import { computed, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import {
   buildTriggerHandlerMap,
+  createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
 function useFloatingPopup(options) {
@@ -27,6 +28,10 @@ function useFloatingPopup(options) {
     emit("update:open", next);
     emit("open-change", next);
   };
+  const hoverController = createFloatingHoverDelayController({
+    show: () => setVisible(true),
+    hide: () => setVisible(false)
+  });
   const containerRef = ref(null);
   const triggerRef = ref(null);
   const floatingRef = ref(null);
@@ -40,7 +45,7 @@ function useFloatingPopup(options) {
     }, 0);
   };
   const closeAndRestoreFocus = () => {
-    setVisible(false);
+    hoverController.closeNow();
     restoreTriggerFocus();
   };
   const effectiveTrigger = computed(
@@ -59,21 +64,52 @@ function useFloatingPopup(options) {
       if (reason === "escape") {
         closeAndRestoreFocus();
       } else {
-        setVisible(false);
+        hoverController.closeNow();
       }
     }
   });
   const x = overlay.x;
   const y = overlay.y;
   const handleToggle = () => {
-    if (!props.disabled) setVisible(!currentVisible.value);
+    if (props.disabled) return;
+    hoverController.cancel();
+    setVisible(!currentVisible.value);
   };
   const handleShow = () => {
-    if (!props.disabled) setVisible(true);
+    if (props.disabled) return;
+    if (effectiveTrigger.value === "hover") {
+      hoverController.enter();
+      return;
+    }
+    hoverController.cancel();
+    setVisible(true);
   };
   const handleHide = () => {
-    if (!props.disabled) setVisible(false);
+    if (props.disabled) return;
+    if (effectiveTrigger.value === "hover") {
+      hoverController.leave();
+      return;
+    }
+    hoverController.closeNow();
   };
+  watch(
+    () => [floatingRef.value, currentVisible.value, effectiveTrigger.value],
+    ([el, visible, trigger], _prev, onCleanup) => {
+      if (!multiTrigger || trigger !== "hover" || !visible || !el) return;
+      const handleEnter = () => hoverController.enter();
+      const handleLeave = () => hoverController.leave();
+      el.addEventListener("mouseenter", handleEnter);
+      el.addEventListener("mouseleave", handleLeave);
+      onCleanup(() => {
+        el.removeEventListener("mouseenter", handleEnter);
+        el.removeEventListener("mouseleave", handleLeave);
+      });
+    },
+    { flush: "post", immediate: true }
+  );
+  onBeforeUnmount(() => {
+    hoverController.dispose();
+  });
   const triggerHandlers = computed(() => {
     if (!multiTrigger) {
       return { onClick: handleToggle };