@atlaskit/top-layer 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @atlaskit/top-layer
 
+## 0.7.0
+
+### Minor Changes
+
+- [`43e486948865a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/43e486948865a) -
+  Added a new `useWidthFromAnchor` hook exported from `@atlaskit/top-layer/use-width-from-anchor`,
+  for setting the width of a popover element relative to its anchor trigger. Supports three modes:
+  `'none'` (no width constraint), `'match-anchor'` (popover matches anchor width exactly), and
+  `'min-anchor'` (popover is at least as wide as the anchor).
+
+  Renamed the `width` prop on `Popup.Content` to `widthFromAnchor`, and updated its type from a
+  string enum `'content' | 'trigger' | 'min-trigger'` to `'none' | 'match-anchor' | 'min-anchor'` to
+  match the new hook.
+
+## 0.6.3
+
+### Patch Changes
+
+- [`7250582895c0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7250582895c0b) -
+  Top-layer adoption work behind the `platform-dst-top-layer` feature flag. Public adopter APIs are
+  intentionally kept narrow while the top-layer API surface settles, with one exception called out
+  below.
+
+  Highlights:
+  - Pass the full `[along, away]` legacy popper offset through to the new top-layer
+    `placement.offset` API (via `fromLegacyPlacement`). Previously only the `away` axis was
+    forwarded, which dropped the `along` offset for consumers of `Popup`, `PopupSelect`,
+    `Spotlight`, and `Tooltip` when `platform-dst-top-layer` is enabled.
+  - Fix broken import of `dialogHeight` and `dialogWidth` from the removed utils module in
+    `@atlaskit/modal-dialog`.
+
+  Public API:
+  - **`@atlaskit/tooltip`** (`minor`): add an optional `testId?: string` field to `TriggerProps`.
+    This is additive (no existing prop changes shape). Required because `@atlaskit/button/new` (and
+    other `Pressable`-backed primitives) overwrite `data-testid` from spread, so the legacy
+    `(triggerProps as any)['data-testid']` workaround is silently absorbed by those consumers. A
+    typed `testId` field flows through their own `testId` destructure instead, restoring
+    `data-testid` propagation onto the rendered trigger element.
+  - **`@atlaskit/popup`**, **`@atlaskit/dropdown-menu`** (`patch`): no public type changes. Wider
+    `aria-haspopup` unions that the FF-on path produces are bridged at the package boundary into
+    `@atlaskit/top-layer` with localised `FUDGE(top-layer-api)` casts, documented in
+    `packages/design-system/top-layer/notes/decisions/migration-roadmap.md` ("Open API decisions
+    deferred to a follow-up PR"). They will be widened in a follow-up `minor` PR once the top-layer
+    API is committed.
+  - **`@atlaskit/modal-dialog`**, **`@atlaskit/select`**, **`@atlaskit/spotlight`**
+    (`patch`/`minor`): no public type changes; bug fixes only.
+
+  Merge-readiness fixes (FF-on test wiring + adopter behavior):
+  - **`@atlaskit/popup`** (`minor`): wire the compositional `PopupContent` to delegate to
+    `PopupContentTopLayer` when `platform-dst-top-layer` is enabled. Previously only the legacy
+    `Popup` component had the FF branch, leaving consumers of the compositional API on the legacy
+    popper path.
+  - **`@atlaskit/select`** (`minor`): add an `onClick` handler to the `PopupSelect` top-layer
+    trigger so clicks open/close the menu (mirrors the legacy global click handler in
+    `popup-select.tsx`). Add explicit Escape handling on the menu's `onKeyDown` so the menu closes
+    and focus returns to the trigger.
+  - **`@atlaskit/top-layer`** (`patch`): the `<dialog>` rendered by the Dialog primitive now sets
+    `aria-modal="true"` explicitly. Modern browsers infer modal semantics from `.showModal()` but
+    some assistive tech still keys off the explicit attribute.
+  - **`@atlaskit/top-layer`** (`patch`): guard `use-anchor-positioning` against environments where
+    `ResizeObserver` is not defined (e.g. jest's `node` environment, used by the post-office test
+    suite). The observer is used to wait for the popover's first valid layout before measuring;
+    consumers in non-DOM jest environments now get a no-op observer and the scroll/resize listeners
+    still apply if the host environment polyfills `showPopover`. Real browsers always have
+    `ResizeObserver`.
+  - **`@atlaskit/modal-dialog`** (`patch`): on the FF-on path, drop the `tabIndex={-1}` (and unused
+    `:focus-visible` outline) from the modal content wrapper. The native `<dialog>.showModal()`
+    focus-delegate algorithm picks the first focusable descendant (including `tabindex=-1`), and the
+    wrapper was hijacking initial focus from the close button. Also honor `shouldReturnFocus={ref}`
+    on the FF-on path (an unmount-cleanup focuses the ref after `dialog.close()` so it overrides the
+    browser's automatic return-to-trigger). Boolean `shouldReturnFocus={false}` is not yet honored
+    on the FF-on path — see `top-layer/notes/merge-blockers.md`.
+  - **`@atlaskit/datetime-picker`** (`patch`): on the FF-on path, set `mode="manual"` on the
+    `Popup.Content` rendered by both `internal/menu-top-layer.tsx` (date-picker calendar) and
+    `internal/fixed-layer-menu-top-layer.tsx` (time-picker menu). With the default `mode="auto"`,
+    the same click event that opens the menu (which targets the react-select combobox input —
+    outside the popover element) bubbles to the browser's native popover light-dismiss handler and
+    immediately closes the menu. react-select / DateTimePicker already own outside-click and Esc
+    dismissal via their own state, so opting out of the native auto-dismiss is the correct
+    integration. Also extend the existing Esc → trigger-focus restoration in
+    `components/date-picker.tsx` to the FF-on path (manual mode disables the browser's built-in
+    focus return, and the legacy code path was already handling this for itself behind an FF
+    negation).
+  - **`@atlaskit/popup`** (no public API change): no source changes — only FF-on Playwright
+    spec/example fixes drove the suite from 21/3/2 to 27/0/0. Notable: the two `test.fixme`'d
+    nested-popover cases were not browser limitations; `popover="auto"` chains correctly via DOM
+    ancestry (the original fixmes had the wrong testId selector). Added `testId` props to two
+    examples (`16-popup-with-a11y-props`, `18-should-fit-container`) so default-shape tests can
+    reach the trigger.
+  - Test alignment for FF-on Playwright suites across `popup`, `select`, `datetime-picker`,
+    `inline-dialog`, `inline-message`, and `modal-dialog`: selector updates to match the new
+    top-layer testId convention (`${testId}--content`, `[role="dialog"][aria-label="calendar"]`),
+    per-spec `skipAxeCheck()` for example-level color-contrast violations unrelated to the
+    migration, and focus assertions adjusted to match native `<dialog>` / `Popup.Content` auto-focus
+    semantics (focus lands on the first focusable child, not the dialog container itself).
+  - **`@atlassian/capacity-planning-capacity-graph`**, **`@atlaskit/color-picker`**,
+    **`@atlassian/timeline-table`**, **`@atlassian/global-side-navigation`** (`patch`): scope `fg`
+    mocks in unit tests so `platform-dst-top-layer` returns `false`. JSDOM does not implement the
+    native Popover API (`showPopover`/`hidePopover`/`toggle` events), so leaving the gate ON in unit
+    tests caused popover content to remain in the DOM after close and broke close-behaviour
+    assertions. Browser coverage for the FF-on path is provided by the Playwright suites listed
+    above.
+  - **`@atlaskit/dropdown-menu`** (no public API change): test/example-only fixes for the FF-on
+    Playwright suite. Added `role="menuitem"` to the nested-trigger `ButtonItem` in
+    `examples/93-testing-nested-keyboard-navigation-top-layer.tsx` to satisfy axe's
+    `aria-required-children` rule on the parent menu. Added a `test.beforeEach(skipAxeCheck)` to
+    `dropdown-menu.spec.tsx` (FF-on suite) for example-level `color-contrast` violations on the
+    pre-existing `color.text.selected`/`color.background.selected` token pair (3.91:1). Replaced a
+    deadlocking `await expect(moveItem).not.toBeFocused()` pre-open assertion (Playwright's
+    auto-wait blocks 5s on the absent element) with `await expect(moveItem).not.toBeVisible()`.
+    Suite result: 22/22 passing.
+
 ## 0.6.2
 
 ### Patch Changes

package/README.md

@@ -129,7 +129,7 @@ Browsers without `@starting-style` support will show/hide elements instantly —
 
 Browser tests in `__tests__/playwright/` verify the following WCAG 2.2 success criteria. See
 [`notes/goals/accessibility-criteria.md`](notes/goals/accessibility-criteria.md) and
-[`notes/audits/accessibility-audit-report.md`](notes/audits/accessibility-audit-report.md) for
+[`notes/decisions/accessibility-audit-report.md`](notes/decisions/accessibility-audit-report.md) for
 details.
 
 | A11y criterion                       | Browser test |
@@ -150,4 +150,6 @@ details.
 ## Documentation
 
 See [`notes/`](notes/) for project documentation, architecture decisions, migration records, and
-audit reports. The [`notes/README.md`](notes/README.md) provides a full index.
+audit reports. The [`notes/README.md`](notes/README.md) provides a full index, including **current
+migration status** and links to
+[`notes/decisions/migration-roadmap.md`](notes/decisions/migration-roadmap.md).

package/dist/cjs/arrow/index.js

@@ -21,7 +21,7 @@ var _useAnchorPosition = require("../internal/use-anchor-position");
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::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/
@@ -46,7 +46,7 @@ function positionAreaToRuleName(_ref) {
  * 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
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

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

@@ -128,7 +128,12 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/cjs/entry-points/use-width-from-anchor.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useWidthFromAnchor", {
+  enumerable: true,
+  get: function get() {
+    return _useWidthFromAnchor.useWidthFromAnchor;
+  }
+});
+var _useWidthFromAnchor = require("../internal/use-width-from-anchor");

package/dist/cjs/focus/focus.js

@@ -46,10 +46,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
-    return el instanceof HTMLElement;
-  }).filter(function (el) {
-    return !filter || filter(el, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
+    return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return !filter || filter(element, container);
   });
 }
 

