@maas/vue-equipment 1.0.0-beta.41 → 1.0.0-beta.43

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.mjs

@@ -1,20 +1,17 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const defaultOptions = {
   focusTrap: false,
-  focusTarget: void 0,
-  scrollLock: true
+  focusTarget: void 0
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-drawer(__backdrop)?/
+});
 export function useDrawerDOM(args) {
-  const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
   function trapFocus() {
@@ -27,62 +24,22 @@ export function useDrawerDOM(args) {
       focusTrap.deactivate();
     }
   }
-  function lockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = true;
+  function lockScroll(padding) {
+    if (padding) {
+      add();
     }
+    scrollLock.value = true;
   }
-  function unlockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = false;
+  function unlockScroll(padding) {
+    scrollLock.value = false;
+    if (padding) {
+      remove();
     }
   }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const exclude = new RegExp(/magic-drawer(__backdrop)?/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
-  }
   return {
     trapFocus,
     releaseFocus,
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.d.ts

@@ -74,26 +74,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -341,26 +341,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -610,26 +610,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -877,26 +877,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -1146,26 +1146,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -1413,26 +1413,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types/index.js").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types/index.js").DraggableSnapPoint;
             };
             beforeDrag: {
                 id: string;

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -68,7 +68,6 @@ import {
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuCallback } from "../composables/private/useMenuCallback";
-import { useMenuDOM } from "../composables/private/useMenuDOM";
 import { useMenuCursor } from "../composables/private/useMenuCursor";
 import {
   useMagicError
@@ -78,7 +77,8 @@ import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
-  MagicMenuContentId
+  MagicMenuContentId,
+  MagicMenuParentTree
 } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
@@ -95,6 +95,7 @@ const magicError = useMagicError({
   prefix: "MagicMenu",
   source: "MagicMenu"
 });
+const parentTree = inject(MagicMenuParentTree, []);
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 magicError.assert(instanceId, {
@@ -124,12 +125,6 @@ const mappedTransition = computed(() => {
 });
 const innerActive = shallowRef(false);
 const wrapperActive = shallowRef(false);
-const {
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useMenuDOM();
 const {
   onBeforeEnter,
   onEnter,
@@ -143,10 +138,7 @@ const {
   viewId,
   innerActive,
   wrapperActive,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
+  parentTree
 });
 async function onOpen() {
   wrapperActive.value = true;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.d.vue.ts

@@ -10,11 +10,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue.d.ts

@@ -10,11 +10,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
     enter: () => any;
+    click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
     onEnter?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue

@@ -1,12 +1,12 @@
 <template>
-  <primitive
+  <vue-primitive
     ref="el"
     :as-child="asChild"
     :data-id="id"
     class="magic-menu-provider"
   >
     <slot />
-  </primitive>
+  </vue-primitive>
 </template>
 
 <script setup>
@@ -19,7 +19,7 @@ import {
   onBeforeUnmount
 } from "vue";
 import { onClickOutside, onKeyStroke, usePointer } from "@vueuse/core";
-import { Primitive } from "@maas/vue-primitive";
+import { VuePrimitive } from "@maas/vue-primitive";
 import { defu } from "defu";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -1,5 +1,5 @@
 <template>
-  <primitive
+  <vue-primitive
     class="magic-menu-remote"
     :data-id="`${channelId}-remote`"
     :data-disabled="disabled"
@@ -9,12 +9,12 @@
     @mouseenter="onMouseenter"
   >
     <slot :channel-active="channel?.active" :remote-disabled="disabled" />
-  </primitive>
+  </vue-primitive>
 </template>
 
 <script setup>
 import { computed, inject, watch } from "vue";
-import { Primitive } from "@maas/vue-primitive";
+import { VuePrimitive } from "@maas/vue-primitive";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-  <primitive
+  <vue-primitive
     ref="el"
     :data-id="`${mappedViewId}-trigger`"
     :data-active="view?.active"
@@ -12,12 +12,12 @@
     @mouseenter="onMouseenter"
   >
     <slot :view-active="view?.active" :trigger-disabled="mappedDisabled" />
-  </primitive>
+  </vue-primitive>
 </template>
 
 <script setup>
 import { computed, inject, useTemplateRef, toValue, watch } from "vue";
-import { Primitive } from "@maas/vue-primitive";
+import { VuePrimitive } from "@maas/vue-primitive";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.d.ts

@@ -6,10 +6,7 @@ type UseMenuCallbackArgs = {
     viewId: string;
     innerActive: Ref<boolean>;
     wrapperActive: Ref<boolean>;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    parentTree: string[];
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
     onBeforeEnter: () => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.mjs

@@ -1,19 +1,11 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMenuDOM } from "./useMenuDOM.mjs";
 import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
-  const {
-    state,
-    instanceId,
-    viewId,
-    innerActive,
-    wrapperActive,
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = args;
+  const { state, instanceId, viewId, innerActive, wrapperActive, parentTree } = args;
   const emitter = useMagicEmitter();
+  const { lockScroll, unlockScroll } = useMenuDOM();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
   }
@@ -23,11 +15,8 @@ export function useMenuCallback(args) {
   function onAfterEnter() {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+    if (scrollLock && parentTree.length === 2) {
+      lockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
   }
   function onBeforeLeave() {
@@ -39,11 +28,8 @@ export function useMenuCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      unlockScroll();
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+    if (scrollLock && parentTree.length === 2) {
+      unlockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
     if (!innerActive.value) {
       wrapperActive.value = false;

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.d.ts

@@ -1,6 +1,4 @@
 export declare function useMenuDOM(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -1,63 +1,25 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-menu/
+});
 export function useMenuDOM() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    const exclude = new RegExp(/magic-menu/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
-import { Primitive } from '@maas/vue-primitive';
+import { VuePrimitive } from '@maas/vue-primitive';
 import type { Interaction } from '../../types/index.js';
 type UseMenuTriggerArgs = {
     instanceId: MaybeRef<string>;
@@ -7,7 +7,7 @@ type UseMenuTriggerArgs = {
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
     mappedTrigger: ComputedRef<Interaction[]>;
-    elRef: Ref<InstanceType<typeof Primitive> | null>;
+    elRef: Ref<InstanceType<typeof VuePrimitive> | null>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.mjs

@@ -1,5 +1,5 @@
 import {} from "vue";
-import { Primitive } from "@maas/vue-primitive";
+import { VuePrimitive } from "@maas/vue-primitive";
 import { useMagicKeys, useFocus } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";