@atlaskit/top-layer 0.16.0 → 0.18.0

package/AGENTS.md

@@ -0,0 +1,113 @@
+## General
+
+In your language in comments, and user facing copy, please avoid em-dashes and contractions (prefer
+"do not" over "don't")
+
+## TypeScript authoring patterns:
+
+- Avoid `any`. Always look for opportunities to have more accurate types
+- Avoid `switch` statements, prefer `if` statements in functions with early returns
+- Avoid conditional assignment of variables. (Use functions, IIFE, etc. to avoid needing to use
+  `let`)
+- Avoid nested ternaries. Extract to a function with early returns instead.
+- Prefer explicit conversions for types (e.g. `Boolean(value)` and not `!!value` for booleans,
+  `Number(value)` for numbers, and `String(value)` for strings. For strings you can also use
+  template literals)
+- Never use `for` with missing parameters, e.g. `for(;;)`. Use other clearer patterns (`while(true)`
+  in this case)
+- Prefer function definitions `function getName(){}` over function assignment
+  `const getName = function(){}`.
+- Do not author `class`. For stateful constructs, use a factory function that closes over its state
+  and returns a plain object (e.g. `createClaudeClient({ apiKey })` instead of
+  `new ClaudeClient(apiKey)`). Third-party classes you must instantiate (e.g. SDK clients) are fine
+  to `new` inside the factory.
+- Prefer inline exports (`export function`, `export const`) over grouped `export { ... }` blocks at
+  the bottom of a file. This is also true for default exports (eg
+  `default export function hello(){}`)
+- Prefer discriminated unions for result types `{type: 'error', message: string}` over
+  `{error: true, message?: string}`
+- Avoid the `void` keyword: do not use `void` as a return type annotation (use explicit return types
+  or omit), and do not use the `void` operator (e.g. `void someExpression()`). You can use
+  `Promise<void>` though.
+- For functions that might return values, prefer functions that return an explicit `null` over
+  `undefined`.
+- For function parameters, prefer named arguments (e.g. a single destructured options object) over
+  positional parameters, even for single-parameter functions
+- Avoid regex when a clearer approach exists; use it when it would greatly simplify things.
+- If a module needs a helper function, put it above the caller. Ideally do not rely on hoisting
+- Always use blocks for conditions, do not do inline conditionals like
+  `if(condition) doSomething();`
+- Do not use non null assertions (e.g. `value!.condition`). Use `invariant` from `tiny-invariant`
+  (if the value should be there), or optional chaining (if it legitimately could be `null`)
+- When adding listeners to raw `EventTarget` objects (outside JSX), use `bind-event-listener`
+- When a function has cleanup actions (unsubscribe, cancel, teardown), return a cleanup function
+  (`TCleanupFn` from `@/types`). This mirrors the `useEffect` cleanup pattern
+- Use optional chaining
+- For arrays, prefer array methods (eg `map`, `filter` and `reduce`) over manual looping
+- Start type names with a `T` to make it clear they are types.
+- Avoid abbreviated variable names. Use descriptive names that read clearly (e.g. `transaction` not
+  `tx`, `user` not `u`, `config` not `cfg`, `event` not `e`). This applies to all variables
+  including lambda/callback parameters. Exceptions: `ctx` for canvas/React contexts, and `a`/`b` in
+  sort comparators.
+- For unused parameters or variables, prefix with `_` (e.g. `(_, index) => ...`, or `_unusedName` if
+  a descriptive marker reads better). ESLint accepts this via `argsIgnorePattern: '^_'`. Do not
+  invent placeholder names like `unused`.
+- When making functions that return booleans, always prefer function names that express a positive.
+  `function isValidUser():boolean {}` and not `function isInvalidUser(): boolean {}`
+- Prefer TypeScript `type` over `interface` unless there is functionality that requires an
+  `interface`
+
+## In code comments
+
+- Place comments on the line directly above the code they describe. Never place comments to the
+  right of code on the same line.
+- Code comments should be minimal, clear and accurate
+- Add code comments for anything that is non-obvious by looking at the code
+- Use `// comment` for single-line comments. Use JSDoc-style for multi-line documentation comments
+  (markdown is encouraged inside)
+- Do not use decorative separator comments (e.g. `// ── Section ──`, `// ───────...`). Use a plain
+  `// Section` comment instead or JSDoc blocks for larger comments:
+
+  ```ts
+  /**
+   * **Bold title**
+   *
+   * Some more content goes here
+   */`
+  ```
+
+## React rules
+
+- Always use named functions for components (eg `export function App() {})`
+- Prefer discriminated unions to model state, rather than having disconnected pieces of state. This
+  is the React embodiment of the discriminated unions rule in the TypeScript section above
+- Do not add `className` or `style` props to components as they are unbounded APIs
+- `forwardRef` is needed as this is a `react@18+` project.
+
+```ts
+// Do not do this:
+const [isLoading, setIsLoading] = useState(false);
+const [loaded, setLoaded] = useState(false);
+
+// Prefer discriminated unions, which makes illegal states impossible:
+type TState =
+	| { type: 'idle' }
+	| {
+			type: 'loading';
+	  }
+	| {
+			type: 'loaded';
+	  };
+const [state, setState] = useState<TState>({ type: 'idle' });
+```
+
+- Do not export class name strings from files (e.g. no `export const cardClasses = '...'`)
+- Never call a function from a parent context (e.g. a context action, a prop callback) during render
+  to update that parent's state. This causes React's "Cannot update a component while rendering a
+  different component" error. Use `useEffect` instead. Updating local state during render (the
+  getDerivedStateFromProps pattern) is fine.
+- If a react component needs to return a type, it should be `ReactNode` and not a JSX type.
+
+## Versioning
+
+This package is still on `0.x` releases. All changes should be a `minor` (`0.x`) release.

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/top-layer
 
+## 0.18.0
+
+### Minor Changes
+
+- [`b7ed2b39d3ef8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7ed2b39d3ef8) -
+  Internal: align code with package conventions. No functional changes
+
+## 0.17.0
+
+### Minor Changes
+
+- [`2fd74328732bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fd74328732bf) -
+  Add dialogMotion animation preset with token-based motion values and backdrop animation
+
 ## 0.16.0
 
 ### Minor Changes

package/README.md

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

package/animations/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/animations.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/animations.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/animations.d.ts"
 }

package/dialog/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/dialog.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/dialog.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/dialog.d.ts"
 }

package/dialog-scroll-lock/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/dialog-scroll-lock.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/dialog-scroll-lock.d.ts"
 }

package/dist/cjs/animations/presets.js

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

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

@@ -57,8 +57,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var dialogId = providedId !== null && providedId !== void 0 ? providedId : generatedId;
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
-
-  // Animation lifecycle
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animate: animate,
@@ -68,31 +66,22 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     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).
   (0, _useFocusWrap.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.
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
     type: 'modal',
@@ -100,8 +89,6 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: _noop.default
   });
-
-  // Show/hide the dialog in response to isOpen changes.
   (0, _react.useLayoutEffect)(function () {
     var dialog = ownRef.current;
     if (!dialog) {
@@ -159,15 +146,10 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   // 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/cjs/entry-points/animations.js

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

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

@@ -9,7 +9,7 @@ exports.setStyle = setStyle;
  * restores the prior inline values (so we do not stomp consumer styles).
  */
 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
@@ -18,23 +18,23 @@ 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/cjs/internal/slot.js

@@ -52,7 +52,7 @@ function isSlotChild(child) {
 var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = (0, _objectWithoutProperties2.default)(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/cjs/internal/use-anchor-position-at-point.js

@@ -11,7 +11,7 @@ var _useAnchorPosition = require("./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.
@@ -22,19 +22,19 @@ var _useAnchorPosition = require("./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.
@@ -80,7 +80,7 @@ function useAnchorPositionAtPoint(_ref) {
   var syntheticAnchorRef = (0, _react.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 = (0, _react.useRef)(getPoint);
   getPointRef.current = getPoint;
@@ -116,7 +116,7 @@ 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.
   (0, _useAnchorPosition.useAnchorPosition)({