@atlaskit/top-layer 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/top-layer
 
+## 0.17.0
+
+### Minor Changes
+
+- [`2fd74328732bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fd74328732bf) -
+  Add dialogMotion animation preset with token-based motion values and backdrop animation
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

@@ -55,8 +55,8 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
 }
 ```
 
-- Focus restoration is automatic. The browser handles it for outermost popovers; `Popover`
-  snapshots `document.activeElement` on open and restores it on close for nested cases.
+- Focus restoration is automatic. The browser handles it for outermost popovers; `Popover` snapshots
+  `document.activeElement` on open and restores it on close for nested cases.
 - For default overlay styling (background, shadow, border-radius), wrap content in `PopoverSurface`
   from `@atlaskit/top-layer/popover-surface`.
 - For trigger-less or custom-positioned UI (flag, tooltip, react-select menu portal), use `Popover`
@@ -88,8 +88,8 @@ Compound component for modal dialogs using the native `<dialog>` element with `.
 ## Animations
 
 Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `animate` prop.
-Animations use
-[`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for entry and
+Animations use [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style)
+for entry and
 [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
 `display`/`overlay` for exit — no JavaScript animation coordination required.
 

package/dist/cjs/animations/presets.js

@@ -4,23 +4,80 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dialogFade = dialogFade;
+exports.dialogMotion = dialogMotion;
 exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
 exports.fade = fade;
+exports.popupMotion = popupMotion;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
 var _resolvePlacement = require("../internal/resolve-placement");
-// slideAndFade
+// ══════════════════════════════════════════════════════════════════════════════
+// Popover presets
+// ══════════════════════════════════════════════════════════════════════════════
 
-function getSlideAndFadeProperties(_ref) {
-  var placement = _ref.placement,
-    distance = _ref.distance;
-  var pos = "".concat(distance, "px");
-  var neg = "-".concat(distance, "px");
+// ── popupMotion ──
+
+var POPUP_MOTION_CSS = "\n  [data-ds-popover-popup-motion] {\n    animation: var(--ds-popover-motion-exit);\n    animation-fill-mode: forwards;\n    transition:\n      overlay 150ms allow-discrete,\n      display 150ms allow-discrete;\n  }\n\n  [data-ds-popover-popup-motion]:popover-open {\n    animation: var(--ds-popover-motion-enter);\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-popover-popup-motion],\n    [data-ds-popover-popup-motion]:popover-open {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n";
+function getPopupMotionProperties(_ref) {
+  var placement = _ref.placement;
   var _getPlacement = (0, _resolvePlacement.getPlacement)({
       placement: placement
     }),
     axis = _getPlacement.axis,
     edge = _getPlacement.edge;
+  if (axis === 'block' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  // Default: block/end (popover below trigger)
+  return {
+    '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+  };
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function popupMotion() {
+  return {
+    name: 'popup-motion',
+    css: POPUP_MOTION_CSS,
+    enterDurationMs: 150,
+    exitDurationMs: 100,
+    getProperties: function getProperties(_ref2) {
+      var placement = _ref2.placement;
+      return getPopupMotionProperties({
+        placement: placement
+      });
+    }
+  };
+}
+
+// ── slideAndFade ──
+
+function getSlideAndFadeProperties(_ref3) {
+  var placement = _ref3.placement,
+    distance = _ref3.distance;
+  var pos = "".concat(distance, "px");
+  var neg = "-".concat(distance, "px");
+  var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement2.axis,
+    edge = _getPlacement2.edge;
   if (axis === 'block' && edge === 'start') {
     return {
       '--ds-popover-tx': '0',
@@ -73,14 +130,15 @@ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n  opacity: 0;\n
  * <Popover animate={slideAndFade({ distance: 8 })} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function slideAndFade(options) {
   var _options$distance;
   var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
   return {
     name: 'slide-and-fade',
     css: SLIDE_AND_FADE_CSS,
-    getProperties: function getProperties(_ref2) {
-      var placement = _ref2.placement;
+    getProperties: function getProperties(_ref4) {
+      var placement = _ref4.placement;
       return getSlideAndFadeProperties({
         placement: placement,
         distance: distance
@@ -147,7 +205,36 @@ function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// dialogSlideUpAndFade
+// ── dialogMotion ──
+
+var DIALOG_MOTION_CSS = "\n  [data-ds-dialog-motion] {\n    animation: ".concat("var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)", ";\n    animation-fill-mode: forwards;\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open] {\n    animation: ", "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  [data-ds-dialog-motion]::backdrop {\n    animation: ", "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)", ";\n    animation-fill-mode: forwards;\n    background-color: var(--ds-blanket, #050C1F75);\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open]::backdrop {\n    animation: ", "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-dialog-motion],\n    [data-ds-dialog-motion][open],\n    [data-ds-dialog-motion]::backdrop,\n    [data-ds-dialog-motion][open]::backdrop {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n");
+
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function dialogMotion() {
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
+  return {
+    name: 'motion',
+    css: DIALOG_MOTION_CSS,
+    enterDurationMs: 250,
+    exitDurationMs: 200
+  };
+}
+
+// ── dialogSlideUpAndFade ──
 
 var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 

package/dist/cjs/entry-points/animations.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "dialogFade", {
     return _presets.dialogFade;
   }
 });
+Object.defineProperty(exports, "dialogMotion", {
+  enumerable: true,
+  get: function get() {
+    return _presets.dialogMotion;
+  }
+});
 Object.defineProperty(exports, "dialogSlideUpAndFade", {
   enumerable: true,
   get: function get() {
@@ -21,6 +27,12 @@ Object.defineProperty(exports, "fade", {
     return _presets.fade;
   }
 });
+Object.defineProperty(exports, "popupMotion", {
+  enumerable: true,
+  get: function get() {
+    return _presets.popupMotion;
+  }
+});
 Object.defineProperty(exports, "scaleAndFade", {
   enumerable: true,
   get: function get() {

package/dist/es2019/animations/presets.js

@@ -1,6 +1,82 @@
 import { getPlacement } from '../internal/resolve-placement';
+// ══════════════════════════════════════════════════════════════════════════════
+// Popover presets
+// ══════════════════════════════════════════════════════════════════════════════
+
+// ── popupMotion ──
+
+const POPUP_MOTION_CSS = `
+  [data-ds-popover-popup-motion] {
+    animation: var(--ds-popover-motion-exit);
+    animation-fill-mode: forwards;
+    transition:
+      overlay 150ms allow-discrete,
+      display 150ms allow-discrete;
+  }
+
+  [data-ds-popover-popup-motion]:popover-open {
+    animation: var(--ds-popover-motion-enter);
+    animation-fill-mode: backwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ds-popover-popup-motion],
+    [data-ds-popover-popup-motion]:popover-open {
+      animation: none;
+      transition-duration: 0s;
+    }
+  }
+`;
+function getPopupMotionProperties({
+  placement
+}) {
+  const {
+    axis,
+    edge
+  } = getPlacement({
+    placement
+  });
+  if (axis === 'block' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  // Default: block/end (popover below trigger)
+  return {
+    '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+  };
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function popupMotion() {
+  return {
+    name: 'popup-motion',
+    css: POPUP_MOTION_CSS,
+    enterDurationMs: 150,
+    exitDurationMs: 100,
+    getProperties: ({
+      placement
+    }) => getPopupMotionProperties({
+      placement
+    })
+  };
+}
 
-// slideAndFade
+// ── slideAndFade ──
 
 function getSlideAndFadeProperties({
   placement,
@@ -106,6 +182,7 @@ const SLIDE_AND_FADE_CSS = `
  * <Popover animate={slideAndFade({ distance: 8 })} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function slideAndFade(options) {
   var _options$distance;
   const distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
@@ -235,7 +312,73 @@ export function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// dialogSlideUpAndFade
+// ── dialogMotion ──
+
+const DIALOG_MOTION_CSS = `
+  [data-ds-dialog-motion] {
+    animation: ${"var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)"};
+    animation-fill-mode: forwards;
+    transition:
+      overlay 200ms allow-discrete,
+      display 200ms allow-discrete;
+  }
+
+  [data-ds-dialog-motion][open] {
+    animation: ${"var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)"};
+    animation-fill-mode: backwards;
+  }
+
+  [data-ds-dialog-motion]::backdrop {
+    animation: ${"var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"};
+    animation-fill-mode: forwards;
+    background-color: var(--ds-blanket, #050C1F75);
+    transition:
+      overlay 200ms allow-discrete,
+      display 200ms allow-discrete;
+  }
+
+  [data-ds-dialog-motion][open]::backdrop {
+    animation: ${"var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)"};
+    animation-fill-mode: backwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ds-dialog-motion],
+    [data-ds-dialog-motion][open],
+    [data-ds-dialog-motion]::backdrop,
+    [data-ds-dialog-motion][open]::backdrop {
+      animation: none;
+      transition-duration: 0s;
+    }
+  }
+`;
+
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function dialogMotion() {
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
+  return {
+    name: 'motion',
+    css: DIALOG_MOTION_CSS,
+    enterDurationMs: 250,
+    exitDurationMs: 200
+  };
+}
+
+// ── dialogSlideUpAndFade ──
 
 const DIALOG_SLIDE_UP_AND_FADE_CSS = `
 [data-ds-dialog-slide-up-and-fade] {

package/dist/es2019/entry-points/animations.js

@@ -1 +1 @@
-export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';
+export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';

package/dist/esm/animations/presets.js

@@ -1,17 +1,71 @@
 import { getPlacement } from '../internal/resolve-placement';
+// ══════════════════════════════════════════════════════════════════════════════
+// Popover presets
+// ══════════════════════════════════════════════════════════════════════════════
 
-// slideAndFade
+// ── popupMotion ──
 
-function getSlideAndFadeProperties(_ref) {
-  var placement = _ref.placement,
-    distance = _ref.distance;
-  var pos = "".concat(distance, "px");
-  var neg = "-".concat(distance, "px");
+var POPUP_MOTION_CSS = "\n  [data-ds-popover-popup-motion] {\n    animation: var(--ds-popover-motion-exit);\n    animation-fill-mode: forwards;\n    transition:\n      overlay 150ms allow-discrete,\n      display 150ms allow-discrete;\n  }\n\n  [data-ds-popover-popup-motion]:popover-open {\n    animation: var(--ds-popover-motion-enter);\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-popover-popup-motion],\n    [data-ds-popover-popup-motion]:popover-open {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n";
+function getPopupMotionProperties(_ref) {
+  var placement = _ref.placement;
   var _getPlacement = getPlacement({
       placement: placement
     }),
     axis = _getPlacement.axis,
     edge = _getPlacement.edge;
+  if (axis === 'block' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'start') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  if (axis === 'inline' && edge === 'end') {
+    return {
+      '--ds-popover-motion-enter': "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+      '--ds-popover-motion-exit': "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+    };
+  }
+  // Default: block/end (popover below trigger)
+  return {
+    '--ds-popover-motion-enter': "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    '--ds-popover-motion-exit': "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
+  };
+}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function popupMotion() {
+  return {
+    name: 'popup-motion',
+    css: POPUP_MOTION_CSS,
+    enterDurationMs: 150,
+    exitDurationMs: 100,
+    getProperties: function getProperties(_ref2) {
+      var placement = _ref2.placement;
+      return getPopupMotionProperties({
+        placement: placement
+      });
+    }
+  };
+}
+
+// ── slideAndFade ──
+
+function getSlideAndFadeProperties(_ref3) {
+  var placement = _ref3.placement,
+    distance = _ref3.distance;
+  var pos = "".concat(distance, "px");
+  var neg = "-".concat(distance, "px");
+  var _getPlacement2 = getPlacement({
+      placement: placement
+    }),
+    axis = _getPlacement2.axis,
+    edge = _getPlacement2.edge;
   if (axis === 'block' && edge === 'start') {
     return {
       '--ds-popover-tx': '0',
@@ -64,14 +118,15 @@ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n  opacity: 0;\n
  * <Popover animate={slideAndFade({ distance: 8 })} />
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function slideAndFade(options) {
   var _options$distance;
   var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
   return {
     name: 'slide-and-fade',
     css: SLIDE_AND_FADE_CSS,
-    getProperties: function getProperties(_ref2) {
-      var placement = _ref2.placement;
+    getProperties: function getProperties(_ref4) {
+      var placement = _ref4.placement;
       return getSlideAndFadeProperties({
         placement: placement,
         distance: distance
@@ -138,7 +193,36 @@ export function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// dialogSlideUpAndFade
+// ── dialogMotion ──
+
+var DIALOG_MOTION_CSS = "\n  [data-ds-dialog-motion] {\n    animation: ".concat("var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)", ";\n    animation-fill-mode: forwards;\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open] {\n    animation: ", "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  [data-ds-dialog-motion]::backdrop {\n    animation: ", "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)", ";\n    animation-fill-mode: forwards;\n    background-color: var(--ds-blanket, #050C1F75);\n    transition:\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n  }\n\n  [data-ds-dialog-motion][open]::backdrop {\n    animation: ", "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)", ";\n    animation-fill-mode: backwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-ds-dialog-motion],\n    [data-ds-dialog-motion][open],\n    [data-ds-dialog-motion]::backdrop,\n    [data-ds-dialog-motion][open]::backdrop {\n      animation: none;\n      transition-duration: 0s;\n    }\n  }\n");
+
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function dialogMotion() {
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
+  return {
+    name: 'motion',
+    css: DIALOG_MOTION_CSS,
+    enterDurationMs: 250,
+    exitDurationMs: 200
+  };
+}
+
+// ── dialogSlideUpAndFade ──
 
 var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 

package/dist/esm/entry-points/animations.js

@@ -1 +1 @@
-export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';
+export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';

package/dist/types/animations/presets.d.ts

@@ -1,4 +1,5 @@
 import { type TAnimationPreset } from './types';
+export declare function popupMotion(): TAnimationPreset;
 type TSlideAndFadeOptions = {
     /**
      * Slide distance in pixels. Defaults to `4`.
@@ -51,6 +52,21 @@ export declare function fade(): TAnimationPreset;
  * ```
  */
 export declare function scaleAndFade(): TAnimationPreset;
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+export declare function dialogMotion(): TAnimationPreset;
 type TDialogSlideUpAndFadeOptions = {
     /**
      * Slide distance in pixels. Defaults to `12`.

package/dist/types/entry-points/animations.d.ts

@@ -1,2 +1,2 @@
-export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
+export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
 export type { TAnimationPreset } from '../animations/types';

package/dist/types-ts4.5/animations/presets.d.ts

@@ -1,4 +1,5 @@
 import { type TAnimationPreset } from './types';
+export declare function popupMotion(): TAnimationPreset;
 type TSlideAndFadeOptions = {
     /**
      * Slide distance in pixels. Defaults to `4`.
@@ -51,6 +52,21 @@ export declare function fade(): TAnimationPreset;
  * ```
  */
 export declare function scaleAndFade(): TAnimationPreset;
+/**
+ * Dialog motion animation.
+ *
+ * Includes backdrop fade animation.
+ *
+ * @example
+ * ```tsx
+ * import { dialogMotion } from '@atlaskit/top-layer/animations';
+ *
+ * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
+ *   ...
+ * </Dialog>
+ * ```
+ */
+export declare function dialogMotion(): TAnimationPreset;
 type TDialogSlideUpAndFadeOptions = {
     /**
      * Slide distance in pixels. Defaults to `12`.

package/dist/types-ts4.5/entry-points/animations.d.ts

@@ -1,2 +1,2 @@
-export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
+export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
 export type { TAnimationPreset } from '../animations/types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.16.0",
+	"version": "0.17.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -38,7 +38,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/layering": "^3.8.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/tokens": "^13.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -53,7 +53,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/lozenge": "^13.8.0",
+		"@atlaskit/lozenge": "^13.9.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.3.0",