@atlaskit/top-layer 6.2.1 → 6.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/dialog/dialog-content.compiled.css +28 -15
  3. package/dist/cjs/dialog/dialog-content.js +7 -14
  4. package/dist/cjs/popover/popover.compiled.css +40 -22
  5. package/dist/cjs/popover/popover.js +21 -22
  6. package/dist/es2019/dialog/dialog-content.compiled.css +28 -15
  7. package/dist/es2019/dialog/dialog-content.js +7 -14
  8. package/dist/es2019/popover/popover.compiled.css +40 -22
  9. package/dist/es2019/popover/popover.js +21 -22
  10. package/dist/esm/dialog/dialog-content.compiled.css +28 -15
  11. package/dist/esm/dialog/dialog-content.js +7 -14
  12. package/dist/esm/popover/popover.compiled.css +40 -22
  13. package/dist/esm/popover/popover.js +21 -22
  14. package/dist/types/dialog/dialog-content.d.ts +3 -2
  15. package/dist/types/dialog/types.d.ts +3 -2
  16. package/dist/types/internal/surface-reset.d.ts +22 -12
  17. package/dist/types/popover/popover.d.ts +3 -2
  18. package/dist/types/popover/types.d.ts +3 -2
  19. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/top-layer
2
2
 
3
+ ## 6.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`aaf461aabb51c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aaf461aabb51c) -
8
+ `Popover` and `Dialog` now use the default text colour (`color.text`). Before, the browser gave
9
+ them its own default (`CanvasText`). This only affects content that does not set its own text
10
+ colour. In light and dark mode, that content now looks the same as content rendered in a portal
11
+ under `<body>`.
12
+
13
+ ## 6.2.2
14
+
15
+ ### Patch Changes
16
+
17
+ - [`481f10d4007ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/481f10d4007ce) -
18
+ Popover and Dialog surfaces are now protected from most consumer styles that target them.
19
+
3
20
  ## 6.2.1
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/dialog/dialog-content.compiled.css CHANGED
@@ -1,33 +1,46 @@
1
- ._19itglyw{border:none}
2
1
  ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
3
2
  ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
4
3
  ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
4
  ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
+ ._lzhqglyw:defined:defined:defined{border:none}
6
6
  ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
7
- ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
7
+ ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
8
+ ._18u01wug{margin-left:auto}
8
9
  ._19pk1wug{margin-top:auto}
9
- ._1i4q4jg8{overflow-wrap:normal}
10
+ ._19w84jg8:defined:defined:defined{word-break:normal}
11
+ ._1b80glyw:defined:defined:defined{text-transform:none}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
10
17
  ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
11
18
  ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
12
19
  ._1ltk1j28::-ms-backdrop{background-color:transparent}
13
20
  ._1ltk1j28::backdrop{background-color:transparent}
14
- ._1nmz4jg8{word-break:normal}
15
21
  ._1o511hrf{animation-fill-mode:both}
16
22
  ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
17
- ._1p1dglyw{text-transform:none}
18
- ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1s8uglyw:defined:defined:defined{rotate:none}
19
25
  ._1s9z1a5r{transition-behavior:allow-discrete}
26
+ ._1yd01wug:defined:defined:defined{min-width:auto}
20
27
  ._2hwx1wug{margin-right:auto}
21
- ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
22
- ._azhwidpf{text-indent:0}
23
- ._bfhk1j28{background-color:transparent}
24
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
25
- ._c71lglyw{max-height:none}
28
+ ._6hkqidpf:defined:defined:defined{inset-block-end:0}
29
+ ._722r1ule[open][open][open]{display:block}
30
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
31
+ ._ao8dglyw:defined:defined:defined{max-height:none}
32
+ ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
26
35
  ._k8m011k7{transition-property:overlay,display}
27
- ._lcxv1wug{pointer-events:auto}
28
- ._o5724jg8{white-space:normal}
36
+ ._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
37
+ ._m466idpf:defined:defined:defined{text-indent:0}
38
+ ._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
29
39
  ._otyr1wug{margin-bottom:auto}
30
40
  ._p12fglyw{max-width:none}
31
- ._y3gnv2br{text-align:start}
32
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
41
+ ._tcxkv2br:defined:defined:defined{text-align:start}
42
+ ._tdqwglyw:defined:defined:defined{scale:none}
43
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
44
+ ._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
45
+ ._x2wjglyw:defined:defined:defined{translate:none}
33
46
  @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}
package/dist/cjs/dialog/dialog-content.js CHANGED
@@ -19,22 +19,14 @@ var _useAnimatedVisibility = require("../internal/use-animated-visibility");
19
19
  var _useFocusWrap = require("../internal/use-focus-wrap");
20
20
  var _useSafariEscapeFix2 = require("../internal/use-safari-escape-fix");
21
21
  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); }
22
- // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
23
- // Neutralises inherited interaction and text-layout properties (e.g.
24
- // `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
25
- // surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
26
- // must inherit). The reset has no box side-effects, so it does not reintroduce
27
- // the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
28
- //
29
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
30
- // (ADS forbids sharing styles across files, so it is co-located and duplicated).
31
- // The `satisfies` check below fails the build if either copy drifts.
22
+ // Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
23
+ // KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
32
24
  var surfaceResetStyles = {
33
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
25
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
34
26
  };
35
27
  true;
36
28
  var dialogStyles = {
37
- root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
29
+ 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",
38
30
  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
39
31
  enter: "_y44v7kvq",
40
32
  exit: "_y44vgeqi"
@@ -51,8 +43,9 @@ var backdropStyles = {
51
43
  * background, border-radius, or layout. Consumers provide their own styling.
52
44
  *
53
45
  * Visibility is controlled declaratively via `isOpen`:
54
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
55
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
46
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
47
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
48
+ * by an `allow-discrete` transition)
56
49
  *
57
50
  * Handles native `cancel` event (Escape) and backdrop click detection.
58
51
  *
package/dist/cjs/popover/popover.compiled.css CHANGED
@@ -1,30 +1,48 @@
1
- ._19itglyw{border:none}
2
- ._1r041wug{inset:auto}
1
+ ._1vdi1wug:defined:defined:defined{inset:auto}
2
+ ._lzhqglyw:defined:defined:defined{border:none}
3
3
  ._y44v179n{animation:var(--ds-popover-motion-enter)}
4
- ._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
5
- ._18u0idpf{margin-left:0}
6
- ._19bvidpf{padding-left:0}
7
- ._19pkidpf{margin-top:0}
8
- ._1i4q4jg8{overflow-wrap:normal}
9
- ._1nmz4jg8{word-break:normal}
4
+ ._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
5
+ ._1715kb7n:defined:defined:defined{opacity:1}
6
+ ._17ke4jg8:defined:defined:defined{align-items:normal}
7
+ ._19w84jg8:defined:defined:defined{word-break:normal}
8
+ ._1ap0idpf:defined:defined:defined{margin-left:0}
9
+ ._1aqridpf:defined:defined:defined{margin-bottom:0}
10
+ ._1b80glyw:defined:defined:defined{text-transform:none}
11
+ ._1blzewfl:defined:defined:defined{overflow-y:visible}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
17
+ ._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
18
+ ._1mjeidpf:defined:defined:defined{padding-bottom:0}
10
19
  ._1o511hrf{animation-fill-mode:both}
11
20
  ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
12
- ._1p1dglyw{text-transform:none}
13
- ._1reoewfl{overflow-x:visible}
21
+ ._1ogd4jg8:defined:defined:defined{justify-content:normal}
22
+ ._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1rmr1wug:defined:defined:defined{height:auto}
25
+ ._1s8uglyw:defined:defined:defined{rotate:none}
14
26
  ._1s9z1a5r{transition-behavior:allow-discrete}
15
- ._2hwxidpf{margin-right:0}
16
- ._4t3i1wug{height:auto}
17
- ._azhwidpf{text-indent:0}
18
- ._bfhk1j28{background-color:transparent}
19
- ._ca0qidpf{padding-top:0}
27
+ ._1yd01wug:defined:defined:defined{min-width:auto}
28
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
29
+ ._ao8dglyw:defined:defined:defined{max-height:none}
30
+ ._az2pidpf:defined:defined:defined{padding-top:0}
31
+ ._b2a9idpf:defined:defined:defined{margin-top:0}
32
+ ._byz4idpf:defined:defined:defined{padding-left:0}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
20
35
  ._k8m011k7{transition-property:overlay,display}
21
- ._lcxv1wug{pointer-events:auto}
22
- ._n3tdidpf{padding-bottom:0}
23
- ._o5724jg8{white-space:normal}
24
- ._otyridpf{margin-bottom:0}
25
- ._p6861txw:popover-open{display:flex}
26
- ._u5f3idpf{padding-right:0}
27
- ._y3gnv2br{text-align:start}
36
+ ._kqwmvrvc:defined:defined:defined{flex-direction:row}
37
+ ._li0iglyw:defined:defined:defined{max-width:none}
38
+ ._m466idpf:defined:defined:defined{text-indent:0}
39
+ ._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
40
+ ._tcxkv2br:defined:defined:defined{text-align:start}
41
+ ._tdqwglyw:defined:defined:defined{scale:none}
42
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
43
+ ._wmifewfl:defined:defined:defined{overflow-x:visible}
44
+ ._x2wjglyw:defined:defined:defined{translate:none}
45
+ ._z3e7idpf:defined:defined:defined{margin-right:0}
28
46
  :where(._1yp3idpf)>*{min-inline-size:0}
29
47
  :where(._51hckb7n)>*{flex-grow:1}
30
48
  :where(._f5r5idpf)>*{min-block-size:0}
package/dist/cjs/popover/popover.js CHANGED
@@ -57,30 +57,28 @@ var supportsPopoverHint = (0, _once.default)(function () {
57
57
  return element.popover === 'hint';
58
58
  });
59
59
 
60
- // Surface reset — neutralises inherited interaction and text-layout properties
61
- // (e.g. `pointer-events: none` from an overlaid controls container and
62
- // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
63
- // top-layer element because, for CSS inheritance, it is still a DOM child of its
64
- // trigger (top-layer promotion is paint/stacking only; the legacy portal path
65
- // avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
66
- // `direction`/`unicode-bidi` (RTL must inherit).
67
- //
68
- // Not `all: initial`: the target is what `<body>` gave the portal path, not the
69
- // spec initial values (UA serif, black, `color-scheme: normal`), and as an author
70
- // declaration it would also override the UA `[popover]` rules (`position: fixed`,
71
- // `display: none` when closed).
72
- //
73
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
74
- // ADS forbids sharing styles across files (`no-exported-styles` /
75
- // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
76
- // co-located and duplicated deliberately. The `satisfies` check below fails the
77
- // build if either copy drifts.
60
+ /**
61
+ * **Surface reset**
62
+ *
63
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
64
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
65
+ * what `<body>` gave the portal path. `font` and direction still inherit.
66
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
67
+ *
68
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
69
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
70
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
71
+ * See `notes/decisions/surface-reset-color.md`.
72
+ *
73
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
74
+ * The `satisfies` check below catches drift.
75
+ */
78
76
  var surfaceResetStyles = {
79
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
77
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
80
78
  };
81
79
  true;
82
80
  var styles = {
83
- root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
81
+ 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",
84
82
  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
85
83
  enter: "_y44v179n",
86
84
  exit: "_y44vof1f"
@@ -122,8 +120,9 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
122
120
  *
123
121
  * ### 🔌 Visibility
124
122
  *
125
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
126
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
123
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
124
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
125
+ * visible by an `allow-discrete` transition).
127
126
  *
128
127
  * ### 📜 Browser dismiss is non-cancellable
129
128
  *
package/dist/es2019/dialog/dialog-content.compiled.css CHANGED
@@ -1,33 +1,46 @@
1
- ._19itglyw{border:none}
2
1
  ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
3
2
  ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
4
3
  ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
4
  ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
+ ._lzhqglyw:defined:defined:defined{border:none}
6
6
  ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
7
- ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
7
+ ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
8
+ ._18u01wug{margin-left:auto}
8
9
  ._19pk1wug{margin-top:auto}
9
- ._1i4q4jg8{overflow-wrap:normal}
10
+ ._19w84jg8:defined:defined:defined{word-break:normal}
11
+ ._1b80glyw:defined:defined:defined{text-transform:none}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
10
17
  ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
11
18
  ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
12
19
  ._1ltk1j28::-ms-backdrop{background-color:transparent}
13
20
  ._1ltk1j28::backdrop{background-color:transparent}
14
- ._1nmz4jg8{word-break:normal}
15
21
  ._1o511hrf{animation-fill-mode:both}
16
22
  ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
17
- ._1p1dglyw{text-transform:none}
18
- ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1s8uglyw:defined:defined:defined{rotate:none}
19
25
  ._1s9z1a5r{transition-behavior:allow-discrete}
26
+ ._1yd01wug:defined:defined:defined{min-width:auto}
20
27
  ._2hwx1wug{margin-right:auto}
21
- ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
22
- ._azhwidpf{text-indent:0}
23
- ._bfhk1j28{background-color:transparent}
24
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
25
- ._c71lglyw{max-height:none}
28
+ ._6hkqidpf:defined:defined:defined{inset-block-end:0}
29
+ ._722r1ule[open][open][open]{display:block}
30
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
31
+ ._ao8dglyw:defined:defined:defined{max-height:none}
32
+ ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
26
35
  ._k8m011k7{transition-property:overlay,display}
27
- ._lcxv1wug{pointer-events:auto}
28
- ._o5724jg8{white-space:normal}
36
+ ._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
37
+ ._m466idpf:defined:defined:defined{text-indent:0}
38
+ ._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
29
39
  ._otyr1wug{margin-bottom:auto}
30
40
  ._p12fglyw{max-width:none}
31
- ._y3gnv2br{text-align:start}
32
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
41
+ ._tcxkv2br:defined:defined:defined{text-align:start}
42
+ ._tdqwglyw:defined:defined:defined{scale:none}
43
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
44
+ ._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
45
+ ._x2wjglyw:defined:defined:defined{translate:none}
33
46
  @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}
package/dist/es2019/dialog/dialog-content.js CHANGED
@@ -10,22 +10,14 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
10
10
  import { useAnimatedVisibility } from '../internal/use-animated-visibility';
11
11
  import { useFocusWrap } from '../internal/use-focus-wrap';
12
12
  import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
13
- // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
14
- // Neutralises inherited interaction and text-layout properties (e.g.
15
- // `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
16
- // surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
17
- // must inherit). The reset has no box side-effects, so it does not reintroduce
18
- // the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
19
- //
20
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
21
- // (ADS forbids sharing styles across files, so it is co-located and duplicated).
22
- // The `satisfies` check below fails the build if either copy drifts.
13
+ // Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
14
+ // KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
23
15
  const surfaceResetStyles = {
24
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
16
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
25
17
  };
26
18
  true;
27
19
  const dialogStyles = {
28
- root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
20
+ 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",
29
21
  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
30
22
  enter: "_y44v7kvq",
31
23
  exit: "_y44vgeqi"
@@ -42,8 +34,9 @@ const backdropStyles = {
42
34
  * background, border-radius, or layout. Consumers provide their own styling.
43
35
  *
44
36
  * Visibility is controlled declaratively via `isOpen`:
45
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
46
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
37
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
38
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
39
+ * by an `allow-discrete` transition)
47
40
  *
48
41
  * Handles native `cancel` event (Escape) and backdrop click detection.
49
42
  *
package/dist/es2019/popover/popover.compiled.css CHANGED
@@ -1,30 +1,48 @@
1
- ._19itglyw{border:none}
2
- ._1r041wug{inset:auto}
1
+ ._1vdi1wug:defined:defined:defined{inset:auto}
2
+ ._lzhqglyw:defined:defined:defined{border:none}
3
3
  ._y44v179n{animation:var(--ds-popover-motion-enter)}
4
- ._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
5
- ._18u0idpf{margin-left:0}
6
- ._19bvidpf{padding-left:0}
7
- ._19pkidpf{margin-top:0}
8
- ._1i4q4jg8{overflow-wrap:normal}
9
- ._1nmz4jg8{word-break:normal}
4
+ ._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
5
+ ._1715kb7n:defined:defined:defined{opacity:1}
6
+ ._17ke4jg8:defined:defined:defined{align-items:normal}
7
+ ._19w84jg8:defined:defined:defined{word-break:normal}
8
+ ._1ap0idpf:defined:defined:defined{margin-left:0}
9
+ ._1aqridpf:defined:defined:defined{margin-bottom:0}
10
+ ._1b80glyw:defined:defined:defined{text-transform:none}
11
+ ._1blzewfl:defined:defined:defined{overflow-y:visible}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
17
+ ._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
18
+ ._1mjeidpf:defined:defined:defined{padding-bottom:0}
10
19
  ._1o511hrf{animation-fill-mode:both}
11
20
  ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
12
- ._1p1dglyw{text-transform:none}
13
- ._1reoewfl{overflow-x:visible}
21
+ ._1ogd4jg8:defined:defined:defined{justify-content:normal}
22
+ ._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1rmr1wug:defined:defined:defined{height:auto}
25
+ ._1s8uglyw:defined:defined:defined{rotate:none}
14
26
  ._1s9z1a5r{transition-behavior:allow-discrete}
15
- ._2hwxidpf{margin-right:0}
16
- ._4t3i1wug{height:auto}
17
- ._azhwidpf{text-indent:0}
18
- ._bfhk1j28{background-color:transparent}
19
- ._ca0qidpf{padding-top:0}
27
+ ._1yd01wug:defined:defined:defined{min-width:auto}
28
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
29
+ ._ao8dglyw:defined:defined:defined{max-height:none}
30
+ ._az2pidpf:defined:defined:defined{padding-top:0}
31
+ ._b2a9idpf:defined:defined:defined{margin-top:0}
32
+ ._byz4idpf:defined:defined:defined{padding-left:0}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
20
35
  ._k8m011k7{transition-property:overlay,display}
21
- ._lcxv1wug{pointer-events:auto}
22
- ._n3tdidpf{padding-bottom:0}
23
- ._o5724jg8{white-space:normal}
24
- ._otyridpf{margin-bottom:0}
25
- ._p6861txw:popover-open{display:flex}
26
- ._u5f3idpf{padding-right:0}
27
- ._y3gnv2br{text-align:start}
36
+ ._kqwmvrvc:defined:defined:defined{flex-direction:row}
37
+ ._li0iglyw:defined:defined:defined{max-width:none}
38
+ ._m466idpf:defined:defined:defined{text-indent:0}
39
+ ._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
40
+ ._tcxkv2br:defined:defined:defined{text-align:start}
41
+ ._tdqwglyw:defined:defined:defined{scale:none}
42
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
43
+ ._wmifewfl:defined:defined:defined{overflow-x:visible}
44
+ ._x2wjglyw:defined:defined:defined{translate:none}
45
+ ._z3e7idpf:defined:defined:defined{margin-right:0}
28
46
  :where(._1yp3idpf)>*{min-inline-size:0}
29
47
  :where(._51hckb7n)>*{flex-grow:1}
30
48
  :where(._f5r5idpf)>*{min-block-size:0}
package/dist/es2019/popover/popover.js CHANGED
@@ -51,30 +51,28 @@ const supportsPopoverHint = once(() => {
51
51
  return element.popover === 'hint';
52
52
  });
53
53
 
54
- // Surface reset — neutralises inherited interaction and text-layout properties
55
- // (e.g. `pointer-events: none` from an overlaid controls container and
56
- // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
57
- // top-layer element because, for CSS inheritance, it is still a DOM child of its
58
- // trigger (top-layer promotion is paint/stacking only; the legacy portal path
59
- // avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
60
- // `direction`/`unicode-bidi` (RTL must inherit).
61
- //
62
- // Not `all: initial`: the target is what `<body>` gave the portal path, not the
63
- // spec initial values (UA serif, black, `color-scheme: normal`), and as an author
64
- // declaration it would also override the UA `[popover]` rules (`position: fixed`,
65
- // `display: none` when closed).
66
- //
67
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
68
- // ADS forbids sharing styles across files (`no-exported-styles` /
69
- // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
70
- // co-located and duplicated deliberately. The `satisfies` check below fails the
71
- // build if either copy drifts.
54
+ /**
55
+ * **Surface reset**
56
+ *
57
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
58
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
59
+ * what `<body>` gave the portal path. `font` and direction still inherit.
60
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
61
+ *
62
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
63
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
64
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
65
+ * See `notes/decisions/surface-reset-color.md`.
66
+ *
67
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
68
+ * The `satisfies` check below catches drift.
69
+ */
72
70
  const surfaceResetStyles = {
73
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
71
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
74
72
  };
75
73
  true;
76
74
  const styles = {
77
- root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
75
+ 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",
78
76
  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
79
77
  enter: "_y44v179n",
80
78
  exit: "_y44vof1f"
@@ -116,8 +114,9 @@ const POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree',
116
114
  *
117
115
  * ### 🔌 Visibility
118
116
  *
119
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
120
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
117
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
118
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
119
+ * visible by an `allow-discrete` transition).
121
120
  *
122
121
  * ### 📜 Browser dismiss is non-cancellable
123
122
  *
package/dist/esm/dialog/dialog-content.compiled.css CHANGED
@@ -1,33 +1,46 @@
1
- ._19itglyw{border:none}
2
1
  ._1m5e1op4::-ms-backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
3
2
  ._1m5e1op4::backdrop{animation:var(--ds-blanket-exit,.2s cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
4
3
  ._1m5exbuz::-ms-backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
4
  ._1m5exbuz::backdrop{animation:var(--ds-blanket-enter,.25s cubic-bezier(.4,0,0,1) FadeIn0to100)}
5
+ ._lzhqglyw:defined:defined:defined{border:none}
6
6
  ._y44v7kvq{animation:var(--ds-modal-enter,.25s cubic-bezier(.4,0,0,1) ScaleIn95to100)}
7
- ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._18u01wug{margin-left:auto}
7
+ ._y44vgeqi{animation:var(--ds-modal-exit,.2s cubic-bezier(.6,0,.8,.6) ScaleOut100to95)}._1715kb7n:defined:defined:defined{opacity:1}
8
+ ._18u01wug{margin-left:auto}
8
9
  ._19pk1wug{margin-top:auto}
9
- ._1i4q4jg8{overflow-wrap:normal}
10
+ ._19w84jg8:defined:defined:defined{word-break:normal}
11
+ ._1b80glyw:defined:defined:defined{text-transform:none}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
10
17
  ._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
11
18
  ._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
12
19
  ._1ltk1j28::-ms-backdrop{background-color:transparent}
13
20
  ._1ltk1j28::backdrop{background-color:transparent}
14
- ._1nmz4jg8{word-break:normal}
15
21
  ._1o511hrf{animation-fill-mode:both}
16
22
  ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
17
- ._1p1dglyw{text-transform:none}
18
- ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1s8uglyw:defined:defined:defined{rotate:none}
19
25
  ._1s9z1a5r{transition-behavior:allow-discrete}
26
+ ._1yd01wug:defined:defined:defined{min-width:auto}
20
27
  ._2hwx1wug{margin-right:auto}
21
- ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
22
- ._azhwidpf{text-indent:0}
23
- ._bfhk1j28{background-color:transparent}
24
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
25
- ._c71lglyw{max-height:none}
28
+ ._6hkqidpf:defined:defined:defined{inset-block-end:0}
29
+ ._722r1ule[open][open][open]{display:block}
30
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
31
+ ._ao8dglyw:defined:defined:defined{max-height:none}
32
+ ._dbnbze3t:defined:defined:defined{padding-block-end:var(--ds-space-0,0)}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
26
35
  ._k8m011k7{transition-property:overlay,display}
27
- ._lcxv1wug{pointer-events:auto}
28
- ._o5724jg8{white-space:normal}
36
+ ._lizuze3t:defined:defined:defined{padding-inline-end:var(--ds-space-0,0)}
37
+ ._m466idpf:defined:defined:defined{text-indent:0}
38
+ ._mkdmze3t:defined:defined:defined{padding-block-start:var(--ds-space-0,0)}
29
39
  ._otyr1wug{margin-bottom:auto}
30
40
  ._p12fglyw{max-width:none}
31
- ._y3gnv2br{text-align:start}
32
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
41
+ ._tcxkv2br:defined:defined:defined{text-align:start}
42
+ ._tdqwglyw:defined:defined:defined{scale:none}
43
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
44
+ ._v12pze3t:defined:defined:defined{padding-inline-start:var(--ds-space-0,0)}
45
+ ._x2wjglyw:defined:defined:defined{translate:none}
33
46
  @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156y147i{transition-duration:var(--ds-duration-instant,0ms)}}
package/dist/esm/dialog/dialog-content.js CHANGED
@@ -10,22 +10,14 @@ import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-l
10
10
  import { useAnimatedVisibility } from '../internal/use-animated-visibility';
11
11
  import { useFocusWrap } from '../internal/use-focus-wrap';
12
12
  import { useSafariEscapeFix } from '../internal/use-safari-escape-fix';
13
- // Surface reset — see the rationale on `surfaceResetStyles` in `popover/popover.tsx`.
14
- // Neutralises inherited interaction and text-layout properties (e.g.
15
- // `pointer-events: none` and `white-space: nowrap`) that leak into the top-layer
16
- // surface. Excludes `color`/`font` (theming) and `direction`/`unicode-bidi` (RTL
17
- // must inherit). The reset has no box side-effects, so it does not reintroduce
18
- // the `margin: auto` centering problem that kept `height: auto` off `Dialog`.
19
- //
20
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `popover/popover.tsx`
21
- // (ADS forbids sharing styles across files, so it is co-located and duplicated).
22
- // The `satisfies` check below fails the build if either copy drifts.
13
+ // Surface reset, including `color` (the UA `dialog` rule sets `CanvasText`).
14
+ // KEEP IN SYNC with `surfaceResetStyles` in `popover/popover.tsx`.
23
15
  var surfaceResetStyles = {
24
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
16
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
25
17
  };
26
18
  true;
27
19
  var dialogStyles = {
28
- root: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28",
20
+ 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",
29
21
  motion: "_k8m011k7 _1oeci9qs _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
30
22
  enter: "_y44v7kvq",
31
23
  exit: "_y44vgeqi"
@@ -42,8 +34,9 @@ var backdropStyles = {
42
34
  * background, border-radius, or layout. Consumers provide their own styling.
43
35
  *
44
36
  * Visibility is controlled declaratively via `isOpen`:
45
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
46
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
37
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
38
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
39
+ * by an `allow-discrete` transition)
47
40
  *
48
41
  * Handles native `cancel` event (Escape) and backdrop click detection.
49
42
  *
package/dist/esm/popover/popover.compiled.css CHANGED
@@ -1,30 +1,48 @@
1
- ._19itglyw{border:none}
2
- ._1r041wug{inset:auto}
1
+ ._1vdi1wug:defined:defined:defined{inset:auto}
2
+ ._lzhqglyw:defined:defined:defined{border:none}
3
3
  ._y44v179n{animation:var(--ds-popover-motion-enter)}
4
- ._y44vof1f{animation:var(--ds-popover-motion-exit)}._18m9ewfl{overflow-y:visible}
5
- ._18u0idpf{margin-left:0}
6
- ._19bvidpf{padding-left:0}
7
- ._19pkidpf{margin-top:0}
8
- ._1i4q4jg8{overflow-wrap:normal}
9
- ._1nmz4jg8{word-break:normal}
4
+ ._y44vof1f{animation:var(--ds-popover-motion-exit)}._13shidpf:defined:defined:defined{padding-right:0}
5
+ ._1715kb7n:defined:defined:defined{opacity:1}
6
+ ._17ke4jg8:defined:defined:defined{align-items:normal}
7
+ ._19w84jg8:defined:defined:defined{word-break:normal}
8
+ ._1ap0idpf:defined:defined:defined{margin-left:0}
9
+ ._1aqridpf:defined:defined:defined{margin-bottom:0}
10
+ ._1b80glyw:defined:defined:defined{text-transform:none}
11
+ ._1blzewfl:defined:defined:defined{overflow-y:visible}
12
+ ._1dqv1n9t:defined:defined:defined{position:fixed}
13
+ ._1f2zglyw:defined:defined:defined{transform:none}
14
+ ._1f6b4jg8:defined:defined:defined{overflow-wrap:normal}
15
+ ._1gd81wug:defined:defined:defined{min-height:auto}
16
+ ._1ljj4jg8:defined:defined:defined{align-self:normal}
17
+ ._1maw1q9c:defined:defined:defined{flex-wrap:nowrap}
18
+ ._1mjeidpf:defined:defined:defined{padding-bottom:0}
10
19
  ._1o511hrf{animation-fill-mode:both}
11
20
  ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
12
- ._1p1dglyw{text-transform:none}
13
- ._1reoewfl{overflow-x:visible}
21
+ ._1ogd4jg8:defined:defined:defined{justify-content:normal}
22
+ ._1p7w1txw:popover-open:popover-open:popover-open{display:flex}
23
+ ._1rec1j28:defined:defined:defined{background-color:transparent}
24
+ ._1rmr1wug:defined:defined:defined{height:auto}
25
+ ._1s8uglyw:defined:defined:defined{rotate:none}
14
26
  ._1s9z1a5r{transition-behavior:allow-discrete}
15
- ._2hwxidpf{margin-right:0}
16
- ._4t3i1wug{height:auto}
17
- ._azhwidpf{text-indent:0}
18
- ._bfhk1j28{background-color:transparent}
19
- ._ca0qidpf{padding-top:0}
27
+ ._1yd01wug:defined:defined:defined{min-width:auto}
28
+ ._9kefi7uo:defined:defined:defined{color:var(--ds-text,#292a2e)}
29
+ ._ao8dglyw:defined:defined:defined{max-height:none}
30
+ ._az2pidpf:defined:defined:defined{padding-top:0}
31
+ ._b2a9idpf:defined:defined:defined{margin-top:0}
32
+ ._byz4idpf:defined:defined:defined{padding-left:0}
33
+ ._goh41wug:defined:defined:defined{pointer-events:auto}
34
+ ._jg1o4jg8:defined:defined:defined{justify-self:normal}
20
35
  ._k8m011k7{transition-property:overlay,display}
21
- ._lcxv1wug{pointer-events:auto}
22
- ._n3tdidpf{padding-bottom:0}
23
- ._o5724jg8{white-space:normal}
24
- ._otyridpf{margin-bottom:0}
25
- ._p6861txw:popover-open{display:flex}
26
- ._u5f3idpf{padding-right:0}
27
- ._y3gnv2br{text-align:start}
36
+ ._kqwmvrvc:defined:defined:defined{flex-direction:row}
37
+ ._li0iglyw:defined:defined:defined{max-width:none}
38
+ ._m466idpf:defined:defined:defined{text-indent:0}
39
+ ._qctn1ns9:defined:defined:defined{width:-moz-fit-content;width:fit-content}
40
+ ._tcxkv2br:defined:defined:defined{text-align:start}
41
+ ._tdqwglyw:defined:defined:defined{scale:none}
42
+ ._ux9u4jg8:defined:defined:defined{white-space:normal}
43
+ ._wmifewfl:defined:defined:defined{overflow-x:visible}
44
+ ._x2wjglyw:defined:defined:defined{translate:none}
45
+ ._z3e7idpf:defined:defined:defined{margin-right:0}
28
46
  :where(._1yp3idpf)>*{min-inline-size:0}
29
47
  :where(._51hckb7n)>*{flex-grow:1}
30
48
  :where(._f5r5idpf)>*{min-block-size:0}
package/dist/esm/popover/popover.js CHANGED
@@ -48,30 +48,28 @@ var supportsPopoverHint = once(function () {
48
48
  return element.popover === 'hint';
49
49
  });
50
50
 
51
- // Surface reset — neutralises inherited interaction and text-layout properties
52
- // (e.g. `pointer-events: none` from an overlaid controls container and
53
- // `white-space: nowrap` from an `@atlaskit/select` option) that leak into a
54
- // top-layer element because, for CSS inheritance, it is still a DOM child of its
55
- // trigger (top-layer promotion is paint/stacking only; the legacy portal path
56
- // avoided this by rendering at `<body>`). Excludes `color`/`font` (theming) and
57
- // `direction`/`unicode-bidi` (RTL must inherit).
58
- //
59
- // Not `all: initial`: the target is what `<body>` gave the portal path, not the
60
- // spec initial values (UA serif, black, `color-scheme: normal`), and as an author
61
- // declaration it would also override the UA `[popover]` rules (`position: fixed`,
62
- // `display: none` when closed).
63
- //
64
- // KEEP IN SYNC with the identical `surfaceResetStyles` in `dialog/dialog-content.tsx`.
65
- // ADS forbids sharing styles across files (`no-exported-styles` /
66
- // `no-imported-style-values` — Compiled styles are null at runtime), so the reset is
67
- // co-located and duplicated deliberately. The `satisfies` check below fails the
68
- // build if either copy drifts.
51
+ /**
52
+ * **Surface reset**
53
+ *
54
+ * The host is still a DOM child of its trigger for inheritance, so it inherits
55
+ * values like `pointer-events: none` or `white-space: nowrap`. Resets them to
56
+ * what `<body>` gave the portal path. `font` and direction still inherit.
57
+ * Not `all: initial`: that would also override the UA `[popover]` rules.
58
+ *
59
+ * `color` is a reset too: the UA `[popover]` rule sets `color: CanvasText`, so
60
+ * the host never inherits a colour. `color.text` is what `<body>` gave the portal
61
+ * path. Not `inherit`, which would take the trigger's colour (for example a link).
62
+ * See `notes/decisions/surface-reset-color.md`.
63
+ *
64
+ * KEEP IN SYNC with `dialog/dialog-content.tsx` (ADS forbids shared styles).
65
+ * The `satisfies` check below catches drift.
66
+ */
69
67
  var surfaceResetStyles = {
70
- root: "_lcxv1wug _o5724jg8 _1nmz4jg8 _1i4q4jg8 _y3gnv2br _azhwidpf _1p1dglyw"
68
+ root: "_goh41wug _ux9u4jg8 _19w84jg8 _1f6b4jg8 _tcxkv2br _m466idpf _1b80glyw _9kefi7uo"
71
69
  };
72
70
  true;
73
71
  var styles = {
74
- root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28 _4t3i1wug _p6861txw _51hckb7n _1yp3idpf _f5r5idpf",
72
+ 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",
75
73
  motion: "_k8m011k7 _1oecdn4k _1s9z1a5r _1o511hrf _bl8aglyw _156y147i",
76
74
  enter: "_y44v179n",
77
75
  exit: "_y44vof1f"
@@ -113,8 +111,9 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
113
111
  *
114
112
  * ### 🔌 Visibility
115
113
  *
116
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
117
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
114
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
115
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
116
+ * visible by an `allow-discrete` transition).
118
117
  *
119
118
  * ### 📜 Browser dismiss is non-cancellable
120
119
  *
package/dist/types/dialog/dialog-content.d.ts CHANGED
@@ -9,8 +9,9 @@ import { type TDialogProps } from './types';
9
9
  * background, border-radius, or layout. Consumers provide their own styling.
10
10
  *
11
11
  * Visibility is controlled declaratively via `isOpen`:
12
- * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
13
- * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
12
+ * - `isOpen={true}` calls `.showModal()` (entry via a keyframe animation)
13
+ * - `isOpen={false}` calls `.close()` (exit via a keyframe animation, kept visible
14
+ * by an `allow-discrete` transition)
14
15
  *
15
16
  * Handles native `cancel` event (Escape) and backdrop click detection.
16
17
  *
package/dist/types/dialog/types.d.ts CHANGED
@@ -29,9 +29,10 @@ type TDialogBaseProps = {
29
29
  * phase can temporarily differ from this value while a close settles.
30
30
  *
31
31
  * - `true`: calls `showModal()`. When `shouldAnimate` is `true`, the entry
32
- * animation plays via `@starting-style`.
32
+ * animation plays as a keyframe animation.
33
33
  * - `false`: calls `close()`. When `shouldAnimate` is `true`, the exit
34
- * animation plays via `allow-discrete` while the lifecycle phase is `exiting`.
34
+ * animation plays as a keyframe animation while the lifecycle phase is `exiting`,
35
+ * kept visible by an `allow-discrete` transition.
35
36
  *
36
37
  * **Lifecycle observable to consumers:**
37
38
  *
package/dist/types/internal/surface-reset.d.ts CHANGED
@@ -1,13 +1,5 @@
1
1
  import type { CompiledStyles } from '@compiled/react';
2
- /**
3
- * The host surface reset is declared twice, in `popover/popover.tsx` and
4
- * `dialog/dialog-content.tsx`, because ADS forbids sharing styles across files
5
- * (`no-exported-styles` / `no-imported-style-values` — Compiled styles are null
6
- * at runtime). Each copy asserts itself against this type with
7
- * `TSurfaceResetCheck`, so the compiler fails if either drifts. Change this
8
- * first, then both copies.
9
- */
10
- export type TSurfaceReset = CompiledStyles<{
2
+ type TSurfaceResetDeclarations = {
11
3
  pointerEvents: 'auto';
12
4
  whiteSpace: 'normal';
13
5
  wordBreak: 'normal';
@@ -15,11 +7,29 @@ export type TSurfaceReset = CompiledStyles<{
15
7
  textAlign: 'start';
16
8
  textIndent: '0';
17
9
  textTransform: 'none';
10
+ color: 'var(--ds-text)';
11
+ };
12
+ /**
13
+ * `cssMap` widens string literals to `string`, but keeps the literal type that
14
+ * `token()` returns.
15
+ */
16
+ type TCompiledValue<TValue> = TValue extends `var(--ds-${string})` ? TValue : string;
17
+ /**
18
+ * The surface reset is duplicated in `popover/popover.tsx` and
19
+ * `dialog/dialog-content.tsx` (ADS forbids shared styles). Each copy checks
20
+ * itself against this type. Change `TSurfaceResetDeclarations` first.
21
+ *
22
+ * Checks property names and the selector only: `cssMap` widens nested values to
23
+ * `string`. The host specificity VR tests check the values.
24
+ */
25
+ export type TBoostedSurfaceReset<TSelector extends string> = CompiledStyles<{
26
+ [TKey in TSelector]: {
27
+ [TProperty in keyof TSurfaceResetDeclarations]: TCompiledValue<TSurfaceResetDeclarations[TProperty]>;
28
+ };
18
29
  }>;
19
30
  type TIsIdentical<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;
20
31
  /**
21
- * Use as `true satisfies TSurfaceResetCheck<typeof surfaceResetStyles.root>`.
22
- * Identity rather than assignability, so extra or widened properties also fail.
32
+ * Identity, not assignability, so extra properties or a wrong selector fail.
23
33
  */
24
- export type TSurfaceResetCheck<TActual> = TIsIdentical<TActual, TSurfaceReset> extends true ? true : 'surfaceResetStyles does not match TSurfaceReset in internal/surface-reset.tsx';
34
+ 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';
25
35
  export {};
package/dist/types/popover/popover.d.ts CHANGED
@@ -10,8 +10,9 @@ import { type TPopoverForwardedProps } from './types';
10
10
  *
11
11
  * ### 🔌 Visibility
12
12
  *
13
- * - `isOpen={true}` calls `showPopover()` (entry via `@starting-style`).
14
- * - `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
13
+ * - `isOpen={true}` calls `showPopover()` (entry via a keyframe animation).
14
+ * - `isOpen={false}` calls `hidePopover()` (exit via a keyframe animation, kept
15
+ * visible by an `allow-discrete` transition).
15
16
  *
16
17
  * ### 📜 Browser dismiss is non-cancellable
17
18
  *
package/dist/types/popover/types.d.ts CHANGED
@@ -84,9 +84,10 @@ type TPopoverBaseProps = {
84
84
  * phase can temporarily differ from this value while a close settles.
85
85
  *
86
86
  * - **`true`:** show the popover (calls `showPopover()`). When `shouldAnimate`
87
- * is `true`, the entry animation plays via `@starting-style`.
87
+ * is `true`, the entry animation plays as a keyframe animation.
88
88
  * - **`false`:** hide the popover. When `shouldAnimate` is `true`, the exit
89
- * animation plays via `allow-discrete` while the lifecycle phase is `exiting`.
89
+ * animation plays as a keyframe animation while the lifecycle phase is `exiting`,
90
+ * kept visible by an `allow-discrete` transition.
90
91
  * Otherwise it hides visually without animation, while lifecycle settlement still
91
92
  * waits for the native closed `toggle`.
92
93
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/top-layer",
3
- "version": "6.2.1",
3
+ "version": "6.2.3",
4
4
  "description": "Low-level layering primitives based on popover and dialog",
5
5
  "homepage": "https://atlassian.design/components/top-layer",
6
6
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -40,7 +40,7 @@
40
40
  "@atlaskit/ds-lib": "^8.0.0",
41
41
  "@atlaskit/layering": "^6.0.0",
42
42
  "@atlaskit/react-compiler-gating": "^0.2.0",
43
- "@atlaskit/tokens": "^20.3.0",
43
+ "@atlaskit/tokens": "^20.4.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@compiled/react": "^1.0.2",
46
46
  "bind-event-listener": "^3.0.0",