@atlaskit/modal-dialog 16.2.5 → 16.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/modal-dialog
 
+## 16.3.0
+
+### Minor Changes
+
+- [`a50c282feb7d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a50c282feb7d3) -
+  Fixes various layout issues in the top layer modal variant.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.2.5
 
 ### Patch Changes

package/dist/cjs/full-screen.js

@@ -89,4 +89,29 @@ var FullScreenModalDialog = exports.FullScreenModalDialog = /*#__PURE__*/(0, _re
     ref: ref
   }));
 });
-FullScreenModalDialog.displayName = 'FullScreenModalDialog';
+FullScreenModalDialog.displayName = 'FullScreenModalDialog';
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */

package/dist/cjs/internal/components/modal-wrapper.compiled.css

@@ -1,23 +1,28 @@
+._2rkoidpf{border-radius:0}
 ._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._18m91wug{overflow-y:auto}
+._18m9ewfl{overflow-y:visible}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
 ._1bsbauwl{width:100vw}
 ._1dg11kw7>form:only-child{flex-direction:inherit}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._1mq81kw7>form:only-child{display:inherit}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
-._1tke1kxc{min-height:100vh}
+._1reoewfl{overflow-x:visible}
+._2hwxidpf{margin-right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1kxc{height:100vh}
-._4t3i1osq{height:100%}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._c71lglyw{max-height:none}
 ._kqsw1n9t{position:fixed}
 ._lcxv1wug{pointer-events:auto}
+._ln19p27b{scrollbar-gutter:stable}
 ._m01u1kw7>form:only-child{max-height:inherit}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
-@media (min-width:30rem){._bolhzwhf._bolhzwhf{max-height:calc(100vh - 119px)}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}
+@media (min-width:30rem){._1jyk17ks{height:var(--modal-dialog-height)}._g7116m9r{width:var(--modal-dialog-width)}._we1i18uh{max-width:calc(100vw - 90pt)}._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._1mpv184x{min-height:min-content}._e8uo1ris{max-height:max-content}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}

package/dist/cjs/internal/components/modal-wrapper.js

@@ -38,34 +38,42 @@ var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-ori
 var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external");
 var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
 var _scrollContext = require("../scroll-context");
-var _dialogHeight = require("./dialog-height");
-var _dialogWidth = require("./dialog-width");
+var _width = require("../width");
 var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var fillScreenStyles = null;
 
+/**
+ * Styles applied to the <dialog> wrapper, NOT the visual modal surface.
+ */
+var dialogStyles = {
+  'body-scroll': "_1reoewfl _18m9ewfl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug",
+  'viewport-scroll': "_ln19p27b _1bsbauwl _4t3i1kxc",
+  'full-screen': ""
+};
+
 // Visual styles for modal content inside native <dialog>.
 // Uses cssMap (not css) to avoid triggering no-nested-styles lint rule.
 
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
-var topLayerStyles = {
-  content: "_1e0c1txw _4t3i1osq _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
-  borderRadius: "_epkxfajl",
-  borderRadiusT26: "_epkxpb1k"
-};
 
-// Scroll-mode styles for the content div.
-// Height overrides use ID-scoped <style> (see dialogPositionStyles) because
-// Compiled atomic classes have specificity (0,1,0) (increaseSpecificity is disabled).
-// The doubled-ID selector (#id#id > div) at (2,0,1) reliably wins.
-// Only non-height properties needing the && boost remain here.
-
-var topLayerBodyScrollStyles = null;
-var topLayerViewportScrollStyles = null;
+/**
+ * Styles applied to the visual modal surface.
+ */
+var surfaceStyles = {
+  root: "_1e0c1txw _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
+  borderRadius: "_2rkoidpf _epkxpb1k"
+};
+var topLayerScrollModeStyles = {
+  'full-screen': "_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0",
+  'viewport-scroll': "_4t3i1kxc _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _1mpv184x _1jyk17ks _g7116m9r _we1i18uh",
+  'body-scroll': "_1bsbauwl _4t3i1kxc _1jyk17ks _g7116m9r _we1i18uh"
+};
+var topLayerAutoHeightStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
   // Allow focus outside modal when AUI dialog is visible
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- legacy FocusLock allowlist
-  if (Boolean(document.querySelector('.aui-blanket:not([hidden])'))) {
+  if (document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // Optional callback to let consumers exclude elements from focus lock
@@ -83,9 +91,64 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.2.4"
+    packageVersion: "16.2.5"
   });
 }
+function getScrollMode(_ref) {
+  var shouldScrollInViewport = _ref.shouldScrollInViewport,
+    isFullScreen = _ref.isFullScreen;
+  if (isFullScreen) {
+    return 'full-screen';
+  }
+  if (shouldScrollInViewport) {
+    return 'viewport-scroll';
+  }
+  return 'body-scroll';
+}
+function isWidthName(value) {
+  return _width.width.values.includes(value);
+}
+function getTopLayerSurfaceWidth(input) {
+  if (!input) {
+    return 'auto';
+  }
+  if (typeof input === 'number') {
+    return "".concat(input, "px");
+  }
+  if (isWidthName(input)) {
+    return "".concat(_width.width.widths[input], "px");
+  }
+  if (input.endsWith('%')) {
+    // Percentage widths need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-width
+    // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vw), so a raw percentage would produce a wider modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
+    return "calc(".concat(parseFloat(input), " * (100vw - 120px) / 100)");
+  }
+  return input;
+}
+function getTopLayerSurfaceHeight(input) {
+  if (!input) {
+    // Although this value would ordinarily fill the viewport height,
+    // there is also a `max-height: max-content` applied to keep it constrained.
+    // But we need to provide the modal with a fixed height (non-keyword, non-percentage)
+    // in order for child elements with 100% height to work correctly.
+    return 'calc(100vh - 120px)';
+  }
+  if (typeof input === 'number') {
+    return "".concat(input, "px");
+  }
+  if (input.endsWith('%')) {
+    // Percentage heights need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-height
+    // (100vh - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vh), so a raw percentage would produce a taller modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vh - 120px) / 100)' to match legacy.
+    return "calc(".concat(parseFloat(input), " * (100vh - 120px) / 100)");
+  }
+  return input;
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -114,23 +177,23 @@ function ModalWrapperTopLayer(props) {
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     _props$shouldReturnFo = props.shouldReturnFocus,
     shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
-    stackIndexOverride = props.stackIndex,
     providedOnClose = props.onClose,
     _props$onStackChange = props.onStackChange,
     onStackChange = _props$onStackChange === void 0 ? _noop.default : _props$onStackChange,
     isBlanketHidden = props.isBlanketHidden,
     children = props.children,
     height = props.height,
-    width = props.width,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 'medium' : _props$width,
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
     label = props.label,
     testId = props.testId,
-    isFullScreen = props.isFullScreen;
-  var calculatedStackIndex = (0, _useModalStack.default)({
+    _props$isFullScreen = props.isFullScreen,
+    isFullScreen = _props$isFullScreen === void 0 ? false : _props$isFullScreen;
+  (0, _useModalStack.default)({
     onStackChange: onStackChange
   });
-  var stackIndex = stackIndexOverride || calculatedStackIndex;
   var onCloseHandler = useModalCloseHandler(providedOnClose);
   var _useExitingPersistenc = (0, _exitingPersistence.useExitingPersistence)(),
     isExiting = _useExitingPersistenc.isExiting,
@@ -165,8 +228,8 @@ function ModalWrapperTopLayer(props) {
 
   // Only forward close when the reason is allowed by props.
   // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
-  var onDialogClose = (0, _react.useCallback)(function (_ref) {
-    var reason = _ref.reason;
+  var onDialogClose = (0, _react.useCallback)(function (_ref2) {
+    var reason = _ref2.reason;
     if (reason === 'escape' && shouldCloseOnEscapePress) {
       onCloseHandler((0, _dialog.createCloseEvent)({
         reason: reason
@@ -223,56 +286,17 @@ function ModalWrapperTopLayer(props) {
   (0, _react.useEffect)(function () {
     return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
   }, []);
-
-  // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
-  // ID selector beats Compiled atomic classes without !important and supports @media.
-  var namedWidth = (0, _dialogWidth.dialogWidth)(width !== null && width !== void 0 ? width : 'medium');
-  var dialogId = "modal-dialog-".concat(id);
-  var escapedDialogId = CSS.escape(dialogId);
-
-  // Percentage widths need special handling in the top layer.
-  // In legacy, the percentage resolved against the Positioner's max-width
-  // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
-  // viewport (100vw), so a raw percentage would produce a wider modal.
-  // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
-  var resolvedWidth = namedWidth.endsWith('%') ? "calc(".concat(parseFloat(namedWidth), " * (100vw - 120px) / 100)") : namedWidth;
-  var dialogStyle = isFullScreen ? {
-    width: '100vw',
-    height: '100vh',
-    margin: '0'
-  } : {
-    width: "min(".concat(resolvedWidth, ", 100vw)")
-  };
-
-  // Shift stacked background modals down by space.100 (8px) per level.
-  if (stackIndex > 0) {
-    dialogStyle['transform'] = "translateY(calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", "))");
-  }
-
-  // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
-  // Content-div height set via #id > div to beat Compiled's atomic specificity.
-  var desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
-  var resolvedHeight = (0, _dialogHeight.dialogHeight)(height);
-  // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
-  var desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
-  var desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
-  // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
-  // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
-  // In the top layer the <dialog> sizes to content with height:auto, so we need
-  // an explicit min-height to ensure the dialog stretches to the same visible area.
-  var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
-  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
-  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
-  var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
-  "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
+  var scrollMode = getScrollMode({
+    isFullScreen: isFullScreen,
+    shouldScrollInViewport: shouldScrollInViewport
+  });
   return /*#__PURE__*/React.createElement(_dialog.Dialog, (0, _extends2.default)({
     ref: dialogRef,
-    id: dialogId,
     onClose: onDialogClose,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
-    shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
+    shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
   }, label ? {
@@ -280,18 +304,17 @@ function ModalWrapperTopLayer(props) {
   } : {
     labelledBy: titleId
   }, {
-    testId: defaultTestId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: dialogStyle
+    testId: defaultTestId,
+    xcss: dialogStyles[scrollMode]
   }), /*#__PURE__*/React.createElement(_dialogScrollLock.DialogScrollLock, {
     isOpen: true
-  }), dialogPositionStyles &&
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: (0, _runtime.ax)([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
+    style: {
+      '--modal-dialog-height': getTopLayerSurfaceHeight(height),
+      '--modal-dialog-width': getTopLayerSurfaceWidth(width)
+    },
+    className: (0, _runtime.ax)([surfaceStyles.root, !isFullScreen && surfaceStyles.borderRadius, topLayerScrollModeStyles[scrollMode], !height && !isFullScreen && "_e8uo1ris"])
   }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(_scrollContext.ScrollContext.Provider, {

package/dist/es2019/full-screen.js

@@ -46,8 +46,29 @@ export const FullScreenModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 FullScreenModalDialog.displayName = 'FullScreenModalDialog';
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTransition } from './modal-transition';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalHeader } from './modal-header';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTitle } from './modal-title';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalBody } from './modal-body';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalFooter } from './modal-footer';

package/dist/es2019/internal/components/modal-wrapper.compiled.css

@@ -1,23 +1,28 @@
+._2rkoidpf{border-radius:0}
 ._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._18m91wug{overflow-y:auto}
+._18m9ewfl{overflow-y:visible}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
 ._1bsbauwl{width:100vw}
 ._1dg11kw7>form:only-child{flex-direction:inherit}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._1mq81kw7>form:only-child{display:inherit}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
-._1tke1kxc{min-height:100vh}
+._1reoewfl{overflow-x:visible}
+._2hwxidpf{margin-right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1kxc{height:100vh}
-._4t3i1osq{height:100%}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._c71lglyw{max-height:none}
 ._kqsw1n9t{position:fixed}
 ._lcxv1wug{pointer-events:auto}
+._ln19p27b{scrollbar-gutter:stable}
 ._m01u1kw7>form:only-child{max-height:inherit}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
-@media (min-width:30rem){._bolhzwhf._bolhzwhf{max-height:calc(100vh - 119px)}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}
+@media (min-width:30rem){._1jyk17ks{height:var(--modal-dialog-height)}._g7116m9r{width:var(--modal-dialog-width)}._we1i18uh{max-width:calc(100vw - 90pt)}._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._1mpv184x{min-height:min-content}._e8uo1ris{max-height:max-content}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}

package/dist/es2019/internal/components/modal-wrapper.js

@@ -29,33 +29,41 @@ import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag
 import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
 import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
 import { ScrollContext } from '../scroll-context';
-import { dialogHeight } from './dialog-height';
-import { dialogWidth as getDialogWidth } from './dialog-width';
+import { width } from '../width';
 import { default as ModalDialog } from './modal-dialog';
 const fillScreenStyles = null;
 
+/**
+ * Styles applied to the <dialog> wrapper, NOT the visual modal surface.
+ */
+const dialogStyles = {
+  'body-scroll': "_1reoewfl _18m9ewfl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug",
+  'viewport-scroll': "_ln19p27b _1bsbauwl _4t3i1kxc",
+  'full-screen': ""
+};
+
 // Visual styles for modal content inside native <dialog>.
 // Uses cssMap (not css) to avoid triggering no-nested-styles lint rule.
 
 const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
-const topLayerStyles = {
-  content: "_1e0c1txw _4t3i1osq _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
-  borderRadius: "_epkxfajl",
-  borderRadiusT26: "_epkxpb1k"
-};
 
-// Scroll-mode styles for the content div.
-// Height overrides use ID-scoped <style> (see dialogPositionStyles) because
-// Compiled atomic classes have specificity (0,1,0) (increaseSpecificity is disabled).
-// The doubled-ID selector (#id#id > div) at (2,0,1) reliably wins.
-// Only non-height properties needing the && boost remain here.
-
-const topLayerBodyScrollStyles = null;
-const topLayerViewportScrollStyles = null;
+/**
+ * Styles applied to the visual modal surface.
+ */
+const surfaceStyles = {
+  root: "_1e0c1txw _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
+  borderRadius: "_2rkoidpf _epkxpb1k"
+};
+const topLayerScrollModeStyles = {
+  'full-screen': "_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0",
+  'viewport-scroll': "_4t3i1kxc _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _1mpv184x _1jyk17ks _g7116m9r _we1i18uh",
+  'body-scroll': "_1bsbauwl _4t3i1kxc _1jyk17ks _g7116m9r _we1i18uh"
+};
+const topLayerAutoHeightStyles = null;
 const allowlistElements = (element, callback) => {
   // Allow focus outside modal when AUI dialog is visible
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- legacy FocusLock allowlist
-  if (Boolean(document.querySelector('.aui-blanket:not([hidden])'))) {
+  if (document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // Optional callback to let consumers exclude elements from focus lock
@@ -73,9 +81,65 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.2.4"
+    packageVersion: "16.2.5"
   });
 }
+function getScrollMode({
+  shouldScrollInViewport,
+  isFullScreen
+}) {
+  if (isFullScreen) {
+    return 'full-screen';
+  }
+  if (shouldScrollInViewport) {
+    return 'viewport-scroll';
+  }
+  return 'body-scroll';
+}
+function isWidthName(value) {
+  return width.values.includes(value);
+}
+function getTopLayerSurfaceWidth(input) {
+  if (!input) {
+    return 'auto';
+  }
+  if (typeof input === 'number') {
+    return `${input}px`;
+  }
+  if (isWidthName(input)) {
+    return `${width.widths[input]}px`;
+  }
+  if (input.endsWith('%')) {
+    // Percentage widths need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-width
+    // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vw), so a raw percentage would produce a wider modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
+    return `calc(${parseFloat(input)} * (100vw - 120px) / 100)`;
+  }
+  return input;
+}
+function getTopLayerSurfaceHeight(input) {
+  if (!input) {
+    // Although this value would ordinarily fill the viewport height,
+    // there is also a `max-height: max-content` applied to keep it constrained.
+    // But we need to provide the modal with a fixed height (non-keyword, non-percentage)
+    // in order for child elements with 100% height to work correctly.
+    return 'calc(100vh - 120px)';
+  }
+  if (typeof input === 'number') {
+    return `${input}px`;
+  }
+  if (input.endsWith('%')) {
+    // Percentage heights need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-height
+    // (100vh - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vh), so a raw percentage would produce a taller modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vh - 120px) / 100)' to match legacy.
+    return `calc(${parseFloat(input)} * (100vh - 120px) / 100)`;
+  }
+  return input;
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -101,23 +165,21 @@ function ModalWrapperTopLayer(props) {
     shouldCloseOnOverlayClick = true,
     shouldScrollInViewport = false,
     shouldReturnFocus = true,
-    stackIndex: stackIndexOverride,
     onClose: providedOnClose,
     onStackChange = noop,
     isBlanketHidden,
     children,
     height,
-    width,
+    width = 'medium',
     onCloseComplete,
     onOpenComplete,
     label,
     testId,
-    isFullScreen
+    isFullScreen = false
   } = props;
-  const calculatedStackIndex = useModalStack({
+  useModalStack({
     onStackChange
   });
-  const stackIndex = stackIndexOverride || calculatedStackIndex;
   const onCloseHandler = useModalCloseHandler(providedOnClose);
   const {
     isExiting,
@@ -210,57 +272,17 @@ function ModalWrapperTopLayer(props) {
   useEffect(() => {
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-
-  // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
-  // ID selector beats Compiled atomic classes without !important and supports @media.
-  const namedWidth = getDialogWidth(width !== null && width !== void 0 ? width : 'medium');
-  const dialogId = `modal-dialog-${id}`;
-  const escapedDialogId = CSS.escape(dialogId);
-
-  // Percentage widths need special handling in the top layer.
-  // In legacy, the percentage resolved against the Positioner's max-width
-  // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
-  // viewport (100vw), so a raw percentage would produce a wider modal.
-  // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
-  const resolvedWidth = namedWidth.endsWith('%') ? `calc(${parseFloat(namedWidth)} * (100vw - 120px) / 100)` : namedWidth;
-  const dialogStyle = isFullScreen ? {
-    width: '100vw',
-    height: '100vh',
-    margin: '0'
-  } : {
-    width: `min(${resolvedWidth}, 100vw)`
-  };
-
-  // Shift stacked background modals down by space.100 (8px) per level.
-  if (stackIndex > 0) {
-    dialogStyle['transform'] = `translateY(calc(${stackIndex}px * ${"var(--ds-space-100, 8px)"}))`;
-  }
-
-  // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
-  // Content-div height set via #id > div to beat Compiled's atomic specificity.
-  const desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
-  const resolvedHeight = dialogHeight(height);
-  // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
-  const desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
-  const desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
-  // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
-  // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
-  // In the top layer the <dialog> sizes to content with height:auto, so we need
-  // an explicit min-height to ensure the dialog stretches to the same visible area.
-  const desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
-  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
-  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
-  const dialogPositionStyles = isFullScreen ? '' :
-  // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
-  `#${escapedDialogId}#${escapedDialogId}{margin:0;height:100vh}#${escapedDialogId}#${escapedDialogId}>div{height:100%}@media(min-width:30rem){#${escapedDialogId}#${escapedDialogId}{margin:${desktopMargin};height:auto;${desktopDialogMinHeight}max-width:calc(100vw - 120px)}#${escapedDialogId}#${escapedDialogId}>div{height:${desktopContentHeight};min-height:${desktopContentMinHeight}}}`;
+  const scrollMode = getScrollMode({
+    isFullScreen,
+    shouldScrollInViewport
+  });
   return /*#__PURE__*/React.createElement(Dialog, _extends({
     ref: dialogRef,
-    id: dialogId,
     onClose: onDialogClose,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
-    shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
+    shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
   }, label ? {
@@ -268,18 +290,17 @@ function ModalWrapperTopLayer(props) {
   } : {
     labelledBy: titleId
   }, {
-    testId: defaultTestId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: dialogStyle
+    testId: defaultTestId,
+    xcss: dialogStyles[scrollMode]
   }), /*#__PURE__*/React.createElement(DialogScrollLock, {
     isOpen: true
-  }), dialogPositionStyles &&
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: ax([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
+    style: {
+      '--modal-dialog-height': getTopLayerSurfaceHeight(height),
+      '--modal-dialog-width': getTopLayerSurfaceWidth(width)
+    },
+    className: ax([surfaceStyles.root, !isFullScreen && surfaceStyles.borderRadius, topLayerScrollModeStyles[scrollMode], !height && !isFullScreen && "_e8uo1ris"])
   }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {

package/dist/esm/full-screen.js

@@ -46,8 +46,29 @@ export var FullScreenModalDialog = /*#__PURE__*/forwardRef(function (props, ref)
   }));
 });
 FullScreenModalDialog.displayName = 'FullScreenModalDialog';
+
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTransition } from './modal-transition';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalHeader } from './modal-header';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTitle } from './modal-title';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalBody } from './modal-body';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalFooter } from './modal-footer';