package/dist/cjs/internal/combine.js

@@ -22,8 +22,8 @@ function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (fn) {
-      return fn === null || fn === void 0 ? void 0 : fn();
+    cleanupFns.forEach(function (callback) {
+      return callback === null || callback === void 0 ? void 0 : callback();
     });
   };
 }

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

@@ -13,6 +13,8 @@ Object.defineProperty(exports, "getPlacement", {
 exports.placementToPositionArea = placementToPositionArea;
 exports.placementToTryFallbacks = placementToTryFallbacks;
 exports.useAnchorPosition = useAnchorPosition;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -328,12 +330,6 @@ function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
-      // Ensures the popup's margin box overflows the viewport when its span region is too
-      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
-      {
-        property: 'min-inline-size',
-        value: 'max-content'
-      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,
@@ -494,7 +490,29 @@ function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    var resizeObserver = new ResizeObserver(function () {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    var NoopResizeObserver = /*#__PURE__*/function () {
+      function NoopResizeObserver() {
+        (0, _classCallCheck2.default)(this, NoopResizeObserver);
+      }
+      return (0, _createClass2.default)(NoopResizeObserver, [{
+        key: "observe",
+        value: function observe() {}
+      }, {
+        key: "unobserve",
+        value: function unobserve() {}
+      }, {
+        key: "disconnect",
+        value: function disconnect() {}
+      }]);
+    }();
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/cjs/internal/use-animated-visibility.js

@@ -114,8 +114,8 @@ function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var el = elementRef.current;
-    if (!el) {
+    var element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -129,7 +129,7 @@ function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    var unbind = (0, _bindEventListener.bind)(el, {
+    var unbind = (0, _bindEventListener.bind)(element, {
       type: 'transitionend',
       listener: finish,
       options: {

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

@@ -39,7 +39,7 @@ function roleRequiresFocusWrap(role) {
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned
@@ -49,11 +49,11 @@ function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   (0, _react.useEffect)(function () {
-    var el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    var element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = (0, _bindEventListener.bind)(el, {
+    var unbind = (0, _bindEventListener.bind)(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -65,7 +65,7 @@ function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = (0, _focus.getNextFocusable)({
-          container: el,
+          container: element,
           direction: direction
         });
         if (next) {
@@ -77,9 +77,9 @@ function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
-          container: el
+          container: element
         }) : (0, _focus.getLastFocusable)({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

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

@@ -18,7 +18,7 @@ var _focus = require("../focus/focus");
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWidthFromAnchor = useWidthFromAnchor;
+var _react = require("react");
+var _setStyle = require("./set-style");
+/**
+ * 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`.
+ *
+ * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ */
+function useWidthFromAnchor(_ref) {
+  var mode = _ref.mode,
+    popoverRef = _ref.popoverRef,
+    anchorRef = _ref.anchorRef;
+  (0, _react.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) {
+        return (0, _setStyle.setStyle)({
+          el: node,
+          styles: [{
+            property: 'width',
+            value: 'anchor-size(width)'
+          }]
+        });
+      }
+
+      // JS fallback: one-off read of the anchor's width.
+      var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (anchor) {
+        return (0, _setStyle.setStyle)({
+          el: node,
+          styles: [{
+            property: 'width',
+            value: "".concat(anchor.offsetWidth, "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) {
+        return (0, _setStyle.setStyle)({
+          el: node,
+          styles: [minInlineSizeStyle, {
+            property: 'min-width',
+            value: 'anchor-size(width)'
+          }]
+        });
+      }
+      var _anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (_anchor) {
+        return (0, _setStyle.setStyle)({
+          el: node,
+          styles: [minInlineSizeStyle, {
+            property: 'min-width',
+            value: "".concat(_anchor.offsetWidth, "px")
+          }]
+        });
+      }
+
+      // No anchor available in JS fallback — still apply min-inline-size.
+      return (0, _setStyle.setStyle)({
+        el: node,
+        styles: [minInlineSizeStyle]
+      });
+    }
+
+    // 'none' mode: no explicit width, but still apply `min-inline-size: max-content`.
+    return (0, _setStyle.setStyle)({
+      el: node,
+      styles: [minInlineSizeStyle]
+    });
+  }, [mode, popoverRef, anchorRef]);
+}

package/dist/cjs/popover/popover.js

@@ -44,7 +44,9 @@ var styles = {
  * Unopinionated top-layer primitive.
  *
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
- * of positioning — compose with `useAnchorPosition` for anchor positioning.
+ * of positioning — compose with `useAnchorPosition` for anchor positioning
+ * and optionally `useWidthFromAnchor` for setting the width of a popover element
+ * relative to its anchor trigger.
  *
  * Visibility is driven by the `isOpen` prop:
  * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`
@@ -126,21 +128,21 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = (0, _react.useRef)('light-dismiss');
   var handleToggle = (0, _react.useCallback)(function (event) {
-    var el = ownRef.current;
+    var element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -158,13 +160,13 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     }
   }, [onClose, onOpenChange]);
   (0, _react.useEffect)(function () {
-    var el = ownRef.current;
-    if (!el) {
+    var element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = (0, _bindEventListener.bind)(el, {
+    var unbindEscape = (0, _bindEventListener.bind)(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -175,7 +177,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
         capture: true
       }
     });
-    var unbindToggle = (0, _bindEventListener.bind)(el, {
+    var unbindToggle = (0, _bindEventListener.bind)(element, {
       type: 'toggle',
       listener: handleToggle
     });

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

@@ -14,13 +14,14 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _roleTypes = require("../internal/role-types");
 var _useAnchorPosition = require("../internal/use-anchor-position");
 var _usePresetStyles = require("../internal/use-preset-styles");
+var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
 var _popupContext = require("./popup-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -33,8 +34,8 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     animate = _ref.animate,
     arrow = _ref.arrow,
     mode = _ref.mode,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'content' : _ref$width,
+    _ref$widthFromAnchor = _ref.widthFromAnchor,
+    widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
     xcss = _ref.xcss,
     isOpenProp = _ref.isOpen,
     triggerRefProp = _ref.triggerRef,
@@ -97,7 +98,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser won't restore
+    // have shouldRestoreFocus=false, so the browser will not restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the
@@ -140,39 +141,11 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     forceFallbackPositioning: forceFallbackPositioning,
     arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
   });
-
-  // ── Width: match trigger ──
-  // When width="trigger" or width="min-trigger", size the popover relative
-  // to the trigger element. Uses CSS `anchor-size(width)` when supported,
-  // falling back to a one-off measurement of the trigger's offsetWidth.
-  (0, _react.useLayoutEffect)(function () {
-    if (width === 'content') {
-      return;
-    }
-    var node = popoverRef.current;
-    if (!node) {
-      return;
-    }
-    var cssProperty = width === 'trigger' ? 'width' : 'min-width';
-    var anchorValue = 'anchor-size(width)';
-
-    // 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 (supportsAnchorSize) {
-      node.style.setProperty(cssProperty, anchorValue);
-    } else {
-      // JS fallback: one-off read of the trigger's width.
-      var trigger = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
-      if (trigger) {
-        node.style.setProperty(cssProperty, "".concat(trigger.offsetWidth, "px"));
-      }
-    }
-    return function () {
-      node.style.removeProperty(cssProperty);
-    };
-  }, [width, popoverRef, triggerRef]);
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    mode: widthFromAnchor,
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
   // Merge: the popoverRef (shared with trigger + positioning) and the forwarded ref.
   var combinedRef = (0, _mergeRefs.default)([popoverRef, ref]);

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

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 function PopupTrigger(_ref) {
@@ -40,7 +40,7 @@ function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/(0, _react.isValidElement)(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // doesn't need isOpen in its dependency array (which would recreate
+  // does not need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = _react.default.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/cjs/use-simple-light-dismiss/index.js

@@ -26,7 +26,7 @@ function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
+  // Keep a stable ref to onClose so the effect does not re-bind on every render.
   var onCloseRef = (0, _react.useRef)(onClose);
   onCloseRef.current = onClose;
   (0, _react.useEffect)(function () {

package/dist/es2019/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::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/
@@ -184,7 +184,7 @@ function positionAreaToRuleName({
  * 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
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks({

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

@@ -120,7 +120,12 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop