@atlaskit/top-layer 6.2.1 → 6.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/top-layer
 
+## 6.2.2
+
+### Patch Changes
+
+- [`481f10d4007ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/481f10d4007ce) -
+  Popover and Dialog surfaces are now protected from most consumer styles that target them.
+
 ## 6.2.1
 
 ### Patch Changes

package/dist/cjs/dialog/dialog-content.compiled.css

@@ -1,33 +1,45 @@
-._19itglyw{border:none}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
 ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
-._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
+._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
+._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1i4q4jg8{overflow-wrap:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
-._1nmz4jg8{word-break:normal}
 ._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1p1dglyw{text-transform:none}
-._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
+._1yd01wug:defined:defined:defined{min-width:auto}
 ._2hwx1wug{margin-right:auto}
-._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
-._c71lglyw{max-height:none}
+._6hkqidpf:defined:defined:defined{inset-block-end:0}
+._722r1ule[open][open][open]{display:block}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._o5724jg8{white-space:normal}
+._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
+._m466idpf:defined:defined:defined{text-indent:0}
+._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
-._y3gnv2br{text-align:start}
-._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
+._x2wjglyw:defined:defined:defined{translate:none}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

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

@@ -19,22 +19,13 @@ var _useAnimatedVisibility = require("../internal/use-animated-visibility");
 var _useFocusWrap = require("../internal/use-focus-wrap");
 var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
 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); }
-// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited interaction and text-layout properties (e.g.
-// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
-// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
-// must inherit). The reset has no box side-effects, so it does not reintroduce
-// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
-// (ADS forbids sharing styles across files, so it is co-located and duplicated).
-// The `satisfies` check below fails the build if either copy drifts.
+// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 var dialogStyles = {
-  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  root: "_19pk1wug _2hwx1wug _otyr1wug _18u01wug _p12fglyw _lzhqglyw _mkdmze3t _lizuze3t _dbnbze3t _v12pze3t _1yd01wug _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1dqv1n9t _6hkqidpf _1rec1j28 _722r1ule",
   motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v7kvq",
   exit: "_y44vgeqi"
@@ -51,8 +42,9 @@ var backdropStyles = {
  * background, border-radius, or layout. Consumers provide their own styling.
  *
  * Visibility is controlled declaratively via `isOpen`:
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
+ *   by an `allow-discrete` transition)
  *
  * Handles native `cancel` event (Escape) and backdrop click detection.
  *

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

@@ -1,30 +1,47 @@
-._19itglyw{border:none}
-._1r041wug{inset:auto}
+._1vdi1wug:defined:defined:defined{inset:auto}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v179n{animation:var(--ds-popover-motion-enter)}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
-._18u0idpf{margin-left:0}
-._19bvidpf{padding-left:0}
-._19pkidpf{margin-top:0}
-._1i4q4jg8{overflow-wrap:normal}
-._1nmz4jg8{word-break:normal}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
+._1715kb7n:defined:defined:defined{opacity:1}
+._17ke4jg8:defined:defined:defined{align-items:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1ap0idpf:defined:defined:defined{margin-left:0}
+._1aqridpf:defined:defined:defined{margin-bottom:0}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1blzewfl:defined:defined:defined{overflow-y:visible}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
+._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
+._1mjeidpf:defined:defined:defined{padding-bottom:0}
 ._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
-._1p1dglyw{text-transform:none}
-._1reoewfl{overflow-x:visible}
+._1ogd4jg8:defined:defined:defined{justify-content:normal}
+._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1rmr1wug:defined:defined:defined{height:auto}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
-._2hwxidpf{margin-right:0}
-._4t3i1wug{height:auto}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._ca0qidpf{padding-top:0}
+._1yd01wug:defined:defined:defined{min-width:auto}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._az2pidpf:defined:defined:defined{padding-top:0}
+._b2a9idpf:defined:defined:defined{margin-top:0}
+._byz4idpf:defined:defined:defined{padding-left:0}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._n3tdidpf{padding-bottom:0}
-._o5724jg8{white-space:normal}
-._otyridpf{margin-bottom:0}
-._p6861txw:popover-open{display:flex}
-._u5f3idpf{padding-right:0}
-._y3gnv2br{text-align:start}
+._kqwmvrvc:defined:defined:defined{flex-direction:row}
+._li0iglyw:defined:defined:defined{max-width:none}
+._m466idpf:defined:defined:defined{text-indent:0}
+._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._wmifewfl:defined:defined:defined{overflow-x:visible}
+._x2wjglyw:defined:defined:defined{translate:none}
+._z3e7idpf:defined:defined:defined{margin-right:0}
 :where(._1yp3idpf)>*{min-inline-size:0}
 :where(._51hckb7n)>*{flex-grow:1}
 :where(._f5r5idpf)>*{min-block-size:0}

package/dist/cjs/popover/popover.js

@@ -57,30 +57,23 @@ var supportsPopoverHint = (0, _once.default)(function () {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited interaction and text-layout properties
-// (e.g. `pointer-events: none` from an overlaid controls container and
-// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
-// top-layer element because, for CSS inheritance, it is still a DOM child of its
-// trigger (top-layer promotion is paint/stacking only; the legacy portal path
-// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit).
-//
-// Not `all: initial`: the target is what `<body>` gave the portal path, not the
-// spec initial values (UA serif, black, `color-scheme: normal`), and as an author
-// declaration it would also override the UA `[popover]` rules (`position: fixed`,
-// `display: none` when closed).
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
-// ADS forbids sharing styles across files (`no-exported-styles` /
-// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
-// co-located and duplicated deliberately. The `satisfies` check below fails the
-// build if either copy drifts.
+/**
+ * **Surface reset**
+ *
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
+ * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
+ *
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
+ * The `satisfies` check below catches drift.
+ */
 var surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
+  root: "_lzhqglyw _az2pidpf _13shidpf _1mjeidpf _byz4idpf _b2a9idpf _z3e7idpf _1aqridpf _1ap0idpf _1vdi1wug _wmifewfl _1blzewfl _1rec1j28 _kqwmvrvc _1maw1q9c _17ke4jg8 _1ogd4jg8 _1dqv1n9t _qctn1ns9 _1rmr1wug _1yd01wug _li0iglyw _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1p7w1txw _51hckb7n _1yp3idpf _f5r5idpf",
   motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v179n",
   exit: "_y44vof1f"
@@ -122,8 +115,9 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  *
  * ### 🔌 Visibility
  *
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
+ *   visible by an `allow-discrete` transition).
  *
  * ### 📜 Browser dismiss is non-cancellable
  *

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -1,33 +1,45 @@
-._19itglyw{border:none}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
 ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
-._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
+._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
+._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1i4q4jg8{overflow-wrap:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
-._1nmz4jg8{word-break:normal}
 ._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1p1dglyw{text-transform:none}
-._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
+._1yd01wug:defined:defined:defined{min-width:auto}
 ._2hwx1wug{margin-right:auto}
-._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
-._c71lglyw{max-height:none}
+._6hkqidpf:defined:defined:defined{inset-block-end:0}
+._722r1ule[open][open][open]{display:block}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._o5724jg8{white-space:normal}
+._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
+._m466idpf:defined:defined:defined{text-indent:0}
+._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
-._y3gnv2br{text-align:start}
-._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
+._x2wjglyw:defined:defined:defined{translate:none}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

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

@@ -10,22 +10,13 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited interaction and text-layout properties (e.g.
-// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
-// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
-// must inherit). The reset has no box side-effects, so it does not reintroduce
-// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
-// (ADS forbids sharing styles across files, so it is co-located and duplicated).
-// The `satisfies` check below fails the build if either copy drifts.
+// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 const surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 const dialogStyles = {
-  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  root: "_19pk1wug _2hwx1wug _otyr1wug _18u01wug _p12fglyw _lzhqglyw _mkdmze3t _lizuze3t _dbnbze3t _v12pze3t _1yd01wug _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1dqv1n9t _6hkqidpf _1rec1j28 _722r1ule",
   motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v7kvq",
   exit: "_y44vgeqi"
@@ -42,8 +33,9 @@ const backdropStyles = {
  * background, border-radius, or layout. Consumers provide their own styling.
  *
  * Visibility is controlled declaratively via `isOpen`:
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
+ *   by an `allow-discrete` transition)
  *
  * Handles native `cancel` event (Escape) and backdrop click detection.
  *

package/dist/es2019/popover/popover.compiled.css

@@ -1,30 +1,47 @@
-._19itglyw{border:none}
-._1r041wug{inset:auto}
+._1vdi1wug:defined:defined:defined{inset:auto}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v179n{animation:var(--ds-popover-motion-enter)}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
-._18u0idpf{margin-left:0}
-._19bvidpf{padding-left:0}
-._19pkidpf{margin-top:0}
-._1i4q4jg8{overflow-wrap:normal}
-._1nmz4jg8{word-break:normal}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
+._1715kb7n:defined:defined:defined{opacity:1}
+._17ke4jg8:defined:defined:defined{align-items:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1ap0idpf:defined:defined:defined{margin-left:0}
+._1aqridpf:defined:defined:defined{margin-bottom:0}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1blzewfl:defined:defined:defined{overflow-y:visible}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
+._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
+._1mjeidpf:defined:defined:defined{padding-bottom:0}
 ._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
-._1p1dglyw{text-transform:none}
-._1reoewfl{overflow-x:visible}
+._1ogd4jg8:defined:defined:defined{justify-content:normal}
+._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1rmr1wug:defined:defined:defined{height:auto}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
-._2hwxidpf{margin-right:0}
-._4t3i1wug{height:auto}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._ca0qidpf{padding-top:0}
+._1yd01wug:defined:defined:defined{min-width:auto}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._az2pidpf:defined:defined:defined{padding-top:0}
+._b2a9idpf:defined:defined:defined{margin-top:0}
+._byz4idpf:defined:defined:defined{padding-left:0}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._n3tdidpf{padding-bottom:0}
-._o5724jg8{white-space:normal}
-._otyridpf{margin-bottom:0}
-._p6861txw:popover-open{display:flex}
-._u5f3idpf{padding-right:0}
-._y3gnv2br{text-align:start}
+._kqwmvrvc:defined:defined:defined{flex-direction:row}
+._li0iglyw:defined:defined:defined{max-width:none}
+._m466idpf:defined:defined:defined{text-indent:0}
+._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._wmifewfl:defined:defined:defined{overflow-x:visible}
+._x2wjglyw:defined:defined:defined{translate:none}
+._z3e7idpf:defined:defined:defined{margin-right:0}
 :where(._1yp3idpf)>*{min-inline-size:0}
 :where(._51hckb7n)>*{flex-grow:1}
 :where(._f5r5idpf)>*{min-block-size:0}

package/dist/es2019/popover/popover.js

@@ -51,30 +51,23 @@ const supportsPopoverHint = once(() => {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited interaction and text-layout properties
-// (e.g. `pointer-events: none` from an overlaid controls container and
-// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
-// top-layer element because, for CSS inheritance, it is still a DOM child of its
-// trigger (top-layer promotion is paint/stacking only; the legacy portal path
-// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit).
-//
-// Not `all: initial`: the target is what `<body>` gave the portal path, not the
-// spec initial values (UA serif, black, `color-scheme: normal`), and as an author
-// declaration it would also override the UA `[popover]` rules (`position: fixed`,
-// `display: none` when closed).
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
-// ADS forbids sharing styles across files (`no-exported-styles` /
-// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
-// co-located and duplicated deliberately. The `satisfies` check below fails the
-// build if either copy drifts.
+/**
+ * **Surface reset**
+ *
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
+ * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
+ *
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
+ * The `satisfies` check below catches drift.
+ */
 const surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 const styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
+  root: "_lzhqglyw _az2pidpf _13shidpf _1mjeidpf _byz4idpf _b2a9idpf _z3e7idpf _1aqridpf _1ap0idpf _1vdi1wug _wmifewfl _1blzewfl _1rec1j28 _kqwmvrvc _1maw1q9c _17ke4jg8 _1ogd4jg8 _1dqv1n9t _qctn1ns9 _1rmr1wug _1yd01wug _li0iglyw _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1p7w1txw _51hckb7n _1yp3idpf _f5r5idpf",
   motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v179n",
   exit: "_y44vof1f"
@@ -116,8 +109,9 @@ const POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree',
  *
  * ### 🔌 Visibility
  *
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
+ *   visible by an `allow-discrete` transition).
  *
  * ### 📜 Browser dismiss is non-cancellable
  *

package/dist/esm/dialog/dialog-content.compiled.css

@@ -1,33 +1,45 @@
-._19itglyw{border:none}
 ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
 ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
-._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
+._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
+._18u01wug{margin-left:auto}
 ._19pk1wug{margin-top:auto}
-._1i4q4jg8{overflow-wrap:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
 ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
 ._1ltk1j28::-ms-backdrop{background-color:transparent}
 ._1ltk1j28::backdrop{background-color:transparent}
-._1nmz4jg8{word-break:normal}
 ._1o511hrf{animation-fill-mode:both}
 ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
-._1p1dglyw{text-transform:none}
-._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
+._1yd01wug:defined:defined:defined{min-width:auto}
 ._2hwx1wug{margin-right:auto}
-._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
-._c71lglyw{max-height:none}
+._6hkqidpf:defined:defined:defined{inset-block-end:0}
+._722r1ule[open][open][open]{display:block}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._o5724jg8{white-space:normal}
+._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
+._m466idpf:defined:defined:defined{text-indent:0}
+._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
 ._otyr1wug{margin-bottom:auto}
 ._p12fglyw{max-width:none}
-._y3gnv2br{text-align:start}
-._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
+._x2wjglyw:defined:defined:defined{translate:none}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}

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

@@ -10,22 +10,13 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
-// Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
-// Neutralises inherited interaction and text-layout properties (e.g.
-// `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
-// surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
-// must inherit). The reset has no box side-effects, so it does not reintroduce
-// the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
-// (ADS forbids sharing styles across files, so it is co-located and duplicated).
-// The `satisfies` check below fails the build if either copy drifts.
+// Surface reset. KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
 var surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 var dialogStyles = {
-  root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
+  root: "_19pk1wug _2hwx1wug _otyr1wug _18u01wug _p12fglyw _lzhqglyw _mkdmze3t _lizuze3t _dbnbze3t _v12pze3t _1yd01wug _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1dqv1n9t _6hkqidpf _1rec1j28 _722r1ule",
   motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v7kvq",
   exit: "_y44vgeqi"
@@ -42,8 +33,9 @@ var backdropStyles = {
  * background, border-radius, or layout. Consumers provide their own styling.
  *
  * Visibility is controlled declaratively via `isOpen`:
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
+ *   by an `allow-discrete` transition)
  *
  * Handles native `cancel` event (Escape) and backdrop click detection.
  *

package/dist/esm/popover/popover.compiled.css

@@ -1,30 +1,47 @@
-._19itglyw{border:none}
-._1r041wug{inset:auto}
+._1vdi1wug:defined:defined:defined{inset:auto}
+._lzhqglyw:defined:defined:defined{border:none}
 ._y44v179n{animation:var(--ds-popover-motion-enter)}
-._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
-._18u0idpf{margin-left:0}
-._19bvidpf{padding-left:0}
-._19pkidpf{margin-top:0}
-._1i4q4jg8{overflow-wrap:normal}
-._1nmz4jg8{word-break:normal}
+._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
+._1715kb7n:defined:defined:defined{opacity:1}
+._17ke4jg8:defined:defined:defined{align-items:normal}
+._19w84jg8:defined:defined:defined{word-break:normal}
+._1ap0idpf:defined:defined:defined{margin-left:0}
+._1aqridpf:defined:defined:defined{margin-bottom:0}
+._1b80glyw:defined:defined:defined{text-transform:none}
+._1blzewfl:defined:defined:defined{overflow-y:visible}
+._1dqv1n9t:defined:defined:defined{position:fixed}
+._1f2zglyw:defined:defined:defined{transform:none}
+._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
+._1gd81wug:defined:defined:defined{min-height:auto}
+._1ljj4jg8:defined:defined:defined{align-self:normal}
+._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
+._1mjeidpf:defined:defined:defined{padding-bottom:0}
 ._1o511hrf{animation-fill-mode:both}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
-._1p1dglyw{text-transform:none}
-._1reoewfl{overflow-x:visible}
+._1ogd4jg8:defined:defined:defined{justify-content:normal}
+._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
+._1rec1j28:defined:defined:defined{background-color:transparent}
+._1rmr1wug:defined:defined:defined{height:auto}
+._1s8uglyw:defined:defined:defined{rotate:none}
 ._1s9z1a5r{transition-behavior:allow-discrete}
-._2hwxidpf{margin-right:0}
-._4t3i1wug{height:auto}
-._azhwidpf{text-indent:0}
-._bfhk1j28{background-color:transparent}
-._ca0qidpf{padding-top:0}
+._1yd01wug:defined:defined:defined{min-width:auto}
+._ao8dglyw:defined:defined:defined{max-height:none}
+._az2pidpf:defined:defined:defined{padding-top:0}
+._b2a9idpf:defined:defined:defined{margin-top:0}
+._byz4idpf:defined:defined:defined{padding-left:0}
+._goh41wug:defined:defined:defined{pointer-events:auto}
+._jg1o4jg8:defined:defined:defined{justify-self:normal}
 ._k8m011k7{transition-property:overlay,display}
-._lcxv1wug{pointer-events:auto}
-._n3tdidpf{padding-bottom:0}
-._o5724jg8{white-space:normal}
-._otyridpf{margin-bottom:0}
-._p6861txw:popover-open{display:flex}
-._u5f3idpf{padding-right:0}
-._y3gnv2br{text-align:start}
+._kqwmvrvc:defined:defined:defined{flex-direction:row}
+._li0iglyw:defined:defined:defined{max-width:none}
+._m466idpf:defined:defined:defined{text-indent:0}
+._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
+._tcxkv2br:defined:defined:defined{text-align:start}
+._tdqwglyw:defined:defined:defined{scale:none}
+._ux9u4jg8:defined:defined:defined{white-space:normal}
+._wmifewfl:defined:defined:defined{overflow-x:visible}
+._x2wjglyw:defined:defined:defined{translate:none}
+._z3e7idpf:defined:defined:defined{margin-right:0}
 :where(._1yp3idpf)>*{min-inline-size:0}
 :where(._51hckb7n)>*{flex-grow:1}
 :where(._f5r5idpf)>*{min-block-size:0}

package/dist/esm/popover/popover.js

@@ -48,30 +48,23 @@ var supportsPopoverHint = once(function () {
   return element.popover === 'hint';
 });
 
-// Surface reset — neutralises inherited interaction and text-layout properties
-// (e.g. `pointer-events: none` from an overlaid controls container and
-// `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
-// top-layer element because, for CSS inheritance, it is still a DOM child of its
-// trigger (top-layer promotion is paint/stacking only; the legacy portal path
-// avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
-// `direction`/`unicode-bidi` (RTL must inherit).
-//
-// Not `all: initial`: the target is what `<body>` gave the portal path, not the
-// spec initial values (UA serif, black, `color-scheme: normal`), and as an author
-// declaration it would also override the UA `[popover]` rules (`position: fixed`,
-// `display: none` when closed).
-//
-// KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
-// ADS forbids sharing styles across files (`no-exported-styles` /
-// `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
-// co-located and duplicated deliberately. The `satisfies` check below fails the
-// build if either copy drifts.
+/**
+ * **Surface reset**
+ *
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
+ * what `<body>` gave the portal path. `color`, `font` and direction still inherit.
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
+ *
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
+ * The `satisfies` check below catches drift.
+ */
 var surfaceResetStyles = {
-  root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
+  root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw"
 };
 true;
 var styles = {
-  root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
+  root: "_lzhqglyw _az2pidpf _13shidpf _1mjeidpf _byz4idpf _b2a9idpf _z3e7idpf _1aqridpf _1ap0idpf _1vdi1wug _wmifewfl _1blzewfl _1rec1j28 _kqwmvrvc _1maw1q9c _17ke4jg8 _1ogd4jg8 _1dqv1n9t _qctn1ns9 _1rmr1wug _1yd01wug _li0iglyw _1gd81wug _ao8dglyw _1ljj4jg8 _jg1o4jg8 _1f2zglyw _x2wjglyw _tdqwglyw _1s8uglyw _1715kb7n _1p7w1txw _51hckb7n _1yp3idpf _f5r5idpf",
   motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
   enter: "_y44v179n",
   exit: "_y44vof1f"
@@ -113,8 +106,9 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  *
  * ### 🔌 Visibility
  *
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
+ *   visible by an `allow-discrete` transition).
  *
  * ### 📜 Browser dismiss is non-cancellable
  *

package/dist/types/dialog/dialog-content.d.ts

@@ -9,8 +9,9 @@ import { type TDialogProps } from './types';
  * background, border-radius, or layout. Consumers provide their own styling.
  *
  * Visibility is controlled declaratively via `isOpen`:
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
+ *   by an `allow-discrete` transition)
  *
  * Handles native `cancel` event (Escape) and backdrop click detection.
  *

package/dist/types/dialog/types.d.ts

@@ -29,9 +29,10 @@ type TDialogBaseProps = {
      * phase can temporarily differ from this value while a close settles.
      *
      * - `true`: calls `showModal()`. When `shouldAnimate` is `true`, the entry
-     *   animation plays via `@starting-style`.
+     *   animation plays as a keyframe animation.
      * - `false`: calls `close()`. When `shouldAnimate` is `true`, the exit
-     *   animation plays via `allow-discrete` while the lifecycle phase is `exiting`.
+     *   animation plays as a keyframe animation while the lifecycle phase is `exiting`,
+     *   kept visible by an `allow-discrete` transition.
      *
      * **Lifecycle observable to consumers:**
      *

package/dist/types/internal/surface-reset.d.ts

@@ -1,13 +1,5 @@
 import type { CompiledStyles } from '@compiled/react';
-/**
- * The host surface reset is declared twice, in `popover/popover.tsx` and
- * `dialog/dialog-content.tsx`, because ADS forbids sharing styles across files
- * (`no-exported-styles` / `no-imported-style-values` — Compiled styles are null
- * at runtime). Each copy asserts itself against this type with
- * `TSurfaceResetCheck`, so the compiler fails if either drifts. Change this
- * first, then both copies.
- */
-export type TSurfaceReset = CompiledStyles<{
+type TSurfaceResetDeclarations = {
     pointerEvents: 'auto';
     whiteSpace: 'normal';
     wordBreak: 'normal';
@@ -15,11 +7,23 @@ export type TSurfaceReset = CompiledStyles<{
     textAlign: 'start';
     textIndent: '0';
     textTransform: 'none';
+};
+/**
+ * The surface reset is duplicated in `popover/popover.tsx` and
+ * `dialog/dialog-content.tsx` (ADS forbids shared styles). Each copy checks
+ * itself against this type. Change `TSurfaceResetDeclarations` first.
+ *
+ * Checks property names and the selector only: `cssMap` widens nested values to
+ * `string`. The host specificity VR tests check the values.
+ */
+export type TBoostedSurfaceReset<TSelector extends string> = CompiledStyles<{
+    [TKey in TSelector]: {
+        [TProperty in keyof TSurfaceResetDeclarations]: string;
+    };
 }>;
 type TIsIdentical<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;
 /**
- * Use as `true satisfies TSurfaceResetCheck<typeof surfaceResetStyles.root>`.
- * Identity rather than assignability, so extra or widened properties also fail.
+ * Identity, not assignability, so extra properties or a wrong selector fail.
  */
-export type TSurfaceResetCheck<TActual> = TIsIdentical<TActual, TSurfaceReset> extends true ? true : 'surfaceResetStyles does not match TSurfaceReset in internal/surface-reset.tsx';
+export type TBoostedSurfaceResetCheck<TActual, TSelector extends string> = TIsIdentical<TActual, TBoostedSurfaceReset<TSelector>> extends true ? true : 'surfaceResetStyles.root does not match TBoostedSurfaceReset in internal/surface-reset.tsx';
 export {};

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

@@ -10,8 +10,9 @@ import { type TPopoverForwardedProps } from './types';
  *
  * ### 🔌 Visibility
  *
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
+ *   visible by an `allow-discrete` transition).
  *
  * ### 📜 Browser dismiss is non-cancellable
  *

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

@@ -84,9 +84,10 @@ type TPopoverBaseProps = {
      * phase can temporarily differ from this value while a close settles.
      *
      * - **`true`:** show the popover (calls `showPopover()`). When `shouldAnimate`
-     *   is `true`, the entry animation plays via `@starting-style`.
+     *   is `true`, the entry animation plays as a keyframe animation.
      * - **`false`:** hide the popover. When `shouldAnimate` is `true`, the exit
-     *   animation plays via `allow-discrete` while the lifecycle phase is `exiting`.
+     *   animation plays as a keyframe animation while the lifecycle phase is `exiting`,
+     *   kept visible by an `allow-discrete` transition.
      *   Otherwise it hides visually without animation, while lifecycle settlement still
      *   waits for the native closed `toggle`.
      *

package/package.json

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