@maas/vue-equipment 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/nuxt/module.json

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

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

@@ -36,8 +36,8 @@ import { useAccordionView } from "../composables/private/useAccordionView";
 import { useAccordionState } from "../composables/private/useAccordionState";
 import { useAccordionCallback } from "../composables/private/useAccordionCallback";
 import { MagicAccordionInstanceId, MagicAccordionViewId } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/auto-size-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
 import "@maas/vue-equipment/utils/css/easings.css";
 const { transition, animation } = defineProps({
   asChild: { type: Boolean, required: false },

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

@@ -1,7 +1,7 @@
 import { AutoSize } from '@maas/vue-autosize';
 import { Primitive } from '@maas/vue-primitive';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/auto-size-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/auto-size-out.css';
 import '@maas/vue-equipment/utils/css/easings.css';
 interface MagicAccordionContentProps {
     asChild?: boolean;

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

@@ -47,8 +47,8 @@ import {
 } from "../symbols";
 import { useCommandView } from "../composables/private/useCommandView";
 import { useCommandState } from "../composables/private/useCommandState";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
 defineOptions({
   inheritAttrs: false
 });

package/dist/plugins/MagicCommand/src/components/MagicCommandContent.vue.d.ts

@@ -1,5 +1,5 @@
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
 declare const viewId: string | undefined;
 declare const state: import("../types/index.js").CommandState;
 declare const isActive: import("vue").ComputedRef<false | HTMLElement | null | undefined>;

package/dist/plugins/MagicCookie/src/components/MagicCookieView.vue

@@ -27,8 +27,8 @@ import { AutoSize } from "@maas/vue-autosize";
 import { useCookieState } from "../composables/private/useCookieState";
 import { useCookieCallback } from "../composables/private/useCookieCallback";
 import { MagicCookieInstanceId } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/auto-size-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
 const instanceId = inject(MagicCookieInstanceId, void 0);
 if (!instanceId) {
   throw new Error(

package/dist/plugins/MagicCookie/src/components/MagicCookieView.vue.d.ts

@@ -1,6 +1,6 @@
 import { AutoSize } from '@maas/vue-autosize';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/auto-size-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/auto-size-out.css';
 declare const state: import("../types/index.js").CookieState;
 declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;

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

@@ -81,16 +81,16 @@ import { useDrawerDrag } from "../composables/private/useDrawerDrag";
 import { useDrawerWheel } from "../composables/private/useDrawerWheel";
 import { useDrawerState } from "../composables/private/useDrawerState";
 import { useMagicDrawer } from "../composables/useMagicDrawer";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-out.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ltr-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-rtl-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ttb-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-btt-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ltr-out.css";
-import "@maas/vue-equipment/utils/css/animations/slide-rtl-out.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ttb-out.css";
-import "@maas/vue-equipment/utils/css/animations/slide-btt-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ttb-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-btt-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ttb-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-btt-out.css";
 defineOptions({
   inheritAttrs: false
 });

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

@@ -1,15 +1,15 @@
 import { type MaybeRef } from 'vue';
 import type { MagicDrawerOptions } from '../types/index.js';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css';
-import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css';
-import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-btt-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-btt-out.css';
 interface MagicDrawerProps {
     id: MaybeRef<string>;
     options?: MagicDrawerOptions;
@@ -76,7 +76,9 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
             easing?: (t: number) => number;
         };
     });
+    backdrop: boolean;
     tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
     scrollLock: {
         padding: boolean;
     } | ((boolean | {
@@ -108,13 +110,10 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     } & true, "padding"> & {
         padding: boolean;
     });
-    snapPoints: import("../types/index.js").DrawerSnapPoint[];
-    initial: {
-        open?: boolean;
-        transition?: boolean;
-        snapPoint?: import("../types/index.js").DrawerSnapPoint;
+    teleport: {
+        target?: string;
+        disabled?: boolean;
     };
-    position: "top" | "left" | "right" | "bottom";
     keyListener: ({
         close?: string[] | false;
     } & import("../../../../utils/index.js").RequireAll<{
@@ -128,11 +127,12 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     }>, "close"> & {
         close: (false | string[] | undefined) & (false | string[]);
     });
-    backdrop: boolean;
-    focusTrap: boolean | import("focus-trap").Options;
-    teleport: {
-        target?: string;
-        disabled?: boolean;
+    position: "right" | "left" | "top" | "bottom";
+    snapPoints: import("../types/index.js").DrawerSnapPoint[];
+    initial: {
+        open?: boolean;
+        transition?: boolean;
+        snapPoint?: import("../types/index.js").DrawerSnapPoint;
     };
     enableMousewheel: boolean;
     preventZoom: boolean;

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

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

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

@@ -77,8 +77,8 @@ import {
   MagicMenuViewId,
   MagicMenuContentId
 } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
 defineOptions({
   inheritAttrs: false
 });

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

@@ -1,7 +1,7 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
 import type { Middleware } from '@floating-ui/vue';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
 interface MagicMenuContentProps {
     arrow?: boolean | undefined;
     middleware?: Middleware[];

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

@@ -62,8 +62,8 @@ import { defaultOptions } from "./../utils/defaultOptions";
 import { useModalDOM } from "../composables/private/useModalDOM";
 import { useModalCallback } from "../composables/private/useModalCallback";
 import { useMagicModal } from "../composables/useMagicModal";
-import "@maas/vue-equipment/utils/css/animations/fade-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
 defineOptions({
   inheritAttrs: false
 });

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

@@ -1,7 +1,7 @@
 import { type MaybeRef } from 'vue';
 import type { MagicModalOptions } from './../types/index.js';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
     props?: Record<string, unknown>;
@@ -12,19 +12,19 @@ declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> &
         content?: string;
         backdrop?: string;
     };
+    backdrop: boolean;
     tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
     scrollLock: boolean | {
         padding: boolean;
     };
-    keyListener: {
-        close?: string[] | false;
-    };
-    backdrop: boolean;
-    focusTrap: boolean | import("focus-trap").Options;
     teleport: {
         target?: string;
         disabled?: boolean;
     };
+    keyListener: {
+        close?: string[] | false;
+    };
 };
 declare const mappedId: string;
 declare const close: () => void;

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -93,7 +93,9 @@ export function useNoiseApi({
   }
   function initialize() {
     resetContexts();
-    if (!canvasRef.value || !offCanvasRef.value) return;
+    if (!canvasRef.value || !offCanvasRef.value) {
+      return;
+    }
     const maxCanvasDim = Math.max(width.value, height.value) * pixelRatio.value;
     const maxOffCanvasDim = maxCanvasDim / Math.sqrt(mappedOptions.tiles);
     const adjustedOffCanvasDim = findBiggerNumber(
@@ -105,11 +107,13 @@ export function useNoiseApi({
     offCanvasRef.value.width = dimensions.offWidth = adjustedOffCanvasDim;
     offCanvasRef.value.height = dimensions.offHeight = adjustedOffCanvasDim;
     context.value = canvasRef.value.getContext("2d", {
-      alpha: false
+      alpha: mappedOptions.alpha,
+      colorSpace: mappedOptions.colorSpace
     });
     offContext.value = offCanvasRef.value.getContext("2d", {
-      alpha: false,
-      willReadFrequently: true
+      alpha: mappedOptions.alpha,
+      willReadFrequently: true,
+      colorSpace: mappedOptions.colorSpace
     });
     resetPixels();
     calculate();

package/dist/plugins/MagicNoise/src/types/index.d.ts

@@ -12,4 +12,6 @@ export type MagicNoiseOptions = {
     tiles?: number;
     fps?: number;
     color?: string;
+    alpha?: boolean;
+    colorSpace?: 'srgb' | 'display-p3';
 };

package/dist/plugins/MagicNoise/src/utils/defaultOptions.mjs

@@ -2,6 +2,8 @@ const defaultOptions = {
   pixelSize: 2,
   tiles: 32,
   fps: 12,
-  color: "white"
+  color: "white",
+  alpha: false,
+  colorSpace: "srgb"
 };
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue

@@ -101,8 +101,8 @@ import {
   MagicPlayerPopoverRef,
   MagicPlayerBarRef
 } from "../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-up-in.css";
-import "@maas/vue-equipment/utils/css/animations/fade-up-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-up-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-up-out.css";
 const {
   id,
   standalone = false,

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

@@ -4,8 +4,8 @@ import IconVolumeOn from './icons/VolumeOn.vue.js';
 import IconVolumeOff from './icons/VolumeOff.vue.js';
 import IconFullscreenEnter from './icons/FullscreenEnter.vue.js';
 import IconFullscreenExit from './icons/FullscreenExit.vue.js';
-import '@maas/vue-equipment/utils/css/animations/fade-up-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-up-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-up-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-up-out.css';
 interface MagicPlayerControlsProps {
     id?: string;
     standalone?: boolean;

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

@@ -53,15 +53,15 @@ import { onClickOutside } from "@vueuse/core";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastView } from "../composables/private/useToastView";
 import { useToastCallback } from "../composables/private/useToastCallback";
+import { useToastListener } from "../composables/private/useToastListener";
 import MagicToastView from "./MagicToastView.vue";
 import { MagicToastInstanceId } from "../../symbols";
-import "@maas/vue-equipment/utils/css/animations/fade-out.css";
-import "@maas/vue-equipment/utils/css/animations/squash-y.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ltr-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-ltr-out.css";
-import "@maas/vue-equipment/utils/css/animations/slide-rtl-in.css";
-import "@maas/vue-equipment/utils/css/animations/slide-rtl-out.css";
-import { useToastListener } from "../composables/private/useToastListener";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/squash-y.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css";
 const { id, options } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }

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

@@ -1,11 +1,11 @@
 import { type MaybeRef } from 'vue';
 import type { MagicToastOptions } from '../types/index.js';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
-import '@maas/vue-equipment/utils/css/animations/squash-y.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css';
-import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
-import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/squash-y.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css';
 interface MagicToastProps {
     id: MaybeRef<string>;
     options?: MagicToastOptions;

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

@@ -29,7 +29,6 @@ import { computed, inject } from "vue";
 import { MagicToastInstanceId } from "../../symbols";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastDrag } from "../composables/private/useToastDrag";
-import "@maas/vue-equipment/utils/css/transitions/fade.css";
 const { id, index } = defineProps({
   id: { type: String, required: true },
   index: { type: Number, required: true }

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

@@ -1,4 +1,3 @@
-import '@maas/vue-equipment/utils/css/transitions/fade.css';
 interface MagicToastViewProps {
     id: string;
     index: number;

package/dist/utils/css/animations/fade-down.css

@@ -0,0 +1,9 @@
+.fade-down-enter-active {
+  animation: fade-down-in var(--duration, 300ms)
+    var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
+}
+
+.fade-down-leave-active {
+  animation: fade-down-out var(--duration, 300ms)
+    var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
+}

package/dist/utils/css/animations.css

@@ -1,22 +1,9 @@
-@import './animations/auto-size-out.css';
-@import './animations/clip-in.css';
-@import './animations/clip-out.css';
-@import './animations/fade-down-in.css';
-@import './animations/fade-down-out.css';
-@import './animations/fade-in.css';
-@import './animations/fade-out.css';
-@import './animations/fade-up-in.css';
-@import './animations/fade-up-out.css';
-@import './animations/flip-in.css';
-@import './animations/flip-out.css';
-@import './animations/slide-btt-in.css';
-@import './animations/slide-btt-out.css';
-@import './animations/slide-ltr-in.css';
-@import './animations/slide-ltr-out.css';
-@import './animations/slide-rtl-in.css';
-@import './animations/slide-rtl-out.css';
-@import './animations/slide-ttb-in.css';
-@import './animations/slide-ttb-out.css';
-@import './animations/squash-y.css';
-@import './animations/zoom-in.css';
-@import './animations/zoom-out.css';
+@import './animations/clip.css';
+@import './animations/fade-down.css';
+@import './animations/fade-up.css';
+@import './animations/fade.css';
+@import './animations/slide-btt.css';
+@import './animations/slide-ltr.css';
+@import './animations/slide-rtl.css';
+@import './animations/slide-ttb.css';
+@import './animations/zoom.css';

package/dist/utils/css/easings.css

@@ -1,4 +1,12 @@
 :root {
+  --ease-in: cubic-bezier(0.42, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.58, 1);
+  --ease-out-gentle: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-back: cubic-bezier(0, 0, 0.85, 1.25);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
   --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
   --ease-in-out-sharp: cubic-bezier(0.83, 0, 0.17, 1);
-}
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-gentle: cubic-bezier(0.42, 0, 0.58, 1);
+}

package/dist/utils/css/keyframes.css

@@ -0,0 +1,22 @@
+@import './keyframes/auto-size-out.css';
+@import './keyframes/clip-in.css';
+@import './keyframes/clip-out.css';
+@import './keyframes/fade-down-in.css';
+@import './keyframes/fade-down-out.css';
+@import './keyframes/fade-in.css';
+@import './keyframes/fade-out.css';
+@import './keyframes/fade-up-in.css';
+@import './keyframes/fade-up-out.css';
+@import './keyframes/flip-in.css';
+@import './keyframes/flip-out.css';
+@import './keyframes/slide-btt-in.css';
+@import './keyframes/slide-btt-out.css';
+@import './keyframes/slide-ltr-in.css';
+@import './keyframes/slide-ltr-out.css';
+@import './keyframes/slide-rtl-in.css';
+@import './keyframes/slide-rtl-out.css';
+@import './keyframes/slide-ttb-in.css';
+@import './keyframes/slide-ttb-out.css';
+@import './keyframes/squash-y.css';
+@import './keyframes/zoom-in.css';
+@import './keyframes/zoom-out.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.23",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -140,7 +140,7 @@
   "volta": {
     "node": "20.18.1"
   },
-  "packageManager": "pnpm@10.8.0",
+  "packageManager": "pnpm@10.8.1",
   "pnpm": {
     "overrides": {
       "typescript": "catalog:"

package/dist/utils/css/transitions.css

@@ -1,8 +0,0 @@
-@import './transitions/clip.css';
-@import './transitions/fade-up.css';
-@import './transitions/fade.css';
-@import './transitions/slide-btt.css';
-@import './transitions/slide-ltr.css';
-@import './transitions/slide-rtl.css';
-@import './transitions/slide-ttb.css';
-@import './transitions/zoom.css';