maz-ui 4.0.0-beta.9 → 4.0.0

package/dist/components/MazPopover.js

@@ -1,9 +1,11 @@
-import { defineComponent, mergeModels, useAttrs, useTemplateRef, useModel, ref, computed, nextTick, watch, onMounted, onBeforeUnmount, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, mergeProps, renderSlot, Teleport, createVNode, Transition, withCtx, withDirectives, createCommentVNode } from "vue";
-import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
+import { defineComponent, mergeModels, useAttrs, useTemplateRef, computed, useModel, nextTick, watch, onMounted, onBeforeUnmount, onUnmounted, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, renderSlot, Teleport, createVNode, Transition, withCtx, withDirectives } from "vue";
+import { offset, hide, shift, autoPlacement, flip, useFloating, autoUpdate } from "@floating-ui/vue";
+import { e } from "../chunks/isClient.8V3qjGdO.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
-import { d as directive } from "../chunks/vClickOutside.DIOiluy0.js";
+import { d as directive } from "../chunks/vClickOutside.CJBKY5no.js";
+import { g as getColor } from "../chunks/types.D0Bp_UhS.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expanded", "aria-haspopup", "aria-describedby", "aria-labelledby"], _hoisted_2 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-modal", "tabindex", "aria-live"], _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expanded", "aria-haspopup", "aria-describedby", "aria-labelledby"], _hoisted_2 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-modal", "tabindex", "aria-live"], _sfc_main = /* @__PURE__ */ defineComponent({
   name: "MazPopover",
   inheritAttrs: !1,
   __name: "MazPopover",
@@ -19,8 +21,8 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
     disabled: { type: Boolean, default: !1 },
     offset: { default: 8 },
     delay: { default: 0 },
-    hoverDelay: { default: 200 },
-    transition: { default: "maz-popover" },
+    hoverDelay: { default: 150 },
+    transition: { default: "scale-pop" },
     teleportTo: { default: "body" },
     overlayClass: {},
     panelClass: {},
