@atlaskit/top-layer 0.1.2 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/top-layer
 
+## 0.1.5
+
+### Patch Changes
+
+- [`034e29787df79`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/034e29787df79) -
+  Fix arrow tips being squared off instead of coming to a point by changing clip-path inset from 1px
+  to 0px
+
+## 0.1.4
+
+### Patch Changes
+
+- [`f4eca31807dcc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4eca31807dcc) -
+  Add new xcss on popover to support customize background color and address arrow style issue
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/cjs/arrow/index.js

@@ -13,7 +13,7 @@ var _useAnchorPositioning = require("../internal/use-anchor-positioning");
  * How it works:
  * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
  *    `::after` (left/right) hexagonal pseudo-elements.
- * 2. `clip-path: inset(1px) margin-box` clips the popover to its margin-box.
+ * 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
  * 3. Margin on the anchor-facing side pushes the popover away, creating space
  *    where one arrow "escapes" the clip boundary and becomes visible.
  * 4. `@position-try` rules change both `position-area` and `margin` when
@@ -26,7 +26,7 @@ var _useAnchorPositioning = require("../internal/use-anchor-positioning");
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
  */
-var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 1px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
+var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
 
 // ── Placement utilities ──
 

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

@@ -239,6 +239,11 @@ function useAnchorPosition(_ref4) {
           property: '--ds-arrow-size',
           value: "".concat(offset, "px")
         });
+        // Mark the popover root as the arrow host. The ARROW_CSS targets
+        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
+        // and box-shadow: none. Must be on the popover root (not a child)
+        // because that's where useAnchorPosition sets the margin gap.
+        popover.setAttribute('data-ds-popover-arrow', '');
       }
       var _undoPositioning = (0, _combine.combine)((0, _setStyle.setStyle)({
         el: trigger,
@@ -249,7 +254,9 @@ function useAnchorPosition(_ref4) {
       }), (0, _setStyle.setStyle)({
         el: popover,
         styles: popoverStyles
-      }));
+      }), arrow ? function () {
+        return popover.removeAttribute('data-ds-popover-arrow');
+      } : function () {});
       return _undoPositioning;
     }
 

package/dist/cjs/popover/popover.js

@@ -67,6 +67,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
+    xcssFromProps = _ref.xcss,
     role = _ref.role,
     label = _ref.label,
     labelledBy = _ref.labelledBy,
@@ -248,6 +249,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     "aria-labelledby": labelledBy,
     "data-testid": testId
   }, preset ? (0, _defineProperty2.default)({}, "data-ds-popover-".concat(preset.name), '') : undefined, {
-    className: (0, _runtime.ax)([styles.root])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes compiled atomic class names
+    className: (0, _runtime.ax)([styles.root, xcssFromProps])
   }), showChildren ? children : null);
 });

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

@@ -35,6 +35,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     mode = _ref.mode,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'content' : _ref$width,
+    xcss = _ref.xcss,
     isOpenProp = _ref.isOpen,
     triggerRefProp = _ref.triggerRef,
     placementProp = _ref.placement,
@@ -193,7 +194,8 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     onOpenChange: handleOpenChange,
     testId: testId,
     children: children,
-    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId
+    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId,
+    xcss: xcss
   };
   return /*#__PURE__*/_react.default.createElement(_popover.Popover, (0, _extends2.default)({
     ref: combinedRef

package/dist/es2019/arrow/index.js

@@ -6,7 +6,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  * How it works:
  * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
  *    `::after` (left/right) hexagonal pseudo-elements.
- * 2. `clip-path: inset(1px) margin-box` clips the popover to its margin-box.
+ * 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
  * 3. Margin on the anchor-facing side pushes the popover away, creating space
  *    where one arrow "escapes" the clip boundary and becomes visible.
  * 4. `@position-try` rules change both `position-area` and `margin` when
@@ -21,7 +21,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  */
 const ARROW_CSS = `
 [data-ds-popover-arrow] {
-  clip-path: inset(var(--ds-arrow-offset, 1px)) margin-box;
+  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;
   box-shadow: none;
 }
 

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

@@ -232,6 +232,11 @@ export function useAnchorPosition({
           property: '--ds-arrow-size',
           value: `${offset}px`
         });
+        // Mark the popover root as the arrow host. The ARROW_CSS targets
+        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
+        // and box-shadow: none. Must be on the popover root (not a child)
+        // because that's where useAnchorPosition sets the margin gap.
+        popover.setAttribute('data-ds-popover-arrow', '');
       }
       const undoPositioning = combine(setStyle({
         el: trigger,
@@ -242,7 +247,7 @@ export function useAnchorPosition({
       }), setStyle({
         el: popover,
         styles: popoverStyles
-      }));
+      }), arrow ? () => popover.removeAttribute('data-ds-popover-arrow') : () => {});
       return undoPositioning;
     }
 

