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

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.7",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

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<("center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "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, "center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number;
         y?: number;
-    } | undefined] | ["center" | "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
+    } | undefined] | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
         x?: number | undefined;
         y?: number | undefined;
     } | undefined] | undefined>;

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

@@ -77,7 +77,7 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
         };
     });
     backdrop: boolean;
-    tag: "dialog" | "div";
+    tag: "div" | "dialog";
     focusTrap: boolean | import("focus-trap").Options;
     scrollLock: {
         padding: boolean;
@@ -127,7 +127,7 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     }>, "close"> & {
         close: (false | string[] | undefined) & (false | string[]);
     });
-    position: "left" | "top" | "right" | "bottom";
+    position: "right" | "left" | "top" | "bottom";
     snapPoints: import("../types/index").DrawerSnapPoint[];
     initial: {
         open?: 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/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() {

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

@@ -1,6 +1,10 @@
 import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
+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([]);
@@ -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/MagicModal/src/components/MagicModal.vue.d.ts

@@ -13,7 +13,7 @@ declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> &
         backdrop?: string;
     };
     backdrop: boolean;
-    tag: "dialog" | "div";
+    tag: "div" | "dialog";
     focusTrap: boolean | import("focus-trap").Options;
     scrollLock: boolean | {
         padding: boolean;

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.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 useModalDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__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/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -38,31 +38,31 @@ import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudioControls",
   props: {
-    id: { type: String, required: false }
+    instanceId: { type: String, required: false }
   },
   setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    if (!mappedInstanceId.value) {
       throw new Error(
-        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
+        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
       );
     }
     const barRef = useTemplateRef("bar");
     const trackRef = useTemplateRef("track");
     const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     usePlayerControlsApi({
-      id: mappedId.value,
+      id: mappedInstanceId.value,
       barRef,
       trackRef
     });
     const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.value);
+    provide(MagicPlayerInstanceId, mappedInstanceId.value);
     return (_ctx, _cache) => {
       const _component_magic_player_display_time = _resolveComponent("magic-player-display-time");
       const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue.d.ts

@@ -1,7 +1,7 @@
 import IconPlay from './icons/Play.vue.js';
 import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
-    id?: string;
+    instanceId?: string;
 }
 declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
 declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -257,10 +257,10 @@ export function useToastDrag(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/MagicToast/src/composables/private/useToastScrollLock.mjs

@@ -1,6 +1,9 @@
 import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useToastScrollLock() {
   const positionFixedElements = ref([]);
@@ -12,25 +15,40 @@ export function useToastScrollLock() {
   }
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
-    const exclude = new RegExp(/magic-toast/);
-    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"
     );
+    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/utils/index.d.ts

@@ -51,6 +51,10 @@ interface GuardedReleasePointerCaptureArgs {
 declare function guardedSetPointerCapture(args: GuardedSetPointerCaptureArgs): void;
 declare function guardedReleasePointerCapture(args: GuardedReleasePointerCaptureArgs): void;
 
+declare function scrollbarGutterSupport(): boolean;
+
+declare function scrollbarWidth(): number;
+
 interface SlugifyOptions {
     separator?: string;
     trim?: boolean;
@@ -76,4 +80,4 @@ type RequireAllNested<T> = {
 
 type ValueOf<T> = T[keyof T];
 
-export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, type ValueOf, clampValue, easeInCubic, easeInOutCubic, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInQuad, easeInQuart, easeInQuint, easeOutBack, easeOutCubic, easeOutQuad, easeOutQuart, easeOutQuint, formatTime, guardedReleasePointerCapture, guardedSetPointerCapture, interpolate, isIOS, isWithinRange, linear, mapValue, matchClass, slugify, uniq };
+export { type InterpolateArgs, type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, type ValueOf, clampValue, easeInCubic, easeInOutCubic, easeInOutQuad, easeInOutQuart, easeInOutQuint, easeInQuad, easeInQuart, easeInQuint, easeOutBack, easeOutCubic, easeOutQuad, easeOutQuart, easeOutQuint, formatTime, guardedReleasePointerCapture, guardedSetPointerCapture, interpolate, isIOS, isWithinRange, linear, mapValue, matchClass, scrollbarGutterSupport, scrollbarWidth, slugify, uniq };

package/dist/utils/index.js

@@ -131,6 +131,29 @@ function guardedReleasePointerCapture(args) {
   }
 }
 
+// src/functions/scrollbarGutterSupport.ts
+function scrollbarGutterSupport() {
+  return CSS.supports("scrollbar-gutter", "stable");
+}
+
+// src/functions/scrollbarWidth.ts
+function scrollbarWidth() {
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "absolute";
+  wrapper.style.visibility = "hidden";
+  wrapper.style.overflow = "hidden";
+  wrapper.style.width = "100px";
+  wrapper.style.height = "100px";
+  wrapper.style.top = "-9999px";
+  wrapper.innerHTML = '<div style="width: 200px; height: 200px;"></div>';
+  document.body.appendChild(wrapper);
+  const withoutScrollbar = wrapper.clientWidth;
+  wrapper.style.overflow = "scroll";
+  const withScrollbar = wrapper.clientWidth;
+  document.body.removeChild(wrapper);
+  return Math.round(withoutScrollbar - withScrollbar);
+}
+
 // src/functions/slugify.ts
 var defaultOptions = {
   separator: "-",
@@ -194,6 +217,8 @@ export {
   linear,
   mapValue,
   matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth,
   slugify,
   uniq
 };

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/easings.ts","../../packages/utils/src/functions/toNumber.ts","../../packages/utils/src/functions/formatTime.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/isWithinRange.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/pointerCapture.ts","../../packages/utils/src/functions/slugify.ts","../../packages/utils/src/functions/uniq.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function linear(t: number) {\n  return t\n}\nexport function easeInQuad(t: number) {\n  return t * t\n}\nexport function easeOutQuad(t: number) {\n  return t * (2 - t)\n}\nexport function easeInOutQuad(t: number) {\n  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t\n}\nexport function easeOutBack(t: number, o: number = 1.25) {\n  return 1 + (t - 1) * (t - 1) * ((o + 1) * (t - 1) + o)\n}\nexport function easeInCubic(t: number) {\n  return t * t * t\n}\nexport function easeOutCubic(t: number) {\n  return --t * t * t + 1\n}\nexport function easeInOutCubic(t: number) {\n  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1\n}\nexport function easeInQuart(t: number) {\n  return t * t * t * t\n}\nexport function easeOutQuart(t: number) {\n  return 1 - --t * t * t * t\n}\nexport function easeInOutQuart(t: number) {\n  return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t\n}\nexport function easeInQuint(t: number) {\n  return t * t * t * t * t\n}\nexport function easeOutQuint(t: number) {\n  return 1 + --t * t * t * t * t\n}\nexport function easeInOutQuint(t: number) {\n  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t\n}\n","export function toNumber(value: string | number): number {\n  return typeof value === 'string' ? parseFloat(value) : Number(value)\n}\n","import { toNumber } from './toNumber'\n\nexport function formatTime(seconds: number, guide: number) {\n  seconds = seconds < 0 ? 0 : seconds\n  let s: string | number = Math.floor(seconds % 60)\n  let m: string | number = Math.floor((seconds / 60) % 60)\n  let h: string | number = Math.floor(seconds / 3600)\n  const gm = Math.floor((guide / 60) % 60)\n  const gh = Math.floor(guide / 3600)\n\n  // handle invalid times\n  if (isNaN(seconds) || seconds === Infinity) {\n    // '-' is false for all relational operators (e.g. <, >=) so this setting\n    // will add the minimum number of fields specified by the guide\n    h = m = s = '-'\n  }\n\n  // Check if we need to show hours\n  h = toNumber(h) > 0 || gh > 0 ? h + ':' : ''\n\n  // If hours are showing, we may need to add a leading zero.\n  // Always show at least one digit of minutes.\n  m = ((h || gm >= 10) && toNumber(m) < 10 ? '0' + m : m) + ':'\n\n  // Check if leading zero is need for seconds\n  s = toNumber(s) < 10 ? '0' + s : s\n\n  return h + m + s\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","interface isWithinRangeArgs {\n  input: number\n  base: number\n  threshold: number\n}\n\nexport function isWithinRange(args: isWithinRangeArgs): boolean {\n  const { input, base, threshold } = args\n  return input >= base - threshold && input <= base + threshold\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","interface GuardedSetPointerCaptureArgs {\n  event: PointerEvent\n  element?: Element | null\n  debug?: boolean\n}\n\ninterface GuardedReleasePointerCaptureArgs {\n  event: PointerEvent\n  element?: Element | null\n}\n\nexport function guardedSetPointerCapture(\n  args: GuardedSetPointerCaptureArgs\n): void {\n  const { event, element, debug } = args\n  if (element && event.isPrimary && event.pointerType !== 'mouse') {\n    try {\n      const coalescedEvents: PointerEvent[] =\n        'getCoalescedEvents' in event ? event.getCoalescedEvents() : [event]\n\n      if (coalescedEvents.length > 0) {\n        element?.setPointerCapture(event.pointerId)\n      }\n    } catch (error) {\n      if (debug) {\n        console.warn('Failed to set pointer capture:', error)\n      }\n    }\n  }\n}\n\nexport function guardedReleasePointerCapture(\n  args: GuardedReleasePointerCaptureArgs\n): void {\n  const { event, element } = args\n  if (element?.hasPointerCapture(event.pointerId)) {\n    element.releasePointerCapture(event.pointerId)\n  }\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n","export function uniq<T extends unknown[]>(a: T) {\n  return Array.from(new Set(a))\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/easings.ts","../../packages/utils/src/functions/toNumber.ts","../../packages/utils/src/functions/formatTime.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/isWithinRange.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/matchClass.ts","../../packages/utils/src/functions/pointerCapture.ts","../../packages/utils/src/functions/scrollbarGutterSupport.ts","../../packages/utils/src/functions/scrollbarWidth.ts","../../packages/utils/src/functions/slugify.ts","../../packages/utils/src/functions/uniq.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function linear(t: number) {\n  return t\n}\nexport function easeInQuad(t: number) {\n  return t * t\n}\nexport function easeOutQuad(t: number) {\n  return t * (2 - t)\n}\nexport function easeInOutQuad(t: number) {\n  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t\n}\nexport function easeOutBack(t: number, o: number = 1.25) {\n  return 1 + (t - 1) * (t - 1) * ((o + 1) * (t - 1) + o)\n}\nexport function easeInCubic(t: number) {\n  return t * t * t\n}\nexport function easeOutCubic(t: number) {\n  return --t * t * t + 1\n}\nexport function easeInOutCubic(t: number) {\n  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1\n}\nexport function easeInQuart(t: number) {\n  return t * t * t * t\n}\nexport function easeOutQuart(t: number) {\n  return 1 - --t * t * t * t\n}\nexport function easeInOutQuart(t: number) {\n  return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t\n}\nexport function easeInQuint(t: number) {\n  return t * t * t * t * t\n}\nexport function easeOutQuint(t: number) {\n  return 1 + --t * t * t * t * t\n}\nexport function easeInOutQuint(t: number) {\n  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t\n}\n","export function toNumber(value: string | number): number {\n  return typeof value === 'string' ? parseFloat(value) : Number(value)\n}\n","import { toNumber } from './toNumber'\n\nexport function formatTime(seconds: number, guide: number) {\n  seconds = seconds < 0 ? 0 : seconds\n  let s: string | number = Math.floor(seconds % 60)\n  let m: string | number = Math.floor((seconds / 60) % 60)\n  let h: string | number = Math.floor(seconds / 3600)\n  const gm = Math.floor((guide / 60) % 60)\n  const gh = Math.floor(guide / 3600)\n\n  // handle invalid times\n  if (isNaN(seconds) || seconds === Infinity) {\n    // '-' is false for all relational operators (e.g. <, >=) so this setting\n    // will add the minimum number of fields specified by the guide\n    h = m = s = '-'\n  }\n\n  // Check if we need to show hours\n  h = toNumber(h) > 0 || gh > 0 ? h + ':' : ''\n\n  // If hours are showing, we may need to add a leading zero.\n  // Always show at least one digit of minutes.\n  m = ((h || gm >= 10) && toNumber(m) < 10 ? '0' + m : m) + ':'\n\n  // Check if leading zero is need for seconds\n  s = toNumber(s) < 10 ? '0' + s : s\n\n  return h + m + s\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const { from, to, duration, callback, easing = (t) => t * (2 - t) } = args\n\n  let startTime: number\n\n  function animate(timestamp: number) {\n    if (!startTime) startTime = timestamp\n\n    const progress = Math.min(1, (timestamp - startTime) / duration)\n    const easedProgress = easing(progress)\n    const value = from + (to - from) * easedProgress\n\n    callback(value)\n\n    if (progress < 1) {\n      requestAnimationFrame(animate)\n    }\n  }\n\n  requestAnimationFrame(animate)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","interface isWithinRangeArgs {\n  input: number\n  base: number\n  threshold: number\n}\n\nexport function isWithinRange(args: isWithinRangeArgs): boolean {\n  const { input, base, threshold } = args\n  return input >= base - threshold && input <= base + threshold\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","export function matchClass(el: Element, regex: RegExp) {\n  return Array.from(el.classList).some((className) => regex.test(className))\n}\n","interface GuardedSetPointerCaptureArgs {\n  event: PointerEvent\n  element?: Element | null\n  debug?: boolean\n}\n\ninterface GuardedReleasePointerCaptureArgs {\n  event: PointerEvent\n  element?: Element | null\n}\n\nexport function guardedSetPointerCapture(\n  args: GuardedSetPointerCaptureArgs\n): void {\n  const { event, element, debug } = args\n  if (element && event.isPrimary && event.pointerType !== 'mouse') {\n    try {\n      const coalescedEvents: PointerEvent[] =\n        'getCoalescedEvents' in event ? event.getCoalescedEvents() : [event]\n\n      if (coalescedEvents.length > 0) {\n        element?.setPointerCapture(event.pointerId)\n      }\n    } catch (error) {\n      if (debug) {\n        console.warn('Failed to set pointer capture:', error)\n      }\n    }\n  }\n}\n\nexport function guardedReleasePointerCapture(\n  args: GuardedReleasePointerCaptureArgs\n): void {\n  const { event, element } = args\n  if (element?.hasPointerCapture(event.pointerId)) {\n    element.releasePointerCapture(event.pointerId)\n  }\n}\n","export function scrollbarGutterSupport() {\n  return CSS.supports('scrollbar-gutter', 'stable')\n}\n","export function scrollbarWidth() {\n  const wrapper = document.createElement('div')\n  wrapper.style.position = 'absolute'\n  wrapper.style.visibility = 'hidden'\n  wrapper.style.overflow = 'hidden'\n  wrapper.style.width = '100px'\n  wrapper.style.height = '100px'\n  wrapper.style.top = '-9999px'\n\n  wrapper.innerHTML = '<div style=\"width: 200px; height: 200px;\"></div>'\n  document.body.appendChild(wrapper)\n\n  // Get the scrollbar width\n  const withoutScrollbar = wrapper.clientWidth\n  wrapper.style.overflow = 'scroll'\n  const withScrollbar = wrapper.clientWidth\n\n  // Clean up\n  document.body.removeChild(wrapper)\n\n  return Math.round(withoutScrollbar - withScrollbar)\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n","export function uniq<T extends unknown[]>(a: T) {\n  return Array.from(new Set(a))\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "contributors": [
     {
       "name": "Robin Scholz",