package/dist/esm/internal/components/modal-wrapper.compiled.css

@@ -1,23 +1,28 @@
+._2rkoidpf{border-radius:0}
 ._152tze3t{inset-block-start:var(--ds-space-0,0)}
 ._18m91wug{overflow-y:auto}
+._18m9ewfl{overflow-y:visible}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
 ._1bsbauwl{width:100vw}
 ._1dg11kw7>form:only-child{flex-direction:inherit}
 ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._1mq81kw7>form:only-child{display:inherit}
 ._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
-._1tke1kxc{min-height:100vh}
+._1reoewfl{overflow-x:visible}
+._2hwxidpf{margin-right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1kxc{height:100vh}
-._4t3i1osq{height:100%}
 ._8am5i4x0{-webkit-overflow-scrolling:touch}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
-._c71lglyw{max-height:none}
 ._kqsw1n9t{position:fixed}
 ._lcxv1wug{pointer-events:auto}
+._ln19p27b{scrollbar-gutter:stable}
 ._m01u1kw7>form:only-child{max-height:inherit}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}._128mdkaa:focus-visible{outline-width:var(--ds-border-width-focused,2px)}
 ._1ah3dkaa:focus-visible{outline-offset:var(--ds-border-width-focused,2px)}
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
-@media (min-width:30rem){._bolhzwhf._bolhzwhf{max-height:calc(100vh - 119px)}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}
+@media (min-width:30rem){._1jyk17ks{height:var(--modal-dialog-height)}._g7116m9r{width:var(--modal-dialog-width)}._we1i18uh{max-width:calc(100vw - 90pt)}._1sg41wqb{margin-top:60px}._maxs1wug{margin-right:auto}._1jvh1wqb{margin-bottom:60px}._1uca1wug{margin-left:auto}._1mpv184x{min-height:min-content}._e8uo1ris{max-height:max-content}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}}

