@atlaskit/top-layer 4.4.5 → 5.0.0

package/dist/cjs/internal/use-anchored-popover.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchoredPopover = useAnchoredPopover;
+var _react = require("react");
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _applyAnchorPositioning = require("./anchor-positioning/apply-anchor-positioning");
+var _anchoredPopoverSize = require("./anchored-popover-size");
+var _applyJavascriptFallbackPositioning = require("./javascript-fallback/apply-javascript-fallback-positioning");
+var _resolvePlacement = require("./resolve-placement");
+var _supportsAnchorPositioning = require("./supports-anchor-positioning");
+var _supportsAnchorSize = require("./supports-anchor-size");
+/**
+ * Positioning AND anchor-relative sizing for top-layer popovers. Anchors an
+ * ELEMENT; to anchor a viewport coordinate use `useAnchoredPopoverAtPoint`.
+ *
+ * Two runtime paths, each a function that applies its styles and returns the
+ * cleanup: CSS Anchor Positioning in `./anchor-positioning`, and the JavaScript
+ * fallback in `./javascript-fallback`. The path is resolved ONCE, at the top of
+ * the hook, and threaded through positioning, sizing and margins.
+ *
+ * See `notes/architecture/positioning.md` and
+ * `notes/decisions/fit-available-space.md`.
+ */
+
+/**
+ * Which way the popover's inline axis runs. Maps every physical measurement below
+ * onto a logical axis: the viewport unit of each cap and the anchor's measured
+ * size. A style read, not a layout read, so it is cheap enough to take for every
+ * popover.
+ */
+function getPopoverWritingMode(_ref) {
+  var popover = _ref.popover;
+  // `String()` because not every test environment implements `writing-mode`.
+  var writingMode = String(getComputedStyle(popover).writingMode);
+  var isVertical = writingMode.startsWith('vertical') || writingMode.startsWith('sideways');
+  return isVertical ? 'vertical' : 'horizontal';
+}
+
+/**
+ * Measured stand-in for `anchor-size(self-*)`, used wherever `anchor-size()` is
+ * not: the JavaScript fallback, and browsers with anchor positioning but no
+ * `anchor-size()`.
+ *
+ * `offsetWidth` / `offsetHeight` are physical, so the axis is picked from the
+ * POPOVER's `writing-mode`. Deliberately not memoized: a cached anchor size is a
+ * stale one. Runs once per effect, not per frame.
+ */
+function measureAnchorSize(_ref2) {
+  var anchor = _ref2.anchor,
+    writingMode = _ref2.writingMode;
+  if (writingMode === 'vertical') {
+    return {
+      inline: "".concat(anchor.offsetHeight, "px"),
+      block: "".concat(anchor.offsetWidth, "px")
+    };
+  }
+  return {
+    inline: "".concat(anchor.offsetWidth, "px"),
+    block: "".concat(anchor.offsetHeight, "px")
+  };
+}
+var NO_ANCHOR_SIZE = {
+  inline: null,
+  block: null
+};
+var CSS_ANCHOR_SIZE = {
+  inline: 'anchor-size(self-inline)',
+  block: 'anchor-size(self-block)'
+};
+function isAnchorRelative(size) {
+  return size === 'match-anchor' || size === 'min-anchor';
+}
+
+/**
+ * The `anchor-name` written to an anchor that does not already carry one, as a CSS
+ * `<dashed-ident>`. `useId()` is the same source as every other id in the design
+ * system, including the popover's own `id` that `aria-controls` and `popovertarget`
+ * point at, so it is unique exactly where those are and collides exactly where
+ * they do. See `useAnchoredPopover` for the one case that needs the host's help.
+ *
+ * `@atlaskit/ds-lib`'s `useId` already swaps React's `:` and `«»` for `_`. The
+ * replace covers a host `identifierPrefix`, which may carry characters a
+ * `<dashed-ident>` cannot.
+ */
+function useNewAnchorName() {
+  var id = (0, _useId.useId)();
+  return (0, _react.useMemo)(function () {
+    return "--anchor-".concat(id.replace(/[^A-Za-z0-9_-]/g, '_'));
+  }, [id]);
+}
+
+/**
+ * A referentially-stable, fully-resolved `TPlacement`, so a fresh inline
+ * `placement` object does not re-run the effect.
+ */
+function useStablePlacement(placement) {
+  var resolved = (0, _resolvePlacement.resolvePlacement)({
+    placement: placement
+  });
+  var axis = resolved.axis;
+  var edge = resolved.edge;
+  var align = resolved.align;
+  var minSize = resolved.minSize;
+  var gap = resolved.offset.gap;
+  var shiftValue = resolved.offset.crossAxisShift.value;
+  var shiftDirection = resolved.offset.crossAxisShift.direction;
+  // Rebuilt from primitive deps, so the factory does not close over `resolved`
+  // and exhaustive-deps can verify it.
+  return (0, _react.useMemo)(function () {
+    return {
+      axis: axis,
+      edge: edge,
+      align: align,
+      minSize: minSize,
+      offset: {
+        gap: gap,
+        crossAxisShift: {
+          value: shiftValue,
+          direction: shiftDirection
+        }
+      }
+    };
+  }, [axis, edge, align, minSize, gap, shiftValue, shiftDirection]);
+}
+
+/**
+ * Exported so `useAnchoredPopoverAtPoint` can forward the options it does not own.
+ */
+
+/**
+ * Positions and sizes a popover relative to an anchor. Owns every inline style on
+ * the popover host: where it goes, how big it is relative to its anchor, and the
+ * margins that keep it clear of the anchor and the viewport edge. It knows nothing
+ * about visibility or animation - compose it with `Popover`.
+ *
+ * On modern browsers the browser handles flipping via CSS Anchor Positioning;
+ * otherwise it falls back to measured `position: fixed` coordinates, re-run on
+ * scroll and resize.
+ *
+ * `inlineSize` and `blockSize` both default to `'content'`. Two rules are
+ * surprising: fitting one axis also fits an axis left on `'content'`, and fitting
+ * either axis floors the placement axis. See `TPopoverAxisSize`.
+ *
+ * **Several React roots on one page.** The `anchor-name` this hook writes to an
+ * anchor that has none is minted from `useId()`, like every other id in the design
+ * system. `useId()` is unique within a root; across roots it is unique for
+ * client-rendered roots but NOT for roots that hydrate the same markup, where it
+ * is derived from tree position. Two anchors carrying one name resolve to the last
+ * in tree order, so a popover can attach to another root's trigger. A host that
+ * hydrates more than one root must give each a distinct `identifierPrefix` (on
+ * `hydrateRoot` and the matching server render). That is already required for the
+ * popover's own `id`, which `aria-controls` and `popovertarget` point at, and for
+ * every `aria-*` id the design system mints. A bundle with two copies of
+ * `react-dom` has the same exposure for client-rendered roots.
+ *
+ * @example Position a popover below its trigger
+ * ```tsx
+ * const triggerRef = useRef<HTMLButtonElement>(null);
+ * const popoverRef = useRef<HTMLDivElement>(null);
+ *
+ * useAnchoredPopover({
+ *   anchorRef: triggerRef,
+ *   popoverRef,
+ *   placement: { axis: 'block', edge: 'end' },
+ *   isOpen,
+ * });
+ * ```
+ *
+ * @example Match the trigger's width and keep the popover on screen
+ * ```tsx
+ * // What `<Popup shouldFitContainer shouldFitViewport>` maps to.
+ * useAnchoredPopover({
+ *   anchorRef: triggerRef,
+ *   popoverRef,
+ *   placement: { axis: 'block', edge: 'end' },
+ *   isOpen,
+ *   inlineSize: 'match-anchor',
+ *   blockSize: 'max-available',
+ * });
+ * ```
+ *
+ * @example Switch to a cursor position mid-mount
+ * ```tsx
+ * // Complementary `isEnabled`, so exactly one hook owns the popover.
+ * const shared = { popoverRef, placement, isOpen };
+ *
+ * useAnchoredPopover({ ...shared, anchorRef: triggerRef, isEnabled: !mousePos });
+ * useAnchoredPopoverAtPoint({
+ *   ...shared,
+ *   isEnabled: Boolean(mousePos),
+ *   getPoint: () => mousePosRef.current,
+ * });
+ * ```
+ */
+function useAnchoredPopover(_ref3) {
+  var anchorRef = _ref3.anchorRef,
+    popoverRef = _ref3.popoverRef,
+    placement = _ref3.placement,
+    isOpen = _ref3.isOpen,
+    _ref3$isEnabled = _ref3.isEnabled,
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled,
+    _ref3$inlineSize = _ref3.inlineSize,
+    inlineSize = _ref3$inlineSize === void 0 ? 'content' : _ref3$inlineSize,
+    _ref3$blockSize = _ref3.blockSize,
+    blockSize = _ref3$blockSize === void 0 ? 'content' : _ref3$blockSize,
+    _ref3$shouldPreserveI = _ref3.shouldPreserveInlineSize,
+    shouldPreserveInlineSize = _ref3$shouldPreserveI === void 0 ? false : _ref3$shouldPreserveI,
+    _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
+  // Stable for the life of the hook instance, so it follows a replacement anchor
+  // element (the point hook remounts its `<div>`).
+  var fallbackAnchorName = useNewAnchorName();
+  var stablePlacement = useStablePlacement(placement);
+  (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
+
+    // Resolved once, so positioning, sizing and margins cannot disagree about it.
+    var isUsingCssAnchorPositioning = (0, _supportsAnchorPositioning.supportsAnchorPositioning)() && !forceFallbackPositioning;
+
+    // BOTH probes: a browser can have positioning without sizing, and
+    // `anchor-size()` needs the `position-anchor` only the CSS path writes.
+    var canUseAnchorSize = isUsingCssAnchorPositioning && (0, _supportsAnchorSize.supportsAnchorSize)();
+    var trigger = anchorRef.current;
+    var popover = popoverRef.current;
+    if (!trigger || !popover) {
+      return;
+    }
+
+    // Fitting also reserves padding from the viewport edge as a margin.
+    var isFitting = inlineSize === 'max-available' || blockSize === 'max-available';
+
+    // Always read: the viewport caps are always written, and their unit follows
+    // the popover's writing mode.
+    var writingMode = getPopoverWritingMode({
+      popover: popover
+    });
+
+    // Skipped where possible, so a position-only consumer pays no layout read.
+    // Fitting on the CSS path needs it to clamp the default flip floor; see
+    // `getDefaultPlacementAxisFloor`.
+    var needsAnchorSize = isAnchorRelative(inlineSize) || isAnchorRelative(blockSize) || isFitting && isUsingCssAnchorPositioning;
+    var anchorSize = needsAnchorSize ? canUseAnchorSize ? CSS_ANCHOR_SIZE : measureAnchorSize({
+      anchor: trigger,
+      writingMode: writingMode
+    }) : NO_ANCHOR_SIZE;
+    var sizeStyles = (0, _anchoredPopoverSize.getAnchoredPopoverSizeDeclarations)({
+      placement: stablePlacement,
+      inlineSize: inlineSize,
+      blockSize: blockSize,
+      isUsingCssAnchorPositioning: isUsingCssAnchorPositioning,
+      anchorSize: anchorSize,
+      writingMode: writingMode,
+      shouldPreserveInlineSize: shouldPreserveInlineSize
+    });
+    if (isUsingCssAnchorPositioning) {
+      return (0, _applyAnchorPositioning.applyAnchorPositioning)({
+        anchor: trigger,
+        popover: popover,
+        placement: stablePlacement,
+        sizeStyles: sizeStyles,
+        isFitting: isFitting,
+        fallbackAnchorName: fallbackAnchorName
+      });
+    }
+    return (0, _applyJavascriptFallbackPositioning.applyJavaScriptFallbackPositioning)({
+      anchor: trigger,
+      popover: popover,
+      placement: stablePlacement,
+      sizeStyles: sizeStyles
+    });
+  }, [isEnabled, anchorRef, popoverRef, stablePlacement, inlineSize, blockSize, shouldPreserveInlineSize, fallbackAnchorName, forceFallbackPositioning, isOpen]);
+}

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

