@rupe/v-datepicker 1.0.0-alpha.0

package/dist/components/DismissableLayer/utils.js

@@ -0,0 +1,112 @@
+import { isClient } from "../../node_modules/.pnpm/@vueuse_shared@14.1.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js";
+import { ref, watchEffect, toValue, nextTick } from "vue";
+import { handleAndDispatchCustomEvent } from "../../shared/handleAndDispatchCustomEvent.js";
+const POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+function isLayerExist(layerElement, targetElement) {
+  const targetLayer = targetElement.closest("[data-dismissable-layer]");
+  const mainLayer = layerElement.dataset.dismissableLayer === "" ? layerElement : layerElement.querySelector("[data-dismissable-layer]");
+  const nodeList = Array.from(
+    layerElement.ownerDocument.querySelectorAll("[data-dismissable-layer]")
+  );
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
+    return true;
+  } else {
+    return false;
+  }
+}
+function usePointerDownOutside(onPointerDownOutside, element, enabled = true) {
+  const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
+  const isPointerInsideDOMTree = ref(false);
+  const handleClickRef = ref(() => {
+  });
+  watchEffect((cleanupFn) => {
+    if (!isClient || !toValue(enabled)) return;
+    const handlePointerDown = async (event) => {
+      const target = event.target;
+      if (!element?.value || !target) return;
+      if (isLayerExist(element.value, target)) {
+        isPointerInsideDOMTree.value = false;
+        return;
+      }
+      if (event.target && !isPointerInsideDOMTree.value) {
+        let handleAndDispatchPointerDownOutsideEvent = function() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            onPointerDownOutside,
+            eventDetail
+          );
+        };
+        const eventDetail = { originalEvent: event };
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.value);
+          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent;
+          ownerDocument.addEventListener("click", handleClickRef.value, {
+            once: true
+          });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent();
+        }
+      } else {
+        ownerDocument.removeEventListener("click", handleClickRef.value);
+      }
+      isPointerInsideDOMTree.value = false;
+    };
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    cleanupFn(() => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.value);
+    });
+  });
+  return {
+    onPointerDownCapture: () => {
+      if (!toValue(enabled)) return;
+      isPointerInsideDOMTree.value = true;
+    }
+  };
+}
+function useFocusOutside(onFocusOutside, element, enabled = true) {
+  const ownerDocument = element?.value?.ownerDocument ?? globalThis?.document;
+  const isFocusInsideDOMTree = ref(false);
+  watchEffect((cleanupFn) => {
+    if (!isClient || !toValue(enabled)) return;
+    const handleFocus = async (event) => {
+      if (!element?.value) return;
+      await nextTick();
+      await nextTick();
+      const target = event.target;
+      if (!element.value || !target || isLayerExist(element.value, target))
+        return;
+      if (event.target && !isFocusInsideDOMTree.value) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(
+          FOCUS_OUTSIDE,
+          onFocusOutside,
+          eventDetail
+        );
+      }
+    };
+    ownerDocument.addEventListener("focusin", handleFocus);
+    cleanupFn(() => ownerDocument.removeEventListener("focusin", handleFocus));
+  });
+  return {
+    onFocusCapture: () => {
+      if (!toValue(enabled)) return;
+      isFocusInsideDOMTree.value = true;
+    },
+    onBlurCapture: () => {
+      if (!toValue(enabled)) return;
+      isFocusInsideDOMTree.value = false;
+    }
+  };
+}
+export {
+  FOCUS_OUTSIDE,
+  POINTER_DOWN_OUTSIDE,
+  useFocusOutside,
+  usePointerDownOutside
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/DismissableLayer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/DismissableLayer/utils.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref } from \"vue\";\nimport { isClient } from \"@vueuse/shared\";\nimport { nextTick, ref, toValue, watchEffect } from \"vue\";\nimport { handleAndDispatchCustomEvent } from \"../../shared\";\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent;\n}>;\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\nexport const DISMISSABLE_LAYER_NAME = \"DismissableLayer\";\nexport const CONTEXT_UPDATE = \"dismissableLayer.update\";\nexport const POINTER_DOWN_OUTSIDE = \"dismissableLayer.pointerDownOutside\";\nexport const FOCUS_OUTSIDE = \"dismissableLayer.focusOutside\";\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\"[data-dismissable-layer]\");\n\n  const mainLayer =\n    layerElement.dataset.dismissableLayer === \"\"\n      ? layerElement\n      : (layerElement.querySelector(\"[data-dismissable-layer]\") as HTMLElement);\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll(\"[data-dismissable-layer]\"),\n  );\n\n  if (\n    targetLayer &&\n    (mainLayer === targetLayer ||\n      nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))\n  ) {\n    return true;\n  } else {\n    return false;\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document =\n    element?.value?.ownerDocument ?? globalThis?.document;\n\n  const isPointerInsideDOMTree = ref(false);\n  const handleClickRef = ref(() => {});\n\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled)) return;\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement | undefined;\n\n      if (!element?.value || !target) return;\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false;\n        return;\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event };\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          );\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === \"touch\") {\n          ownerDocument.removeEventListener(\"click\", handleClickRef.value);\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent;\n          ownerDocument.addEventListener(\"click\", handleClickRef.value, {\n            once: true,\n          });\n        } else {\n          handleAndDispatchPointerDownOutsideEvent();\n        }\n      } else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener(\"click\", handleClickRef.value);\n      }\n      isPointerInsideDOMTree.value = false;\n    };\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener(\"pointerdown\", handlePointerDown);\n    }, 0);\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId);\n      ownerDocument.removeEventListener(\"pointerdown\", handlePointerDown);\n      ownerDocument.removeEventListener(\"click\", handleClickRef.value);\n    });\n  });\n\n  return {\n    onPointerDownCapture: () => {\n      if (!toValue(enabled)) return;\n      isPointerInsideDOMTree.value = true;\n    },\n  };\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n  enabled: MaybeRefOrGetter<boolean> = true,\n) {\n  const ownerDocument: Document =\n    element?.value?.ownerDocument ?? globalThis?.document;\n\n  const isFocusInsideDOMTree = ref(false);\n  watchEffect((cleanupFn) => {\n    if (!isClient || !toValue(enabled)) return;\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value) return;\n\n      await nextTick();\n      await nextTick();\n      const target = event.target as HTMLElement | undefined;\n      if (!element.value || !target || isLayerExist(element.value, target))\n        return;\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event };\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        );\n      }\n    };\n\n    ownerDocument.addEventListener(\"focusin\", handleFocus);\n\n    cleanupFn(() => ownerDocument.removeEventListener(\"focusin\", handleFocus));\n  });\n\n  return {\n    onFocusCapture: () => {\n      if (!toValue(enabled)) return;\n\n      isFocusInsideDOMTree.value = true;\n    },\n    onBlurCapture: () => {\n      if (!toValue(enabled)) return;\n\n      isFocusInsideDOMTree.value = false;\n    },\n  };\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE);\n  document.dispatchEvent(event);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/FocusScope/FocusScope.d.ts

