@atlaskit/top-layer 0.7.1 → 0.9.0

package/dist/cjs/arrow/index.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.arrow = void 0;
-var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
-var _useAnchorPosition = require("../internal/use-anchor-position");
-/**
- * CSS for popover arrows using the `clip-path: inset() margin-box` technique.
- *
- * How it works:
- * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
- *    `::after` (left/right) hexagonal pseudo-elements.
- * 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
- *    flipping, ensuring the correct arrow is always shown.
- *
- * Constraints:
- * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
- * - Arrow pseudo-elements use `background: inherit` from the popover element
- *
- * @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, 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/* Each rule sets two margins: the anchor-facing margin for the gap\n   (via --ds-arrow-size) and one cross-axis margin for the shift\n   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,\n   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The\n   side matches the popover's anchored cross-axis edge per align. Only\n   one of the four properties is non-zero at a time; useAnchorPosition\n   picks it. See notes/architecture/positioning.md for details. */\n/* Single-axis centered (align: center) */\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n\n/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */\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  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n\n/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */\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  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\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  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n";
-
-// ── Placement utilities ──
-
-/**
- * Converts a `position-area` value to a CSS rule name by replacing spaces with hyphens
- * and prepending `--ds-arrow-`.
- *
- * @example positionAreaToRuleName('block-end span-inline-start') → '--ds-arrow-block-end-span-inline-start'
- */
-function positionAreaToRuleName(_ref) {
-  var positionArea = _ref.positionArea;
-  return "--ds-arrow-".concat(positionArea.replace(/ /g, '-'));
-}
-
-/**
- * Returns `position-try-fallbacks` using named `@position-try` rules
- * that change both `position-area` and `margin` when flipping.
- *
- * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
- * not update the margin direction needed to reveal the correct arrow.
- */
-function getTryFallbacks(_ref2) {
-  var placement = _ref2.placement;
-  var _getPlacement = (0, _useAnchorPosition.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
-  if (align === 'center') {
-    // Single-axis: only flip the edge
-    var _flippedEdge = edge === 'start' ? 'end' : 'start';
-    return positionAreaToRuleName({
-      positionArea: (0, _useAnchorPosition.placementToPositionArea)({
-        placement: {
-          axis: axis,
-          edge: _flippedEdge
-        }
-      })
-    });
-  }
-
-  // Compound placement: try flipping edge, alignment, and both
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var flippedAlign = align === 'start' ? 'end' : 'start';
-  return [positionAreaToRuleName({
-    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
-      placement: {
-        axis: axis,
-        edge: edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: flippedAlign
-      }
-    })
-  })].join(', ');
-}
-
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * don't use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-var arrow = exports.arrow = (0, _once.default)(function () {
-  return {
-    name: 'arrow',
-    css: ARROW_CSS,
-    getTryFallbacks: getTryFallbacks
-  };
-});

package/dist/cjs/arrow/types.js

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

package/dist/cjs/entry-points/arrow.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "arrow", {
-  enumerable: true,
-  get: function get() {
-    return _arrow.arrow;
-  }
-});
-var _arrow = require("../arrow");

package/dist/es2019/arrow/index.js