package/dist/es2019/popover/popover.js

@@ -54,6 +54,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   placement,
   testId,
   isOpen,
+  xcss: xcssFromProps,
   // ARIA
   role,
   label,
@@ -237,6 +238,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   }, preset ? {
     [`data-ds-popover-${preset.name}`]: ''
   } : undefined, {
-    className: ax([styles.root])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes compiled atomic class names
+    className: ax([styles.root, xcssFromProps])
   }), showChildren ? children : null);
 });

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

@@ -24,6 +24,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   arrow,
   mode,
   width = 'content',
+  xcss,
   isOpen: isOpenProp,
   triggerRef: triggerRefProp,
   placement: placementProp,
@@ -184,7 +185,8 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     onOpenChange: handleOpenChange,
     testId,
     children,
-    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId
+    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId,
+    xcss
   };
   return /*#__PURE__*/React.createElement(Popover, _extends({
     ref: combinedRef

package/dist/esm/arrow/index.js

@@ -6,7 +6,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  * How it works:
  * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
  *    `::after` (left/right) hexagonal pseudo-elements.
- * 2. `clip-path: inset(1px) margin-box` clips the popover to its margin-box.
+ * 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
  * 3. Margin on the anchor-facing side pushes the popover away, creating space
  *    where one arrow "escapes" the clip boundary and becomes visible.
  * 4. `@position-try` rules change both `position-area` and `margin` when
@@ -19,7 +19,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
  */
-var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 1px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
+var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Single-axis centered */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n\n/* Block edge + inline span */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n}\n\n/* Inline edge + block span */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n}\n";
 
 // ── Placement utilities ──
 

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

@@ -226,6 +226,11 @@ export function useAnchorPosition(_ref4) {
           property: '--ds-arrow-size',
           value: "".concat(offset, "px")
         });
+        // Mark the popover root as the arrow host. The ARROW_CSS targets
+        // [data-ds-popover-arrow] to apply clip-path: inset(0) margin-box
+        // and box-shadow: none. Must be on the popover root (not a child)
+        // because that's where useAnchorPosition sets the margin gap.
+        popover.setAttribute('data-ds-popover-arrow', '');
       }
       var _undoPositioning = combine(setStyle({
         el: trigger,
@@ -236,7 +241,9 @@ export function useAnchorPosition(_ref4) {
       }), setStyle({
         el: popover,
         styles: popoverStyles
-      }));
+      }), arrow ? function () {
+        return popover.removeAttribute('data-ds-popover-arrow');
+      } : function () {});
       return _undoPositioning;
     }
 

package/dist/esm/popover/popover.js

@@ -58,6 +58,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
+    xcssFromProps = _ref.xcss,
     role = _ref.role,
     label = _ref.label,
     labelledBy = _ref.labelledBy,
@@ -239,6 +240,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     "aria-labelledby": labelledBy,
     "data-testid": testId
   }, preset ? _defineProperty({}, "data-ds-popover-".concat(preset.name), '') : undefined, {
-    className: ax([styles.root])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- xcss prop passes compiled atomic class names
+    className: ax([styles.root, xcssFromProps])
   }), showChildren ? children : null);
 });

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

