@atlaskit/top-layer 0.1.0

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInitialFocus = useInitialFocus;
+var _react = require("react");
+var _focus = require("../focus/focus");
+/**
+ * Determines the correct element to receive initial focus within a popover,
+ * based on its ARIA role.
+ *
+ * Focus rules by role (per WAI-ARIA APG):
+ * - `dialog` / `alertdialog`: first element with `[autofocus]`, or first focusable element
+ * - `menu`: first menu item (`[role="menuitem|menuitemcheckbox|menuitemradio"]`)
+ * - `listbox`: first selected option (`[aria-selected="true"]`), or first option (`[role="option"]`)
+ * - `tooltip`: no focus movement (tooltips are informational)
+ * - 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
+ * 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.
+ */
+function getInitialFocusTarget(_ref) {
+  var container = _ref.container;
+  var role = container.getAttribute('role');
+  if (role === 'dialog' || role === 'alertdialog') {
+    // Prefer element with the native HTML autofocus attribute.
+    var autofocusEl = container.querySelector('[autofocus]');
+    if (autofocusEl) {
+      return autofocusEl;
+    }
+    // Fall back to first focusable element
+    return (0, _focus.getFirstFocusable)({
+      container: container
+    });
+  }
+  if (role === 'menu') {
+    // Initial focus placement is the extent of what top-layer provides
+    // for menus. All subsequent keyboard navigation (arrow keys, Home/End,
+    // type-ahead, Enter/Space, submenu coordination) is the responsibility
+    // of the consumer component (e.g. dropdown-menu), because menu keyboard
+    // behavior varies by context (orientation, nesting, item type, control
+    // pattern). See: notes/outputs/menu-keyboard-decision.md
+    return (0, _focus.getFirstFocusable)({
+      container: container
+    });
+  }
+  if (role === 'listbox') {
+    // Prefer selected option, fall back to first focusable
+    var selectedOption = container.querySelector('[role="option"][aria-selected="true"]');
+    if (selectedOption) {
+      return selectedOption;
+    }
+    return (0, _focus.getFirstFocusable)({
+      container: container
+    });
+  }
+
+  // tooltip, no role, or other roles: no focus movement
+  return null;
+}
+
+/**
+ * Moves focus into a popover element when it opens, based on its ARIA role.
+ *
+ * This implements WCAG 2.4.3 (Focus Order) initial focus placement:
+ * - `dialog` / `alertdialog` → focus first focusable (or `[autofocus]`)
+ * - `menu` → focus first menu item
+ * - `listbox` → focus selected or first option
+ * - `tooltip` / no role → no focus movement
+ *
+ * The role is read from the element's `role` attribute (not passed as a prop),
+ * following the same pattern as `useFocusWrap`.
+ *
+ * Always call this hook unconditionally. Focus is only moved when `isOpen`
+ * transitions to `true` and the role requires it.
+ */
+function useInitialFocus(_ref2) {
+  var elementRef = _ref2.elementRef,
+    isOpen = _ref2.isOpen,
+    role = _ref2.role;
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      return;
+    }
+    var el = elementRef.current;
+    if (!el) {
+      return;
+    }
+
+    // Use requestAnimationFrame to ensure the popover is fully rendered
+    // and visible in the top layer before attempting to move focus.
+    // showPopover() is called in useLayoutEffect (which runs before this
+    // useEffect), so by the time the RAF fires after the next paint the
+    // element is guaranteed to be in the top layer.
+    var rafId = requestAnimationFrame(function () {
+      var _getInitialFocusTarge;
+      (_getInitialFocusTarge = getInitialFocusTarget({
+        container: el
+      })) === null || _getInitialFocusTarge === void 0 || _getInitialFocusTarge.focus();
+    });
+    return function () {
+      cancelAnimationFrame(rafId);
+    };
+    // We intentionally depend on `role` even though `getInitialFocusTarget`
+    // reads from the DOM attribute. This ensures the effect re-runs if
+    // the role prop changes while the popover is open.
+  }, [elementRef, isOpen, role]);
+}