@@ -40,24 +42,47 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
     modelValue: { type: Boolean, required: !1, default: !1 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["update:model-value", "open", "close", "toggle"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ mergeModels(["update:model-value", "open", "close", "after-close-animation", "toggle"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit, triggerId = useInstanceUniqId({
       componentName: "MazPopover",
       providedId: __props.id
-    }), attrs = useAttrs(), triggerElement = useTemplateRef("trigger"), panelElement = useTemplateRef("panel");
+    }), attrs = useAttrs(), triggerElement = useTemplateRef("trigger"), panelElement = useTemplateRef("panel"), middleware = computed(() => {
+      const middleware2 = [
+        offset(__props.offset),
+        hide(),
+        shift({ padding: 5 })
+      ];
+      return __props.position === "auto" && !__props.preferPosition && !__props.fallbackPosition ? middleware2.push(autoPlacement({
+        allowedPlacements: ["top", "bottom", "left", "right"]
+      })) : middleware2.push(flip({
+        fallbackPlacements: __props.fallbackPosition ? [__props.fallbackPosition] : void 0
+      })), middleware2;
+    }), floatingPosition = computed(() => __props.position === "auto" ? __props.preferPosition : __props.position), transitionName = computed(() => ["scale-pop", "scale-fade"].includes(__props.transition) ? `maz-${__props.transition}` : __props.transition), reference = computed(() => getPositionReference() || triggerElement.value), { floatingStyles, placement, update, middlewareData } = useFloating(
+      reference,
+      panelElement,
+      {
+        placement: floatingPosition,
+        middleware,
+        transform: !1,
+        whileElementsMounted: autoUpdate
+      }
+    ), computedPosition = computed(() => placement.value ?? floatingPosition.value);
     function getPositionReference() {
       if (!__props.positionReference)
         return triggerElement.value;
       if (typeof __props.positionReference == "string") {
         const withinTrigger = triggerElement.value?.querySelector(__props.positionReference);
-        return withinTrigger || document.querySelector(__props.positionReference);
+        return withinTrigger || (e() ? document.querySelector(__props.positionReference) : null);
       }
       return __props.positionReference;
     }
-    const isOpen = useModel(__props, "modelValue"), computedPosition = ref(__props.position === "auto" ? "bottom" : __props.position);
+    const isOpen = useModel(__props, "modelValue");
     let openTimeout = null, closeTimeout = null, initialFocusElement = null, ignoreNextClickOutside = !1;
-    const panelId = computed(() => `${triggerId.value}-panel`), panelStyles = ref(), rootStyles = computed(() => attrs.style), isTouchDevice = computed(() => isClient() ? "ontouchstart" in globalThis || navigator.maxTouchPoints > 0 : !1), effectiveTrigger = computed(() => __props.trigger === "adaptive" ? isTouchDevice.value ? "click" : "hover" : __props.trigger), triggerEvents = computed(() => {
+    const panelId = computed(() => `${triggerId.value}-panel`), rootStyles = computed(() => attrs.style), panelStyles = computed(() => ({
+      ...floatingStyles.value,
+      pointerEvents: isOpen.value ? "auto" : "none"
+    })), isTouchDevice = computed(() => e() ? "ontouchstart" in globalThis || navigator.maxTouchPoints > 0 : !1), effectiveTrigger = computed(() => __props.trigger === "adaptive" ? isTouchDevice.value ? "click" : "hover" : __props.trigger), triggerEvents = computed(() => {
       if (__props.disabled || effectiveTrigger.value === "manual")
         return {};
       const events = {};
@@ -75,83 +100,10 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
       __props.overlayClass,
       __props.panelClass,
       `--position-${computedPosition.value}`,
-      `--${__props.color}`
+      `--${getColor(__props.color)}`
     ]);
-    let resizeObserver = null, mutationObserver = null, isPositioning = !1, positioningFrame = null;
-    function calculateAndApplyPosition(options = {}) {
-      if (!triggerElement.value || !panelElement.value || isPositioning)
-        return null;
-      const { applyStyles = !0, forAnimation = !1 } = options;
-      applyStyles && (isPositioning = !0, positioningFrame && cancelAnimationFrame(positioningFrame));
-      const doCalculation = () => {
-        if (!triggerElement.value || !panelElement.value)
-          return applyStyles && (isPositioning = !1), null;
-        try {
-          const viewport = { width: window.innerWidth, height: window.innerHeight }, positionRef = getPositionReference();
-          if (!positionRef)
-            return applyStyles && (isPositioning = !1), null;
-          const triggerRect = positionRef.getBoundingClientRect();
-          let wasHidden = !1;
-          forAnimation && (wasHidden = panelElement.value.style.visibility === "hidden", panelElement.value.style.visibility = "hidden", panelElement.value.style.display = "block");
-          let newPosition;
-          if (__props.position === "auto" ? newPosition = getBestPosition(triggerRect, viewport) : newPosition = __props.position, computedPosition.value = newPosition, applyStyles) {
-            const panelRect = panelElement.value.getBoundingClientRect(), styles = calculatePosition(newPosition, triggerRect, panelRect);
-            panelStyles.value = styles;
-          }
-          return forAnimation && !applyStyles && (wasHidden ? panelElement.value.style.visibility = "hidden" : panelElement.value.style.display = ""), newPosition;
-        } catch (error) {
-          return console.warn("[MazPopover] Error calculating position:", error), null;
-        } finally {
-          applyStyles && (isPositioning = !1, positioningFrame = null);
-        }
-      };
-      return applyStyles ? (positioningFrame = requestAnimationFrame(doCalculation), null) : doCalculation();
-    }
-    function updatePosition() {
-      calculateAndApplyPosition({ applyStyles: !0 });
-    }
-    function schedulePositionUpdate() {
-      isOpen.value && !isPositioning && updatePosition();
-    }
-    function preparePositionForAnimation() {
-      if (__props.position === "auto" && triggerElement.value) {
-        const positionRef = getPositionReference();
-        if (positionRef) {
-          const triggerRect = positionRef.getBoundingClientRect(), viewport = { width: window.innerWidth, height: window.innerHeight }, newPosition = getBestPosition(triggerRect, viewport);
-          computedPosition.value = newPosition;
-        }
-      }
-      return calculateAndApplyPosition({ applyStyles: !1, forAnimation: !0 });
-    }
-    function setupObservers() {
-      if (!panelElement.value || !triggerElement.value)
-        return;
-      const positionRef = getPositionReference();
-      positionRef && (globalThis.ResizeObserver && (resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries)
-          if (entry.target === panelElement.value || entry.target === triggerElement.value || entry.target === positionRef) {
-            schedulePositionUpdate();
-            break;
-          }
-      }), resizeObserver.observe(panelElement.value), resizeObserver.observe(triggerElement.value), positionRef !== triggerElement.value && resizeObserver.observe(positionRef), resizeObserver.observe(document.documentElement)), mutationObserver = new MutationObserver((mutations) => {
-        if (isPositioning)
-          return;
-        let shouldUpdate = !1;
-        for (const mutation of mutations)
-          if (!(mutation.target === panelElement.value && mutation.type === "attributes" && mutation.attributeName === "style") && (mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "class")) {
-            shouldUpdate = !0;
-            break;
-          }
-        shouldUpdate && schedulePositionUpdate();
-      }), mutationObserver.observe(panelElement.value, {
-        childList: !0,
-        subtree: !0,
-        attributes: !0,
-        attributeFilter: ["class"]
-      }));
-    }
-    function cleanupObservers() {
-      positioningFrame && (cancelAnimationFrame(positioningFrame), positioningFrame = null), resizeObserver && (resizeObserver.disconnect(), resizeObserver = null), mutationObserver && (mutationObserver.disconnect(), mutationObserver = null);
+    function cleanup() {
+      clearOpenTimeout(), clearCloseTimeout(), e() && document.removeEventListener("keydown", onKeydown);
     }
     function open() {
       __props.disabled || (clearCloseTimeout(), effectiveTrigger.value === "click" && (ignoreNextClickOutside = !0), __props.delay > 0 ? openTimeout = setTimeout(() => {
@@ -169,15 +121,9 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
       isOpen.value ? close() : open();
     }
     function setOpen(value) {
-      value ? (emits("open"), nextTick(() => {
-        triggerElement.value && panelElement.value && preparePositionForAnimation(), (() => {
-          isOpen.value = value, emits("toggle", value), updatePosition(), setupObservers(), setupFocusTrap();
-        })();
-      })) : (isOpen.value = value, emits("toggle", value), emits("close"), panelStyles.value = {
-        position: "fixed",
-        visibility: "hidden",
-        pointerEvents: "none"
-      }, ignoreNextClickOutside = !1, cleanupObservers(), __props.trapFocus && restoreFocus());
+      value ? (emits("open"), isOpen.value = value, emits("toggle", value), nextTick(() => {
+        update(), setupFocusTrap();
+      })) : (isOpen.value = value, emits("toggle", value), emits("close"), ignoreNextClickOutside = !1, __props.trapFocus && restoreFocus());
     }
     function clearOpenTimeout() {
       openTimeout && (clearTimeout(openTimeout), openTimeout = null);
@@ -185,56 +131,6 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
     function clearCloseTimeout() {
       closeTimeout && (clearTimeout(closeTimeout), closeTimeout = null);
     }
-    function getBestPosition(triggerRect, viewport) {
-      if (!panelElement.value)
-        return "bottom";
-      const panelRect = panelElement.value.getBoundingClientRect();
-      if (__props.preferPosition && isPositionVisible(__props.preferPosition, triggerRect, panelRect, viewport))
-        return __props.preferPosition;
-      if (__props.preferPosition && __props.fallbackPosition)
-        return __props.fallbackPosition;
-      const positions = ["bottom", "top", "right", "left"], validPositions = getValidPositions(positions, triggerRect, panelRect, viewport);
-      if (validPositions.length === 0) {
-        const spaces = {
-          top: triggerRect.top,
-          bottom: viewport.height - triggerRect.bottom,
-          left: triggerRect.left,
-          right: viewport.width - triggerRect.right
-        };
-        return positions.sort((a, b) => spaces[b] - spaces[a])[0];
-      }
-      return validPositions.sort((a, b) => b.score - a.score)[0].position;
-    }
-    function calculatePosition(position, triggerRect, _panelRect) {
-      const viewport = { width: window.innerWidth, height: window.innerHeight }, styles = {
-        position: "fixed",
-        visibility: "visible",
-        transformOrigin: getTransformOrigin(position)
-      };
-      switch (position) {
-        case "top":
-        case "top-start":
-        case "top-end":
-          styles.bottom = `${viewport.height - triggerRect.top + __props.offset}px`, position === "top-start" ? styles.left = `${triggerRect.left}px` : position === "top-end" ? styles.right = `${viewport.width - triggerRect.right}px` : styles.left = `${triggerRect.left + triggerRect.width / 2 - _panelRect.width / 2}px`;
-          break;
-        case "bottom":
-        case "bottom-start":
-        case "bottom-end":
-          styles.top = `${triggerRect.bottom + __props.offset}px`, position === "bottom-start" ? styles.left = `${triggerRect.left}px` : position === "bottom-end" ? styles.right = `${viewport.width - triggerRect.right}px` : styles.left = `${triggerRect.left + triggerRect.width / 2 - _panelRect.width / 2}px`;
-          break;
-        case "left":
-        case "left-start":
-        case "left-end":
-          styles.right = `${viewport.width - triggerRect.left + __props.offset}px`, position === "left-start" ? styles.top = `${triggerRect.top}px` : position === "left-end" ? styles.bottom = `${viewport.height - triggerRect.bottom}px` : styles.top = `${triggerRect.top + triggerRect.height / 2 - _panelRect.height / 2}px`;
-          break;
-        case "right":
-        case "right-start":
-        case "right-end":
-          styles.left = `${triggerRect.right + __props.offset}px`, position === "right-start" ? styles.top = `${triggerRect.top}px` : position === "right-end" ? styles.bottom = `${viewport.height - triggerRect.bottom}px` : styles.top = `${triggerRect.top + triggerRect.height / 2 - _panelRect.height / 2}px`;
-          break;
-      }
-      return styles;
-    }
     function getTransformOrigin(position) {
       switch (position) {
         case "top":
@@ -265,30 +161,8 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
           return "center";
       }
     }
-    function isPositionVisible(position, triggerRect, panelRect, viewport) {
-      const styles = calculatePosition(position, triggerRect, panelRect);
-      let top = 0, left = 0;
-      return styles.top ? top = Number.parseInt(styles.top) : styles.bottom && (top = viewport.height - Number.parseInt(styles.bottom) - panelRect.height), styles.left ? left = Number.parseInt(styles.left) : styles.right && (left = viewport.width - Number.parseInt(styles.right) - panelRect.width), styles.transform?.includes("translateX(-50%)") && (left -= panelRect.width / 2), styles.transform?.includes("translateY(-50%)") && (top -= panelRect.height / 2), left >= 0 && left + panelRect.width <= viewport.width && top >= 0 && top + panelRect.height <= viewport.height;
-    }
-    function getValidPositions(positions, triggerRect, panelRect, viewport) {
-      const spaces = {
-        bottom: viewport.height - triggerRect.bottom,
-        top: triggerRect.top,
-        right: viewport.width - triggerRect.right,
-        left: triggerRect.left
-      };
-      return positions.reduce((acc, pos) => {
-        if (isPositionVisible(pos, triggerRect, panelRect, viewport)) {
-          let positionBonus = 0;
-          pos === "bottom" ? positionBonus = 1e3 : pos === "top" ? positionBonus = 800 : pos === "right" ? positionBonus = 600 : pos === "left" && (positionBonus = 400);
-          const score = spaces[pos] + positionBonus;
-          acc.push({ position: pos, score });
-        }
-        return acc;
-      }, []);
-    }
     function setupFocusTrap() {
-      __props.role === "tooltip" || __props.role === "menu" || effectiveTrigger.value === "hover" || !__props.trapFocus || (initialFocusElement = document.activeElement, nextTick(() => {
+      __props.role === "tooltip" || effectiveTrigger.value === "hover" || !__props.trapFocus || !e() || (initialFocusElement = document.activeElement, nextTick(() => {
         const focusableElements = panelElement.value?.querySelectorAll(
           'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
         );
@@ -296,15 +170,15 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
       }));
     }
     function restoreFocus() {
-      __props.role === "tooltip" || __props.role === "menu" || effectiveTrigger.value === "hover" || !__props.trapFocus || nextTick(() => {
+      __props.role === "tooltip" || effectiveTrigger.value === "hover" || !__props.trapFocus || !e() || nextTick(() => {
         initialFocusElement?.focus({ preventScroll: !0 });
       });
     }
     function onKeydown(event) {
-      isOpen.value && (event.key === "Escape" && __props.closeOnEscape && !__props.persistent && (event.preventDefault(), close()), (__props.role === "dialog" || __props.role === "menu") && event.key === "Tab" && handleTrapFocus(event));
+      isOpen.value && (event.key === "Escape" && __props.closeOnEscape && !__props.persistent && (event.preventDefault(), close()), event.key === "Tab" && __props.trapFocus && handleTrapFocus(event));
     }
     function handleTrapFocus(event) {
-      if (!panelElement.value)
+      if (!panelElement.value || !e())
         return;
       const focusableElements = panelElement.value.querySelectorAll(
         'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
@@ -327,20 +201,13 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
         }
       }
     }
-    function onScrollThrottled() {
-      isOpen.value && schedulePositionUpdate();
-    }
     return watch(isOpen, (value, oldValue) => {
-      !isClient() || value === oldValue || (value ? open() : oldValue && !value && close());
-    }, { immediate: !0 }), watch(() => __props.position, (newPosition) => {
-      newPosition !== "auto" && (computedPosition.value = newPosition), isOpen.value && nextTick(updatePosition);
+      !e() || value === oldValue || (value ? open() : oldValue && !value && close());
+    }, { immediate: !0 }), watch(() => __props.position, () => {
+      isOpen.value && nextTick(() => update());
     }), onMounted(() => {
-      document.addEventListener("keydown", onKeydown), window.addEventListener("scroll", onScrollThrottled, { passive: !0, capture: !0 }), window.addEventListener("resize", onScrollThrottled, { passive: !0 });
-    }), onBeforeUnmount(() => {
-      cleanupObservers(), clearOpenTimeout(), clearCloseTimeout();
-    }), onUnmounted(() => {
-      document.removeEventListener("keydown", onKeydown), window.removeEventListener("scroll", onScrollThrottled, !0), window.removeEventListener("resize", onScrollThrottled);
-    }), __expose({
+      document.addEventListener("keydown", onKeydown);
+    }), onBeforeUnmount(cleanup), onUnmounted(cleanup), __expose({
       /**
        * Open the popover
        * @description Programmatically open the popover
@@ -371,42 +238,44 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
        * @description Manually recalculate and update the popover position
        * @usage `mazPopoverInstance.value?.updatePosition()`
        */
-      updatePosition
-    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
-      class: normalizeClass(["m-popover m-reset-css", [
-        unref(attrs).class,
-        {
-          "--open": isOpen.value,
-          "--disabled": _ctx.disabled,
-          "--block": _ctx.block
-        }
-      ]]),
-      style: normalizeStyle(rootStyles.value)
-    }, [
-      createElementVNode("div", mergeProps({
-        id: unref(triggerId),
-        ref: "trigger",
-        role: "button",
-        class: "m-popover-trigger",
-        "aria-expanded": _ctx.role === "dialog" || _ctx.role === "menu" ? isOpen.value : void 0,
-        "aria-haspopup": _ctx.role === "dialog" ? "dialog" : void 0,
-        "aria-describedby": _ctx.role === "tooltip" && isOpen.value ? panelId.value : _ctx.ariaDescribedby,
-        "aria-labelledby": _ctx.ariaLabelledby
-      }, triggerEvents.value), [
-        renderSlot(_ctx.$slots, "trigger", {
-          open,
-          close,
-          toggle,
-          isOpen: isOpen.value
-        }, void 0, !0)
-      ], 16, _hoisted_1),
-      (openBlock(), createBlock(Teleport, {
-        to: _ctx.teleportTo,
-        disabled: !isOpen.value
+      updatePosition: update
+    }), (_ctx, _cache) => (openBlock(), createElementBlock(Fragment, null, [
+      _ctx.$slots.trigger ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["m-popover m-reset-css", [
+          unref(attrs).class,
+          {
+            "--open": isOpen.value,
+            "--disabled": _ctx.disabled,
+            "--block": _ctx.block
+          }
+        ]]),
+        style: normalizeStyle(rootStyles.value)
       }, [
+        createElementVNode("div", mergeProps({
+          id: unref(triggerId),
+          ref: "trigger",
+          role: "button",
+          class: "m-popover-trigger",
+          "aria-expanded": _ctx.role === "dialog" || _ctx.role === "menu" ? isOpen.value : void 0,
+          "aria-haspopup": _ctx.role === "dialog" ? "dialog" : void 0,
+          "aria-describedby": _ctx.role === "tooltip" && isOpen.value ? panelId.value : _ctx.ariaDescribedby,
+          "aria-labelledby": _ctx.ariaLabelledby
+        }, triggerEvents.value), [
+          renderSlot(_ctx.$slots, "trigger", {
+            open,
+            close,
+            toggle,
+            isOpen: isOpen.value,
+            trigger: effectiveTrigger.value
+          }, void 0, !0)
+        ], 16, _hoisted_1)
+      ], 6)) : createCommentVNode("", !0),
+      (openBlock(), createBlock(Teleport, { to: _ctx.teleportTo }, [
         createVNode(Transition, {
-          name: _ctx.transition,
-          appear: ""
+          name: transitionName.value,
+          appear: "",
+          onAfterLeave: _cache[0] || (_cache[0] = ($event) => emits("after-close-animation"))
         }, {
           default: withCtx(() => [
             isOpen.value ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
@@ -421,7 +290,14 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
               tabindex: _ctx.role === "dialog" ? "-1" : void 0,
               class: ["m-popover-panel", panelClasses.value],
               "aria-live": _ctx.announceChanges ? "polite" : void 0,
-              style: [panelStyles.value, _ctx.panelStyle]
+              style: [
+                _ctx.panelStyle,
+                panelStyles.value,
+                {
+                  transformOrigin: getTransformOrigin(computedPosition.value),
+                  visibility: unref(middlewareData).hide?.referenceHidden ? "hidden" : "visible"
+                }
+              ]
             }, panelEvents.value), [
               renderSlot(_ctx.$slots, "default", {
                 open,
@@ -435,10 +311,10 @@ import '../assets/MazPopover.DzCAfuWw.css';const _hoisted_1 = ["id", "aria-expan
           ]),
           _: 3
         }, 8, ["name"])
-      ], 8, ["to", "disabled"]))
-    ], 6));
+      ], 8, ["to"]))
+    ], 64));
   }
-}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4104b159"]]);
+}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ecc963ec"]]);
 export {
   MazPopover as default
 };