@atlaskit/top-layer 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/top-layer
 
+## 0.6.2
+
+### Patch Changes
+
+- [`9d77f6602f870`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d77f6602f870) -
+  Fix two CSS anchor positioning bugs for aligned placements (align-start/align-end):
+  1. Popups at viewport corners now correctly fall back to the diagonally opposite corner when their
+     preferred placement has no space, rather than remaining partially off-screen.
+
+  2. Popups near a single viewport edge now correctly trigger position fallbacks when their content
+     is wider than the available space, rather than wrapping content into a narrow column.
+
 ## 0.6.1
 
 ### Patch Changes

package/README.md

@@ -129,7 +129,7 @@ Browsers without `@starting-style` support will show/hide elements instantly —
 
 Browser tests in `__tests__/playwright/` verify the following WCAG 2.2 success criteria. See
 [`notes/goals/accessibility-criteria.md`](notes/goals/accessibility-criteria.md) and
-[`notes/decisions/accessibility-audit-report.md`](notes/decisions/accessibility-audit-report.md) for
+[`notes/audits/accessibility-audit-report.md`](notes/audits/accessibility-audit-report.md) for
 details.
 
 | A11y criterion                       | Browser test |
@@ -150,6 +150,4 @@ details.
 ## Documentation
 
 See [`notes/`](notes/) for project documentation, architecture decisions, migration records, and
-audit reports. The [`notes/README.md`](notes/README.md) provides a full index, including **current
-migration status** and links to
-[`notes/decisions/migration-roadmap.md`](notes/decisions/migration-roadmap.md).
+audit reports. The [`notes/README.md`](notes/README.md) provides a full index.

package/dist/cjs/arrow/index.js

