@maas/vue-equipment 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -71,6 +71,13 @@ const functions$1 = [
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicNoise/",
 		description: "magicNoise is a rendition of pixelated static noise"
 	},
+	{
+		name: "MagicPie",
+		"package": "plugins",
+		lastUpdated: 0,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicPie/",
+		description: "magicPie renders a percentage based value as `SVG`"
+	},
 	{
 		name: "MagicPlayer",
 		"package": "plugins",

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue

@@ -11,6 +11,7 @@ import { MagicAccordionInstanceId, MagicAccordionViewId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicAccordionTrigger",
   props: {
+    viewId: { type: String, required: false },
     disabled: { type: null, required: false, default: false },
     trigger: { type: String, required: false, default: "click" },
     asChild: { type: Boolean, required: false, default: false }
@@ -18,28 +19,29 @@ export default /* @__PURE__ */ _defineComponent({
   setup(__props) {
     const elRef = useTemplateRef("el");
     const instanceId = inject(MagicAccordionInstanceId, void 0);
-    const viewId = inject(MagicAccordionViewId, void 0);
+    const injectedViewId = inject(MagicAccordionViewId, void 0);
+    const mappedViewId = computed(() => __props.viewId ?? injectedViewId);
     if (!instanceId) {
       throw new Error(
         "MagicAccordionTrigger must be nested inside MagicAccordionProvider"
       );
     }
-    if (!viewId) {
+    if (!mappedViewId.value) {
       throw new Error(
-        "MagicAccordionTrigger must be nested inside MagicAccordionView"
+        "MagicAccordionTrigger must be nested inside MagicAccordionView or a viewId must be provided"
       );
     }
     const { initializeState } = useAccordionState(instanceId);
     const state = initializeState();
     const { getView } = useAccordionView(instanceId);
-    const view = getView(viewId);
+    const view = getView(mappedViewId.value);
     const mappedDisabled = computed(
       () => toValue(__props.disabled) || state.options.disabled
     );
     const { onMouseenter, onClick, onEnter } = useAccordionTrigger({
-      instanceId,
-      viewId,
       elRef,
+      instanceId,
+      viewId: mappedViewId.value,
       disabled: __props.disabled,
       trigger: __props.trigger
     });
@@ -48,9 +50,10 @@ export default /* @__PURE__ */ _defineComponent({
       return _openBlock(), _createBlock(_unref(Primitive), {
         ref: "el",
         "as-child": _ctx.asChild,
+        "data-id": `${mappedViewId.value}-trigger`,
         "data-disabled": mappedDisabled.value,
-        class: "magic-accordion-trigger",
         as: "button",
+        class: "magic-accordion-trigger",
         onMouseenter: _unref(onMouseenter),
         onClick: _unref(onClick)
       }, {
@@ -61,7 +64,7 @@ export default /* @__PURE__ */ _defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["as-child", "data-disabled", "onMouseenter", "onClick"]);
+      }, 8, ["as-child", "data-id", "data-disabled", "onMouseenter", "onClick"]);
     };
   }
 });

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue.d.ts

@@ -2,10 +2,12 @@ import { type MaybeRef } from 'vue';
 import { Primitive } from '@maas/vue-primitive';
 import type { Interaction } from '../types/index.js';
 interface MagicAccordionTriggerProps {
+    viewId?: string;
     disabled?: MaybeRef<boolean>;
     trigger?: Interaction;
     asChild?: boolean;
 }
+declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
 declare const view: import("../types").AccordionView | undefined;
 declare const mappedDisabled: import("vue").ComputedRef<boolean | undefined>;
 declare const onMouseenter: () => void, onClick: () => void;
@@ -18,6 +20,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicAccordionTriggerProps, {
     Primitive: typeof Primitive;
+    mappedViewId: typeof mappedViewId;
     view: typeof view;
     mappedDisabled: typeof mappedDisabled;
     onMouseenter: typeof onMouseenter;

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue

@@ -38,6 +38,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
         "as-child": _ctx.asChild,
+        "data-id": mappedId.value,
         "data-active": _unref(view)?.active,
         class: "magic-accordion-view"
       }, {
@@ -48,7 +49,7 @@ export default /* @__PURE__ */ _defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["as-child", "data-active"]);
+      }, 8, ["as-child", "data-id", "data-active"]);
     };
   }
 });

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue.d.ts

@@ -4,6 +4,7 @@ interface MagicAccordionViewProps {
     asChild?: boolean;
     active?: boolean;
 }
+declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types").AccordionView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {
@@ -14,6 +15,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicAccordionViewProps, {
     Primitive: typeof Primitive;
+    mappedId: typeof mappedId;
     view: typeof view;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<MagicAccordionViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue

@@ -73,6 +73,7 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicCommandProviderOptions, mappedOptions);
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
+        "data-id": _ctx.id,
         "as-child": _ctx.asChild,
         class: "magic-command-provider"
       }, {
@@ -81,7 +82,7 @@ export default /* @__PURE__ */ _defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["as-child"]);
+      }, 8, ["data-id", "as-child"]);
     };
   }
 });

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue

@@ -36,7 +36,9 @@ export default /* @__PURE__ */ _defineComponent({
       );
     }
     if (!mappedViewId.value) {
-      throw new Error("MagicCommandTrigger must be nested inside MagicCommandView");
+      throw new Error(
+        "MagicCommandTrigger must be nested inside MagicCommandView or a viewId must be provided"
+      );
     }
     const { getView } = useCommandView(instanceId);
     const view = getView(mappedViewId.value);

package/dist/plugins/MagicDraggable/src/components/MagicDraggable.vue.d.ts

@@ -68,7 +68,7 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
             easing?: (t: number) => number;
         };
     });
-    tag: "dialog" | "div";
+    tag: "div" | "dialog";
     scrollLock: boolean | {
         padding: boolean;
     };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -329,10 +329,10 @@ export function useDraggableDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.mjs

@@ -1,6 +1,10 @@
 import { shallowRef, ref } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarWidth,
+  scrollbarGutterSupport
+} from "@maas/vue-equipment/utils";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useDraggableScrollLock() {
   const positionFixedElements = ref([]);
@@ -13,24 +17,40 @@ export function useDraggableScrollLock() {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-draggable/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (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.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -22,13 +22,13 @@ type SnapToArgs = {
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
     mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
-    activeSnapPoint: Ref<("center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
+    activeSnapPoint: Ref<("top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right") | ["top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
-    } | undefined] | undefined, "center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
+    } | undefined] | undefined, "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right" | ["top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right", offset?: {
         x?: number;
         y?: number;
-    } | undefined] | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
+    } | undefined] | ["top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
     } | undefined] | undefined>;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -1,5 +1,5 @@
 import { ref, reactive, toValue } from "vue";
-const drawerStateStore = ref([]);
+const draggableStateStore = ref([]);
 export function useDraggableState(id) {
   function createState(id2) {
     const state = {
@@ -22,18 +22,18 @@ export function useDraggableState(id) {
   }
   function addState(id2) {
     const state = createState(id2);
-    drawerStateStore.value = [...drawerStateStore.value, state];
+    draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
   function initializeState() {
-    let state = drawerStateStore.value.find((entry) => {
+    let state = draggableStateStore.value.find((entry) => {
       return entry.id === id;
     });
     if (!state) state = addState(toValue(id));
     return state;
   }
   function deleteState() {
-    drawerStateStore.value = drawerStateStore.value.filter(
+    draggableStateStore.value = draggableStateStore.value.filter(
       (x) => x.id !== id
     );
   }

package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue.d.ts

@@ -76,9 +76,7 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
             easing?: (t: number) => number;
         };
     });
-    backdrop: boolean;
-    tag: "dialog" | "div";
-    focusTrap: boolean | import("focus-trap").Options;
+    tag: "div" | "dialog";
     scrollLock: {
         padding: boolean;
     } | ((boolean | {
@@ -110,10 +108,13 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     } & true, "padding"> & {
         padding: boolean;
     });
-    teleport: {
-        target?: string;
-        disabled?: boolean;
+    snapPoints: import("../types/index").DrawerSnapPoint[];
+    initial: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: import("../types/index").DrawerSnapPoint;
     };
+    position: "top" | "left" | "right" | "bottom";
     keyListener: ({
         close?: string[] | false;
     } & import("../../../../utils").RequireAll<{
@@ -127,12 +128,11 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     }>, "close"> & {
         close: (false | string[] | undefined) & (false | string[]);
     });
-    position: "left" | "top" | "right" | "bottom";
-    snapPoints: import("../types/index").DrawerSnapPoint[];
-    initial: {
-        open?: boolean;
-        transition?: boolean;
-        snapPoint?: import("../types/index").DrawerSnapPoint;
+    backdrop: boolean;
+    focusTrap: boolean | import("focus-trap").Options;
+    teleport: {
+        target?: string;
+        disabled?: boolean;
     };
     enableMousewheel: boolean;
     preventZoom: boolean;

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

@@ -2,7 +2,11 @@ import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
@@ -36,24 +40,40 @@ export function useDrawerDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-drawer(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (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.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

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

@@ -74,26 +74,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -324,26 +324,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -576,26 +576,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -826,26 +826,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -1078,26 +1078,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;
@@ -1328,26 +1328,26 @@ export declare function useMagicEmitter(): {
         } & Omit<{
             beforeSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             snapTo: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
                 duration?: number;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
                 duration?: number;
             };
             afterSnap: {
                 id: string;
-                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
+                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
             } | {
                 id: string;
-                snapPoint: import("../../../MagicDraggable/src/types").DraggableSnapPoint;
+                snapPoint: import("../../../MagicDrawer/src/types").DrawerSnapPoint;
             };
             beforeDrag: {
                 id: string;

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

@@ -29,7 +29,7 @@ export default /* @__PURE__ */ _defineComponent({
     }
     if (!mappedViewId.value) {
       throw new Error(
-        "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided"
+        "MagicMenuRemote must be nested inside MagicMenuView or a viewId must be provided"
       );
     }
     if (!__props.channelId) {

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

@@ -24,10 +24,10 @@ export function useMenuCallback(args) {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
     if (scrollLock) {
-      lockScroll();
       if (typeof scrollLock === "object" && scrollLock.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
   }
   function onBeforeLeave() {