@@ -0,0 +1,82 @@
+import { PrimitiveProps } from '../Primitive';
+export type FocusScopeEmits = {
+    /**
+     * Event handler called when auto-focusing on mount.
+     * Can be prevented.
+     */
+    mountAutoFocus: [event: Event];
+    /**
+     * Event handler called when auto-focusing on unmount.
+     * Can be prevented.
+     */
+    unmountAutoFocus: [event: Event];
+};
+export interface FocusScopeProps extends PrimitiveProps {
+    /**
+     * When `true`, tabbing from last item will focus first tabbable
+     * and shift+tab from first item will focus last tababble.
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * When `true`, focus cannot escape the focus scope via keyboard,
+     * pointer, or a programmatic focus.
+     * @defaultValue false
+     */
+    trapped?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<FocusScopeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    mountAutoFocus: (event: Event) => any;
+    unmountAutoFocus: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<FocusScopeProps> & Readonly<{
+    onMountAutoFocus?: ((event: Event) => any) | undefined;
+    onUnmountAutoFocus?: ((event: Event) => any) | undefined;
+}>, {
+    loop: boolean;
+    trapped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    currentRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        asChild: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: import('vue').PropType<import('../Primitive').AsTag | import('vue').Component>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        asChild: boolean;
+        as: import('../Primitive').AsTag | import('vue').Component;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        asChild: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: import('vue').PropType<import('../Primitive').AsTag | import('vue').Component>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        asChild: boolean;
+        as: import('../Primitive').AsTag | import('vue').Component;
+    }> | null;
+}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/FocusScope/FocusScope.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FocusScope/FocusScope.vue.js