@@ -1,268 +0,0 @@
-import once from '@atlaskit/ds-lib/once';
-import { getPlacement, placementToPositionArea } from '../internal/use-anchor-position';
-/**
- * CSS for popover arrows using the `clip-path: inset() margin-box` technique.
- *
- * How it works:
- * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
- *    `::after` (left/right) hexagonal pseudo-elements.
- * 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
- *    flipping, ensuring the correct arrow is always shown.
- *
- * Constraints:
- * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
- * - Arrow pseudo-elements use `background: inherit` from the popover element
- *
- * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
- */
-const ARROW_CSS = `
-[data-ds-popover-arrow] {
-  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;
-  box-shadow: none;
-}
-
-/* Top and Bottom arrows (vertical hexagon) */
-[data-ds-popover-arrow]::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  background: inherit;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(var(--ds-arrow-size, 8px) * 2);
-  height: calc(100% + var(--ds-arrow-size, 8px) * 2);
-  top: calc(var(--ds-arrow-size, 8px) * -1);
-  clip-path: polygon(
-    0 var(--ds-arrow-size, 8px),
-    50% 0,
-    100% var(--ds-arrow-size, 8px),
-    100% calc(100% - var(--ds-arrow-size, 8px)),
-    50% 100%,
-    0 calc(100% - var(--ds-arrow-size, 8px))
-  );
-}
-
-/* Left and Right arrows (horizontal hexagon) */
-[data-ds-popover-arrow]::after {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  background: inherit;
-  top: 50%;
-  transform: translateY(-50%);
-  height: calc(var(--ds-arrow-size, 8px) * 2);
-  width: calc(100% + var(--ds-arrow-size, 8px) * 2);
-  left: calc(var(--ds-arrow-size, 8px) * -1);
-  clip-path: polygon(
-    var(--ds-arrow-size, 8px) 0,
-    calc(100% - var(--ds-arrow-size, 8px)) 0,
-    100% 50%,
-    calc(100% - var(--ds-arrow-size, 8px)) 100%,
-    var(--ds-arrow-size, 8px) 100%,
-    0 50%
-  );
-}
-
-/* ── @position-try rules ──
- * One rule per possible position-area value.
- * Each sets the position-area and the correct margin direction
- * so the arrow on the anchor-facing side is revealed.
- *
- * Margin direction per edge:
- *   block-start  (above anchor) → margin-block-end   (bottom, facing anchor)
- *   block-end    (below anchor) → margin-block-start  (top, facing anchor)
- *   inline-start (left of anchor) → margin-inline-end (right, facing anchor)
- *   inline-end   (right of anchor) → margin-inline-start (left, facing anchor)
- */
-
-/* Each rule sets two margins: the anchor-facing margin for the gap
-   (via --ds-arrow-size) and one cross-axis margin for the shift
-   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,
-   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The
-   side matches the popover's anchored cross-axis edge per align. Only
-   one of the four properties is non-zero at a time; useAnchorPosition
-   picks it. See notes/architecture/positioning.md for details. */
-/* Single-axis centered (align: center) */
-@position-try --ds-arrow-block-start {
-  position-area: block-start;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-block-end {
-  position-area: block-end;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-inline-start {
-  position-area: inline-start;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-@position-try --ds-arrow-inline-end {
-  position-area: inline-end;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-
-/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */
-@position-try --ds-arrow-block-start-span-inline-start {
-  position-area: block-start span-inline-start;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);
-}
-@position-try --ds-arrow-block-start-span-inline-end {
-  position-area: block-start span-inline-end;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-block-end-span-inline-start {
-  position-area: block-end span-inline-start;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);
-}
-@position-try --ds-arrow-block-end-span-inline-end {
-  position-area: block-end span-inline-end;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-
-/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */
-@position-try --ds-arrow-inline-start-span-block-start {
-  position-area: inline-start span-block-start;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);
-}
-@position-try --ds-arrow-inline-start-span-block-end {
-  position-area: inline-start span-block-end;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-@position-try --ds-arrow-inline-end-span-block-start {
-  position-area: inline-end span-block-start;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);
-}
-@position-try --ds-arrow-inline-end-span-block-end {
-  position-area: inline-end span-block-end;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-`;
-
-// ── Placement utilities ──
-
-/**
- * Converts a `position-area` value to a CSS rule name by replacing spaces with hyphens
- * and prepending `--ds-arrow-`.
- *
- * @example positionAreaToRuleName('block-end span-inline-start') → '--ds-arrow-block-end-span-inline-start'
- */
-function positionAreaToRuleName({
-  positionArea
-}) {
-  return `--ds-arrow-${positionArea.replace(/ /g, '-')}`;
-}
-
-/**
- * Returns `position-try-fallbacks` using named `@position-try` rules
- * that change both `position-area` and `margin` when flipping.
- *
- * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
- * not update the margin direction needed to reveal the correct arrow.
- */
-function getTryFallbacks({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  if (align === 'center') {
-    // Single-axis: only flip the edge
-    const flippedEdge = edge === 'start' ? 'end' : 'start';
-    return positionAreaToRuleName({
-      positionArea: placementToPositionArea({
-        placement: {
-          axis,
-          edge: flippedEdge
-        }
-      })
-    });
-  }
-
-  // Compound placement: try flipping edge, alignment, and both
-  const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const flippedAlign = align === 'start' ? 'end' : 'start';
-  return [positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis,
-        edge: flippedEdge,
-        align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis,
-        edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis,
-        edge: flippedEdge,
-        align: flippedAlign
-      }
-    })
-  })].join(', ');
-}
-
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * don't use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export const arrow = once(() => ({
-  name: 'arrow',
-  css: ARROW_CSS,
-  getTryFallbacks
-}));

package/dist/es2019/arrow/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/entry-points/arrow.js

@@ -1 +0,0 @@
-export { arrow } from '../arrow';

package/dist/esm/arrow/index.js