package/dist/cjs/internal/use-preset-styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePresetStyles = usePresetStyles;
+var _react = require("react");
+var _ensurePresetStyles = require("./ensure-preset-styles");
+/**
+ * Normalizes a preset prop to a value (or null) and ensures its CSS
+ * is injected once into `document.head`.
+ *
+ * Works with any preset that has `{ css, name }` — animation presets
+ * (TAnimationPreset) and arrow presets (TArrowPreset) both satisfy this shape.
+ */
+function usePresetStyles(_ref) {
+  var preset = _ref.preset;
+  var resolved = preset != null && preset !== false ? preset : null;
+  (0, _react.useInsertionEffect)(function () {
+    if (resolved) {
+      (0, _ensurePresetStyles.ensurePresetStyles)({
+        preset: resolved
+      });
+    }
+  }, [resolved]);
+  return resolved;
+}

package/dist/cjs/placement-map/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fromLegacyPlacement = fromLegacyPlacement;
+exports.placementMapping = void 0;
+/**
+ * Legacy Popper.js placement values (used by `@atlaskit/popper`, `@atlaskit/popup`,
+ * `@atlaskit/tooltip`, etc.).
+ */
+
+/**
+ * Maps legacy Popper.js placement values to the new object-based
+ * `Placement` values used by `@atlaskit/top-layer/popover`.
+ *
+ * **Mapping logic:**
+ *
+ * | Legacy (Popper.js)  | New (Placement object)                              |
+ * | ------------------- | --------------------------------------------------- |
+ * | `top`               | `{ axis: 'block', edge: 'start', align: 'center' }`  |
+ * | `top-start`         | `{ axis: 'block', edge: 'start', align: 'start' }`   |
+ * | `top-end`           | `{ axis: 'block', edge: 'start', align: 'end' }`     |
+ * | `bottom`            | `{ axis: 'block', edge: 'end', align: 'center' }`    |
+ * | `bottom-start`      | `{ axis: 'block', edge: 'end', align: 'start' }`     |
+ * | `bottom-end`        | `{ axis: 'block', edge: 'end', align: 'end' }`       |
+ * | `right`             | `{ axis: 'inline', edge: 'end', align: 'center' }`   |
+ * | `right-start`       | `{ axis: 'inline', edge: 'end', align: 'start' }`    |
+ * | `right-end`         | `{ axis: 'inline', edge: 'end', align: 'end' }`      |
+ * | `left`              | `{ axis: 'inline', edge: 'start', align: 'center' }` |
+ * | `left-start`        | `{ axis: 'inline', edge: 'start', align: 'start' }`  |
+ * | `left-end`          | `{ axis: 'inline', edge: 'start', align: 'end' }`    |
+ * | `auto`              | `{ axis: 'block', edge: 'end', align: 'center' }`    |
+ * | `auto-start`        | `{ axis: 'block', edge: 'end', align: 'start' }`     |
+ * | `auto-end`          | `{ axis: 'block', edge: 'end', align: 'end' }`       |
+ *
+ * The `position-try-fallbacks` CSS property handles flipping automatically.
+ *
+ * @example
+ * ```ts
+ * import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+ *
+ * // In a migration from @atlaskit/popup:
+ * const oldPlacement: TLegacyPlacement = 'bottom-start';
+ * const newPlacement: TPlacementOptions = fromLegacyPlacement({ legacy: oldPlacement });
+ * // newPlacement === { axis: 'block', edge: 'end', align: 'start' }
+ * ```
+ */
+var placementMapping = exports.placementMapping = {
+  top: {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-start': {
+    axis: 'block',
+    edge: 'start',
+    align: 'start'
+  },
+  'top-center': {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-end': {
+    axis: 'block',
+    edge: 'start',
+    align: 'end'
+  },
+  bottom: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'bottom-center': {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  },
+  right: {
+    axis: 'inline',
+    edge: 'end',
+    align: 'center'
+  },
+  'right-start': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'start'
+  },
+  'right-end': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'end'
+  },
+  left: {
+    axis: 'inline',
+    edge: 'start',
+    align: 'center'
+  },
+  'left-start': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'start'
+  },
+  'left-end': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'end'
+  },
+  auto: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'auto-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'auto-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  }
+};
+
+/**
+ * Convert a legacy Popper.js placement to the new CSS `position-area`-based Placement.
+ */
+function fromLegacyPlacement(_ref) {
+  var legacy = _ref.legacy;
+  return placementMapping[legacy];
+}
+
+/**
+ * The full mapping record, exposed for consumers that need to iterate or introspect.
+ */

