@atlaskit/top-layer 4.2.2 → 4.2.4

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 /**
@@ -74,6 +75,40 @@ var supportsAnchorPositioning = once(function () {
   return CSS.supports('anchor-name', '--a');
 });
 
+/**
+ * Every logical margin property this module can write: one per axis, per side.
+ *
+ * Deriving the union from `TPlacementAxis` and `TPlacementEdge` rather than
+ * writing the four names out keeps it in step with the placement model, and
+ * makes `CROSS_AXIS_SHIFT_CUSTOM_PROPERTY` below exhaustive by construction.
+ */
+
+/**
+ * The custom property mirroring each cross-axis shift margin.
+ *
+ * These are written for the planned named arrow `@position-try` rules. Nothing
+ * reads them yet, and the shift no longer depends on them: the antisymmetric
+ * margins written by `crossAxisShiftMargins` survive a cross-axis slide on
+ * their own.
+ *
+ * Keyed on `TLogicalMarginProperty` and not on `string`, so a margin property
+ * that has no custom property (or a custom property whose margin no longer
+ * exists) is a compile error rather than an `undefined` lookup that reaches
+ * `setStyle` as `{ property: undefined, value }`.
+ */
+var CROSS_AXIS_SHIFT_CUSTOM_PROPERTY = {
+  'margin-inline-start': '--ds-cross-axis-shift-margin-start',
+  'margin-inline-end': '--ds-cross-axis-shift-margin-end',
+  'margin-block-start': '--ds-cross-axis-shift-margin-block-start',
+  'margin-block-end': '--ds-cross-axis-shift-margin-block-end'
+};
+var ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES = Object.values(CROSS_AXIS_SHIFT_CUSTOM_PROPERTY).map(function (property) {
+  return {
+    property: property,
+    value: '0px'
+  };
+});
+
 /**
  * Returns the CSS margin declaration that creates a gap between the
  * popover and its trigger on the side facing the anchor.
@@ -86,62 +121,64 @@ function edgeMargin(_ref) {
     offset = _ref.offset;
   var axis = placement.axis,
     edge = placement.edge;
-  var value = offset;
-  if (axis === 'block' && edge === 'end') {
-    return {
-      property: 'margin-block-start',
-      value: value
-    };
-  }
-  if (axis === 'block' && edge === 'start') {
-    return {
-      property: 'margin-block-end',
-      value: value
-    };
-  }
-  if (axis === 'inline' && edge === 'end') {
-    return {
-      property: 'margin-inline-start',
-      value: value
-    };
-  }
-  if (axis === 'inline' && edge === 'start') {
-    return {
-      property: 'margin-inline-end',
-      value: value
-    };
-  }
+  // The gap sits on the side FACING the anchor, which is always the side
+  // opposite the placement edge.
+  var anchorFacingEdge = edge === 'end' ? 'start' : 'end';
   return {
-    property: 'margin-block-start',
-    value: value
+    property: "margin-".concat(axis, "-").concat(anchorFacingEdge),
+    value: offset
   };
 }
 
 /**
- * Cross-axis shift margin. Margin side matches the popover's anchored
- * cross-axis edge: `align: 'start'` uses the START margin, `align: 'end'`
- * uses the END margin with the sign inverted (so `forwards` is always
- * positive), `align: 'center'` uses START. Margin on the un-anchored side
- * has no effect under CSS Anchor Positioning.
+ * **The cross-axis shift margins.**
+ *
+ * The shift is written antisymmetrically on BOTH cross-axis sides
+ * (`start: +value`, `end: -value`) rather than as a single margin on the side
+ * picked from `align`. Two separate behaviours require it:
+ *
+ * 1. **`align: 'center'` is centered with `anchor-center`, which centers the
+ *    popover's MARGIN box on the anchor.** A single-sided margin widens the
+ *    margin box, so it displaces the border box by only half its value. An
+ *    antisymmetric pair leaves the margin box width unchanged (`+value` and
+ *    `-value` sum to zero) while moving its center by the full value.
+ * 2. **`position-try-fallbacks` can slide the popover onto the opposite
+ *    cross-axis side.** A `<position-area>` fallback keeps the base style's
+ *    margins, and margin on the un-anchored side has no effect, so a
+ *    single-sided margin is silently dropped once the browser slides across the
+ *    cross axis. With both sides written, whichever side ends up anchored moves
+ *    the popover the same physical direction.
+ *
+ * Leaving the margin box width unchanged also means the shift does not move
+ * the point at which `position-try-fallbacks` decides the popover overflows.
+ *
+ * A `<try-tactic>` fallback (`flip-block`, `flip-inline`) behaves differently to
+ * a `<position-area>` one: it SWAPS the start and end margins rather than
+ * keeping them, which is what preserves the gap through a flip. So a flip across
+ * the cross axis mirrors the shift along with the rest of the placement, rather
+ * than preserving its physical direction. Only the diagonal fallback does that,
+ * and only for `align: 'start' | 'end'`. See `placementToTryFallbacks`.
+ *
+ * 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`.
  */