@@ -21,7 +21,7 @@ var _useAnchorPosition = require("../internal/use-anchor-position");
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
+ * - `::before` and `::after` are consumed — consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -46,7 +46,7 @@ function positionAreaToRuleName(_ref) {
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` — they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

package/dist/cjs/dialog/dialog-content.js

@@ -128,12 +128,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
     ref: combinedRef,
-    id: dialogId
-    // Modern browsers infer modal semantics from `.showModal()` but
-    // some assistive tech still keys off `aria-modal="true"`. Setting
-    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
-    ,
-    "aria-modal": "true",
+    id: dialogId,
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/cjs/focus/focus.js

@@ -46,10 +46,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
-    return element instanceof HTMLElement;
-  }).filter(function (element) {
-    return !filter || filter(element, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
+    return el instanceof HTMLElement;
+  }).filter(function (el) {
+    return !filter || filter(el, container);
   });
 }
 

package/dist/cjs/internal/combine.js

@@ -22,8 +22,8 @@ function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (callback) {
-      return callback === null || callback === void 0 ? void 0 : callback();
+    cleanupFns.forEach(function (fn) {
+      return fn === null || fn === void 0 ? void 0 : fn();
     });
   };
 }

package/dist/cjs/internal/use-anchor-position.js

@@ -13,8 +13,6 @@ Object.defineProperty(exports, "getPlacement", {
 exports.placementToPositionArea = placementToPositionArea;
 exports.placementToTryFallbacks = placementToTryFallbacks;
 exports.useAnchorPosition = useAnchorPosition;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -93,6 +91,20 @@ function placementToPositionArea(_ref) {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 function placementToTryFallbacks(_ref2) {
   var placement = _ref2.placement;
@@ -108,9 +120,10 @@ function placementToTryFallbacks(_ref2) {
     var _sameEdge = "".concat(axis, "-").concat(edge);
     var _oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
     var _flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
+    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_flipKeyword, " ").concat(flipCrossKeyword), "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
   }
   var sameEdge = "".concat(axis, "-").concat(edge);
   var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
@@ -315,6 +328,12 @@ function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,
@@ -475,29 +494,7 @@ function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to a no-op
-    // observer there — the scroll/resize listeners below still keep
-    // the popover positioned in the rare case the consumer also
-    // polyfilled `showPopover` but not `ResizeObserver`. Real
-    // browsers always have it.
-    var NoopResizeObserver = /*#__PURE__*/function () {
-      function NoopResizeObserver() {
-        (0, _classCallCheck2.default)(this, NoopResizeObserver);
-      }
-      return (0, _createClass2.default)(NoopResizeObserver, [{
-        key: "observe",
-        value: function observe() {}
-      }, {
-        key: "unobserve",
-        value: function unobserve() {}
-      }, {
-        key: "disconnect",
-        value: function disconnect() {}
-      }]);
-    }();
-    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    var resizeObserver = new ResizeObserverImpl(function () {
+    var resizeObserver = new ResizeObserver(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/cjs/internal/use-animated-visibility.js

@@ -114,8 +114,8 @@ function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var element = elementRef.current;
-    if (!element) {
+    var el = elementRef.current;
+    if (!el) {
       return;
     }
     function finish() {
@@ -129,7 +129,7 @@ function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    var unbind = (0, _bindEventListener.bind)(element, {
+    var unbind = (0, _bindEventListener.bind)(el, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/cjs/internal/use-focus-wrap.js

@@ -39,7 +39,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` - this hook only intercepts Tab.
+ * via `popover="auto"` — this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -49,11 +49,11 @@ function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   (0, _react.useEffect)(function () {
-    var element = elementRef.current;
-    if (!element || !roleRequiresFocusWrap(role)) {
+    var el = elementRef.current;
+    if (!el || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = (0, _bindEventListener.bind)(element, {
+    var unbind = (0, _bindEventListener.bind)(el, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -65,7 +65,7 @@ function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = (0, _focus.getNextFocusable)({
-          container: element,
+          container: el,
           direction: direction
         });
         if (next) {
@@ -77,9 +77,9 @@ function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
-          container: element
+          container: el
         }) : (0, _focus.getLastFocusable)({
-          container: element
+          container: el
         });
         if (fallback) {
           fallback.focus();

package/dist/cjs/internal/use-initial-focus.js

@@ -18,7 +18,7 @@ var _focus = require("../focus/focus");
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute - it only calls `.focus()` imperatively during commit, which
+ * attribute — it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.

package/dist/cjs/popover/popover.js

@@ -126,21 +126,21 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = (0, _react.useRef)('light-dismiss');
   var handleToggle = (0, _react.useCallback)(function (event) {
-    var element = ownRef.current;
+    var el = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: element
+          element: el
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: element
+          element: el
         });
       }
 
@@ -158,13 +158,13 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     }
   }, [onClose, onOpenChange]);
   (0, _react.useEffect)(function () {
-    var element = ownRef.current;
-    if (!element) {
+    var el = ownRef.current;
+    if (!el) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = (0, _bindEventListener.bind)(element, {
+    var unbindEscape = (0, _bindEventListener.bind)(el, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -175,7 +175,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         capture: true
       }
     });
-    var unbindToggle = (0, _bindEventListener.bind)(element, {
+    var unbindToggle = (0, _bindEventListener.bind)(el, {
       type: 'toggle',
       listener: handleToggle
     });

package/dist/cjs/popup/popup-content.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -97,7 +97,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser will not restore
+    // have shouldRestoreFocus=false, so the browser won't restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

package/dist/cjs/popup/popup-trigger.js

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead - it hands you raw props via a render-prop and avoids
+ * instead — it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 function PopupTrigger(_ref) {
@@ -40,7 +40,7 @@ function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/(0, _react.isValidElement)(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // does not need isOpen in its dependency array (which would recreate
+  // doesn't need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = _react.default.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/cjs/use-simple-light-dismiss/index.js

@@ -26,7 +26,7 @@ function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect does not re-bind on every render.
+  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
   var onCloseRef = (0, _react.useRef)(onClose);
   onCloseRef.current = onClose;
   (0, _react.useEffect)(function () {

package/dist/es2019/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
+ * - `::before` and `::after` are consumed — consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -184,7 +184,7 @@ function positionAreaToRuleName({
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` — they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks({

package/dist/es2019/dialog/dialog-content.js

@@ -120,12 +120,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId
-    // Modern browsers infer modal semantics from `.showModal()` but
-    // some assistive tech still keys off `aria-modal="true"`. Setting
-    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
-    ,
-    "aria-modal": "true",
+    id: dialogId,
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/focus/focus.js

@@ -39,7 +39,7 @@ function getFocusables({
   container,
   filter
 }) {
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => !filter || filter(element, container));
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(el => el instanceof HTMLElement).filter(el => !filter || filter(el, container));
 }
 
 /**

package/dist/es2019/internal/combine.js

@@ -13,6 +13,6 @@
  */
 export function combine(...cleanupFns) {
   return function cleanup() {
-    cleanupFns.forEach(callback => callback === null || callback === void 0 ? void 0 : callback());
+    cleanupFns.forEach(fn => fn === null || fn === void 0 ? void 0 : fn());
   };
 }

package/dist/es2019/internal/use-anchor-position.js

@@ -79,6 +79,20 @@ export function placementToPositionArea({
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export function placementToTryFallbacks({
   placement
@@ -96,9 +110,10 @@ export function placementToTryFallbacks({
     const sameEdge = `${axis}-${edge}`;
     const oppositeEdge = `${axis}-${flippedEdge}`;
     const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return [`${sameEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, sameEdge, `${sameEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`, flipKeyword, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, oppositeEdge, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`].join(', ');
+    return [`${sameEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, sameEdge, `${sameEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`, flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'end' : 'start'}`, oppositeEdge, `${oppositeEdge} span-${crossAxis}-${align === 'start' ? 'start' : 'end'}`].join(', ');
   }
   const sameEdge = `${axis}-${edge}`;
   const oppositeEdge = `${axis}-${flippedEdge}`;
@@ -308,6 +323,12 @@ export function useAnchorPosition({
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,
@@ -467,19 +488,7 @@ export function useAnchorPosition({
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to a no-op
-    // observer there — the scroll/resize listeners below still keep
-    // the popover positioned in the rare case the consumer also
-    // polyfilled `showPopover` but not `ResizeObserver`. Real
-    // browsers always have it.
-    const NoopResizeObserver = class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
-    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    const resizeObserver = new ResizeObserverImpl(() => {
+    const resizeObserver = new ResizeObserver(() => {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/es2019/internal/use-animated-visibility.js

@@ -104,8 +104,8 @@ export function useAnimatedVisibility({
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    const element = elementRef.current;
-    if (!element) {
+    const el = elementRef.current;
+    if (!el) {
       return;
     }
     function finish() {
@@ -119,7 +119,7 @@ export function useAnimatedVisibility({
     const fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    const unbind = bind(element, {
+    const unbind = bind(el, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/es2019/internal/use-focus-wrap.js

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` - this hook only intercepts Tab.
+ * via `popover="auto"` — this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -45,11 +45,11 @@ export function useFocusWrap({
   role
 }) {
   useEffect(() => {
-    const element = elementRef.current;
-    if (!element || !roleRequiresFocusWrap(role)) {
+    const el = elementRef.current;
+    if (!el || !roleRequiresFocusWrap(role)) {
       return;
     }
-    const unbind = bind(element, {
+    const unbind = bind(el, {
       type: 'keydown',
       listener: event => {
         if (event.key !== 'Tab') {
@@ -61,7 +61,7 @@ export function useFocusWrap({
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         const next = getNextFocusable({
-          container: element,
+          container: el,
           direction
         });
         if (next) {
@@ -73,9 +73,9 @@ export function useFocusWrap({
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         const fallback = direction === 'forwards' ? getFirstFocusable({
-          container: element
+          container: el
         }) : getLastFocusable({
-          container: element
+          container: el
         });
         if (fallback) {
           fallback.focus();

package/dist/es2019/internal/use-initial-focus.js

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute - it only calls `.focus()` imperatively during commit, which
+ * attribute — it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.

package/dist/es2019/popover/popover.js

@@ -116,21 +116,21 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // the browser processes light dismiss), read in the toggle handler.
   const closeReasonRef = useRef('light-dismiss');
   const handleToggle = useCallback(event => {
-    const element = ownRef.current;
+    const el = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: true,
-          element: element
+          element: el
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: false,
-          element: element
+          element: el
         });
       }
 
@@ -148,13 +148,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
   }, [onClose, onOpenChange]);
   useEffect(() => {
-    const element = ownRef.current;
-    if (!element) {
+    const el = ownRef.current;
+    if (!el) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    const unbindEscape = bind(element, {
+    const unbindEscape = bind(el, {
       type: 'keydown',
       listener: event => {
         if (event.key === 'Escape') {
@@ -165,7 +165,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         capture: true
       }
     });
-    const unbindToggle = bind(element, {
+    const unbindToggle = bind(el, {
       type: 'toggle',
       listener: handleToggle
     });

package/dist/es2019/popup/popup-content.js

@@ -11,7 +11,7 @@ import { useMaybePopupContext } from './popup-context';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -88,7 +88,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser will not restore
+    // have shouldRestoreFocus=false, so the browser won't restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

package/dist/es2019/popup/popup-trigger.js

@@ -18,7 +18,7 @@ import { usePopupContext } from './popup-context';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead - it hands you raw props via a render-prop and avoids
+ * instead — it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export function PopupTrigger({
@@ -34,7 +34,7 @@ export function PopupTrigger({
   const childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // does not need isOpen in its dependency array (which would recreate
+  // doesn't need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   const isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/es2019/use-simple-light-dismiss/index.js

@@ -21,7 +21,7 @@ export function useSimpleLightDismiss({
   isOpen,
   onClose
 }) {
-  // Keep a stable ref to onClose so the effect does not re-bind on every render.
+  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(() => {

package/dist/esm/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
+ * - `::before` and `::after` are consumed — consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -39,7 +39,7 @@ function positionAreaToRuleName(_ref) {
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` — they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

package/dist/esm/dialog/dialog-content.js

@@ -119,12 +119,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId
-    // Modern browsers infer modal semantics from `.showModal()` but
-    // some assistive tech still keys off `aria-modal="true"`. Setting
-    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
-    ,
-    "aria-modal": "true",
+    id: dialogId,
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/focus/focus.js

@@ -38,10 +38,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
-    return element instanceof HTMLElement;
-  }).filter(function (element) {
-    return !filter || filter(element, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
+    return el instanceof HTMLElement;
+  }).filter(function (el) {
+    return !filter || filter(el, container);
   });
 }
 

package/dist/esm/internal/combine.js

@@ -16,8 +16,8 @@ export function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (callback) {
-      return callback === null || callback === void 0 ? void 0 : callback();
+    cleanupFns.forEach(function (fn) {
+      return fn === null || fn === void 0 ? void 0 : fn();
     });
   };
 }

package/dist/esm/internal/use-anchor-position.js

@@ -1,5 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
 /**
  * Anchor positioning for top-layer popovers. See
  * `notes/architecture/positioning.md` for the full model.
@@ -79,6 +77,20 @@ export function placementToPositionArea(_ref) {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export function placementToTryFallbacks(_ref2) {
   var placement = _ref2.placement;
@@ -94,9 +106,10 @@ export function placementToTryFallbacks(_ref2) {
     var _sameEdge = "".concat(axis, "-").concat(edge);
     var _oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
     var _flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+    var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+    // Try same-edge shifts first; two flip entries cover single-edge then corner overflow.
     // Legacy Popper fallbacks for e.g. bottom-start: [bottom, bottom-end, top-start, top, top-end, auto].
-    // Include same-edge centered so the browser can try center when start/end would overflow.
-    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
+    return ["".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _sameEdge, "".concat(_sameEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end'), _flipKeyword, "".concat(_flipKeyword, " ").concat(flipCrossKeyword), "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'end' : 'start'), _oppositeEdge, "".concat(_oppositeEdge, " span-").concat(crossAxis, "-").concat(align === 'start' ? 'start' : 'end')].join(', ');
   }
   var sameEdge = "".concat(axis, "-").concat(edge);
   var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
@@ -301,6 +314,12 @@ export function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
+      // Ensures the popup's margin box overflows the viewport when its span region is too
+      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
+      {
+        property: 'min-inline-size',
+        value: 'max-content'
+      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,
@@ -461,29 +480,7 @@ export function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to a no-op
-    // observer there — the scroll/resize listeners below still keep
-    // the popover positioned in the rare case the consumer also
-    // polyfilled `showPopover` but not `ResizeObserver`. Real
-    // browsers always have it.
-    var NoopResizeObserver = /*#__PURE__*/function () {
-      function NoopResizeObserver() {
-        _classCallCheck(this, NoopResizeObserver);
-      }
-      return _createClass(NoopResizeObserver, [{
-        key: "observe",
-        value: function observe() {}
-      }, {
-        key: "unobserve",
-        value: function unobserve() {}
-      }, {
-        key: "disconnect",
-        value: function disconnect() {}
-      }]);
-    }();
-    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    var resizeObserver = new ResizeObserverImpl(function () {
+    var resizeObserver = new ResizeObserver(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/esm/internal/use-animated-visibility.js

@@ -107,8 +107,8 @@ export function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var element = elementRef.current;
-    if (!element) {
+    var el = elementRef.current;
+    if (!el) {
       return;
     }
     function finish() {
@@ -122,7 +122,7 @@ export function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    var unbind = bind(element, {
+    var unbind = bind(el, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/esm/internal/use-focus-wrap.js

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` - this hook only intercepts Tab.
+ * via `popover="auto"` — this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -44,11 +44,11 @@ export function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   useEffect(function () {
-    var element = elementRef.current;
-    if (!element || !roleRequiresFocusWrap(role)) {
+    var el = elementRef.current;
+    if (!el || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = bind(element, {
+    var unbind = bind(el, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -60,7 +60,7 @@ export function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = getNextFocusable({
-          container: element,
+          container: el,
           direction: direction
         });
         if (next) {
@@ -72,9 +72,9 @@ export function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? getFirstFocusable({
-          container: element
+          container: el
         }) : getLastFocusable({
-          container: element
+          container: el
         });
         if (fallback) {
           fallback.focus();

package/dist/esm/internal/use-initial-focus.js

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute - it only calls `.focus()` imperatively during commit, which
+ * attribute — it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.

package/dist/esm/popover/popover.js

@@ -117,21 +117,21 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = useRef('light-dismiss');
   var handleToggle = useCallback(function (event) {
-    var element = ownRef.current;
+    var el = ownRef.current;
     if (event.newState === 'open') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: element
+          element: el
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (element) {
+      if (el) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: element
+          element: el
         });
       }
 
@@ -149,13 +149,13 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     }
   }, [onClose, onOpenChange]);
   useEffect(function () {
-    var element = ownRef.current;
-    if (!element) {
+    var el = ownRef.current;
+    if (!el) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = bind(element, {
+    var unbindEscape = bind(el, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -166,7 +166,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         capture: true
       }
     });
-    var unbindToggle = bind(element, {
+    var unbindToggle = bind(el, {
       type: 'toggle',
       listener: handleToggle
     });

package/dist/esm/popup/popup-content.js

@@ -11,7 +11,7 @@ import { useMaybePopupContext } from './popup-context';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -88,7 +88,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser will not restore
+    // have shouldRestoreFocus=false, so the browser won't restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the

package/dist/esm/popup/popup-trigger.js

@@ -18,7 +18,7 @@ import { usePopupContext } from './popup-context';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead - it hands you raw props via a render-prop and avoids
+ * instead — it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export function PopupTrigger(_ref) {
@@ -32,7 +32,7 @@ export function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // does not need isOpen in its dependency array (which would recreate
+  // doesn't need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/esm/use-simple-light-dismiss/index.js

@@ -20,7 +20,7 @@ export function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect does not re-bind on every render.
+  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
   var onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(function () {

package/dist/types/internal/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset, }: {
+export declare function ensurePresetStyles({ preset }: {
     preset: {
         css: string;
         name: string;

package/dist/types/internal/use-anchor-position.d.ts

@@ -53,6 +53,20 @@ export declare function placementToPositionArea({ placement }: {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export declare function placementToTryFallbacks({ placement }: {
     placement: TPlacementOptions;
@@ -118,7 +132,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path -
+     * Pass `null` to disable. Has no effect in the JS fallback path —
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` - this hook only intercepts Tab.
+ * via `popover="auto"` — this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types/popup/popup-content.d.ts

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead - it hands you raw props via a render-prop and avoids
+ * instead — it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` - the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
+     * - `reason: 'escape'` — the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently - if multiple popovers use this hook,
+     * instance will fire independently — if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset, }: {
+export declare function ensurePresetStyles({ preset }: {
     preset: {
         css: string;
         name: string;

package/dist/types-ts4.5/internal/use-anchor-position.d.ts

@@ -53,6 +53,20 @@ export declare function placementToPositionArea({ placement }: {
  * For aligned placements (start/end), includes the same-edge centered
  * position as fallbacks so the browser can try centering when the aligned
  * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally — it flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
  */
 export declare function placementToTryFallbacks({ placement }: {
     placement: TPlacementOptions;
@@ -118,7 +132,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path -
+     * Pass `null` to disable. Has no effect in the JS fallback path —
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types-ts4.5/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` - this hook only intercepts Tab.
+ * via `popover="auto"` — this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types-ts4.5/popup/popup-content.d.ts

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types-ts4.5/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead - it hands you raw props via a render-prop and avoids
+ * instead — it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` - the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
+     * - `reason: 'escape'` — the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently - if multiple popovers use this hook,
+     * instance will fire independently — if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.6.1",
+	"version": "0.6.2",
 	"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",