package/dist/esm/internal/components/modal-wrapper.js

@@ -30,33 +30,41 @@ import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag
 import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
 import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
 import { ScrollContext } from '../scroll-context';
-import { dialogHeight } from './dialog-height';
-import { dialogWidth as getDialogWidth } from './dialog-width';
+import { width } from '../width';
 import { default as ModalDialog } from './modal-dialog';
 var fillScreenStyles = null;
 
+/**
+ * Styles applied to the <dialog> wrapper, NOT the visual modal surface.
+ */
+var dialogStyles = {
+  'body-scroll': "_1reoewfl _18m9ewfl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug",
+  'viewport-scroll': "_ln19p27b _1bsbauwl _4t3i1kxc",
+  'full-screen': ""
+};
+
 // Visual styles for modal content inside native <dialog>.
 // Uses cssMap (not css) to avoid triggering no-nested-styles lint rule.
 
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
-var topLayerStyles = {
-  content: "_1e0c1txw _4t3i1osq _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
-  borderRadius: "_epkxfajl",
-  borderRadiusT26: "_epkxpb1k"
-};
 
-// Scroll-mode styles for the content div.
-// Height overrides use ID-scoped <style> (see dialogPositionStyles) because
-// Compiled atomic classes have specificity (0,1,0) (increaseSpecificity is disabled).
-// The doubled-ID selector (#id#id > div) at (2,0,1) reliably wins.
-// Only non-height properties needing the && boost remain here.
-
-var topLayerBodyScrollStyles = null;
-var topLayerViewportScrollStyles = null;
+/**
+ * Styles applied to the visual modal surface.
+ */
+var surfaceStyles = {
+  root: "_1e0c1txw _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
+  borderRadius: "_2rkoidpf _epkxpb1k"
+};
+var topLayerScrollModeStyles = {
+  'full-screen': "_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0",
+  'viewport-scroll': "_4t3i1kxc _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _1mpv184x _1jyk17ks _g7116m9r _we1i18uh",
+  'body-scroll': "_1bsbauwl _4t3i1kxc _1jyk17ks _g7116m9r _we1i18uh"
+};
+var topLayerAutoHeightStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
   // Allow focus outside modal when AUI dialog is visible
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- legacy FocusLock allowlist
-  if (Boolean(document.querySelector('.aui-blanket:not([hidden])'))) {
+  if (document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // Optional callback to let consumers exclude elements from focus lock
@@ -74,9 +82,64 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.2.4"
+    packageVersion: "16.2.5"
   });
 }