-function crossAxisShiftMargin(_ref2) {
+function crossAxisShiftMargins(_ref2) {
   var placement = _ref2.placement,
     crossAxisShiftCssValue = _ref2.crossAxisShiftCssValue,
     direction = _ref2.direction;
-  var axis = placement.axis,
-    align = placement.align;
-  var directionSign = direction === 'forwards' ? 1 : -1;
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  var useEndSide = align === 'end';
-  var side = useEndSide ? 'end' : 'start';
-  var sideSign = useEndSide ? -1 : 1;
-  var finalSign = directionSign * sideSign;
-  // Wrap any string in calc() with the sign factor. CSS handles the math.
-  var value = finalSign === 1 ? crossAxisShiftCssValue : "calc(-1 * ".concat(crossAxisShiftCssValue, ")");
-  return {
-    property: "margin-".concat(crossAxis, "-").concat(side),
-    value: value
-  };
+  var crossAxis = placement.axis === 'block' ? 'inline' : 'block';
+  // Wrap any string in calc() with the sign factor. CSS handles the math,
+  // so opaque values such as design tokens negate correctly.
+  var negated = "calc(-1 * ".concat(crossAxisShiftCssValue, ")");
+  var isForwards = direction === 'forwards';
+  return [{
+    property: "margin-".concat(crossAxis, "-start"),
+    value: isForwards ? crossAxisShiftCssValue : negated
+  }, {
+    property: "margin-".concat(crossAxis, "-end"),
+    value: isForwards ? negated : crossAxisShiftCssValue
+  }];
 }
 
 /**
@@ -226,10 +263,9 @@ export function useAnchorPosition(_ref3) {
         placement: stablePlacement,
         offset: gapCssValue
       });
-      // Computed once; reused below to populate the active
-      // `--ds-cross-axis-shift-margin-*` custom property for the
-      // named arrow @position-try rules.
-      var crossAxisShift = crossAxisShiftMargin({
+      // Computed once; also mirrored into the
+      // `--ds-cross-axis-shift-margin-*` custom properties below.
+      var crossAxisShift = crossAxisShiftMargins({
         placement: stablePlacement,
         crossAxisShiftCssValue: crossAxisShiftCssValue,
         direction: stablePlacement.offset.crossAxisShift.direction
@@ -256,48 +292,14 @@ export function useAnchorPosition(_ref3) {
       }, {
         property: 'inset',
         value: 'auto'
-      }, {
-        property: gap.property,
-        value: gap.value
-      }, {
-        property: crossAxisShift.property,
-        value: crossAxisShift.value
-      }];
-
-      // Expose the active cross-axis shift via custom properties so each
-      // named arrow @position-try rule can re-apply it after a flip.
-      // One of the four (cross-axis, side) properties is non-zero at a time.
-      popoverStyles.push({
-        property: '--ds-cross-axis-shift-margin-start',
-        value: '0px'
-      });
-      popoverStyles.push({
-        property: '--ds-cross-axis-shift-margin-end',
-        value: '0px'
-      });
-      popoverStyles.push({
-        property: '--ds-cross-axis-shift-margin-block-start',
-        value: '0px'
-      });
-      popoverStyles.push({
-        property: '--ds-cross-axis-shift-margin-block-end',
-        value: '0px'
-      });
-      // `crossAxisShift` IS the active margin; reuse instead of recomputing.
-      var crossAxisShiftActive = crossAxisShift;
-      var customPropertyByMarginProperty = {
-        'margin-inline-start': '--ds-cross-axis-shift-margin-start',
-        'margin-inline-end': '--ds-cross-axis-shift-margin-end',
-        'margin-block-start': '--ds-cross-axis-shift-margin-block-start',
-        'margin-block-end': '--ds-cross-axis-shift-margin-block-end'
-      };
-      var crossAxisShiftCustomProperty = customPropertyByMarginProperty[crossAxisShiftActive.property];
-      if (crossAxisShiftCustomProperty) {
-        popoverStyles.push({
-          property: crossAxisShiftCustomProperty,
-          value: crossAxisShiftActive.value
-        });
-      }
+      }, gap].concat(_toConsumableArray(crossAxisShift), _toConsumableArray(ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES), _toConsumableArray(crossAxisShift.map(function (_ref4) {
+        var property = _ref4.property,
+          value = _ref4.value;
+        return {
+          property: CROSS_AXIS_SHIFT_CUSTOM_PROPERTY[property],
+          value: value
+        };
+      })));
 
       /**
        * **We are never cleaning up anchor names**

package/dist/esm/internal/use-width-from-anchor.js

@@ -1,78 +1,89 @@
 import { useLayoutEffect } from 'react';
+import once from '@atlaskit/ds-lib/once';
 import { setStyle } from './set-style';
 
+/**
+ * Probes anchor SIZING, separately from `anchor-name` (see
+ * `supportsAnchorPositioning`): some browsers have positioning but not sizing.
+ * `once()` for SSR safety.
+ */
+var supportsAnchorSize = once(function () {
+  if (typeof window === 'undefined' || typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return false;
+  }
+  return CSS.supports('min-inline-size', 'anchor-size(self-inline)');
+});
+
+/**
+ * The JS fallback's stand-in for `anchor-size(self-inline)`. `offsetWidth` / `offsetHeight` are
+ * physical, so the axis is picked from the popover's `writing-mode`. Anything not horizontal is
+ * treated as vertical, and an unknown or empty value falls back to `offsetWidth`.
+ */
+function getFallbackAnchorInlineSize(_ref) {
+  var anchor = _ref.anchor,
+    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 ? anchor.offsetHeight : anchor.offsetWidth;
+}
+
 /**
  * Sets the width of a popover element relative to its anchor element.
  *
- * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
- * - `'min-anchor'`   → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
- *   but can grow wider.
- * - `'none'`         → no explicit width is set (default behaviour)
- *
- * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
- * one-off measurement of `anchor.offsetWidth`.
+ * - `'match-anchor'` → `inline-size: anchor-size(self-inline)`, exact
+ * - `'min-anchor'`   → `min-inline-size: anchor-size(self-inline)`, floor only
+ * - `'none'`         → `min-inline-size: max-content`, content floor (default)
  *
- * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ * `self-inline` is the inline axis of the element USING the function (the popover), never the
+ * anchor, so it matches the axis `inline-size` constrains. See
+ * `notes/decisions/width-from-anchor-floors.md`.
  */
-export function useWidthFromAnchor(_ref) {
-  var mode = _ref.mode,
-    popoverRef = _ref.popoverRef,
-    anchorRef = _ref.anchorRef,
-    isOpen = _ref.isOpen;
+export function useWidthFromAnchor(_ref2) {
+  var mode = _ref2.mode,
+    popoverRef = _ref2.popoverRef,
+    anchorRef = _ref2.anchorRef,
+    isOpen = _ref2.isOpen;
   useLayoutEffect(function () {
     var node = popoverRef.current;
     if (!node) {
       return;
     }
-
-    // Feature-detect `anchor-size()` specifically (not just `anchor-name`)
-    // so the JS fallback fires correctly in browsers that support anchor
-    // positioning but not anchor sizing.
-    var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
     if (mode === 'match-anchor') {
-      // Set an exact width matching the anchor.
-      // `min-inline-size` is intentionally NOT set here - it would override the
-      // explicit width constraint, allowing the popover to grow past the anchor's width.
-      if (supportsAnchorSize) {
+      // No floor here: it would let the popover grow past the anchor.
+      if (supportsAnchorSize()) {
         return setStyle({
           element: node,
           styles: [{
-            property: 'width',
-            value: 'anchor-size(width)'
+            property: 'inline-size',
+            value: 'anchor-size(self-inline)'
           }]
         });
       }
-
-      // JS fallback: one-off read of the anchor's width.
       var anchor = anchorRef.current;
       if (anchor) {
         return setStyle({
           element: node,
           styles: [{
-            property: 'width',
-            value: "".concat(anchor.offsetWidth, "px")
+            property: 'inline-size',
+            value: "".concat(getFallbackAnchorInlineSize({
+              anchor: anchor,
+              popover: node
+            }), "px")
           }]
         });
       }
       return;
     }
-
-    // For 'min-anchor' and 'none', apply `min-inline-size: max-content` to ensure
-    // correct position-try-fallbacks behaviour (popover margin box overflows the
-    // viewport when its span region is too narrow, rather than wrapping content).
-    var minInlineSizeStyle = {
-      property: 'min-inline-size',
-      value: 'max-content'
-    };
     if (mode === 'min-anchor') {
-      // Set a minimum width matching the anchor. The popover can grow wider
-      // if its content requires it.
-      if (supportsAnchorSize) {
+      // One floor only. The content floor from mode 'none' deliberately does not also apply
+      // here, and cannot: it would need this same property. See the decision note.
+      if (supportsAnchorSize()) {
         return setStyle({
           element: node,
-          styles: [minInlineSizeStyle, {
-            property: 'min-width',
-            value: 'anchor-size(width)'
+          styles: [{
+            property: 'min-inline-size',
+            value: 'anchor-size(self-inline)'
           }]
         });
       }
@@ -80,24 +91,28 @@ export function useWidthFromAnchor(_ref) {
       if (_anchor) {
         return setStyle({
           element: node,
-          styles: [minInlineSizeStyle, {
-            property: 'min-width',
-            value: "".concat(_anchor.offsetWidth, "px")
+          styles: [{
+            property: 'min-inline-size',
+            value: "".concat(getFallbackAnchorInlineSize({
+              anchor: _anchor,
+              popover: node
+            }), "px")
           }]
         });
       }
 
-      // No anchor available in JS fallback - still apply min-inline-size.
-      return setStyle({
-        element: node,
-        styles: [minInlineSizeStyle]
-      });
+      // Nothing to measure, so no floor.
+      return;
     }
 
-    // 'none' mode: no explicit width, but still apply `min-inline-size: max-content`.
+    // Makes a too-narrow span overflow and drive `position-try-fallbacks` instead of wrapping.
+    // `@atlaskit/popper` resets this exact property to `0` for its fit-to-viewport mode.
     return setStyle({
       element: node,
-      styles: [minInlineSizeStyle]
+      styles: [{
+        property: 'min-inline-size',
+        value: 'max-content'
+      }]
     });
   }, [mode, popoverRef, anchorRef, isOpen]);
 }

package/dist/types/internal/anchor-positioning-fallback.d.ts

@@ -1,4 +1,34 @@
-import { type TPlacement } from './resolve-placement';
+import { type TCrossAxisShiftDirection, type TPlacement } from './resolve-placement';
+/**
+ * JS fallback positioning math. Used only when the browser does not
+ * support CSS Anchor Positioning (less than 6% of users).
+ *
+ * Consumer-supplied `offset.gap` and `offset.crossAxisShift` are
+ * honored: the caller (`useAnchorPosition`) resolves CSS length strings
+ * (tokens, calc, var, etc) to pixels via a DOM probe before passing them
+ * in. The caller also keeps the popover hidden (`opacity: 0`) until the
+ * first measurement completes, so the popover never paints at the wrong
+ * position.
+ */
+/**
+ * A viewport-relative position, in pixels. Physical rather than logical
+ * because it is written straight to `top` / `left`.
+ */
+type TPosition = {
+    top: number;
+    left: number;
+};
+/**
+ * The cross-axis shift with its length already resolved to pixels.
+ *
+ * Mirrors `TCrossAxisShiftOffset`, whose `value` is an unresolved CSS length
+ * string. Only this module needs the pixel form, because only this module does
+ * the arithmetic itself.
+ */
+type TResolvedCrossAxisShift = {
+    value: number;
+    direction: TCrossAxisShiftDirection;
+};
 /**
  * Computes popover position from trigger rect and viewport, flipping to
  * the side with more space when needed. Re-runs on scroll/resize.
@@ -16,11 +46,6 @@ export declare function computeFallbackPosition({ triggerRect, popoverEl, placem
         height: number;
     };
     gap: number;
-    crossAxisShift: {
-        value: number;
-        direction: 'forwards' | 'backwards';
-    };
-}): {
-    top: number;
-    left: number;
-};
+    crossAxisShift: TResolvedCrossAxisShift;
+}): TPosition;
+export {};

package/dist/types/internal/get-aria-for-trigger.d.ts

@@ -65,8 +65,9 @@ type TAriaForTrigger = {
  *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
  *   the value is `undefined`.
  * - `aria-expanded` - reflects the current open state.
- * - `aria-controls` - references the popover element by its id while the
- *   popover is open, and is omitted while the popover is closed and unmounted.
+ * - `aria-controls` - references the popover element by its id, even
+ *   while the popover is closed. The relationship is stable; `aria-expanded`
+ *   carries the current visibility state.
  *
  * **This function is for click/keyboard-activated popovers only.** For
  * hover-driven tooltips, the trigger should use `aria-describedby` instead.

package/dist/types/internal/resolve-placement.d.ts

@@ -1,14 +1,20 @@
+/**
+ * Which way along the cross axis a shift moves the popover. `'forwards'` is
+ * always toward the cross-axis END and `'backwards'` toward the START, for
+ * every `align` value. See `notes/decisions/placement-offset.md`.
+ */
+export type TCrossAxisShiftDirection = 'forwards' | 'backwards';
 /**
  * Cross-axis shift. `value` is a CSS length string (consumer numbers are
- * normalized to `${n}px`). `direction` is `'forwards'` (toward end) or
- * `'backwards'` (toward start).
+ * normalized to `${n}px`).
  */
 export type TCrossAxisShiftOffset = {
     value: string;
-    direction: 'forwards' | 'backwards';
+    direction: TCrossAxisShiftDirection;
 };
 export type TPlacementAxis = 'block' | 'inline';
 export type TPlacementEdge = 'start' | 'end';
+export type TPlacementAlign = 'start' | 'center' | 'end';
 /**
  * Fully-resolved placement (internal). Use `resolvePlacement` for partial input.
  * `offset.gap` and `offset.crossAxisShift.value` are always CSS
@@ -17,13 +23,10 @@ export type TPlacementEdge = 'start' | 'end';
 export type TPlacement = {
     axis: TPlacementAxis;
     edge: TPlacementEdge;
-    align: 'start' | 'center' | 'end';
+    align: TPlacementAlign;
     offset: {
         gap: string;
-        crossAxisShift: {
-            value: string;
-            direction: 'forwards' | 'backwards';
-        };
+        crossAxisShift: TCrossAxisShiftOffset;
     };
 };
 /**
@@ -36,14 +39,14 @@ export type TPlacement = {
  *   - `crossAxisShift`  - nudge along the trigger edge (perpendicular to the placement axis)
  */
 export type TPlacementOptions = {
-    axis?: 'block' | 'inline';
-    edge?: 'start' | 'end';
-    align?: 'start' | 'center' | 'end';
+    axis?: TPlacementAxis;
+    edge?: TPlacementEdge;
+    align?: TPlacementAlign;
     offset?: {
         gap?: number | string;
         crossAxisShift?: {
             value?: number | string;
-            direction?: 'forwards' | 'backwards';
+            direction?: TCrossAxisShiftDirection;
         };
     };
 };

package/dist/types/internal/set-style.d.ts

@@ -1,11 +1,20 @@
+/**
+ * A single inline style declaration.
+ *
+ * `TProperty` narrows the property name for callers that write a known, closed
+ * set of properties. Narrowing it lets a record keyed on those same names be
+ * checked for exhaustiveness at compile time, rather than silently resolving to
+ * `undefined` for a name that was never mapped.
+ */
+export type TStyleDeclaration<TProperty extends string = string> = {
+    property: TProperty;
+    value: string;
+};
 /**
  * Sets inline styles on an element and returns a cleanup function that
  * restores the prior inline values (so we do not stomp consumer styles).
  */
 export declare function setStyle({ element, styles, }: {
     element: HTMLElement;
-    styles: Array<{
-        property: string;
-        value: string;
-    }>;
+    styles: TStyleDeclaration[];
 }): () => void;

package/dist/types/internal/use-width-from-anchor.d.ts

@@ -3,15 +3,13 @@ import type { TWidthFromAnchorMode } from '../popover/types';
 /**
  * Sets the width of a popover element relative to its anchor element.
  *
- * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
- * - `'min-anchor'`   → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
- *   but can grow wider.
- * - `'none'`         → no explicit width is set (default behaviour)
+ * - `'match-anchor'` → `inline-size: anchor-size(self-inline)`, exact
+ * - `'min-anchor'`   → `min-inline-size: anchor-size(self-inline)`, floor only
+ * - `'none'`         → `min-inline-size: max-content`, content floor (default)
  *
- * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
- * one-off measurement of `anchor.offsetWidth`.
- *
- * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ * `self-inline` is the inline axis of the element USING the function (the popover), never the
+ * anchor, so it matches the axis `inline-size` constrains. See
+ * `notes/decisions/width-from-anchor-floors.md`.
  */
 export declare function useWidthFromAnchor({ mode, popoverRef, anchorRef, isOpen, }: {
     mode: TWidthFromAnchorMode;

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

@@ -166,11 +166,12 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
  *
  * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
  * - `'match-anchor'`: popover matches the anchor element's width exactly
- *   via CSS `anchor-size(width)`. Falls back to a one-off measurement
- *   of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
- *   is not supported.
+ *   via CSS `inline-size: anchor-size(self-inline)`. Falls back to a
+ *   one-off measurement of `anchorRef.current.offsetWidth` when CSS
+ *   Anchor Positioning is not supported.
  * - `'min-anchor'`: popover is at least as wide as the anchor, but
- *   can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
- *   Falls back to a one-off measurement of the anchor's width.
+ *   can grow wider if content requires it. Uses
+ *   `min-inline-size: anchor-size(self-inline)`. Falls back to a one-off
+ *   measurement of the anchor's width.
  */
 export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.2.2",
+	"version": "4.2.4",
 	"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",