@maas/vue-equipment 1.0.0-beta.6 → 1.0.0-beta.8

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

@@ -6,15 +6,7 @@ const _hoisted_2 = {
   key: 0,
   class: "magic-menu-item__pointer-guard"
 };
-import {
-  ref,
-  computed,
-  inject,
-  provide,
-  onBeforeUnmount,
-  watch,
-  useId
-} from "vue";
+import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
 import { useMenuItem } from "../composables/private/useMenuItem";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -37,7 +29,6 @@ export default /* @__PURE__ */ _defineComponent({
     const instanceId = inject(MagicMenuInstanceId, void 0);
     const viewId = inject(MagicMenuViewId, void 0);
     const contentId = inject(MagicMenuContentId, void 0);
-    const elRef = ref(void 0);
     if (!instanceId) {
       throw new Error("MagicMenuItem must be nested inside MagicMenuProvider");
     }
@@ -101,8 +92,6 @@ export default /* @__PURE__ */ _defineComponent({
     });
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("div", {
-        ref_key: "elRef",
-        ref: elRef,
         class: "magic-menu-item",
         "data-id": mappedId.value,
         "data-disabled": _ctx.disabled,

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

@@ -2,7 +2,6 @@ interface MagicMenuItemProps {
     id?: string;
     disabled?: boolean;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const mappedId: import("vue").ComputedRef<string>;
 declare const item: import("../types").MenuItem;
 declare const pointerDisabled: import("vue").ComputedRef<boolean>;
@@ -10,18 +9,14 @@ declare function guardedSelect(): void;
 declare function guardedUnselect(): void;
 declare function onClick(event: MouseEvent): void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     itemActive: boolean;
     itemDisabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['div'];
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuItemProps, {
-    elRef: typeof elRef;
     mappedId: typeof mappedId;
     item: typeof item;
     pointerDisabled: typeof pointerDisabled;
@@ -37,7 +32,7 @@ declare const __VLS_component: import("vue").DefineComponent<MagicMenuItemProps,
     click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,8 @@
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, unref as _unref, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   provide,
   watch,
   toValue,
@@ -24,12 +25,12 @@ export default /* @__PURE__ */ _defineComponent({
     options: { type: Object, required: false }
   },
   setup(__props) {
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const mappedOptions = defu(__props.options, defaultOptions);
     const { initializeState, deleteState } = useMenuState(__props.id);
     const state = initializeState(mappedOptions);
-    const lastX = ref(0);
-    const lastY = ref(0);
+    const lastX = shallowRef(0);
+    const lastY = shallowRef(0);
     const { x, y } = usePointer();
     watch(
       () => state?.input.type,
@@ -86,8 +87,7 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicMenuInstanceId, __props.id);
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
+        ref: "el",
         "as-child": _ctx.asChild,
         "data-id": _ctx.id,
         class: "magic-menu-provider"

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

@@ -6,99 +6,15 @@ interface MagicMenuProviderProps {
     asChild?: boolean;
     options?: MagicMenuOptions;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: import("vue").DefineComponent<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_2: import("vue/jsx-runtime").JSX.Element & {
-    __ctx?: ({
-        attrs?: any;
-        slots?: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }> | undefined;
-        emit?: ((event: string, ...args: any[]) => void) | undefined;
-    } & {
-        props?: (Partial<{
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> & Omit<{
-            readonly asChild: boolean;
-            readonly as: import("@maas/vue-primitive").ElementOrComponent;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "asChild" | "as"> & Record<string, unknown>) | undefined;
-        expose?(exposed: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, 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("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }>): void;
-    }) | undefined;
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
 declare var __VLS_7: {};
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_7) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuProviderProps, {
     Primitive: typeof Primitive;
-    elRef: typeof elRef;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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/components/MagicMenuRemote.vue.d.ts

@@ -11,12 +11,12 @@ interface MagicMenuRemoteProps {
 declare const onClick: () => void, onMouseenter: () => void;
 declare let channel: import("../types").MenuChannel;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_10: {
+declare var __VLS_11: {
     channelActive: boolean;
     remoteDisabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_11) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuRemoteProps, {
     Primitive: typeof Primitive;

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

@@ -1,7 +1,7 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
-import { computed, inject, ref, toValue, watch } from "vue";
+import { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { Primitive } from "@maas/vue-primitive";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -23,7 +23,7 @@ export default /* @__PURE__ */ _defineComponent({
     asChild: { type: Boolean, required: false }
   },
   setup(__props) {
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const injectedInstanceId = inject(MagicMenuInstanceId, void 0);
     const injectedViewId = inject(MagicMenuViewId, void 0);
     const itemId = inject(MagicMenuItemId, void 0);
@@ -94,8 +94,7 @@ export default /* @__PURE__ */ _defineComponent({
     onKeyStroke("Enter", onEnter);
     return (_ctx, _cache) => {
       return _openBlock(), _createBlock(_unref(Primitive), {
-        ref_key: "elRef",
-        ref: elRef,
+        ref: "el",
         "data-id": `${mappedViewId.value}-trigger`,
         "data-active": _unref(view)?.active,
         "data-disabled": mappedDisabled.value,

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

@@ -7,175 +7,21 @@ interface MagicMenuTriggerProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare const elRef: import("vue").Ref<import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, 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("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}> | undefined, import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, 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("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}> | undefined>;
 declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
 declare const view: import("../types").MenuView | undefined;
 declare const mappedDisabled: import("vue").ComputedRef<boolean>;
 declare const mappedTabindex: import("vue").ComputedRef<0 | undefined>;
 declare const onMouseenter: () => void, onClick: (e: MouseEvent) => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare const __VLS_0: import("vue").DefineComponent<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    asChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    as: {
-        type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-        default: string;
-    };
-}>>, {
-    asChild: boolean;
-    as: import("@maas/vue-primitive").ElementOrComponent;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_2: import("vue/jsx-runtime").JSX.Element & {
-    __ctx?: ({
-        attrs?: any;
-        slots?: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }> | undefined;
-        emit?: ((event: string, ...args: any[]) => void) | undefined;
-    } & {
-        props?: (Partial<{
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }> & Omit<{
-            readonly asChild: boolean;
-            readonly as: import("@maas/vue-primitive").ElementOrComponent;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "asChild" | "as"> & Record<string, unknown>) | undefined;
-        expose?(exposed: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }, 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("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>, {}, {}, {}, {
-            asChild: boolean;
-            as: import("@maas/vue-primitive").ElementOrComponent;
-        }>): void;
-    }) | undefined;
-};
-declare var __VLS_6: (Parameters<NonNullable<(typeof __VLS_5)["expose"]>>[0] | null);
-declare var __VLS_11: {
+declare var __VLS_13: {
     viewActive: boolean | undefined;
     triggerDisabled: boolean;
 };
-declare var __VLS_5: __VLS_PickFunctionalComponentCtx<typeof __VLS_0, typeof __VLS_2>;
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_13) => any;
 }>;
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_6;
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
     Primitive: typeof Primitive;
-    elRef: typeof elRef;
     mappedViewId: typeof mappedViewId;
     view: typeof view;
     mappedDisabled: typeof mappedDisabled;
@@ -183,7 +29,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
     onMouseenter: typeof onMouseenter;
     onClick: typeof onClick;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -6,17 +6,17 @@ interface MagicMenuViewProps {
 declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types").MenuView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     viewActive: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicMenuViewProps, {
     mappedId: typeof mappedId;
     view: typeof view;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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() {

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

@@ -7,9 +7,9 @@ export declare function useMenuCursor(view: MenuView, debug?: boolean): {
         x: number;
         y: number;
     }[]>;
-    isInsideFrom: import("vue").Ref<boolean, boolean>;
-    isInsideTo: import("vue").Ref<boolean, boolean>;
-    isInsideTriangle: import("vue").Ref<boolean, boolean>;
+    isInsideFrom: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTo: import("vue").ShallowRef<boolean, boolean>;
+    isInsideTriangle: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

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

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
@@ -7,9 +7,9 @@ export function useMenuCursor(view, debug = false) {
     { x: 0, y: 0 },
     { x: 0, y: 0 }
   ]);
-  const isInsideFrom = ref(false);
-  const isInsideTo = ref(false);
-  const isInsideTriangle = ref(false);
+  const isInsideFrom = shallowRef(false);
+  const isInsideTo = shallowRef(false);
+  const isInsideTriangle = shallowRef(false);
   function extendTriangle(vertices, pixelAmount) {
     const [a, b, c] = vertices;
     switch (view?.placement) {

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

@@ -1,7 +1,11 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useMenuDOM() {
   const positionFixedElements = ref([]);
   function lockScroll() {
@@ -12,25 +16,41 @@ export function useMenuDOM() {
   }
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
-    const exclude = new RegExp(/magic-menu?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    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" && !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/MagicMenu/src/composables/private/useMenuTrigger.d.ts

@@ -7,7 +7,7 @@ type UseMenuTriggerArgs = {
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
     mappedTrigger: ComputedRef<Interaction[]>;
-    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+    elRef: Ref<InstanceType<typeof Primitive> | null>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;

package/dist/plugins/MagicMenu/src/symbols/index.d.ts

@@ -1,11 +1,11 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 declare const MagicMenuInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicMenuParentTree: InjectionKey<string[]>;
 declare const MagicMenuViewId: InjectionKey<string>;
-declare const MagicMenuViewActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuViewActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuContentId: InjectionKey<string>;
 declare const MagicMenuItemId: InjectionKey<string>;
-declare const MagicMenuItemActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuItemActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuChannelId: InjectionKey<string>;
-declare const MagicMenuChannelActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuChannelActive: InjectionKey<Ref<boolean>>;
 export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, MagicMenuChannelId, MagicMenuChannelActive, };

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -3,7 +3,8 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
 const _hoisted_1 = ["data-id"];
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   nextTick,
   toValue,
@@ -36,7 +37,7 @@ export default /* @__PURE__ */ _defineComponent({
       }
     });
     const mappedOptions = customDefu(__props.options, defaultOptions);
-    const modalRef = ref(void 0);
+    const modalRef = useTemplateRef("modal");
     const {
       trapFocus,
       releaseFocus,
@@ -49,8 +50,8 @@ export default /* @__PURE__ */ _defineComponent({
       focusTrap: mappedOptions.focusTrap
     });
     const { isActive, close } = useMagicModal(__props.id);
-    const innerActive = ref(false);
-    const wrapperActive = ref(false);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
     const {
       onBeforeEnter,
       onEnter,
@@ -113,8 +114,7 @@ export default /* @__PURE__ */ _defineComponent({
         disabled: _unref(mappedOptions).teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          ref_key: "modalRef",
-          ref: modalRef,
+          ref: "modal",
           class: "magic-modal",
           "data-id": toValue(_ctx.id)
         }, _ctx.$attrs, {