morya-ui 0.2.9 → 0.3.1

package/dist/components/DataView/DataView.vue.d.ts

@@ -1,20 +1,20 @@
 import { DataViewProps, DataViewLayout } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_1: {}, __VLS_9: {
     items: unknown[];
-}, __VLS_5: {
+}, __VLS_11: {
     items: unknown[];
-}, __VLS_7: {}, __VLS_14: {};
+}, __VLS_13: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    list?: (props: typeof __VLS_3) => any;
+    list?: (props: typeof __VLS_9) => any;
 } & {
-    grid?: (props: typeof __VLS_5) => any;
+    grid?: (props: typeof __VLS_11) => any;
 } & {
-    loading?: (props: typeof __VLS_7) => any;
+    empty?: (props: typeof __VLS_13) => any;
 } & {
-    empty?: (props: typeof __VLS_14) => any;
+    loading?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: DefineComponent<DataViewProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:page": (value: number) => any;

package/dist/components/DataView/DataView.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataView/DataView.vue"],"names":[],"mappings":";AA4HA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,SAAS,CAAA;AAqO3D,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,OAAO;;CAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AACtG,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataView/DataView.vue"],"names":[],"mappings":";AAyHA,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,SAAS,CAAA;AAgO3D,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,QAAQ;;CAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC1G,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/DataView/styles.css

@@ -43,26 +43,6 @@
     align-self: center;
 }
 
