morya-ui 0.2.9 → 0.3.0

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;
 }

package/dist/components/Drawer/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';
 export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 export interface DrawerProps {
     pt?: RootPassThrough;
@@ -29,6 +30,8 @@ export interface DrawerProps {
     teleport?: boolean;
     /** Mount target. Defaults to `'body'`. */
     appendTo?: MAppendTo;
+    /** Named motion preset, or `false` to disable enter/exit transition. */
+    transition?: MotionPresetId | false;
 }
 export interface DrawerEmits {
     (event: 'update:modelValue', value: boolean): void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/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;AAE/D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEhE,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,eAAe,CAAA;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;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,aAAa,GAAG,IAAI,CAAA;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/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;AAE/D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEhE,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,eAAe,CAAA;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,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,aAAa,GAAG,IAAI,CAAA;CAC7B"}

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

@@ -1,5 +1,6 @@
 import { DropdownItem, DropdownProps, DropdownTrigger } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { MotionPresetId } from '../..';
 declare var __VLS_1: {}, __VLS_31: {
     item: DropdownItem;
 };
@@ -16,6 +17,7 @@ declare const __VLS_base: DefineComponent<DropdownProps, {}, {}, {}, {}, Compone
     onSelect?: ((item: DropdownItem) => any) | undefined;
 }>, {
     modelValue: boolean;
+    transition: MotionPresetId | false;
     teleport: boolean;
     trigger: DropdownTrigger;
     placement: "bottom-start" | "bottom-end";

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.vue"],"names":[],"mappings":";AA6PA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAmX1D,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAS7C,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":"Dropdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.vue"],"names":[],"mappings":";;AAgQA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA2X1D,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAS7C,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/Dropdown/styles.css

@@ -62,13 +62,17 @@
 }
 
 .m-dropdown__item {
+    align-items: center;
     background: transparent;
     border: 0;
     border-radius: var(--m-radius-sm);
+    box-sizing: border-box;
     color: var(--m-color-text);
     cursor: pointer;
+    display: flex;
     font-family: var(--m-font-sans);
     font-size: var(--m-font-size-md);
+    min-height: var(--m-menu-item-height);
     padding: var(--m-space-2) var(--m-space-3);
     text-align: left;
     transition:

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

@@ -1,6 +1,7 @@
 import { MenuNodeBase } from '../../shared/menu';
 import { MAppendTo } from '../../shared/overlay';
 import { RootPassThrough } from '../../shared/passThrough';
+import { MotionPresetId } from '../../theme/motionPresets';
 export type DropdownItemType = 'item' | 'group' | 'divider';
 export type DropdownTrigger = 'click' | 'hover';
 export interface DropdownItem extends MenuNodeBase {
@@ -28,6 +29,8 @@ export interface DropdownProps {
     appendTo?: MAppendTo;
     /** Pass-through attrs/classes/styles for the root element. */
     pt?: RootPassThrough;
+    /** Named motion preset, or `false` to disable enter/exit transition. */
+    transition?: MotionPresetId | false;
 }
 export interface DropdownEmits {
     (event: 'update:modelValue', value: boolean): void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE/D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa;IACb,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;IACzC,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,eAAe,CAAA;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAClD,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,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;AAE/D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa;IACb,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;IACzC,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,eAAe,CAAA;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,cAAc,GAAG,KAAK,CAAA;CACpC;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAClD,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5C"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,SAAS,CAAC;AACjB,YAAY,EACV,iBAAiB,EACjB,wBAAwB,EACxB,WAAW,GACZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,YAAY,EACV,iBAAiB,EACjB,wBAAwB,EACxB,WAAW,GACZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Empty/styles.css

@@ -9,7 +9,7 @@
     display: flex;
     flex-direction: column;
     font-family: var(--m-font-sans);
-    gap: calc(var(--m-space-2) + 0.125rem);
+    gap: var(--m-space-2);
     justify-content: center;
     padding: calc(var(--m-space-8) + var(--m-space-1)) var(--m-space-5);
     text-align: center;
@@ -89,9 +89,9 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: calc(var(--m-space-2) + 0.125rem);
+    gap: var(--m-space-2);
     justify-content: center;
-    margin-top: calc(var(--m-space-1) + 0.125rem);
+    margin-top: var(--m-space-1);
 }
 
 .m-empty--small {
@@ -105,7 +105,7 @@
 .m-empty--large {
     --m-empty-illustration-width: 15rem;
     --m-empty-illustration-height: 7.75rem;
-    --m-empty-icon-size: 2.5rem;
+    --m-empty-icon-size: calc(var(--m-space-8) + var(--m-space-2));
     --m-empty-font-size: var(--m-font-size-lg);
     padding: calc(var(--m-space-8) + var(--m-space-2)) var(--m-space-6);
 }
@@ -119,8 +119,8 @@
 }
 
 .m-empty--simple .m-empty__illustration {
-    height: 2.75rem;
-    width: 2.75rem;
+    height: calc(var(--m-control-height-large) + var(--m-space-1));
+    width: calc(var(--m-control-height-large) + var(--m-space-1));
 }
 
 .m-empty--simple .m-empty__icon :is(.m-icon, svg),