+function getScrollMode(_ref) {
+  var shouldScrollInViewport = _ref.shouldScrollInViewport,
+    isFullScreen = _ref.isFullScreen;
+  if (isFullScreen) {
+    return 'full-screen';
+  }
+  if (shouldScrollInViewport) {
+    return 'viewport-scroll';
+  }
+  return 'body-scroll';
+}
+function isWidthName(value) {
+  return width.values.includes(value);
+}
+function getTopLayerSurfaceWidth(input) {
+  if (!input) {
+    return 'auto';
+  }
+  if (typeof input === 'number') {
+    return "".concat(input, "px");
+  }
+  if (isWidthName(input)) {
+    return "".concat(width.widths[input], "px");
+  }
+  if (input.endsWith('%')) {
+    // Percentage widths need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-width
+    // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vw), so a raw percentage would produce a wider modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
+    return "calc(".concat(parseFloat(input), " * (100vw - 120px) / 100)");
+  }
+  return input;
+}
+function getTopLayerSurfaceHeight(input) {
+  if (!input) {
+    // Although this value would ordinarily fill the viewport height,
+    // there is also a `max-height: max-content` applied to keep it constrained.
+    // But we need to provide the modal with a fixed height (non-keyword, non-percentage)
+    // in order for child elements with 100% height to work correctly.
+    return 'calc(100vh - 120px)';
+  }
+  if (typeof input === 'number') {
+    return "".concat(input, "px");
+  }
+  if (input.endsWith('%')) {
+    // Percentage heights need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-height
+    // (100vh - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vh), so a raw percentage would produce a taller modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vh - 120px) / 100)' to match legacy.
+    return "calc(".concat(parseFloat(input), " * (100vh - 120px) / 100)");
+  }
+  return input;
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -105,23 +168,23 @@ function ModalWrapperTopLayer(props) {
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     _props$shouldReturnFo = props.shouldReturnFocus,
     shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
-    stackIndexOverride = props.stackIndex,
     providedOnClose = props.onClose,
     _props$onStackChange = props.onStackChange,
     onStackChange = _props$onStackChange === void 0 ? noop : _props$onStackChange,
     isBlanketHidden = props.isBlanketHidden,
     children = props.children,
     height = props.height,
-    width = props.width,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 'medium' : _props$width,
     onCloseComplete = props.onCloseComplete,
     onOpenComplete = props.onOpenComplete,
     label = props.label,
     testId = props.testId,
-    isFullScreen = props.isFullScreen;
-  var calculatedStackIndex = useModalStack({
+    _props$isFullScreen = props.isFullScreen,
+    isFullScreen = _props$isFullScreen === void 0 ? false : _props$isFullScreen;
+  useModalStack({
     onStackChange: onStackChange
   });
-  var stackIndex = stackIndexOverride || calculatedStackIndex;
   var onCloseHandler = useModalCloseHandler(providedOnClose);
   var _useExitingPersistenc = useExitingPersistence(),
     isExiting = _useExitingPersistenc.isExiting,
@@ -156,8 +219,8 @@ function ModalWrapperTopLayer(props) {
 
   // Only forward close when the reason is allowed by props.
   // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
-  var onDialogClose = useCallback(function (_ref) {
-    var reason = _ref.reason;
+  var onDialogClose = useCallback(function (_ref2) {
+    var reason = _ref2.reason;
     if (reason === 'escape' && shouldCloseOnEscapePress) {
       onCloseHandler(createCloseEvent({
         reason: reason
@@ -214,56 +277,17 @@ function ModalWrapperTopLayer(props) {
   useEffect(function () {
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-
-  // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
-  // ID selector beats Compiled atomic classes without !important and supports @media.
-  var namedWidth = getDialogWidth(width !== null && width !== void 0 ? width : 'medium');
-  var dialogId = "modal-dialog-".concat(id);
-  var escapedDialogId = CSS.escape(dialogId);
-
-  // Percentage widths need special handling in the top layer.
-  // In legacy, the percentage resolved against the Positioner's max-width
-  // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
-  // viewport (100vw), so a raw percentage would produce a wider modal.
-  // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
-  var resolvedWidth = namedWidth.endsWith('%') ? "calc(".concat(parseFloat(namedWidth), " * (100vw - 120px) / 100)") : namedWidth;
-  var dialogStyle = isFullScreen ? {
-    width: '100vw',
-    height: '100vh',
-    margin: '0'
-  } : {
-    width: "min(".concat(resolvedWidth, ", 100vw)")
-  };
-
-  // Shift stacked background modals down by space.100 (8px) per level.
-  if (stackIndex > 0) {
-    dialogStyle['transform'] = "translateY(calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", "))");
-  }
-
-  // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
-  // Content-div height set via #id > div to beat Compiled's atomic specificity.
-  var desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
-  var resolvedHeight = dialogHeight(height);
-  // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
-  var desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
-  var desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
-  // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
-  // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
-  // In the top layer the <dialog> sizes to content with height:auto, so we need
-  // an explicit min-height to ensure the dialog stretches to the same visible area.
-  var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
-  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
-  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
-  var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
-  "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
+  var scrollMode = getScrollMode({
+    isFullScreen: isFullScreen,
+    shouldScrollInViewport: shouldScrollInViewport
+  });
   return /*#__PURE__*/React.createElement(Dialog, _extends({
     ref: dialogRef,
-    id: dialogId,
     onClose: onDialogClose,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
-    shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
+    shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
   }, label ? {
@@ -271,18 +295,17 @@ function ModalWrapperTopLayer(props) {
   } : {
     labelledBy: titleId
   }, {
-    testId: defaultTestId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: dialogStyle
+    testId: defaultTestId,
+    xcss: dialogStyles[scrollMode]
   }), /*#__PURE__*/React.createElement(DialogScrollLock, {
     isOpen: true
-  }), dialogPositionStyles &&
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: ax([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
+    style: {
+      '--modal-dialog-height': getTopLayerSurfaceHeight(height),
+      '--modal-dialog-width': getTopLayerSurfaceWidth(width)
+    },
+    className: ax([surfaceStyles.root, !isFullScreen && surfaceStyles.borderRadius, topLayerScrollModeStyles[scrollMode], !height && !isFullScreen && "_e8uo1ris"])
   }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {

package/dist/types/full-screen.d.ts

@@ -3,8 +3,28 @@ import type { ModalDialogProps } from './types';
 export interface FullScreenModalDialogProps extends Omit<ModalDialogProps, 'width' | 'height' | 'shouldScrollInViewport' | 'shouldCloseOnOverlayClick' | 'isBlanketHidden'> {
 }
 export declare const FullScreenModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<FullScreenModalDialogProps> & React.RefAttributes<HTMLElement>>;
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTransition } from './modal-transition';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalHeader } from './modal-header';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalTitle } from './modal-title';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalBody } from './modal-body';
+/**
+ * @deprecated Volt migration shim. Import from the explicit subpath instead.
+ * Retained only while consumers migrate off this re-export.
+ */
 export { default as ModalFooter } from './modal-footer';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "16.2.5",
+	"version": "16.3.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,17 +39,17 @@
 		"@atlaskit/button": "^25.0.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^37.2.0",
+		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/motion": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/portal": "^6.1.0",
+		"@atlaskit/portal": "^6.2.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/theme": "^26.1.0",
+		"@atlaskit/theme": "^27.0.0",
 		"@atlaskit/tokens": "^16.3.0",
-		"@atlaskit/top-layer": "^3.0.0",
+		"@atlaskit/top-layer": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -68,7 +68,7 @@
 		"@atlaskit/avatar-group": "^13.2.0",
 		"@atlaskit/banner": "^15.1.0",
 		"@atlaskit/breadcrumbs": "^17.5.0",
-		"@atlaskit/checkbox": "^18.2.0",
+		"@atlaskit/checkbox": "^19.0.0",
 		"@atlaskit/code": "^18.2.0",
 		"@atlaskit/datetime-picker": "^18.2.0",
 		"@atlaskit/docs": "^12.1.0",
@@ -77,12 +77,12 @@
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/link": "^5.0.0",
-		"@atlaskit/popup": "^5.2.0",
+		"@atlaskit/popup": "^6.0.0",
 		"@atlaskit/radio": "^9.1.0",
-		"@atlaskit/section-message": "^9.2.0",
+		"@atlaskit/section-message": "^10.0.0",
 		"@atlaskit/select": "^22.6.0",
 		"@atlaskit/spotlight": "^3.0.0",
-		"@atlaskit/textfield": "^9.1.0",
+		"@atlaskit/textfield": "^10.0.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/ssr-tests": "workspace:^",