-.m-dataview__loading {
-    position: absolute;
-    inset: 0;
-    z-index: 4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.m-dataview__loading-mask {
-    position: absolute;
-    inset: 0;
-    background: color-mix(in srgb, var(--m-color-surface) 72%, transparent);
-}
-
-.m-dataview__loading-body {
-    position: relative;
-    z-index: 1;
-}
-
 .m-dataview__message {
     display: flex;
     align-items: center;

package/dist/components/DatePicker/DatePicker.vue.d.ts

@@ -1,5 +1,6 @@
 import { DatePickerProps, DatePickerShortcut, DatePickerValue, DatePickerModel, DatePickerType } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { MotionPresetId } from '../..';
 declare var __VLS_1: {
     value: string;
     open: boolean;
@@ -24,6 +25,7 @@ declare const __VLS_base: DefineComponent<DatePickerProps, {}, {}, {}, {}, Compo
     disabled: boolean;
     id: string;
     type: DatePickerType;
+    transition: MotionPresetId | false;
     placeholder: string;
     helpText: string;
     invalid: boolean;

package/dist/components/DatePicker/DatePicker.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.vue"],"names":[],"mappings":";AA8gBA,OAAO,KAAK,EAGV,eAAe,EACf,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAA;AAwsBhB,QAAA,IAAI,OAAO;;;CAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAU/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DatePicker.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.vue"],"names":[],"mappings":";;AAohBA,OAAO,KAAK,EAGV,eAAe,EACf,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAA;AAmtBhB,QAAA,IAAI,OAAO;;;CAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAU/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/DatePicker/types.d.ts

@@ -2,6 +2,7 @@ import { MNativeDateInputProps } from '../../shared/nativeControlProps';
 import { MAppendTo } from '../../shared/overlay';
 import { FieldPassThrough } from '../../shared/passThrough';
 import { MSizeInput } from '../../shared/types';
+import { MotionPresetId } from '../../theme/motionPresets';
 export type DatePickerType = 'date' | 'daterange';
 export type DatePickerDateValue = string | Date;
 export type DatePickerValue = DatePickerDateValue | [DatePickerDateValue, DatePickerDateValue] | null;
@@ -37,6 +38,8 @@ export interface DatePickerProps extends MNativeDateInputProps {
     appendTo?: MAppendTo;
     /** Pass-through attrs/classes/styles per DOM part. */
     pt?: FieldPassThrough;
+    /** Named motion preset, or `false` to disable enter/exit transition. */
+    transition?: MotionPresetId | false;
 }
 export interface DatePickerEmits {
     (event: 'update:modelValue', value: DatePickerModel): void;

package/dist/components/DatePicker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,CAAA;AACjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,IAAI,CAAA;AAC/C,MAAM,MAAM,eAAe,GACvB,mBAAmB,GACnB,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,GAC1C,IAAI,CAAA;AACR,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;AAE9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EACD,mBAAmB,GACnB,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,GAC1C,CAAC,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAA;CAC7E;AAED,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,EAAE,CAAC,EAAE,gBAAgB,CAAA;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC1D,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,oBAAoB;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,oBAAoB;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,0FAA0F;IAC1F,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;CAChD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,CAAA;AACjD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,IAAI,CAAA;AAC/C,MAAM,MAAM,eAAe,GACvB,mBAAmB,GACnB,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,GAC1C,IAAI,CAAA;AACR,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA;AAE9D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EACD,mBAAmB,GACnB,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,GAC1C,CAAC,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAA;CAC7E;AAED,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6EAA6E;IAC7E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,EAAE,CAAC,EAAE,gBAAgB,CAAA;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,cAAc,GAAG,KAAK,CAAA;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC1D,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,oBAAoB;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,oBAAoB;IACpB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,0FAA0F;IAC1F,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;CAChD"}

package/dist/components/Dialog/Dialog.vue.d.ts

@@ -1,5 +1,6 @@
 import { DialogProps, DialogPosition } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { MotionPresetId } from '../..';
 declare function dismiss(): Promise<void>;
 declare var __VLS_18: {}, __VLS_30: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
@@ -29,6 +30,7 @@ declare const __VLS_base: DefineComponent<DialogProps, {
     onUnmaximize?: (() => any) | undefined;
 }>, {
     modelValue: boolean;
+    transition: MotionPresetId | false;
     teleport: boolean;
     position: DialogPosition;
     closeOnEsc: boolean;

package/dist/components/Dialog/Dialog.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.vue"],"names":[],"mappings":";AAiTA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA0H1C,iBAAe,OAAO,kBAarB;AAwUD,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Dialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.vue"],"names":[],"mappings":";;AAyTA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAkI1C,iBAAe,OAAO,kBAarB;AA6UD,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACpE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AACjD,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AACjD,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,WAAW,EACX,UAAU,GACX,MAAM,SAAS,CAAA"}

package/dist/components/Dialog/styles.css

@@ -245,16 +245,142 @@
     transform: scale(0.36);
 }
 
+/*
+ * Generic presets put Vue Transition classes on the backdrop. Keep the mask as
+ * opacity-only and drive transform on `.m-dialog-zoom` (same structure as `dialog`).
+ */
+.m-dialog-backdrop.m-fade-enter-from,
+.m-dialog-backdrop.m-fade-leave-to,
+.m-dialog-backdrop.m-scale-fade-enter-from,
+.m-dialog-backdrop.m-scale-fade-leave-to,
+.m-dialog-backdrop.m-slide-fade-enter-from,
+.m-dialog-backdrop.m-slide-fade-leave-to,
+.m-dialog-backdrop.m-zoom-enter-from,
+.m-dialog-backdrop.m-zoom-leave-to,
+.m-dialog-backdrop.m-slide-up-enter-from,
+.m-dialog-backdrop.m-slide-up-leave-to,
+.m-dialog-backdrop.m-slide-down-enter-from,
+.m-dialog-backdrop.m-slide-down-leave-to,
+.m-dialog-backdrop.m-slide-left-enter-from,
+.m-dialog-backdrop.m-slide-left-leave-to,
+.m-dialog-backdrop.m-slide-right-enter-from,
+.m-dialog-backdrop.m-slide-right-leave-to {
+    transform: none;
+}
+
+.m-fade-enter-active .m-dialog-zoom,
+.m-scale-fade-enter-active .m-dialog-zoom,
+.m-slide-fade-enter-active .m-dialog-zoom,
+.m-zoom-enter-active .m-dialog-zoom,
+.m-slide-up-enter-active .m-dialog-zoom,
+.m-slide-down-enter-active .m-dialog-zoom,
+.m-slide-left-enter-active .m-dialog-zoom,
+.m-slide-right-enter-active .m-dialog-zoom {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-fade-leave-active .m-dialog-zoom,
+.m-scale-fade-leave-active .m-dialog-zoom,
+.m-slide-fade-leave-active .m-dialog-zoom,
+.m-zoom-leave-active .m-dialog-zoom,
+.m-slide-up-leave-active .m-dialog-zoom,
+.m-slide-down-leave-active .m-dialog-zoom,
+.m-slide-left-leave-active .m-dialog-zoom,
+.m-slide-right-leave-active .m-dialog-zoom {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-fade-enter-from .m-dialog-zoom,
+.m-fade-leave-to .m-dialog-zoom {
+    opacity: 0;
+}
+
+.m-scale-fade-enter-from .m-dialog-zoom,
+.m-scale-fade-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
+}
+
+.m-slide-fade-enter-from .m-dialog-zoom,
+.m-slide-fade-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-zoom-enter-from .m-dialog-zoom,
+.m-zoom-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.m-slide-up-enter-from .m-dialog-zoom,
+.m-slide-up-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateY(var(--m-motion-distance));
+}
+
+.m-slide-down-enter-from .m-dialog-zoom,
+.m-slide-down-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-slide-left-enter-from .m-dialog-zoom,
+.m-slide-left-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateX(var(--m-motion-distance));
+}
+
+.m-slide-right-enter-from .m-dialog-zoom,
+.m-slide-right-leave-to .m-dialog-zoom {
+    opacity: 0;
+    transform: translateX(calc(var(--m-motion-distance) * -1));
+}
+
 @media (prefers-reduced-motion: reduce) {
     html:not([data-m-ignore-reduced-motion]) .m-dialog-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-dialog-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-dialog-enter-active .m-dialog-zoom,
-    html:not([data-m-ignore-reduced-motion]) .m-dialog-leave-active .m-dialog-zoom {
+    html:not([data-m-ignore-reduced-motion]) .m-dialog-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active .m-dialog-zoom {
         transition: none;
     }
 
     html:not([data-m-ignore-reduced-motion]) .m-dialog-enter-from .m-dialog-zoom,
-    html:not([data-m-ignore-reduced-motion]) .m-dialog-leave-to .m-dialog-zoom {
+    html:not([data-m-ignore-reduced-motion]) .m-dialog-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from .m-dialog-zoom,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to .m-dialog-zoom {
         transform: none;
     }
 }
@@ -263,16 +389,76 @@
 [data-m-motion="reduced"] .m-dialog-leave-active,
 [data-m-motion="reduced"] .m-dialog-enter-active .m-dialog-zoom,
 [data-m-motion="reduced"] .m-dialog-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-fade-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-fade-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-scale-fade-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-scale-fade-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-fade-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-fade-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-zoom-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-zoom-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-up-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-up-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-down-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-down-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-left-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-left-leave-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-right-enter-active .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-right-leave-active .m-dialog-zoom,
 [data-m-motion="none"] .m-dialog-enter-active,
 [data-m-motion="none"] .m-dialog-leave-active,
 [data-m-motion="none"] .m-dialog-enter-active .m-dialog-zoom,
-[data-m-motion="none"] .m-dialog-leave-active .m-dialog-zoom {
+[data-m-motion="none"] .m-dialog-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-fade-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-fade-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-scale-fade-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-scale-fade-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-fade-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-fade-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-zoom-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-zoom-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-up-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-up-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-down-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-down-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-left-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-left-leave-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-right-enter-active .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-right-leave-active .m-dialog-zoom {
     transition: none;
 }
 
 [data-m-motion="reduced"] .m-dialog-enter-from .m-dialog-zoom,
 [data-m-motion="reduced"] .m-dialog-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-scale-fade-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-scale-fade-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-fade-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-fade-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-zoom-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-zoom-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-up-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-up-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-down-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-down-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-left-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-left-leave-to .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-right-enter-from .m-dialog-zoom,
+[data-m-motion="reduced"] .m-slide-right-leave-to .m-dialog-zoom,
 [data-m-motion="none"] .m-dialog-enter-from .m-dialog-zoom,
-[data-m-motion="none"] .m-dialog-leave-to .m-dialog-zoom {
+[data-m-motion="none"] .m-dialog-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-scale-fade-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-scale-fade-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-fade-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-fade-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-zoom-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-zoom-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-up-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-up-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-down-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-down-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-left-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-left-leave-to .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-right-enter-from .m-dialog-zoom,
+[data-m-motion="none"] .m-slide-right-leave-to .m-dialog-zoom {
     transform: none;
 }

package/dist/components/Dialog/types.d.ts

@@ -1,6 +1,7 @@
 import { AsyncGuard } from '../../shared/asyncGuard';
 import { MAppendTo } from '../../shared/overlay';
 import { RootPassThrough } from '../../shared/passThrough';
+import { MotionPresetId } from '../../theme/motionPresets';
 import { ButtonSeverity } from '../Button/types';
 export type DialogType = 'info' | 'success' | 'warning' | 'error' | 'warn';
 export type DialogCloseGuard = AsyncGuard;
@@ -53,6 +54,8 @@ export interface DialogProps {
     beforeClose?: DialogCloseGuard;
     /** Accessible name when no visible title is provided. */
     ariaLabel?: string;
+    /** Named motion preset, or `false` to disable enter/exit transition. */
+    transition?: MotionPresetId | false;
 }
 export interface DialogEmits {
     (event: 'update:modelValue', value: boolean): void;

package/dist/components/Dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1E,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAA;AACzC,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;AAEvD,MAAM,MAAM,cAAc,GACtB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,CAAA;AAEjB,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,eAAe,CAAA;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAClD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACzB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1E,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAA;AACzC,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;AAEvD,MAAM,MAAM,cAAc,GACtB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,CAAA;AAEjB,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,eAAe,CAAA;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gEAAgE;IAChE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,2EAA2E;IAC3E,eAAe,CAAC,EAAE,gBAAgB,CAAA;IAClC,kFAAkF;IAClF,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,cAAc,GAAG,KAAK,CAAA;CACpC;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAClD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IACtB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACzB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B"}

package/dist/components/Drawer/Drawer.vue.d.ts

@@ -1,5 +1,6 @@
 import { DrawerProps, DrawerPosition } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { MotionPresetId } from '../..';
 declare var __VLS_15: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_15) => any;
@@ -20,6 +21,7 @@ declare const __VLS_base: DefineComponent<DrawerProps, {}, {}, {}, {}, Component
     "onAfter-leave"?: (() => any) | undefined;
 }>, {
     modelValue: boolean;
+    transition: MotionPresetId | false;
     teleport: boolean;
     position: DrawerPosition;
     closeOnEsc: boolean;

package/dist/components/Drawer/Drawer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.vue"],"names":[],"mappings":";AAsJA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA8O1C,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Drawer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.vue"],"names":[],"mappings":";;AA8JA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA2P1C,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;6EAId,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Drawer/styles.css

@@ -41,6 +41,101 @@
     transform: translateY(100%);
 }
 
+/*
+ * Generic presets on the backdrop: opacity-only mask, motion on `.m-drawer`.
+ */
+.m-drawer-backdrop.m-fade-enter-from,
+.m-drawer-backdrop.m-fade-leave-to,
+.m-drawer-backdrop.m-scale-fade-enter-from,
+.m-drawer-backdrop.m-scale-fade-leave-to,
+.m-drawer-backdrop.m-slide-fade-enter-from,
+.m-drawer-backdrop.m-slide-fade-leave-to,
+.m-drawer-backdrop.m-zoom-enter-from,
+.m-drawer-backdrop.m-zoom-leave-to,
+.m-drawer-backdrop.m-slide-up-enter-from,
+.m-drawer-backdrop.m-slide-up-leave-to,
+.m-drawer-backdrop.m-slide-down-enter-from,
+.m-drawer-backdrop.m-slide-down-leave-to,
+.m-drawer-backdrop.m-slide-left-enter-from,
+.m-drawer-backdrop.m-slide-left-leave-to,
+.m-drawer-backdrop.m-slide-right-enter-from,
+.m-drawer-backdrop.m-slide-right-leave-to {
+    transform: none;
+}
+
+.m-fade-enter-active .m-drawer,
+.m-scale-fade-enter-active .m-drawer,
+.m-slide-fade-enter-active .m-drawer,
+.m-zoom-enter-active .m-drawer,
+.m-slide-up-enter-active .m-drawer,
+.m-slide-down-enter-active .m-drawer,
+.m-slide-left-enter-active .m-drawer,
+.m-slide-right-enter-active .m-drawer {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-fade-leave-active .m-drawer,
+.m-scale-fade-leave-active .m-drawer,
+.m-slide-fade-leave-active .m-drawer,
+.m-zoom-leave-active .m-drawer,
+.m-slide-up-leave-active .m-drawer,
+.m-slide-down-leave-active .m-drawer,
+.m-slide-left-leave-active .m-drawer,
+.m-slide-right-leave-active .m-drawer {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-fade-enter-from .m-drawer,
+.m-fade-leave-to .m-drawer {
+    opacity: 0;
+}
+
+.m-scale-fade-enter-from .m-drawer,
+.m-scale-fade-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
+}
+
+.m-slide-fade-enter-from .m-drawer,
+.m-slide-fade-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-zoom-enter-from .m-drawer,
+.m-zoom-leave-to .m-drawer {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.m-slide-up-enter-from .m-drawer,
+.m-slide-up-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateY(var(--m-motion-distance));
+}
+
+.m-slide-down-enter-from .m-drawer,
+.m-slide-down-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-slide-left-enter-from .m-drawer,
+.m-slide-left-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateX(var(--m-motion-distance));
+}
+
+.m-slide-right-enter-from .m-drawer,
+.m-slide-right-leave-to .m-drawer {
+    opacity: 0;
+    transform: translateX(calc(var(--m-motion-distance) * -1));
+}
+
 .m-drawer-backdrop {
     inset: 0;
     position: fixed;
@@ -151,7 +246,23 @@
     html:not([data-m-ignore-reduced-motion]) .m-drawer-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-drawer-enter-active .m-drawer,
-    html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-active .m-drawer {
+    html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active .m-drawer {
         transition: none;
     }
 
@@ -162,7 +273,21 @@
     html:not([data-m-ignore-reduced-motion]) .m-drawer-enter-from .m-drawer--top,
     html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-to .m-drawer--top,
     html:not([data-m-ignore-reduced-motion]) .m-drawer-enter-from .m-drawer--bottom,
-    html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-to .m-drawer--bottom {
+    html:not([data-m-ignore-reduced-motion]) .m-drawer-leave-to .m-drawer--bottom,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from .m-drawer,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to .m-drawer {
         transform: none;
     }
 }
@@ -171,10 +296,42 @@
 [data-m-motion="reduced"] .m-drawer-leave-active,
 [data-m-motion="reduced"] .m-drawer-enter-active .m-drawer,
 [data-m-motion="reduced"] .m-drawer-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-fade-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-fade-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-scale-fade-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-scale-fade-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-fade-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-fade-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-zoom-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-zoom-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-up-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-up-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-down-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-down-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-left-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-left-leave-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-right-enter-active .m-drawer,
+[data-m-motion="reduced"] .m-slide-right-leave-active .m-drawer,
 [data-m-motion="none"] .m-drawer-enter-active,
 [data-m-motion="none"] .m-drawer-leave-active,
 [data-m-motion="none"] .m-drawer-enter-active .m-drawer,
-[data-m-motion="none"] .m-drawer-leave-active .m-drawer {
+[data-m-motion="none"] .m-drawer-leave-active .m-drawer,
+[data-m-motion="none"] .m-fade-enter-active .m-drawer,
+[data-m-motion="none"] .m-fade-leave-active .m-drawer,
+[data-m-motion="none"] .m-scale-fade-enter-active .m-drawer,
+[data-m-motion="none"] .m-scale-fade-leave-active .m-drawer,
+[data-m-motion="none"] .m-slide-fade-enter-active .m-drawer,
+[data-m-motion="none"] .m-slide-fade-leave-active .m-drawer,
+[data-m-motion="none"] .m-zoom-enter-active .m-drawer,
+[data-m-motion="none"] .m-zoom-leave-active .m-drawer,
+[data-m-motion="none"] .m-slide-up-enter-active .m-drawer,
+[data-m-motion="none"] .m-slide-up-leave-active .m-drawer,
+[data-m-motion="none"] .m-slide-down-enter-active .m-drawer,
+[data-m-motion="none"] .m-slide-down-leave-active .m-drawer,
+[data-m-motion="none"] .m-slide-left-enter-active .m-drawer,
+[data-m-motion="none"] .m-slide-left-leave-active .m-drawer,
+[data-m-motion="none"] .m-slide-right-enter-active .m-drawer,
+[data-m-motion="none"] .m-slide-right-leave-active .m-drawer {
     transition: none;
 }
 
@@ -186,6 +343,20 @@
 [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--top,
 [data-m-motion="reduced"] .m-drawer-enter-from .m-drawer--bottom,
 [data-m-motion="reduced"] .m-drawer-leave-to .m-drawer--bottom,
+[data-m-motion="reduced"] .m-scale-fade-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-scale-fade-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-slide-fade-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-slide-fade-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-zoom-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-zoom-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-slide-up-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-slide-up-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-slide-down-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-slide-down-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-slide-left-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-slide-left-leave-to .m-drawer,
+[data-m-motion="reduced"] .m-slide-right-enter-from .m-drawer,
+[data-m-motion="reduced"] .m-slide-right-leave-to .m-drawer,
 [data-m-motion="none"] .m-drawer-enter-from .m-drawer--left,
 [data-m-motion="none"] .m-drawer-leave-to .m-drawer--left,
 [data-m-motion="none"] .m-drawer-enter-from .m-drawer--right,
@@ -193,6 +364,20 @@
 [data-m-motion="none"] .m-drawer-enter-from .m-drawer--top,
 [data-m-motion="none"] .m-drawer-leave-to .m-drawer--top,
 [data-m-motion="none"] .m-drawer-enter-from .m-drawer--bottom,
-[data-m-motion="none"] .m-drawer-leave-to .m-drawer--bottom {
+[data-m-motion="none"] .m-drawer-leave-to .m-drawer--bottom,
+[data-m-motion="none"] .m-scale-fade-enter-from .m-drawer,
+[data-m-motion="none"] .m-scale-fade-leave-to .m-drawer,
+[data-m-motion="none"] .m-slide-fade-enter-from .m-drawer,
+[data-m-motion="none"] .m-slide-fade-leave-to .m-drawer,
+[data-m-motion="none"] .m-zoom-enter-from .m-drawer,
+[data-m-motion="none"] .m-zoom-leave-to .m-drawer,
+[data-m-motion="none"] .m-slide-up-enter-from .m-drawer,
+[data-m-motion="none"] .m-slide-up-leave-to .m-drawer,
+[data-m-motion="none"] .m-slide-down-enter-from .m-drawer,
+[data-m-motion="none"] .m-slide-down-leave-to .m-drawer,
+[data-m-motion="none"] .m-slide-left-enter-from .m-drawer,
+[data-m-motion="none"] .m-slide-left-leave-to .m-drawer,
+[data-m-motion="none"] .m-slide-right-enter-from .m-drawer,
+[data-m-motion="none"] .m-slide-right-leave-to .m-drawer {
     transform: none;
 }