package/dist/cjs/popover/create-close-event.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPopoverCloseEvent = createPopoverCloseEvent;
+/**
+ * Creates a synthetic DOM event from a `TPopoverCloseReason`.
+ *
+ * Useful when bridging the Popover primitive's `onClose({ reason })` callback
+ * to a legacy API that expects a native DOM event — for example,
+ * `@atlaskit/inline-dialog`'s `onClose(event)` contract.
+ *
+ * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
+ * - `'light-dismiss'` → `MouseEvent('click')`
+ *
+ * For any other reason, a generic `Event('close')` is returned as a fallback.
+ *
+ * @example
+ * ```tsx
+ * import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
+ * import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
+ *
+ * function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
+ *   legacyOnClose(createPopoverCloseEvent({ reason }));
+ * }
+ * ```
+ */
+function createPopoverCloseEvent(_ref) {
+  var reason = _ref.reason;
+  if (reason === 'escape') {
+    return new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true
+    });
+  }
+  if (reason === 'light-dismiss') {
+    return new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true
+    });
+  }
+  return new Event('close');
+}

package/dist/cjs/popover/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _popover.Popover;
+  }
+});
+Object.defineProperty(exports, "createPopoverCloseEvent", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseEvent.createPopoverCloseEvent;
+  }
+});
+var _popover = require("./popover");
+var _createCloseEvent = require("./create-close-event");

package/dist/cjs/popover/popover.compiled.css

@@ -0,0 +1,13 @@
+
+._19itglyw{border:none}
+._1r041wug{inset:auto}._18m9ewfl{overflow-y:visible}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19pkidpf{margin-top:0}
+._1reoewfl{overflow-x:visible}
+._2hwxidpf{margin-right:0}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/cjs/popover/popover.js

