@atlaskit/top-layer 0.16.0 → 0.18.0

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

@@ -128,8 +128,6 @@ function getInitialFocusTarget({
     });
   }
   if (role === 'menu') {
-    // ARIA Combobox Pattern: if the popup is owned by a focused combobox,
-    // leave focus on the textbox. Navigation is proxied via the combobox.
     if (isComboboxControllingPopup({
       container
     })) {
@@ -146,9 +144,9 @@ function getInitialFocusTarget({
     });
   }
   if (role === 'listbox') {
-    // ARIA Combobox Pattern: if the popup is owned by a focused
-    // combobox-like textbox (in-popup or external e.g. react-select),
-    // leave focus on the textbox. Navigation is proxied via the combobox.
+    // ARIA Combobox Pattern: if a combobox-like textbox owns the popup
+    // (in-popup or external e.g. react-select), leave focus on the
+    // textbox - navigation is proxied through it.
     if (isComboboxControllingPopup({
       container
     })) {
@@ -210,7 +208,7 @@ function getInitialFocusTarget({
  *   `<dialog>.close()`. If the consumer reopens before the exit transition
  *   has settled, the phase machine jumps `exiting → entering` without
  *   passing through `closed`, so without this branch the popup would be
- *   visible again with focus stranded on the trigger — a keyboard usability
+ *   visible again with focus stranded on the trigger - a keyboard usability
  *   gap for menu/dialog/listbox roles.
  *
  * Note: there is a rare programmatic path where a consumer flips `isOpen`
@@ -252,22 +250,20 @@ export function useInitialFocus({
     const prevPhase = prevPhaseRef.current;
     prevPhaseRef.current = phase;
 
-    // Skip the `phase === 'closed'` transitions (host is going away,
-    // nothing to focus) and any transition whose previous phase was
-    // neither `'closed'` (fresh open) nor `'exiting'` (mid-exit
-    // reopen, focus already on the trigger).
+    // Only focus on transitions into a visible phase from `'closed'`
+    // (fresh open) or `'exiting'` (mid-exit reopen).
     if (phase === 'closed') {
       return;
     }
     if (prevPhase !== 'closed' && prevPhase !== 'exiting') {
       return;
     }
-    const el = elementRef.current;
-    if (!el) {
+    const element = elementRef.current;
+    if (!element) {
       return;
     }
     (_getInitialFocusTarge = getInitialFocusTarget({
-      container: el,
+      container: element,
       role
     })) === null || _getInitialFocusTarge === void 0 ? void 0 : _getInitialFocusTarge.focus();
   }, [elementRef, phase, role]);

package/dist/es2019/internal/use-width-from-anchor.js

@@ -36,7 +36,7 @@ export function useWidthFromAnchor({
       // explicit width constraint, allowing the popover to grow past the anchor's width.
       if (supportsAnchorSize) {
         return setStyle({
-          el: node,
+          element: node,
           styles: [{
             property: 'width',
             value: 'anchor-size(width)'
@@ -48,7 +48,7 @@ export function useWidthFromAnchor({
       const anchor = anchorRef.current;
       if (anchor) {
         return setStyle({
-          el: node,
+          element: node,
           styles: [{
             property: 'width',
             value: `${anchor.offsetWidth}px`
@@ -70,7 +70,7 @@ export function useWidthFromAnchor({
       // if its content requires it.
       if (supportsAnchorSize) {
         return setStyle({
-          el: node,
+          element: node,
           styles: [minInlineSizeStyle, {
             property: 'min-width',
             value: 'anchor-size(width)'
@@ -80,7 +80,7 @@ export function useWidthFromAnchor({
       const anchor = anchorRef.current;
       if (anchor) {
         return setStyle({
-          el: node,
+          element: node,
           styles: [minInlineSizeStyle, {
             property: 'min-width',
             value: `${anchor.offsetWidth}px`
@@ -90,14 +90,14 @@ export function useWidthFromAnchor({
 
       // No anchor available in JS fallback - still apply min-inline-size.
       return setStyle({
-        el: node,
+        element: node,
         styles: [minInlineSizeStyle]
       });
     }
 
     // 'none' mode: no explicit width, but still apply `min-inline-size: max-content`.
     return setStyle({
-      el: node,
+      element: node,
       styles: [minInlineSizeStyle]
     });
   }, [mode, popoverRef, anchorRef, isOpen]);

package/dist/es2019/popover/popover.js

@@ -19,9 +19,9 @@ const supportsPopoverHint = once(() => {
     return false;
   }
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- feature detection
-  const el = document.createElement('div');
-  el.setAttribute('popover', 'hint');
-  return el.popover === 'hint';
+  const element = document.createElement('div');
+  element.setAttribute('popover', 'hint');
+  return element.popover === 'hint';
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- popover UA reset requires values not in cssMap's type union
@@ -65,9 +65,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   const autoId = useId();
   const ownRef = useRef(null);
   const combinedRef = mergeRefs([ownRef, ref].filter(Boolean));
-  // React 18 `useId()` returns IDs with colons (invalid in CSS selectors
-  // and popover target attributes). Strip them; remove once React 18 is
-  // dropped (React 19.2 uses underscores).
+  // `useId()` colons are invalid in CSS selectors and popover target attributes.
   const popoverId = idProp !== null && idProp !== void 0 ? idProp : `popover-${autoId.replace(/:/g, '')}`;
   const {
     phase,
@@ -80,21 +78,15 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     onExitFinish
   });
 
-  // Pre-computed phase predicate. `isVisible` mirrors "host element is
-  // mounted and on screen" (any phase except `closed`); used as a dep
-  // signal for listener-re-bind effects so they re-attach to the fresh
-  // host element after a close → reopen unmount/remount cycle.
+  // True while the host element is mounted (any phase except `closed`).
+  // Used as a dep so listener-rebind effects re-attach after a remount.
   const isVisible = phase !== 'closed';
 
   // Focus management: initial focus on entry (role-dependent), Tab cycling
   // for dialog roles. Restoration is native for outermost popovers; nested
-  // focus-capturing roles are handled below via `beforetoggle` snapshot.
-  // See: notes/architecture/focus-restoration.md
-  //
-  // Both hooks take `phase` directly: `useFocusWrap` keeps its listener
-  // attached while `phase !== 'closed'` (so focus stays trapped through
-  // the animated-exit window — WCAG 2.4.3 regression guard);
-  // `useInitialFocus` moves focus on the transition into `'open'`.
+  // focus-capturing roles are handled below via the `beforetoggle` snapshot.
+  // Passing `phase` keeps `useFocusWrap` attached through the animated-exit
+  // window (WCAG 2.4.3 guard). See notes/architecture/focus-restoration.md.
   useFocusWrap({
     elementRef: ownRef,
     role,
@@ -191,7 +183,6 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
 
       // Browser dismiss (Escape/click-outside).
       const reason = closeReasonRef.current;
-      // reset for next dismiss
       closeReasonRef.current = 'light-dismiss';
       // Optional: `manual` mode has no `onClose` in the forwarded type.
       onClose === null || onClose === void 0 ? void 0 : onClose({
@@ -200,21 +191,12 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
   }, [onClose, onOpenChange, role]);
 
-  // Bind toggle/beforetoggle/keydown listeners via `useLayoutEffect` so
-  // they are attached BEFORE the show/hide layout effect calls
-  // `el.showPopover()`. `showPopover()` dispatches `beforetoggle`
-  // synchronously; binding the listener in a regular `useEffect`
-  // (which runs after layout effects) misses that first dispatch and
-  // the `previouslyFocusedElementRef` snapshot never gets taken — which
-  // breaks nested-popover focus restoration on close.
-  //
-  // `isVisible` is in deps so the listeners re-bind to the new host
-  // element after a host unmount/remount cycle. The cleanup detaches
-  // the old listeners.
-  //
-  // This layout effect MUST appear in the file before the show/hide
-  // layout effect — React runs layout effects in source order on the
-  // same commit, and we need listeners attached first.
+  // Bind via `useLayoutEffect`, and BEFORE the show/hide layout effect
+  // below, so listeners are attached when `showPopover()` synchronously
+  // dispatches `beforetoggle`. A regular `useEffect` would miss that
+  // first dispatch, dropping the `previouslyFocusedElementRef` snapshot
+  // and breaking nested-popover focus restoration on close. React runs
+  // layout effects in source order on the same commit.
   useLayoutEffect(() => {
     const element = ownRef.current;
     if (!element) {
@@ -250,20 +232,17 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   }, [handleToggle, handleBeforeToggle, isVisible]);
 
   // Placement-dependent animation CSS vars. Kept separate from show/hide
-  // so preset reference changes do not re-trigger visibility. `isVisible`
-  // is in deps so the CSS vars are re-applied to the new host element after
-  // a remount cycle (otherwise the freshly mounted element would have no
-  // transform / placement vars set).
+  // so preset reference changes do not re-trigger visibility.
   useLayoutEffect(() => {
-    const el = ownRef.current;
-    if (!el || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
+    const element = ownRef.current;
+    if (!element || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
       return;
     }
     const props = preset.getProperties({
       placement
     });
     Object.entries(props).forEach(([key, value]) => {
-      el.style.setProperty(key, String(value));
+      element.style.setProperty(key, String(value));
     });
   }, [preset, placement, isVisible]);
 
@@ -271,42 +250,35 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // already in the target state. Try/catch guards `InvalidStateError` on
   // disconnected elements (StrictMode/concurrent/unmount edge cases).
   useLayoutEffect(() => {
-    const el = ownRef.current;
-    if (!el) {
+    const element = ownRef.current;
+    if (!element) {
       return;
     }
     if (isOpen) {
       programmaticCloseRef.current = false;
-      // Reset the close-reason snapshot at the start of every open
-      // cycle. The ref outlives the host element (lives on the
-      // component, not the DOM), so a stale 'escape' from a prior
-      // cycle would otherwise leak into the next close — especially
-      // in the no-animation path where the host unmounts before
-      // `handleToggle` has a chance to reset the ref itself.
+      // Clear stale 'escape' from a prior cycle: the ref outlives
+      // the host element, and the no-animation path unmounts before
+      // `handleToggle` can reset it.
       closeReasonRef.current = 'light-dismiss';
       try {
-        el.showPopover();
+        element.showPopover();
       } catch {}
       return () => {
         programmaticCloseRef.current = true;
         try {
-          el.hidePopover();
+          element.hidePopover();
         } catch {}
       };
     }
     programmaticCloseRef.current = true;
     try {
-      el.hidePopover();
+      element.hidePopover();
     } catch {}
   }, [isOpen]);
 
-  // The host element is only rendered while the popover is open or its exit
-  // animation is playing. Once the phase returns to `closed`, we unmount
-  // the host entirely so it does not leave an empty `role="..."` /
-  // `popover` element in the accessibility tree. The element re-mounts on
-  // the next `isOpen=true` commit; refs and event listeners re-bind via
-  // the existing layout effect and `useEffect`. The popover `id` is stable
-  // across opens (derived from `useId()` or the consumer-supplied `idProp`).
+  // Unmount the host once exit completes so it does not leave an empty
+  // `role`/`popover` element in the accessibility tree. The element
+  // remounts on the next open; the `popoverId` is stable across opens.
   if (!isVisible) {
     return null;
   }

package/dist/es2019/popover-surface/popover-surface.js

@@ -1,7 +1,7 @@
 /* popover-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./popover-surface.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
 const styles = {
   root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
 };

package/dist/es2019/testing/polyfill.js

@@ -367,17 +367,13 @@ function hidePopoversInStackNotInChainTo({
   stack,
   target
 }) {
-  const snapshot = stack.slice();
-  for (let i = snapshot.length - 1; i >= 0; i -= 1) {
-    const popover = snapshot[i];
-    if (isInChainTo({
-      candidate: popover,
-      target
-    })) {
-      break;
-    }
-    popover.hidePopover();
-  }
+  const snapshot = stack.slice().reverse();
+  const stopIndex = snapshot.findIndex(popover => isInChainTo({
+    candidate: popover,
+    target
+  }));
+  const toHide = stopIndex === -1 ? snapshot : snapshot.slice(0, stopIndex);
+  toHide.forEach(popover => popover.hidePopover());
 }
 
 // Two-phase light-dismiss: pointerdown stores the nearest open popover for

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

@@ -54,13 +54,13 @@ export function useSimpleLightDismiss({
     const unbindClickOutside = bind(document, {
       type: 'click',
       listener: event => {
-        const el = popoverRef.current;
-        if (!el) {
+        const element = popoverRef.current;
+        if (!element) {
           return;
         }
 
         // If the click target is inside the popover, do not dismiss.
-        if (event.target instanceof Node && el.contains(event.target)) {
+        if (event.target instanceof Node && element.contains(event.target)) {
           return;
         }
         onCloseRef.current({

package/dist/esm/animations/presets.js

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

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

@@ -48,8 +48,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var dialogId = providedId !== null && providedId !== void 0 ? providedId : generatedId;
   var ownRef = useRef(null);
   var combinedRef = mergeRefs([ownRef, ref]);
-
-  // Animation lifecycle
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
       animate: animate,
@@ -59,31 +57,22 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     phase = _useAnimatedVisibilit.phase,
     preset = _useAnimatedVisibilit.preset;
 
-  // Pre-computed phase predicate. `isVisible` means "host element is
-  // mounted and on screen" (any phase except `closed`), used as a dep
-  // signal for the backdrop-click rebind effect so it re-attaches to
-  // the fresh <dialog> element after a close → reopen unmount/remount
-  // cycle.
+  // True while the host element is mounted (any phase except `closed`).
+  // Used as a dep so listener-rebind effects re-attach after a remount.
   var isVisible = phase !== 'closed';
 
-  // Focus wrap
-  // Native <dialog>.showModal() traps focus but wraps through <body> at
-  // the boundary (A → B → C → body → A). This hook intercepts Tab to
-  // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
-  //
-  // Takes `phase` directly: the listener stays attached while
-  // `phase !== 'closed'`, i.e. through the animated-exit window.
-  // Gating on `isOpen` would unbind the listener at the start of an
-  // exit animation while the dialog is still visible, letting focus
-  // escape (WCAG 2.4.3 Focus Order regression).
+  // Native `<dialog>.showModal()` traps focus but wraps through `<body>` at
+  // the boundary (A → B → C → body → A). This hook intercepts Tab to wrap
+  // directly (A → B → C → A), matching the WAI-ARIA APG pattern. Passing
+  // `phase` keeps the listener attached through the animated-exit window
+  // (WCAG 2.4.3 Focus Order regression guard).
   useFocusWrap({
     elementRef: ownRef,
     role: 'dialog',
     phase: phase
   });
 
-  // Open layer observer registration
-  // Notifies the open layer observer so app-coordination features
+  // Notify the open layer observer so app-coordination features
   // (open-count subscriptions) work with top-layer dialogs.
   useNotifyOpenLayerObserver({
     type: 'modal',
@@ -91,8 +80,6 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
     // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: noop
   });
-
-  // Show/hide the dialog in response to isOpen changes.
   useLayoutEffect(function () {
     var dialog = ownRef.current;
     if (!dialog) {
@@ -150,15 +137,10 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   // any atomic class, so the override always wins.
   var escapedId = CSS.escape(dialogId);
 
-  // The `<dialog>` host element is only rendered while open or its exit
-  // animation is playing. After exit completes the phase returns to
-  // `closed` and we unmount the dialog entirely so it does not leave an
-  // empty `role="dialog"` element in the accessibility tree. The element
-  // re-mounts on the next `isOpen=true` commit; `showModal()` is called
-  // from the existing `useLayoutEffect([isOpen])` on that same commit,
-  // and listeners (cancel, click) re-bind via the `[onClose, isVisible]`
-  // effect re-running after remount (React clears the ref on unmount, so
-  // we need the listener effect to re-run with the fresh element).
+  // Unmount the `<dialog>` once exit completes so it does not leave an
+  // empty `role="dialog"` element in the accessibility tree. On the next
+  // open the element remounts and the `[isOpen]` and `[onClose, isVisible]`
+  // effects re-run against the fresh element.
   if (!isVisible) {
     return null;
   }

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

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

package/dist/esm/internal/set-style.js

@@ -3,7 +3,7 @@
  * restores the prior inline values (so we do not stomp consumer styles).
  */
 export function setStyle(_ref) {
-  var el = _ref.el,
+  var element = _ref.element,
     styles = _ref.styles;
   // Snapshot the prior inline value (NOT the computed style - we only want
   // to restore values that the consumer/our previous run inlined). An empty
@@ -12,23 +12,23 @@ export function setStyle(_ref) {
     var property = _ref2.property;
     return {
       property: property,
-      value: el.style.getPropertyValue(property)
+      value: element.style.getPropertyValue(property)
     };
   });
   styles.forEach(function (_ref3) {
     var property = _ref3.property,
       value = _ref3.value;
-    el.style.setProperty(property, value);
+    element.style.setProperty(property, value);
   });
   return function cleanup() {
     priorValues.forEach(function (_ref4) {
       var property = _ref4.property,
         value = _ref4.value;
       if (value === '') {
-        el.style.removeProperty(property);
+        element.style.removeProperty(property);
         return;
       }
-      el.style.setProperty(property, value);
+      element.style.setProperty(property, value);
     });
   };
 }

package/dist/esm/internal/slot.js

@@ -46,7 +46,7 @@ function isSlotChild(child) {
 export var Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = _objectWithoutProperties(slotProps, _excluded);
-  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   var children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

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

@@ -6,7 +6,7 @@ import { useAnchorPosition } from './use-anchor-position';
  * anchor should be placed.
  *
  * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
- * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * shape is unambiguous in RTL writing modes - there is no ambiguity
  * about whether a coordinate is logical (`inline-start`/`block-start`)
  * or physical (`left`/`top`). Viewport coordinates are always
  * physical, so we name them with the physical axis labels.
@@ -17,19 +17,19 @@ import { useAnchorPosition } from './use-anchor-position';
  * Dynamic `inset-*` overrides are written by the positioning effect.
  *
  * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
- * or the internal `setStyle` helper (we own this element entirely — it is created
- * and removed by this hook — so the snapshot/restore semantics `setStyle`
+ * or the internal `setStyle` helper (we own this element entirely - it is created
+ * and removed by this hook - so the snapshot/restore semantics `setStyle`
  * provides for caller-owned elements would be dead work here).
  */
-function applyStaticAnchorStyles(el) {
-  Object.assign(el.style, {
+function applyStaticAnchorStyles(element) {
+  Object.assign(element.style, {
     position: 'fixed',
     // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
     // for consistency with the dynamic positioning effect below, which
     // uses physical properties (see comment there for the rationale).
     top: '0',
     left: '0',
-    // Zero size — placement decides which side the popover sits on.
+    // Zero size - placement decides which side the popover sits on.
     width: '0',
     height: '0',
     // Prevent the overlay from intercepting pointer events.
@@ -75,7 +75,7 @@ export function useAnchorPositionAtPoint(_ref) {
   var syntheticAnchorRef = useRef(null);
 
   // `getPoint` is kept in a ref so the layout effect can call the
-  // latest version without listing it as a dep — that would re-fire
+  // latest version without listing it as a dep - that would re-fire
   // on every render and re-latch the point.
   var getPointRef = useRef(getPoint);
   getPointRef.current = getPoint;
@@ -111,7 +111,7 @@ export function useAnchorPositionAtPoint(_ref) {
     };
   }, [isEnabled]);
 
-  // Mirror `isEnabled` so both hooks stay in sync — when disabled,
+  // Mirror `isEnabled` so both hooks stay in sync - when disabled,
   // neither this hook nor the inner one touches the popover, leaving
   // any other positioning the consumer has set up free to take effect.
   useAnchorPosition({