@@ -26,6 +26,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     mode = _ref.mode,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'content' : _ref$width,
+    xcss = _ref.xcss,
     isOpenProp = _ref.isOpen,
     triggerRefProp = _ref.triggerRef,
     placementProp = _ref.placement,
@@ -184,7 +185,8 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     onOpenChange: handleOpenChange,
     testId: testId,
     children: children,
-    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId
+    id: ctx === null || ctx === void 0 ? void 0 : ctx.popoverId,
+    xcss: xcss
   };
   return /*#__PURE__*/React.createElement(Popover, _extends({
     ref: combinedRef

package/dist/types/popover/types.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TAriaRoleOptional, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPlacementOptions } from '../popup/types';
@@ -38,6 +39,12 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
 export type TPopoverInternalProps = TPopoverForwardedProps;
 type TPopoverBaseProps = {
     children: ReactNode;
+    /**
+     * Additional CSS styles applied to the popover root element.
+     * Use to set `backgroundColor` so arrow pseudo-elements (which use
+     * `background: inherit`) match the popup surface colour.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * Animation preset for entry/exit transitions.
      *

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

@@ -1,4 +1,5 @@
 import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
 import { type TPlacement } from '../internal/resolve-placement';
@@ -135,6 +136,21 @@ type TPopupContentBaseProps = {
      *   Falls back to a one-off measurement of the trigger's width.
      */
     width?: 'content' | 'trigger' | 'min-trigger';
+    /**
+     * Applies additional CSS styles to the popover root element using
+     * design-system-safe xcss.
+     *
+     * **Required when using `arrow`:** the arrow pseudo-elements use
+     * `background: inherit` to pick up their color from the popover root.
+     * Without setting `backgroundColor` here, the arrow tip will be transparent.
+     *
+     * @example
+     * ```tsx
+     * const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
+     * <Popup.Content xcss={styles.surface} arrow={arrowPreset} ... />
+     * ```
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * Ref to the trigger element for anchor positioning.
      * When absent, anchor positioning is skipped (consumer handles positioning).

package/dist/types-ts4.5/popover/types.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TAriaRoleOptional, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
 import { type TPlacementOptions } from '../popup/types';
@@ -38,6 +39,12 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
 export type TPopoverInternalProps = TPopoverForwardedProps;
 type TPopoverBaseProps = {
     children: ReactNode;
+    /**
+     * Additional CSS styles applied to the popover root element.
+     * Use to set `backgroundColor` so arrow pseudo-elements (which use
+     * `background: inherit`) match the popup surface colour.
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * Animation preset for entry/exit transitions.
      *

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

@@ -1,4 +1,5 @@
 import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
+import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
 import { type TPlacement } from '../internal/resolve-placement';
@@ -135,6 +136,21 @@ type TPopupContentBaseProps = {
      *   Falls back to a one-off measurement of the trigger's width.
      */
     width?: 'content' | 'trigger' | 'min-trigger';
+    /**
+     * Applies additional CSS styles to the popover root element using
+     * design-system-safe xcss.
+     *
+     * **Required when using `arrow`:** the arrow pseudo-elements use
+     * `background: inherit` to pick up their color from the popover root.
+     * Without setting `backgroundColor` here, the arrow tip will be transparent.
+     *
+     * @example
+     * ```tsx
+     * const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
+     * <Popup.Content xcss={styles.surface} arrow={arrowPreset} ... />
+     * ```
+     */
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * Ref to the trigger element for anchor positioning.
      * When absent, anchor positioning is skipped (consumer handles positioning).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.1.2",
+	"version": "0.1.5",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -37,7 +37,7 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -52,8 +52,8 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/lozenge": "^13.5.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/lozenge": "^13.6.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlassian/react-compiler-gating": "workspace:^",