@@ -0,0 +1,149 @@
+import { defineComponent, ref, reactive, watchEffect, nextTick, createBlock, openBlock, unref, withCtx, renderSlot } from "vue";
+import { isClient } from "../../node_modules/.pnpm/@vueuse_shared@14.1.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js";
+import { Primitive } from "../Primitive/Primitive.js";
+import "../Primitive/Slot.js";
+import { createFocusScopesStack, removeLinks } from "./stack.js";
+import { AUTOFOCUS_ON_MOUNT, focusFirst, getTabbableCandidates, focus, AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS, getTabbableEdges } from "./utils.js";
+import { getActiveElement } from "../../shared/getActiveElement.js";
+import { useForwardExpose } from "../../shared/useForwardExpose.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FocusScope",
+  props: {
+    loop: { type: Boolean, default: false },
+    trapped: { type: Boolean, default: false },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["mountAutoFocus", "unmountAutoFocus"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { currentRef, currentElement } = useForwardExpose();
+    const lastFocusedElementRef = ref(null);
+    const focusScopesStack = createFocusScopesStack();
+    const focusScope = reactive({
+      paused: false,
+      pause() {
+        this.paused = true;
+      },
+      resume() {
+        this.paused = false;
+      }
+    });
+    watchEffect((cleanupFn) => {
+      if (!isClient) return;
+      const container = currentElement.value;
+      if (!props.trapped) return;
+      function handleFocusIn(event) {
+        if (focusScope.paused || !container) return;
+        const target = event.target;
+        if (container.contains(target)) lastFocusedElementRef.value = target;
+        else focus(lastFocusedElementRef.value, { select: true });
+      }
+      function handleFocusOut(event) {
+        if (focusScope.paused || !container) return;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget === null) return;
+        if (!container.contains(relatedTarget))
+          focus(lastFocusedElementRef.value, { select: true });
+      }
+      function handleMutations(mutations) {
+        const isLastFocusedElementExist = container.contains(
+          lastFocusedElementRef.value
+        );
+        if (!isLastFocusedElementExist) focus(container);
+      }
+      document.addEventListener("focusin", handleFocusIn);
+      document.addEventListener("focusout", handleFocusOut);
+      const mutationObserver = new MutationObserver(handleMutations);
+      if (container)
+        mutationObserver.observe(container, { childList: true, subtree: true });
+      cleanupFn(() => {
+        document.removeEventListener("focusin", handleFocusIn);
+        document.removeEventListener("focusout", handleFocusOut);
+        mutationObserver.disconnect();
+      });
+    });
+    watchEffect(async (cleanupFn) => {
+      const container = currentElement.value;
+      await nextTick();
+      if (!container) return;
+      focusScopesStack.add(focusScope);
+      const previouslyFocusedElement = getActiveElement();
+      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+      if (!hasFocusedCandidate) {
+        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+        container.addEventListener(
+          AUTOFOCUS_ON_MOUNT,
+          (ev) => emits("mountAutoFocus", ev)
+        );
+        container.dispatchEvent(mountEvent);
+        if (!mountEvent.defaultPrevented) {
+          focusFirst(removeLinks(getTabbableCandidates(container)), {
+            select: true
+          });
+          if (getActiveElement() === previouslyFocusedElement) focus(container);
+        }
+      }
+      cleanupFn(() => {
+        container.removeEventListener(
+          AUTOFOCUS_ON_MOUNT,
+          (ev) => emits("mountAutoFocus", ev)
+        );
+        const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+        const unmountEventHandler = (ev) => {
+          emits("unmountAutoFocus", ev);
+        };
+        container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+        container.dispatchEvent(unmountEvent);
+        setTimeout(() => {
+          if (!unmountEvent.defaultPrevented)
+            focus(previouslyFocusedElement ?? document.body, { select: true });
+          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+          focusScopesStack.remove(focusScope);
+        }, 0);
+      });
+    });
+    function handleKeyDown(event) {
+      if (!props.loop && !props.trapped) return;
+      if (focusScope.paused) return;
+      const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+      const focusedElement = getActiveElement();
+      if (isTabKey && focusedElement) {
+        const container = event.currentTarget;
+        const [first, last] = getTabbableEdges(container);
+        const hasTabbableElementsInside = first && last;
+        if (!hasTabbableElementsInside) {
+          if (focusedElement === container) event.preventDefault();
+        } else {
+          if (!event.shiftKey && focusedElement === last) {
+            event.preventDefault();
+            if (props.loop) focus(first, { select: true });
+          } else if (event.shiftKey && focusedElement === first) {
+            event.preventDefault();
+            if (props.loop) focus(last, { select: true });
+          }
+        }
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        ref_key: "currentRef",
+        ref: currentRef,
+        tabindex: "-1",
+        "as-child": __props.asChild,
+        as: __props.as,
+        onKeydown: handleKeyDown
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as-child", "as"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=FocusScope.vue.js.map

package/dist/components/FocusScope/FocusScope.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusScope.vue.js","sources":["../../../src/components/FocusScope/FocusScope.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from \"../Primitive\";\nimport { getActiveElement, useForwardExpose } from \"../../shared\";\n\nexport type FocusScopeEmits = {\n  /**\n   * Event handler called when auto-focusing on mount.\n   * Can be prevented.\n   */\n  mountAutoFocus: [event: Event];\n\n  /**\n   * Event handler called when auto-focusing on unmount.\n   * Can be prevented.\n   */\n  unmountAutoFocus: [event: Event];\n};\n\nexport interface FocusScopeProps extends PrimitiveProps {\n  /**\n   * When `true`, tabbing from last item will focus first tabbable\n   * and shift+tab from first item will focus last tababble.\n   * @defaultValue false\n   */\n  loop?: boolean;\n\n  /**\n   * When `true`, focus cannot escape the focus scope via keyboard,\n   * pointer, or a programmatic focus.\n   * @defaultValue false\n   */\n  trapped?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isClient } from \"@vueuse/shared\";\nimport { nextTick, reactive, ref, watchEffect } from \"vue\";\nimport { Primitive } from \"../Primitive\";\nimport { createFocusScopesStack, removeLinks } from \"./stack\";\nimport {\n  AUTOFOCUS_ON_MOUNT,\n  AUTOFOCUS_ON_UNMOUNT,\n  EVENT_OPTIONS,\n  focus,\n  focusFirst,\n  getTabbableCandidates,\n  getTabbableEdges,\n} from \"./utils\";\n\nconst props = withDefaults(defineProps<FocusScopeProps>(), {\n  loop: false,\n  trapped: false,\n});\nconst emits = defineEmits<FocusScopeEmits>();\n\nconst { currentRef, currentElement } = useForwardExpose();\nconst lastFocusedElementRef = ref<HTMLElement | null>(null);\nconst focusScopesStack = createFocusScopesStack();\n\nconst focusScope = reactive({\n  paused: false,\n  pause() {\n    this.paused = true;\n  },\n  resume() {\n    this.paused = false;\n  },\n});\n\nwatchEffect((cleanupFn) => {\n  if (!isClient) return;\n  const container = currentElement.value;\n  if (!props.trapped) return;\n\n  function handleFocusIn(event: FocusEvent) {\n    if (focusScope.paused || !container) return;\n    const target = event.target as HTMLElement | null;\n    if (container.contains(target)) lastFocusedElementRef.value = target;\n    else focus(lastFocusedElementRef.value, { select: true });\n  }\n\n  function handleFocusOut(event: FocusEvent) {\n    if (focusScope.paused || !container) return;\n    const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n    // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n    //\n    // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n    // 2. In Google Chrome, when the focused element is removed from the DOM.\n    //\n    // We let the browser do its thing here because:\n    //\n    // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n    // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n    //    throws the CPU to 100%, so we avoid doing anything for this reason here too.\n    if (relatedTarget === null) return;\n\n    // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n    // that is outside the container, we move focus to the last valid focused element inside.\n    if (!container.contains(relatedTarget))\n      focus(lastFocusedElementRef.value, { select: true });\n  }\n\n  // When the focused element gets removed from the DOM, browsers move focus\n  // back to the document.body. In this case, we move focus to the container\n  // to keep focus trapped correctly.\n  // -- related: https://github.com/unovue/reka-ui/issues/518\n  // Reka UI tentative solution:\n  // instead of leaning on document.activeElement, we use lastFocusedElementRef.value to check\n  // if the element still exist inside the container,\n  // if not then we focus to the container\n  function handleMutations(mutations: MutationRecord[]) {\n    const isLastFocusedElementExist = container.contains(\n      lastFocusedElementRef.value,\n    );\n    if (!isLastFocusedElementExist) focus(container);\n  }\n\n  document.addEventListener(\"focusin\", handleFocusIn);\n  document.addEventListener(\"focusout\", handleFocusOut);\n  const mutationObserver = new MutationObserver(handleMutations);\n  if (container)\n    mutationObserver.observe(container, { childList: true, subtree: true });\n\n  cleanupFn(() => {\n    document.removeEventListener(\"focusin\", handleFocusIn);\n    document.removeEventListener(\"focusout\", handleFocusOut);\n    mutationObserver.disconnect();\n  });\n});\n\nwatchEffect(async (cleanupFn) => {\n  const container = currentElement.value;\n\n  await nextTick();\n  if (!container) return;\n  focusScopesStack.add(focusScope);\n  const previouslyFocusedElement = getActiveElement() as HTMLElement | null;\n  const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n  if (!hasFocusedCandidate) {\n    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>\n      emits(\"mountAutoFocus\", ev),\n    );\n    container.dispatchEvent(mountEvent);\n\n    if (!mountEvent.defaultPrevented) {\n      focusFirst(removeLinks(getTabbableCandidates(container)), {\n        select: true,\n      });\n      if (getActiveElement() === previouslyFocusedElement) focus(container);\n    }\n  }\n\n  cleanupFn(() => {\n    container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>\n      emits(\"mountAutoFocus\", ev),\n    );\n\n    const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n    const unmountEventHandler = (ev: Event) => {\n      emits(\"unmountAutoFocus\", ev);\n    };\n    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n    container.dispatchEvent(unmountEvent);\n\n    setTimeout(() => {\n      if (!unmountEvent.defaultPrevented)\n        focus(previouslyFocusedElement ?? document.body, { select: true });\n\n      // we need to remove the listener after we `dispatchEvent`\n      container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n\n      focusScopesStack.remove(focusScope);\n    }, 0);\n  });\n});\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (!props.loop && !props.trapped) return;\n  if (focusScope.paused) return;\n\n  const isTabKey =\n    event.key === \"Tab\" && !event.altKey && !event.ctrlKey && !event.metaKey;\n  const focusedElement = getActiveElement() as HTMLElement | null;\n\n  if (isTabKey && focusedElement) {\n    const container = event.currentTarget as HTMLElement;\n    const [first, last] = getTabbableEdges(container);\n    const hasTabbableElementsInside = first && last;\n\n    // we can only wrap focus if we have tabbable edges\n    if (!hasTabbableElementsInside) {\n      if (focusedElement === container) event.preventDefault();\n    } else {\n      if (!event.shiftKey && focusedElement === last) {\n        event.preventDefault();\n        if (props.loop) focus(first, { select: true });\n      } else if (event.shiftKey && focusedElement === first) {\n        event.preventDefault();\n        if (props.loop) focus(last, { select: true });\n      }\n    }\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"currentRef\"\n    tabindex=\"-1\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    @keydown=\"handleKeyDown\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["_createBlock","_unref","_renderSlot"],"mappings":"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"}

package/dist/components/FocusScope/FocusScope.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./FocusScope.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=FocusScope.vue2.js.map

package/dist/components/FocusScope/FocusScope.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusScope.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/FocusScope/index.d.ts

@@ -0,0 +1 @@
+export { default as FocusScope, type FocusScopeEmits, type FocusScopeProps, } from './FocusScope';

package/dist/components/FocusScope/stack.d.ts

@@ -0,0 +1,12 @@
+interface FocusScopeAPI {
+    paused: boolean;
+    pause: () => void;
+    resume: () => void;
+}
+export declare function createFocusScopesStack(): {
+    add(focusScope: FocusScopeAPI): void;
+    remove(focusScope: FocusScopeAPI): void;
+};
+export declare function arrayRemove<T>(array: T[], item: T): T[];
+export declare function removeLinks(items: HTMLElement[]): HTMLElement[];
+export {};

package/dist/components/FocusScope/stack.js

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+import { createGlobalState } from "../../node_modules/.pnpm/@vueuse_shared@14.1.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js";
+const useFocusStackState = createGlobalState(() => {
+  const stack = ref([]);
+  return stack;
+});
+function createFocusScopesStack() {
+  const stack = useFocusStackState();
+  return {
+    add(focusScope) {
+      const activeFocusScope = stack.value[0];
+      if (focusScope !== activeFocusScope)
+        activeFocusScope?.pause();
+      stack.value = arrayRemove(stack.value, focusScope);
+      stack.value.unshift(focusScope);
+    },
+    remove(focusScope) {
+      stack.value = arrayRemove(stack.value, focusScope);
+      stack.value[0]?.resume();
+    }
+  };
+}
+function arrayRemove(array, item) {
+  const updatedArray = [...array];
+  const index = updatedArray.indexOf(item);
+  if (index !== -1)
+    updatedArray.splice(index, 1);
+  return updatedArray;
+}
+function removeLinks(items) {
+  return items.filter((item) => item.tagName !== "A");
+}
+export {
+  arrayRemove,
+  createFocusScopesStack,
+  removeLinks
+};
+//# sourceMappingURL=stack.js.map

package/dist/components/FocusScope/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../src/components/FocusScope/stack.ts"],"sourcesContent":["import { createGlobalState } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface FocusScopeAPI {\n  paused: boolean\n  pause: () => void\n  resume: () => void\n}\n\nconst useFocusStackState = createGlobalState(() => {\n  const stack = ref<FocusScopeAPI[]>([])\n  return stack\n})\n\nexport function createFocusScopesStack() {\n  /** A stack of focus scopes, with the active one at the top */\n  const stack = useFocusStackState()\n\n  return {\n    add(focusScope: FocusScopeAPI) {\n      // pause the currently active focus scope (at the top of the stack)\n      const activeFocusScope = stack.value[0]\n      if (focusScope !== activeFocusScope)\n        activeFocusScope?.pause()\n\n      // remove in case it already exists (because we'll re-add it at the top of the stack)\n      stack.value = arrayRemove(stack.value, focusScope)\n      stack.value.unshift(focusScope)\n    },\n\n    remove(focusScope: FocusScopeAPI) {\n      stack.value = arrayRemove(stack.value, focusScope)\n      stack.value[0]?.resume()\n    },\n  }\n}\n\nexport function arrayRemove<T>(array: T[], item: T) {\n  const updatedArray = [...array]\n  const index = updatedArray.indexOf(item)\n  if (index !== -1)\n    updatedArray.splice(index, 1)\n\n  return updatedArray\n}\n\nexport function removeLinks(items: HTMLElement[]) {\n  return items.filter(item => item.tagName !== 'A')\n}\n"],"names":[],"mappings":";;AASA,MAAM,qBAAqB,kBAAkB,MAAM;AACjD,QAAM,QAAQ,IAAqB,EAAE;AACrC,SAAO;AACT,CAAC;AAEM,SAAS,yBAAyB;AAEvC,QAAM,QAAQ,mBAAA;AAEd,SAAO;AAAA,IACL,IAAI,YAA2B;AAE7B,YAAM,mBAAmB,MAAM,MAAM,CAAC;AACtC,UAAI,eAAe;AACjB,0BAAkB,MAAA;AAGpB,YAAM,QAAQ,YAAY,MAAM,OAAO,UAAU;AACjD,YAAM,MAAM,QAAQ,UAAU;AAAA,IAChC;AAAA,IAEA,OAAO,YAA2B;AAChC,YAAM,QAAQ,YAAY,MAAM,OAAO,UAAU;AACjD,YAAM,MAAM,CAAC,GAAG,OAAA;AAAA,IAClB;AAAA,EAAA;AAEJ;AAEO,SAAS,YAAe,OAAY,MAAS;AAClD,QAAM,eAAe,CAAC,GAAG,KAAK;AAC9B,QAAM,QAAQ,aAAa,QAAQ,IAAI;AACvC,MAAI,UAAU;AACZ,iBAAa,OAAO,OAAO,CAAC;AAE9B,SAAO;AACT;AAEO,SAAS,YAAY,OAAsB;AAChD,SAAO,MAAM,OAAO,CAAA,SAAQ,KAAK,YAAY,GAAG;AAClD;"}

package/dist/components/FocusScope/utils.d.ts

@@ -0,0 +1,46 @@
+export declare const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+export declare const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+export declare const EVENT_OPTIONS: {
+    bubbles: boolean;
+    cancelable: boolean;
+};
+type FocusableTarget = HTMLElement | {
+    focus: () => void;
+};
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+export declare function focusFirst(candidates: HTMLElement[], { select }?: {
+    select?: boolean | undefined;
+}): true | undefined;
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+export declare function getTabbableEdges(container: HTMLElement): readonly [HTMLElement | undefined, HTMLElement | undefined];
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export declare function getTabbableCandidates(container: HTMLElement): HTMLElement[];
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export declare function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined;
+export declare function isHidden(node: HTMLElement, { upTo }: {
+    upTo?: HTMLElement;
+}): boolean;
+export declare function isSelectableInput(element: any): element is FocusableTarget & {
+    select: () => void;
+};
+export declare function focus(element?: FocusableTarget | null, { select }?: {
+    select?: boolean | undefined;
+}): void;
+export {};

package/dist/components/FocusScope/utils.js

@@ -0,0 +1,70 @@
+import "vue";
+import { getActiveElement } from "../../shared/getActiveElement.js";
+const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+function focusFirst(candidates, { select = false } = {}) {
+  const previouslyFocusedElement = getActiveElement();
+  for (const candidate of candidates) {
+    focus(candidate, { select });
+    if (getActiveElement() !== previouslyFocusedElement) return true;
+  }
+}
+function getTabbableEdges(container) {
+  const candidates = getTabbableCandidates(container);
+  const first = findVisible(candidates, container);
+  const last = findVisible(candidates.reverse(), container);
+  return [first, last];
+}
+function getTabbableCandidates(container) {
+  const nodes = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+}
+function findVisible(elements, container) {
+  for (const element of elements) {
+    if (!isHidden(element, { upTo: container })) return element;
+  }
+}
+function isHidden(node, { upTo }) {
+  if (getComputedStyle(node).visibility === "hidden") return true;
+  while (node) {
+    if (upTo !== void 0 && node === upTo) return false;
+    if (getComputedStyle(node).display === "none") return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+function isSelectableInput(element) {
+  return element instanceof HTMLInputElement && "select" in element;
+}
+function focus(element, { select = false } = {}) {
+  if (element && element.focus) {
+    const previouslyFocusedElement = getActiveElement();
+    element.focus({ preventScroll: true });
+    if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+      element.select();
+    }
+  }
+}
+export {
+  AUTOFOCUS_ON_MOUNT,
+  AUTOFOCUS_ON_UNMOUNT,
+  EVENT_OPTIONS,
+  findVisible,
+  focus,
+  focusFirst,
+  getTabbableCandidates,
+  getTabbableEdges,
+  isHidden,
+  isSelectableInput
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/FocusScope/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/FocusScope/utils.ts"],"sourcesContent":["import { getActiveElement } from \"../../shared\";\n\nexport const AUTOFOCUS_ON_MOUNT = \"focusScope.autoFocusOnMount\";\nexport const AUTOFOCUS_ON_UNMOUNT = \"focusScope.autoFocusOnUnmount\";\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus: () => void };\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nexport function focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n  const previouslyFocusedElement = getActiveElement();\n  for (const candidate of candidates) {\n    focus(candidate, { select });\n    if (getActiveElement() !== previouslyFocusedElement) return true;\n  }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nexport function getTabbableEdges(container: HTMLElement) {\n  const candidates = getTabbableCandidates(container);\n  const first = findVisible(candidates, container);\n  const last = findVisible(candidates.reverse(), container);\n  return [first, last] as const;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = [];\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === \"INPUT\" && node.type === \"hidden\";\n      if (node.disabled || node.hidden || isHiddenInput)\n        return NodeFilter.FILTER_SKIP;\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0\n        ? NodeFilter.FILTER_ACCEPT\n        : NodeFilter.FILTER_SKIP;\n    },\n  });\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nexport function findVisible(elements: HTMLElement[], container: HTMLElement) {\n  for (const element of elements) {\n    // we stop checking if it's hidden at the `container` level (excluding)\n    if (!isHidden(element, { upTo: container })) return element;\n  }\n}\n\nexport function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n  if (getComputedStyle(node).visibility === \"hidden\") return true;\n  while (node) {\n    // we stop at `upTo` (excluding it)\n    if (upTo !== undefined && node === upTo) return false;\n    if (getComputedStyle(node).display === \"none\") return true;\n    node = node.parentElement as HTMLElement;\n  }\n  return false;\n}\n\nexport function isSelectableInput(\n  element: any,\n): element is FocusableTarget & { select: () => void } {\n  return element instanceof HTMLInputElement && \"select\" in element;\n}\n\nexport function focus(\n  element?: FocusableTarget | null,\n  { select = false } = {},\n) {\n  // only focus if that element is focusable\n  if (element && element.focus) {\n    const previouslyFocusedElement = getActiveElement();\n    // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n    element.focus({ preventScroll: true });\n    // only select if its not the same element, it supports selection and we need to select\n    if (\n      element !== previouslyFocusedElement &&\n      isSelectableInput(element) &&\n      select\n    ) {\n      element.select();\n    }\n  }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB,EAAE,SAAS,OAAO,YAAY,KAAA;AAQpD,SAAS,WAAW,YAA2B,EAAE,SAAS,MAAA,IAAU,CAAA,GAAI;AAC7E,QAAM,2BAA2B,iBAAA;AACjC,aAAW,aAAa,YAAY;AAClC,UAAM,WAAW,EAAE,QAAQ;AAC3B,QAAI,iBAAA,MAAuB,yBAA0B,QAAO;AAAA,EAC9D;AACF;AAKO,SAAS,iBAAiB,WAAwB;AACvD,QAAM,aAAa,sBAAsB,SAAS;AAClD,QAAM,QAAQ,YAAY,YAAY,SAAS;AAC/C,QAAM,OAAO,YAAY,WAAW,QAAA,GAAW,SAAS;AACxD,SAAO,CAAC,OAAO,IAAI;AACrB;AAYO,SAAS,sBAAsB,WAAwB;AAC5D,QAAM,QAAuB,CAAA;AAC7B,QAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,cAAc;AAAA,IAC3E,YAAY,CAAC,SAAc;AACzB,YAAM,gBAAgB,KAAK,YAAY,WAAW,KAAK,SAAS;AAChE,UAAI,KAAK,YAAY,KAAK,UAAU;AAClC,eAAO,WAAW;AAIpB,aAAO,KAAK,YAAY,IACpB,WAAW,gBACX,WAAW;AAAA,IACjB;AAAA,EAAA,CACD;AACD,SAAO,OAAO,SAAA,EAAY,OAAM,KAAK,OAAO,WAA0B;AAGtE,SAAO;AACT;AAMO,SAAS,YAAY,UAAyB,WAAwB;AAC3E,aAAW,WAAW,UAAU;AAE9B,QAAI,CAAC,SAAS,SAAS,EAAE,MAAM,UAAA,CAAW,EAAG,QAAO;AAAA,EACtD;AACF;AAEO,SAAS,SAAS,MAAmB,EAAE,QAAgC;AAC5E,MAAI,iBAAiB,IAAI,EAAE,eAAe,SAAU,QAAO;AAC3D,SAAO,MAAM;AAEX,QAAI,SAAS,UAAa,SAAS,KAAM,QAAO;AAChD,QAAI,iBAAiB,IAAI,EAAE,YAAY,OAAQ,QAAO;AACtD,WAAO,KAAK;AAAA,EACd;AACA,SAAO;AACT;AAEO,SAAS,kBACd,SACqD;AACrD,SAAO,mBAAmB,oBAAoB,YAAY;AAC5D;AAEO,SAAS,MACd,SACA,EAAE,SAAS,MAAA,IAAU,CAAA,GACrB;AAEA,MAAI,WAAW,QAAQ,OAAO;AAC5B,UAAM,2BAA2B,iBAAA;AAEjC,YAAQ,MAAM,EAAE,eAAe,KAAA,CAAM;AAErC,QACE,YAAY,4BACZ,kBAAkB,OAAO,KACzB,QACA;AACA,cAAQ,OAAA;AAAA,IACV;AAAA,EACF;AACF;"}

package/dist/components/Popover/PopoverAnchor.d.ts

@@ -0,0 +1,11 @@
+import { PopperAnchorProps } from '../Popper';
+export type PopoverAnchorProps = PopperAnchorProps;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<PopperAnchorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PopperAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Popover/PopoverAnchor.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent, onBeforeMount, onUnmounted, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from "vue";
+import _sfc_main$1 from "../Popper/PopperAnchor.vue.js";
+import { useForwardExpose } from "../../shared/useForwardExpose.js";
+import "../Primitive/Primitive.js";
+import "../Primitive/Slot.js";
+import { injectPopoverRootContext } from "./PopoverRoot.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PopoverAnchor",
+  props: {
+    reference: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(__props) {
+    const props = __props;
+    useForwardExpose();
+    const rootContext = injectPopoverRootContext();
+    onBeforeMount(() => {
+      rootContext.hasCustomAnchor.value = true;
+    });
+    onUnmounted(() => {
+      rootContext.hasCustomAnchor.value = false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=PopoverAnchor.vue.js.map

package/dist/components/Popover/PopoverAnchor.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverAnchor.vue.js","sources":["../../../src/components/Popover/PopoverAnchor.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperAnchorProps } from \"../Popper\";\nimport { useForwardExpose } from \"../../shared\";\n\nexport type PopoverAnchorProps = PopperAnchorProps;\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeMount, onUnmounted } from \"vue\";\nimport { PopperAnchor } from \"../Popper\";\nimport { injectPopoverRootContext } from \"./PopoverRoot.vue\";\n\nconst props = defineProps<PopoverAnchorProps>();\n\nuseForwardExpose();\nconst rootContext = injectPopoverRootContext();\n\nonBeforeMount(() => {\n  rootContext.hasCustomAnchor.value = true;\n});\nonUnmounted(() => {\n  rootContext.hasCustomAnchor.value = false;\n});\n</script>\n\n<template>\n  <PopperAnchor v-bind=\"props\">\n    <slot />\n  </PopperAnchor>\n</template>\n"],"names":["_openBlock","_createBlock","_unref","_renderSlot"],"mappings":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAEd,qBAAA;AACA,UAAM,cAAc,yBAAA;AAEpB,kBAAc,MAAM;AAClB,kBAAY,gBAAgB,QAAQ;AAAA,IACtC,CAAC;AACD,gBAAY,MAAM;AAChB,kBAAY,gBAAgB,QAAQ;AAAA,IACtC,CAAC;;AAIC,aAAAA,UAAA,GAAAC,YAEeC,sDAFO,KAAK,CAAA,GAAA;AAAA,yBACzB,MAAQ;AAAA,UAARC,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;"}