@@ -1,123 +0,0 @@
-import once from '@atlaskit/ds-lib/once';
-import { getPlacement, placementToPositionArea } from '../internal/use-anchor-position';
-/**
- * CSS for popover arrows using the `clip-path: inset() margin-box` technique.
- *
- * How it works:
- * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
- *    `::after` (left/right) hexagonal pseudo-elements.
- * 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
- *    flipping, ensuring the correct arrow is always shown.
- *
- * Constraints:
- * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
- * - Arrow pseudo-elements use `background: inherit` from the popover element
- *
- * @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, 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/* Each rule sets two margins: the anchor-facing margin for the gap\n   (via --ds-arrow-size) and one cross-axis margin for the shift\n   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,\n   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The\n   side matches the popover's anchored cross-axis edge per align. Only\n   one of the four properties is non-zero at a time; useAnchorPosition\n   picks it. See notes/architecture/positioning.md for details. */\n/* Single-axis centered (align: center) */\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n\n/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */\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  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\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  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\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  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n\n/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */\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  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\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  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\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  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n";
-
-// ── Placement utilities ──
-
-/**
- * Converts a `position-area` value to a CSS rule name by replacing spaces with hyphens
- * and prepending `--ds-arrow-`.
- *
- * @example positionAreaToRuleName('block-end span-inline-start') → '--ds-arrow-block-end-span-inline-start'
- */
-function positionAreaToRuleName(_ref) {
-  var positionArea = _ref.positionArea;
-  return "--ds-arrow-".concat(positionArea.replace(/ /g, '-'));
-}
-
-/**
- * Returns `position-try-fallbacks` using named `@position-try` rules
- * that change both `position-area` and `margin` when flipping.
- *
- * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
- * not update the margin direction needed to reveal the correct arrow.
- */
-function getTryFallbacks(_ref2) {
-  var placement = _ref2.placement;
-  var _getPlacement = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
-  if (align === 'center') {
-    // Single-axis: only flip the edge
-    var _flippedEdge = edge === 'start' ? 'end' : 'start';
-    return positionAreaToRuleName({
-      positionArea: placementToPositionArea({
-        placement: {
-          axis: axis,
-          edge: _flippedEdge
-        }
-      })
-    });
-  }
-
-  // Compound placement: try flipping edge, alignment, and both
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var flippedAlign = align === 'start' ? 'end' : 'start';
-  return [positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: flippedAlign
-      }
-    })
-  })].join(', ');
-}
-
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * don't use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export var arrow = once(function () {
-  return {
-    name: 'arrow',
-    css: ARROW_CSS,
-    getTryFallbacks: getTryFallbacks
-  };
-});

package/dist/esm/arrow/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export { arrow } from '../arrow';

package/dist/types/arrow/index.d.ts

@@ -1,24 +0,0 @@
-import { type TArrowPreset } from './types';
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * don't use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export declare const arrow: () => TArrowPreset;
-export type { TArrowPreset } from './types';

package/dist/types/arrow/types.d.ts

@@ -1,29 +0,0 @@
-import type { TPlacementOptions } from '../popup/types';
-/**
- * A self-contained arrow preset for PopoverContent.
- *
- * Contains the CSS rules (injected once into `<head>`), a data-attribute name
- * for CSS targeting, and a function to compute `position-try-fallbacks` values
- * that change both `position-area` and `margin` when the popover flips.
- *
- * Imported from `@atlaskit/top-layer/arrow` so that consumers who don't use
- * arrows pay no bundle cost for the CSS string or fallback logic.
- */
-export type TArrowPreset = {
-    /**
-     * CSS to inject once into `document.head`, scoped to `[data-ds-popover-{name}]`.
-     */
-    css: string;
-    /**
-     * Data attribute suffix for CSS targeting (e.g. `'arrow'`).
-     */
-    name: string;
-    /**
-     * Returns the `position-try-fallbacks` value for a given placement.
-     * Uses named `@position-try` rules that update both `position-area`
-     * and `margin` so the correct arrow is revealed after a flip.
-     */
-    getTryFallbacks: (args: {
-        placement: TPlacementOptions;
-    }) => string;
-};

package/dist/types/entry-points/arrow.d.ts

@@ -1,2 +0,0 @@
-export { arrow } from '../arrow';
-export type { TArrowPreset } from '../arrow/types';

package/dist/types-ts4.5/arrow/index.d.ts

@@ -1,24 +0,0 @@
-import { type TArrowPreset } from './types';
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * don't use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export declare const arrow: () => TArrowPreset;
-export type { TArrowPreset } from './types';