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

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -1,7 +1,20 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, computed, toValue, watch, useId, onMounted } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-collision"
+};
+import {
+  shallowRef,
+  inject,
+  computed,
+  toValue,
+  watch,
+  useId,
+  onMounted,
+  useTemplateRef
+} from "vue";
 import { useCollisionDetection } from "../composables/private/useCollisionDetection";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
 import { useIntersectionObserver } from "@vueuse/core";
@@ -19,8 +32,8 @@ export default /* @__PURE__ */ _defineComponent({
         "MagicScrollCollision must be used within a MagicScrollProvider"
       );
     }
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
+    const intersecting = shallowRef(false);
+    const elRef = useTemplateRef("el");
     const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
     const mappedId = computed(() => __props.id ?? `magic-scroll-collision-${useId()}`);
     const { observe } = useCollisionDetection({
@@ -51,11 +64,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-collision"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default")
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue.d.ts

@@ -3,19 +3,13 @@ interface MagicScrollCollisionProps {
     id?: string;
     offset?: CollisionOffset;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 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<MagicScrollCollisionProps, {
-    elRef: typeof elRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_self: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & 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/MagicScroll/src/components/MagicScrollMotion.vue

@@ -1,7 +1,11 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, computed, onMounted, watch } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-motion"
+};
+import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
 import {
@@ -17,7 +21,7 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const animation = ref(void 0);
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const injectedProgress = inject(
       MagicScrollProgress,
       computed(() => 0)
@@ -64,11 +68,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-motion"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default")
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue.d.ts

@@ -5,19 +5,13 @@ interface MagicScrollMotionProps {
     sequenceOptions?: SequenceOptions;
     progress?: number;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 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<MagicScrollMotionProps, {
-    elRef: typeof elRef;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_self: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & 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/MagicScroll/src/components/MagicScrollProvider.vue.d.ts

@@ -21,7 +21,7 @@ declare const scrollReturn: {
     measure(): void;
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     scrollReturn: {
         x: import("vue").WritableComputedRef<number, number>;
         y: import("vue").WritableComputedRef<number, number>;
@@ -42,12 +42,12 @@ declare var __VLS_0: {
     };
 };
 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<MagicScrollProviderProps, {
     scrollReturn: typeof scrollReturn;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & 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/MagicScroll/src/components/MagicScrollScene.vue

@@ -1,7 +1,19 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, provide, inject, watch, nextTick, readonly } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-scroll-scene"
+};
+import {
+  shallowRef,
+  provide,
+  inject,
+  watch,
+  nextTick,
+  readonly,
+  useTemplateRef
+} from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import { useScrollApi } from "../composables/private/useScrollApi";
 import {
@@ -21,9 +33,9 @@ export default /* @__PURE__ */ _defineComponent({
     if (!scrollTarget) {
       console.error("MagicScrollScene must be used within a MagicScrollProvider");
     }
-    const progress = ref(0);
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
+    const progress = shallowRef(0);
+    const intersecting = shallowRef(false);
+    const elRef = useTemplateRef("el");
     const { getCalculations, getProgress } = useScrollApi({
       child: elRef,
       parent: scrollTarget,
@@ -64,11 +76,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-scene"
-        },
+        _hoisted_1,
         [
           _renderSlot(_ctx.$slots, "default", { progress: progress.value })
         ],

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -3,23 +3,18 @@ interface MagicScrollSceneProps {
     from?: ScrollIntersection;
     to?: ScrollIntersection;
 }
-declare const progress: import("vue").Ref<number, number>;
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare const progress: import("vue").ShallowRef<number, number>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {
+declare var __VLS_1: {
     progress: number;
 };
 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<MagicScrollSceneProps, {
     progress: typeof progress;
-    elRef: typeof elRef;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & 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/MagicScroll/src/composables/private/useCollisionDetection.d.ts

@@ -2,8 +2,8 @@ import { type MaybeRef } from 'vue';
 import type { CollisionOffset } from '../../types/index.js';
 type UseCollisionDetectionArgs = {
     id: string;
-    child: MaybeRef<HTMLElement | undefined>;
-    parent: MaybeRef<HTMLElement | undefined>;
+    child: MaybeRef<HTMLElement | null>;
+    parent: MaybeRef<HTMLElement | null | undefined>;
     scrollY: MaybeRef<number>;
     offset?: CollisionOffset;
 };

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -1,4 +1,4 @@
-import { ref, reactive, computed, toValue } from "vue";
+import { shallowRef, reactive, computed, toValue } from "vue";
 import { useElementBounding } from "@vueuse/core";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 export function useCollisionDetection(args) {
@@ -28,8 +28,8 @@ export function useCollisionDetection(args) {
   const childBoundingRect = useElementBounding(child);
   const parentBoundingRect = useElementBounding(parent);
   const mappedOffset = { top: 0, bottom: 0, ...offset };
-  const lastScrollY = ref(0);
-  const scrollDirection = ref();
+  const lastScrollY = shallowRef(0);
+  const scrollDirection = shallowRef();
   const oppositeScrollDirection = computed(
     () => scrollDirection.value === "up" ? "down" : "up"
   );

package/dist/plugins/MagicScroll/src/composables/private/useScrollApi.mjs

@@ -1,4 +1,9 @@
-import { ref, inject, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  inject,
+  toValue
+} from "vue";
 import { useWindowSize } from "@vueuse/core";
 import { MagicScrollReturn } from "../../symbols/index.mjs";
 import { clampValue } from "@maas/vue-equipment/utils";
@@ -7,8 +12,8 @@ export function useScrollApi(params) {
   const scrollReturn = inject(MagicScrollReturn, void 0);
   const childRect = ref(void 0);
   const parentRect = ref(void 0);
-  const start = ref(0);
-  const end = ref(0);
+  const start = shallowRef(0);
+  const end = shallowRef(0);
   const { width: windowWidth, height: windowHeight } = useWindowSize();
   function splitLocation(location) {
     return {

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

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref, MaybeRef } from 'vue';
 import type { UseScrollReturn } from '@vueuse/core';
-declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | undefined>>;
+declare const MagicScrollTarget: InjectionKey<MaybeRef<HTMLElement | null | undefined>>;
 declare const MagicScrollProgress: InjectionKey<Ref<number>>;
 declare const MagicScrollReturn: InjectionKey<UseScrollReturn | undefined>;
 export { MagicScrollTarget, MagicScrollProgress, MagicScrollReturn };

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue

@@ -4,7 +4,7 @@ import { unref as _unref, renderList as _renderList, Fragment as _Fragment, open
 const _hoisted_1 = ["data-id", "data-position", "data-expanded"];
 import {
   toValue,
-  ref,
+  useTemplateRef,
   provide,
   watch,
   onBeforeUnmount
@@ -35,7 +35,7 @@ export default /* @__PURE__ */ _defineComponent({
     const { deleteView } = useToastView(__props.id);
     const { deleteState, initializeState } = useToastState(__props.id);
     const state = initializeState(__props.options);
-    const listRef = ref(void 0);
+    const listRef = useTemplateRef("list");
     const {
       onBeforeEnter,
       onEnter,
@@ -71,8 +71,7 @@ export default /* @__PURE__ */ _defineComponent({
           class: "magic-toast-provider"
         }, _ctx.$attrs), [
           _createVNode(_TransitionGroup, {
-            ref_key: "listRef",
-            ref: listRef,
+            ref: "list",
             tag: "ol",
             class: "magic-toast-provider__list",
             name: _unref(state).options.transition,
@@ -208,7 +207,7 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='top-left'],
-.magic-toast-provider[data-position='top-center'],
+.magic-toast-provider[data-position='top'],
 .magic-toast-provider[data-position='top-right'] {
   --mt-enter-animation: mt-slide-ttb-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
@@ -220,7 +219,7 @@ export default /* @__PURE__ */ _defineComponent({
 }
 
 .magic-toast-provider[data-position='bottom-left'],
-.magic-toast-provider[data-position='bottom-center'],
+.magic-toast-provider[data-position='bottom'],
 .magic-toast-provider[data-position='bottom-right'] {
   --mt-enter-animation: mt-slide-btt-in var(--magic-toast-animation-duration)
     var(--ease-in-out);
@@ -240,7 +239,7 @@ export default /* @__PURE__ */ _defineComponent({
   --mt-align-items: flex-end;
 }
 
-.magic-toast-provider[data-position='center-left'] {
+.magic-toast-provider[data-position='left'] {
   --mt-justify-content: center;
   --mt-align-items: flex-start;
   --mt-enter-animation: slide-ltr-in var(--magic-toast-animation-duration)
@@ -249,7 +248,7 @@ export default /* @__PURE__ */ _defineComponent({
     var(--ease-in-out);
 }
 
-.magic-toast-provider[data-position='center-right'] {
+.magic-toast-provider[data-position='right'] {
   --mt-justify-content: center;
   --mt-align-items: flex-end;
   --mt-enter-animation: slide-rtl-in var(--magic-toast-animation-duration)
@@ -263,13 +262,13 @@ export default /* @__PURE__ */ _defineComponent({
   position: absolute;
 
   &[data-position='bottom-left'],
-  &[data-position='bottom-center'],
+  &[data-position='bottom'],
   &[data-position='bottom-right'] {
     bottom: calc(var(--mt-height) * var(--mt-index) * 1px);
   }
 
   &[data-position='top-left'],
-  &[data-position='top-center'],
+  &[data-position='top'],
   &[data-position='top-right'] {
     top: calc(var(--mt-height) * var(--mt-index) * 1px);
   }

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue.d.ts

@@ -10,63 +10,5 @@ interface MagicToastProps {
     id: MaybeRef<string>;
     options?: MagicToastOptions;
 }
-declare const __VLS_6: import("vue").DefineComponent<import("vue").TransitionGroupProps>;
-declare const __VLS_8: 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<{}> & Omit<{
-            readonly duration?: (number | {
-                enter: number;
-                leave: number;
-            }) | undefined;
-            readonly onBeforeEnter?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onEnter?: (((el: Element, done: () => void) => void) | ((el: Element, done: () => void) => void)[]) | undefined;
-            readonly onAfterEnter?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onBeforeLeave?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onLeave?: (((el: Element, done: () => void) => void) | ((el: Element, done: () => void) => void)[]) | undefined;
-            readonly onAfterLeave?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly name?: string | undefined;
-            readonly persisted?: boolean | undefined;
-            readonly type?: ("transition" | "animation") | undefined;
-            readonly css?: boolean | undefined;
-            readonly enterFromClass?: string | undefined;
-            readonly enterActiveClass?: string | undefined;
-            readonly enterToClass?: string | undefined;
-            readonly appearFromClass?: string | undefined;
-            readonly appearActiveClass?: string | undefined;
-            readonly appearToClass?: string | undefined;
-            readonly leaveFromClass?: string | undefined;
-            readonly leaveActiveClass?: string | undefined;
-            readonly leaveToClass?: string | undefined;
-            readonly appear?: boolean | undefined;
-            readonly onEnterCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onLeaveCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onBeforeAppear?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onAppear?: (((el: Element, done: () => void) => void) | ((el: Element, done: () => void) => void)[]) | undefined;
-            readonly onAfterAppear?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly onAppearCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
-            readonly tag?: string | undefined;
-            readonly moveClass?: string | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, undefined> & Record<string, unknown>) | undefined;
-        expose?(exposed: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").TransitionGroupProps>, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").TransitionGroupProps>, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, {}>): void;
-    }) | undefined;
-};
-declare var __VLS_12: (Parameters<NonNullable<(typeof __VLS_11)["expose"]>>[0] | null);
-declare var __VLS_11: __VLS_PickFunctionalComponentCtx<typeof __VLS_6, typeof __VLS_8>;
-type __VLS_TemplateRefs = {
-    listRef: typeof __VLS_12;
-};
-declare const _default: import("vue").DefineComponent<MagicToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, any>;
+declare const _default: import("vue").DefineComponent<MagicToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/plugins/MagicToast/src/components/MagicToastView.vue

@@ -2,7 +2,7 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-id", "data-expanded", "data-dragging", "data-position", "data-debug"];
-import { ref, computed, inject } from "vue";
+import { computed, inject } from "vue";
 import { MagicToastInstanceId } from "../../symbols";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastDrag } from "../composables/private/useToastDrag";
@@ -18,7 +18,6 @@ export default /* @__PURE__ */ _defineComponent({
     if (!instanceId) {
       throw new Error("MagicToastView must be used within a MagicToastProvider");
     }
-    const elRef = ref(void 0);
     const { initializeState } = useToastState(instanceId);
     const state = initializeState();
     const count = computed(() => state.views.length);
@@ -35,8 +34,6 @@ export default /* @__PURE__ */ _defineComponent({
     });
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("li", {
-        ref_key: "elRef",
-        ref: elRef,
         class: "magic-toast-view",
         "data-id": _ctx.id,
         "data-expanded": _unref(state).expanded,
@@ -94,13 +91,13 @@ export default /* @__PURE__ */ _defineComponent({
   user-select: none;
 
   &[data-position='bottom-left'],
-  &[data-position='bottom-center'],
+  &[data-position='bottom'],
   &[data-position='bottom-right'] {
     padding-top: var(--magic-toast-gap);
   }
 
   &[data-position='top-left'],
-  &[data-position='top-center'],
+  &[data-position='top'],
   &[data-position='top-right'] {
     padding-bottom: var(--magic-toast-gap);
   }
@@ -138,11 +135,11 @@ export default /* @__PURE__ */ _defineComponent({
   cursor: var(--magic-toast-view-cursor-dragging, grabbing);
 }
 
-.magic-toast-view[data-position='center-left'] {
+.magic-toast-view[data-position='left'] {
   position: absolute;
 }
 
-.magic-toast-view[data-position='center-right'] {
+.magic-toast-view[data-position='right'] {
   position: absolute;
 }
 

package/dist/plugins/MagicToast/src/components/MagicToastView.vue.d.ts

@@ -3,7 +3,6 @@ interface MagicToastViewProps {
     id: string;
     index: number;
 }
-declare const elRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 declare const state: import("../types").ToastState;
 declare const view: import("vue").ComputedRef<import("../types").ToastView>;
 declare const reversedIndex: import("vue").ComputedRef<number>;
@@ -11,15 +10,11 @@ declare const height: import("vue").ComputedRef<string>;
 declare const offset: import("vue").ComputedRef<string>;
 declare const style: import("vue").ComputedRef<string>, onPointerdown: (e: PointerEvent) => void, onClick: (e: MouseEvent) => Promise<void>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 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['li'];
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicToastViewProps, {
-    elRef: typeof elRef;
     state: typeof state;
     view: typeof view;
     reversedIndex: typeof reversedIndex;
@@ -29,7 +24,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicToastViewProps, {
     onPointerdown: typeof onPointerdown;
     onClick: typeof onClick;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicToastViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLLIElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicToastViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & 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 & {