@@ -22,6 +22,10 @@
 ._n3tdidpf{padding-bottom:0}
 ._o5724jg8{white-space:normal}
 ._otyridpf{margin-bottom:0}
+._p6861txw:popover-open{display:flex}
 ._u5f3idpf{padding-right:0}
 ._y3gnv2br{text-align:start}
+:where(._1yp3idpf)>*{min-inline-size:0}
+:where(._51hckb7n)>*{flex-grow:1}
+:where(._f5r5idpf)>*{min-block-size:0}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

package/dist/cjs/popover/popover.js

@@ -42,15 +42,22 @@ var supportsPopoverHint = (0, _once.default)(function () {
 // avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
 // `direction`/`unicode-bidi` (RTL must inherit).
 //
+// Not `all: initial`: the target is what `<body>` gave the portal path, not the
+// spec initial values (UA serif, black, `color-scheme: normal`), and as an author
+// declaration it would also override the UA `[popover]` rules (`position: fixed`,
+// `display: none` when closed).
+//
 // KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
 // ADS forbids sharing styles across files (`no-exported-styles` /
 // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
-// co-located and duplicated deliberately.
+// co-located and duplicated deliberately. The `satisfies` check below fails the
+// build if either copy drifts.
 var surfaceResetStyles = {
   root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
+true;
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug",
+  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
   motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v179n",
   exit: "_y44vof1f"
@@ -88,7 +95,7 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
 
 /**
  * Unopinionated top-layer primitive. Owns visibility and animation only;
- * compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
+ * compose with `useAnchoredPopover` for positioning and sizing.
  *
  * ### 🔌 Visibility
  *
@@ -256,7 +263,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // for dialog roles. Restoration is native for outermost popovers; nested
   // focus-capturing roles are handled above 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.
+  // window (WCAG 2.4.3 guard). See notes/architecture/focus.md.
   (0, _useFocusWrap.useFocusWrap)({
     elementRef: ownRef,
     role: role,

package/dist/cjs/testing/polyfill.js

@@ -16,9 +16,9 @@ var _bindEventListener = require("bind-event-listener");
  *  - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
  *  - Auto popovers: maintain an open stack, perform light-dismiss on document mousedown
  *    outside the open chain, and dismiss the topmost on Escape.
- *  - On open, removes any inline `opacity: 0` from the popover element so callers that
- *    rely on a `ResizeObserver` reveal callback (e.g. `use-anchor-position`) become
- *    visible in jsdom, where layout-driven RO callbacks never fire.
+ *  - On open, removes any inline `opacity: 0` from the popover element, so the
+ *    JavaScript positioning fallback's `ResizeObserver` reveal is not needed in
+ *    jsdom, where its non-zero-layout guard can never pass.
  *
  * Companion `toBeVisible` patch lives at `./to-be-visible`.
  *
@@ -249,10 +249,9 @@ function stackForMode(_ref9) {
   return null;
 }
 
-// Polyfill-only. Real browsers reveal the popover once `ResizeObserver`
-// callbacks fire after the first layout pass. jsdom has no layout, so we clear
-// any inline `opacity: 0` (set by callers like `use-anchor-position`) once
-// the open toggle has fired.
+// Polyfill-only. Real browsers reveal the popover on the first non-zero layout
+// their `ResizeObserver` reports; jsdom always reports 0, so that guard never
+// passes and the inline `opacity: 0` is cleared on the open toggle instead.
 function clearOpacityOnOpenToggle(_ref0) {
   var element = _ref0.element;
   var unbind = (0, _bindEventListener.bind)(element, {

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

@@ -19,9 +19,11 @@ import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
 //
 // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
 // (ADS forbids sharing styles across files, so it is co-located and duplicated).
+// The `satisfies` check below fails the build if either copy drifts.
 const surfaceResetStyles = {
   root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
 };
+true;
 const dialogStyles = {
   root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
   motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",

package/dist/es2019/entry-points/use-popover-id.js

@@ -1,17 +1,13 @@
 import { useId } from '@atlaskit/ds-lib/use-id';
+
 /**
- * Returns a stable HTML `id` used to wire a trigger element to its popover
- * via ARIA (`aria-controls`) and the Popover API (`popovertarget`).
+ * A stable `id` for wiring a trigger to its popover: the popover's `id`, and the
+ * trigger's matching `aria-controls` / `popovertarget`.
  *
- * The returned value is intended for the `id` attribute on the popover and
- * for the matching `aria-controls` / `popovertarget` references on the
- * trigger. It is NOT a CSS `anchor-name` value: CSS anchor positioning is
- * handled internally by `useAnchorPosition`, which mints and applies its
- * own `anchor-name` on the trigger element.
+ * NOT a CSS `anchor-name` - `useAnchoredPopover` mints and writes its own.
  */
 export function usePopoverId() {
-  // `@atlaskit/ds-lib/use-id` already strips characters that React's
-  // `useId` produces (`:`, `«`, `»`) which are invalid in HTML ID
-  // tokens. The `popover-` prefix is purely for DOM debug clarity.
+  // `@atlaskit/ds-lib/use-id`, not React's `useId`: React's output contains
+  // `:`, `«` and `»`, which are invalid in an HTML id token.
   return `popover-${useId()}`;
 }

package/dist/es2019/internal/anchor-positioning/apply-anchor-positioning.js

@@ -0,0 +1,83 @@
+/**
+ * The CSS Anchor Positioning path: `position-anchor`, `position-area`,
+ * `position-try-fallbacks` and the gap / shift margins, all declared on the
+ * popover so the browser owns placement and flipping. The twin of
+ * `../javascript-fallback/apply-javascript-fallback-positioning`.
+ */
+
+import { setStyle } from '../set-style';
+import { crossAxisShiftMargins } from './cross-axis-shift-margins';
+import { edgeMargin } from './edge-margin';
+import { getFitMarginDeclarations } from './fit-margins';
+import { getExistingAnchorName } from './get-existing-anchor-name';
+import { placementToPositionArea } from './placement-to-position-area';
+import { placementToTryFallbacks } from './placement-to-try-fallbacks';
+
+/**
+ * Returns the cleanup.
+ */
+export function applyAnchorPositioning({
+  anchor,
+  popover,
+  placement,
+  sizeStyles,
+  isFitting,
+  fallbackAnchorName
+}) {
+  // Reuse rather than mint: another popover may already be anchored to it, or a
+  // CONSUMER may have set it on their own element, as `post-office` does.
+  const existingAnchorName = getExistingAnchorName(anchor);
+  const anchorName = existingAnchorName !== null && existingAnchorName !== void 0 ? existingAnchorName : fallbackAnchorName;
+  const gap = edgeMargin({
+    placement,
+    offset: placement.offset.gap
+  });
+  const crossAxisShift = crossAxisShiftMargins({
+    placement,
+    crossAxisShiftCssValue: placement.offset.crossAxisShift.value,
+    direction: placement.offset.crossAxisShift.direction
+  });
+  const popoverStyles = [{
+    property: 'position-anchor',
+    value: anchorName
+  }, {
+    property: 'position-area',
+    value: placementToPositionArea({
+      placement
+    })
+  }, {
+    property: 'position-try-fallbacks',
+    value: placementToTryFallbacks({
+      placement
+    })
+  },
+  // Reset browser default popover positioning that conflicts
+  // with anchor positioning (UA: `inset: 0; margin: auto;`)
+  {
+    property: 'margin',
+    value: '0'
+  }, {
+    property: 'inset',
+    value: 'auto'
+  }, gap,
+  // When fitting, the shift margins come back COMPOSED with the reserved
+  // viewport padding, rather than being written twice.
+  ...(isFitting ? getFitMarginDeclarations({
+    placement,
+    crossAxisShiftMargins: crossAxisShift
+  }) : crossAxisShift), ...sizeStyles];
+
+  // Anchor names are never cleaned up: multiple popovers can share an anchor,
+  // and even with reference counting an async React update could remove the name
+  // while something else still uses it. See
+  // `notes/decisions/anchor-name-lifetime.md`. Only written when minted: a name
+  // from a stylesheet may be a list, which an inline copy of its first entry
+  // would collapse.
+  if (existingAnchorName === null) {
+    anchor.style.setProperty('anchor-name', anchorName);
+  }
+  return setStyle({
+    element: popover,
+    styles: popoverStyles
+  });
+}

package/dist/es2019/internal/anchor-positioning/cross-axis-shift-margins.js

@@ -0,0 +1,29 @@
+/**
+ * The cross-axis shift, written antisymmetrically on BOTH cross-axis sides rather
+ * than as one margin. Do not collapse it to one side: a single margin widens the
+ * margin box, so `anchor-center` displaces the border box by only half the value,
+ * a `<position-area>` fallback sliding across the cross axis drops it entirely,
+ * and the widened box changes where the popover is judged to overflow.
+ *
+ * A positive value always moves the popover toward the cross-axis END, so
+ * `direction: 'forwards'` means the same thing for every `align` value. See
+ * `notes/decisions/placement-offset.md`.
+ */
+export function crossAxisShiftMargins({
+  placement,
+  crossAxisShiftCssValue,
+  direction
+}) {
+  const crossAxis = placement.axis === 'block' ? 'inline' : 'block';
+  // `calc()` rather than JavaScript math, so opaque values such as design tokens
+  // negate correctly.
+  const negated = `calc(-1 * ${crossAxisShiftCssValue})`;
+  const isForwards = direction === 'forwards';
+  return [{
+    property: `margin-${crossAxis}-start`,
+    value: isForwards ? crossAxisShiftCssValue : negated
+  }, {
+    property: `margin-${crossAxis}-end`,
+    value: isForwards ? negated : crossAxisShiftCssValue
+  }];
+}

package/dist/es2019/internal/anchor-positioning/edge-margin.js

@@ -0,0 +1,18 @@
+/**
+ * The margin that creates the gap between the popover and its anchor.
+ */
+export function edgeMargin({
+  placement,
+  offset
+}) {
+  const {
+    axis,
+    edge
+  } = placement;
+  // The side FACING the anchor is always opposite the placement edge.
+  const anchorFacingEdge = edge === 'end' ? 'start' : 'end';
+  return {
+    property: `margin-${axis}-${anchorFacingEdge}`,
+    value: offset
+  };
+}

package/dist/es2019/internal/anchor-positioning/fit-margins.js

@@ -0,0 +1,69 @@
+import { VIEWPORT_PADDING } from '../anchored-popover-size';
+
+/**
+ * Every logical margin property the fit recipe can write. Declared here and
+ * imported by `edge-margin.tsx` and `cross-axis-shift-margins.tsx`: two
+ * structurally identical declarations are interchangeable to the compiler, so a
+ * divergence would surface only as a silently-ignored property name at
+ * `setStyle`.
+ */
+
+/**
+ * The cross-axis sides that face the viewport rather than the anchor, and so take
+ * the reserved padding.
+ *
+ * A `span-*` cell aligns the popover's MARGIN box to the anchor's edge, so padding
+ * on the anchor-facing side does not reserve space at the viewport: it insets the
+ * border box from the edge the consumer asked it to line up with. A centred
+ * popover has no anchor-facing side, and padding both keeps the shift pair
+ * antisymmetric so `anchor-center` still centres.
+ *
+ * Known cost: the slide fallbacks do not swap the inline margins the way
+ * `flip-inline` does, so a slid popover keeps its padding on the anchor side (or,
+ * re-centred, sits 2.5px off centre). Alignment in the requested position wins.
+ */
+function viewportFacingCrossAxisSides({
+  align
+}) {
+  if (align === 'center') {
+    return ['start', 'end'];
+  }
+  // `align: 'start'` sits on the anchor's start edge and expands toward end.
+  return [align === 'start' ? 'end' : 'start'];
+}
+
+/**
+ * The margin half of the fit recipe. The caps reserve the viewport padding by
+ * subtracting it, but nothing makes the reservation land on the viewport side, so
+ * a capped popover packs flush against the edge it slid or flipped to.
+ *
+ * The padding buys visual clearance and nothing else: at the cap the margin box
+ * is exactly `100%` of the cell, so these margins never make
+ * `position-try-fallbacks` fire. Only the unclamped placement-axis floor does
+ * that; see `getPlacementAxisFloor`.
+ *
+ * The cross-axis sides are composed, not overwritten: they already carry the
+ * antisymmetric `crossAxisShift` pair.
+ */
+export function getFitMarginDeclarations({
+  placement,
+  crossAxisShiftMargins
+}) {
+  const crossAxis = placement.axis === 'block' ? 'inline' : 'block';
+  const paddedProperties = new Set(viewportFacingCrossAxisSides({
+    align: placement.align
+  }).map(side => `margin-${crossAxis}-${side}`));
+  return [{
+    property: `margin-${placement.axis}-${placement.edge}`,
+    value: VIEWPORT_PADDING
+  }, ...crossAxisShiftMargins.map(({
+    property,
+    value
+  }) => paddedProperties.has(property) ? {
+    property,
+    value: `calc(${value} + ${VIEWPORT_PADDING})`
+  } : {
+    property,
+    value
+  })];
+}

package/dist/es2019/internal/anchor-positioning/get-existing-anchor-name.js

@@ -0,0 +1,12 @@
+/**
+ * The `anchor-name` an element already carries, or `null`. Computed as well as
+ * inline, so a name set from a STYLESHEET is found: a minted inline name would
+ * otherwise override it for every other rule anchored to that element.
+ * `anchor-name` is a list and `position-anchor` takes one ident, so the first
+ * name is the one to anchor to.
+ */
+export function getExistingAnchorName(element) {
+  const declared = element.style.getPropertyValue('anchor-name') || getComputedStyle(element).getPropertyValue('anchor-name');
+  const first = declared.split(',')[0].trim();
+  return first !== '' && first !== 'none' ? first : null;
+}

package/dist/es2019/internal/{placement-to-position-area.js → anchor-positioning/placement-to-position-area.js}

@@ -1,7 +1,5 @@
-import { resolvePlacement } from './resolve-placement';
-
 /**
- * Resolves placement options to CSS `position-area` syntax.
+ * Resolves a placement to CSS `position-area` syntax.
  *
  * The `align` field represents the *visual* alignment:
  * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
@@ -12,10 +10,14 @@ import { resolvePlacement } from './resolve-placement';
  * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
  * This function handles the inversion internally.
  *
+ * Takes the RESOLVED placement, which the hook threads through positioning,
+ * sizing and margins alike, so nothing here can disagree with them.
+ *
  * @example
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
+ * // For a `block-end` placement, by `align`:
+ * // 'center' → 'block-end'
+ * // 'start'  → 'block-end span-inline-end'
+ * // 'end'    → 'block-end span-inline-start'
  */
 export function placementToPositionArea({
   placement
@@ -24,9 +26,7 @@ export function placementToPositionArea({
     axis,
     edge,
     align
-  } = resolvePlacement({
-    placement
-  });
+  } = placement;
   const edgeValue = `${axis}-${edge}`;
   if (align === 'center') {
     return edgeValue;