@@ -0,0 +1,251 @@
+/* popover.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popover = void 0;
+require("./popover.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _useAnimatedVisibility = require("../internal/use-animated-visibility");
+var _useFocusWrap = require("../internal/use-focus-wrap");
+var _useInitialFocus = require("../internal/use-initial-focus");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Detects whether the browser supports the `popover="hint"` attribute value.
+ * Uses DOM reflection: unsupported browsers reflect the invalid value default ("manual").
+ * Safe for SSR. Result is cached via `once`.
+ */
+var supportsPopoverHint = (0, _once.default)(function () {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- feature detection
+  var el = document.createElement('div');
+  el.setAttribute('popover', 'hint');
+  return el.popover === 'hint';
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- popover UA reset requires values not in cssMap's type union
+var styles = {
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
+};
+/**
+ * Unopinionated top-layer primitive.
+ *
+ * Manages only visibility (isOpen) and animation (animate). Has no knowledge
+ * of positioning — compose with `useAnchorPosition` for anchor positioning.
+ *
+ * Visibility is driven by the `isOpen` prop:
+ * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`
+ * - `isOpen={false}` → `hidePopover()`, exit animation via `allow-discrete`
+ *
+ * For `mode="auto"`, the browser can dismiss the popover via light dismiss
+ * (Escape, click outside). When that happens, `onClose` is called and the
+ * consumer must set `isOpen` to `false`. The DOM owns the dismiss — React
+ * must follow.
+ */
+var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Popover(_ref, ref) {
+  var children = _ref.children,
+    _ref$mode = _ref.mode,
+    modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? _noop.default : _ref$onClose,
+    onOpenChange = _ref.onOpenChange,
+    onExitFinish = _ref.onExitFinish,
+    animate = _ref.animate,
+    placement = _ref.placement,
+    testId = _ref.testId,
+    isOpen = _ref.isOpen,
+    role = _ref.role,
+    label = _ref.label,
+    labelledBy = _ref.labelledBy,
+    idProp = _ref.id;
+  var autoId = (0, _react.useId)();
+  var ownRef = (0, _react.useRef)(null);
+  var combinedRef = (0, _mergeRefs.default)([ownRef, ref].filter(Boolean));
+  // Regex is intentional — `replaceAll` is not available in our supported
+  // browser matrix. In React 18, `useId()` returns IDs containing colons
+  // (e.g. `:r1:`) which are invalid in CSS selectors and `popover` target
+  // attributes. React 19.2.0 replaced colons with underscores, making this
+  // stripping unnecessary once React 18 support is dropped.
+  var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
+  var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
+      isOpen: isOpen,
+      animate: animate,
+      elementRef: ownRef,
+      onExitFinish: onExitFinish
+    }),
+    showChildren = _useAnimatedVisibilit.showChildren,
+    preset = _useAnimatedVisibilit.preset;
+
+  // ── Focus management ──
+  // Initial focus: on open, moves focus into the popover (role-dependent).
+  // Focus wrap: Tab/Shift+Tab cycle within the popover for dialog roles.
+  // Focus restoration: handled natively by the Popover API — the browser
+  //   tracks `previouslyFocusedElement` on show and restores it on hide.
+  //   No custom restoration hook is needed. See: notes/architecture/focus-restoration.md
+  (0, _useFocusWrap.useFocusWrap)({
+    elementRef: ownRef,
+    role: role
+  });
+  (0, _useInitialFocus.useInitialFocus)({
+    elementRef: ownRef,
+    isOpen: isOpen,
+    role: role
+  });
+
+  // Hint mode fallback: "hint" downgrades to "auto" if unsupported.
+  //
+  // Decision (2026-03-17 audit): We keep "auto" as the fallback (not "manual")
+  // because it provides the closest behavior to "hint" (light dismiss works).
+  // However, there is a behavioral difference: "auto" participates in the
+  // auto-dismiss stack and WILL close other "auto" popovers when it opens
+  // (e.g. a tooltip opening will close an open dropdown). "hint" does not
+  // have this side effect. This difference only affects browsers without
+  // popover="hint" support, and that set is shrinking rapidly.
+  var mode = modeProp === 'hint' && !supportsPopoverHint() ? 'auto' : modeProp;
+
+  // Distinguishes programmatic hidePopover() from browser-initiated dismiss.
+  // When we call hidePopover() ourselves the toggle event fires synchronously —
+  // this ref prevents the toggle handler from calling onClose redundantly.
+  var programmaticCloseRef = (0, _react.useRef)(false);
+
+  // Escape key tracking: set in a capture-phase keydown listener (fires before
+  // 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 el = ownRef.current;
+    if (event.newState === 'open') {
+      if (el) {
+        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
+          isOpen: true,
+          element: el
+        });
+      }
+      return;
+    }
+    if (event.newState === 'closed') {
+      if (el) {
+        onOpenChange === null || onOpenChange === void 0 || onOpenChange({
+          isOpen: false,
+          element: el
+        });
+      }
+
+      // Programmatic close (unmount or isOpen→false). Consumer already knows.
+      if (programmaticCloseRef.current) {
+        return;
+      }
+
+      // Browser dismiss (Escape or click-outside). Notify consumer.
+      var reason = closeReasonRef.current;
+      closeReasonRef.current = 'light-dismiss'; // reset for next dismiss
+      onClose({
+        reason: reason
+      });
+    }
+  }, [onClose, onOpenChange]);
+  (0, _react.useEffect)(function () {
+    var el = ownRef.current;
+    if (!el) {
+      return;
+    }
+
+    // Capture-phase: tag Escape before the browser processes light dismiss.
+    var unbindEscape = (0, _bindEventListener.bind)(el, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (event.key === 'Escape') {
+          closeReasonRef.current = 'escape';
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+    var unbindToggle = (0, _bindEventListener.bind)(el, {
+      type: 'toggle',
+      listener: handleToggle
+    });
+    return function () {
+      unbindEscape();
+      unbindToggle();
+    };
+  }, [handleToggle]);
+
+  // Placement-dependent animation CSS vars (e.g. slide direction).
+  // Separate from show/hide so that preset reference changes
+  // (e.g. inline `animate={slideAndFade()}`) don't re-trigger visibility.
+  (0, _react.useLayoutEffect)(function () {
+    var el = ownRef.current;
+    if (!el || !(preset !== null && preset !== void 0 && preset.getProperties) || !placement) {
+      return;
+    }
+    var props = preset.getProperties({
+      placement: placement
+    });
+    Object.entries(props).forEach(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      el.style.setProperty(key, String(value));
+    });
+  }, [preset, placement]);
+
+  // Show/hide based on isOpen. try/catch because show/hide throw if the
+  // element is already in the target state (e.g. browser dismissed via
+  // light-dismiss before our effect ran).
+  (0, _react.useLayoutEffect)(function () {
+    var el = ownRef.current;
+    if (!el) {
+      return;
+    }
+    if (isOpen) {
+      programmaticCloseRef.current = false;
+      try {
+        el.showPopover();
+      } catch (_unused) {
+        // Already showing or unsupported — DOM matches intent.
+      }
+      return function () {
+        programmaticCloseRef.current = true;
+        try {
+          el.hidePopover();
+        } catch (_unused2) {
+          // Already hidden — DOM matches intent.
+        }
+      };
+    }
+    programmaticCloseRef.current = true;
+    try {
+      el.hidePopover();
+    } catch (_unused3) {
+      // Already hidden — DOM matches intent.
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: combinedRef,
+    id: popoverId
+    // @ts-expect-error -- popover attribute not yet in React types
+    // eslint-disable-next-line react/no-unknown-property -- popover attribute not yet in React types
+    ,
+    popover: mode,
+    role: role,
+    "aria-label": label,
+    "aria-labelledby": labelledBy,
+    "data-testid": testId
+  }, preset ? (0, _defineProperty2.default)({}, "data-ds-popover-".concat(preset.name), '') : undefined, {
+    className: (0, _runtime.ax)([styles.root])
+  }), showChildren ? children : null);
+});

package/dist/cjs/popover/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/popup/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popup = void 0;
+var _popup = require("./popup");
+var _popupContent = require("./popup-content");
+var _popupSurface = require("./popup-surface");
+var _popupTrigger = require("./popup-trigger");
+var _popupTriggerFunction = require("./popup-trigger-function");
+/**
+ * Compound component for rendering content in the browser's top layer
+ * using the native Popover API (`popover="auto"`).
+ * Placement is owned by this compound: root provides it via context, Content applies it
+ * (CSS Anchor Positioning or JS fallback).
+ *
+ * For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples.
+ *
+ * @example
+ * ```tsx
+ * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
+ *   <Popup.Trigger>
+ *     <button>Open</button>
+ *   </Popup.Trigger>
+ *   <Popup.Content role="dialog" label="My popup">
+ *     Content goes here
+ *   </Popup.Content>
+ * </Popup>
+ * ```
+ */
+var Popup = exports.Popup = Object.assign(_popup.PopupRoot, {
+  Trigger: _popupTrigger.PopupTrigger,
+  TriggerFunction: _popupTriggerFunction.PopupTriggerFunction,
+  Content: _popupContent.PopupContent,
+  Surface: _popupSurface.PopupSurface
+});