@atlaskit/navigation-system 10.11.0 → 10.12.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 10.12.0
+
+### Minor Changes
+
+- [`5bca82622e866`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bca82622e866) -
+  [ux] `@atlaskit/navigation-system`: the side nav expand, collapse and flyout animations now use
+  the new Side Nav motion tokens (CSS keyframe animations) instead of `transform` transitions with
+  `@starting-style`, behind the `platform-dst-motion-uplift-sidenav` feature gate. When the gate is
+  off, the animations are unchanged.
+
+## 10.11.1
+
+### Patch Changes
+
+- [`a4d2562b27fc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4d2562b27fc6) -
+  Cleanup feature gate `platform_dst_nav4_side_nav_grid_area_fix`. The side nav's mobile `grid-area`
+  is now always scoped to `@media not (min-width: 64rem)`, the exact inverse of its desktop rule, so
+  the two can never both match at a given viewport and the side nav can no longer render in the
+  wrong grid area when Compiled's atomic rule ordering is non-deterministic (local development /
+  streaming SSR).
+- Updated dependencies
+
 ## 10.11.0
 
 ### Minor Changes

package/constellation/top-nav-items/code.mdx

@@ -6,6 +6,7 @@ props:
   packageName: '@atlaskit/navigation-system/top-nav-items'
   exports:
     - AppSwitcher
+    - AppLogo
     - CustomLogo
     - Notifications
     - Profile
@@ -22,13 +23,15 @@ props:
 
 ### AppSwitcher
 
-The trigger button for the app switcher.
+The trigger button for the app switcher. Use the optional `icon` prop to replace the default app
+switcher icon with a custom visual, such as a product logo.
 
 <TSMorphProps exportName="AppSwitcher" packageName="@atlaskit/navigation-system/top-nav-items" />
 
 ### AppLogo
 
-The app logo for the top navigation, when an app logo from `@atlaskit/logo` is used.
+The app logo for the top navigation, when an app logo from `@atlaskit/logo` is used. Use the
+optional `secondaryName` prop to display supporting context below the app name in wider viewports.
 
 <TSMorphProps exportName="AppLogo" packageName="@atlaskit/navigation-system/top-nav-items" />
 

package/constellation/top-nav-items/examples.mdx

@@ -11,6 +11,8 @@ import { TopNavStartToggleExample } from '../../examples/constellation/top-nav-i
 import { TopNavMiddleLayoutExample } from '../../examples/constellation/top-nav-items/top-nav-middle';
 import { TopNavEndLayoutExample } from '../../examples/constellation/top-nav-items/top-nav-end';
 import { AppLogoExample } from '../../examples/constellation/top-nav-items/app-logo';
+import { AppLogoSecondaryNameExample } from '../../examples/constellation/top-nav-items/app-logo-secondary-name';
+import { CustomAppSwitcherExample } from '../../examples/constellation/top-nav-items/custom-app-switcher';
 import { CustomLogoExample } from '../../examples/constellation/top-nav-items/custom-logo';
 import { CustomThemingLogoExample } from '../../examples/constellation/top-nav-items/custom-theming--logo';
 import { CustomThemingSearchExample } from '../../examples/constellation/top-nav-items/custom-theming--search';
@@ -45,6 +47,15 @@ landing page:
 
 <Example Component={TopNavStartLayoutExample} />
 
+### App switcher
+
+App switcher opens the app switcher menu. By default, it uses the Atlassian app switcher icon.
+
+Use the optional `icon` prop to replace the default icon with a custom visual, such as a product
+logo. Continue to provide a meaningful `label` so the custom visual has an accessible name.
+
+<Example Component={CustomAppSwitcherExample} />
+
 ### Side nav toggle button
 
 The side nav toggle button must be passed to `TopNavStart` through the `sideNavToggleButton` prop,
@@ -69,6 +80,14 @@ See the [responsive section](#responsive) for more information.
 
 <Example Component={AppLogoExample} />
 
+#### Secondary name
+
+Use the optional `secondaryName` prop to add supporting context below the app name, such as the
+current experience or workspace. The supporting context is displayed in wider viewports and is
+hidden with the app name at `s` breakpoints and below (less than 1024px).
+
+<Example Component={AppLogoSecondaryNameExample} />
+
 ### Custom logo
 
 Custom logo provides a container for custom logo images with the following constraints:

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,4 +1,3 @@
-._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._15yekb7n{--animation-direction:1}
@@ -7,22 +6,26 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
+._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
 ._kqsw1n9t{position:fixed}
 ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
+[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
-@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -71,7 +71,7 @@ var panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 var styles = {
-  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -90,34 +90,28 @@ var styles = {
 };
 
 /**
- * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
  *
- * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
- * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
+ * with `@starting-style` used by `styles`.
  *
- * Why this is needed:
- * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
- * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
- * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
- * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
- * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
- * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
- * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
- * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
- *
- * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
- * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
- *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
- *   so insertion order no longer matters and the bug cannot occur.
- *
- * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
- * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
- *    `styles.root`.
- * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
+ * never runs.
  */
-var gridAreaStyles = {
-  mobileLegacy: "_nd5l1b6c",
-  mobile: "_89fi1b6c"
+var motionUpliftStyles = {
+  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
+  expandAnimationMobile: "_k1af10ed",
+  collapseAnimationMobile: "_1lh81gzg _k1affm5y",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
+  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
+  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 var fallbackDefaultWidth = 320;
 var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
@@ -759,9 +753,10 @@ function SideNavInternal(_ref) {
    * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
    */
   var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
+  var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-sidenav');
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  var shouldShowSidebarToggleAnimation = isFhsEnabled &&
+  var shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
   hasExpandedStateChanged &&
@@ -792,7 +787,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js

@@ -20,7 +20,7 @@ var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
 var styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/cjs/ui/top-nav-items/themed/themed-pressable.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,4 +1,3 @@
-._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._15yekb7n{--animation-direction:1}
@@ -7,22 +6,26 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
+._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
 ._kqsw1n9t{position:fixed}
 ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
+[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
-@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -58,7 +58,7 @@ const panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 const styles = {
-  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -77,34 +77,28 @@ const styles = {
 };
 
 /**
- * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
  *
- * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
- * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
+ * with `@starting-style` used by `styles`.
  *
- * Why this is needed:
- * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
- * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
- * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
- * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
- * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
- * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
- * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
- * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
- *
- * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
- * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
- *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
- *   so insertion order no longer matters and the bug cannot occur.
- *
- * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
- * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
- *    `styles.root`.
- * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
+ * never runs.
  */
-const gridAreaStyles = {
-  mobileLegacy: "_nd5l1b6c",
-  mobile: "_89fi1b6c"
+const motionUpliftStyles = {
+  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
+  expandAnimationMobile: "_k1af10ed",
+  collapseAnimationMobile: "_1lh81gzg _k1affm5y",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
+  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
+  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 const fallbackDefaultWidth = 320;
 export const onPeekStartDelayMs = 500;
@@ -747,9 +741,10 @@ function SideNavInternal({
    * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
    */
   const hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
+  const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  const shouldShowSidebarToggleAnimation = isFhsEnabled &&
+  const shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
   hasExpandedStateChanged &&
@@ -783,7 +778,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js

@@ -11,7 +11,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 const styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js

@@ -10,7 +10,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 const styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,4 +1,3 @@
-._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._15yekb7n{--animation-direction:1}
@@ -7,22 +6,26 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
+._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
 ._kqsw1n9t{position:fixed}
 ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
+[dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
+[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
-@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -62,7 +62,7 @@ var panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 var styles = {
-  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -81,34 +81,28 @@ var styles = {
 };
 
 /**
- * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
  *
- * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
- * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
+ * with `@starting-style` used by `styles`.
  *
- * Why this is needed:
- * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
- * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
- * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
- * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
- * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
- * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
- * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
- * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
- *
- * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
- * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
- *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
- *   so insertion order no longer matters and the bug cannot occur.
- *
- * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
- * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
- *    `styles.root`.
- * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
+ * never runs.
  */
-var gridAreaStyles = {
-  mobileLegacy: "_nd5l1b6c",
-  mobile: "_89fi1b6c"
+var motionUpliftStyles = {
+  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
+  expandAnimationMobile: "_k1af10ed",
+  collapseAnimationMobile: "_1lh81gzg _k1affm5y",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
+  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
+  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 var fallbackDefaultWidth = 320;
 export var onPeekStartDelayMs = 500;
@@ -750,9 +744,10 @@ function SideNavInternal(_ref) {
    * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
    */
   var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
+  var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  var shouldShowSidebarToggleAnimation = isFhsEnabled &&
+  var shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
   hasExpandedStateChanged &&
@@ -783,7 +778,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/esm/ui/top-nav-items/themed/themed-anchor.js

@@ -13,7 +13,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 var styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css

@@ -8,7 +8,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
-._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
+._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}
-._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
+._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}

package/dist/esm/ui/top-nav-items/themed/themed-pressable.js

@@ -12,7 +12,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 var styles = {
   root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   rootT26Shape: "_2rko1qi0",
-  interactiveMotion: "_v564o1g2 _1gglat8s",
+  interactiveMotion: "_v564k6bl _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/navigation-system.docs.tsx

@@ -39,7 +39,7 @@ const documentation: StructuredContentSource = {
 				{
 					name: 'Top navigation',
 					description: 'Basic usage of the top navigation bar.',
-					source: path.resolve(packagePath, './examples/top-navigation.tsx'),
+					source: path.resolve(packagePath, './examples/top-navigation.vr.ap.tsx'),
 				},
 			],
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.11.0",
+	"version": "10.12.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -54,8 +54,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.3.0",
-		"@atlaskit/app-provider": "^5.2.0",
-		"@atlaskit/avatar": "^26.4.0",
+		"@atlaskit/app-provider": "^5.3.0",
+		"@atlaskit/avatar": "^27.0.0",
 		"@atlaskit/button": "^25.0.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.3.0",
+		"@atlaskit/tokens": "^16.6.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -90,28 +90,28 @@
 		"@atlaskit/badge": "^21.0.0",
 		"@atlaskit/banner": "^15.1.0",
 		"@atlaskit/breadcrumbs": "^17.5.0",
-		"@atlaskit/dropdown-menu": "^17.2.0",
+		"@atlaskit/dropdown-menu": "^18.0.0",
 		"@atlaskit/flag": "^18.2.0",
-		"@atlaskit/form": "^16.1.0",
+		"@atlaskit/form": "^17.0.0",
 		"@atlaskit/heading": "^7.0.0",
-		"@atlaskit/inline-dialog": "^19.2.0",
+		"@atlaskit/inline-dialog": "^20.0.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/lozenge": "^15.0.0",
-		"@atlaskit/menu": "^9.2.0",
-		"@atlaskit/modal-dialog": "^16.2.0",
+		"@atlaskit/menu": "^10.0.0",
+		"@atlaskit/modal-dialog": "^16.3.0",
 		"@atlaskit/onboarding": "^15.1.0",
 		"@atlaskit/page-header": "^13.1.0",
 		"@atlaskit/page-layout": "^5.2.0",
-		"@atlaskit/popper": "^9.0.0",
+		"@atlaskit/popper": "^9.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/select": "^22.6.0",
 		"@atlaskit/skeleton": "^4.2.0",
-		"@atlaskit/spotlight": "^3.0.0",
+		"@atlaskit/spotlight": "^4.0.0",
 		"@atlaskit/textfield": "^10.0.0",
-		"@atlaskit/top-layer": "^3.0.0",
+		"@atlaskit/top-layer": "^3.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/gemini": "^1.51.0",
-		"@atlassian/search-dialog": "^10.7.0",
+		"@atlassian/search-dialog": "^10.9.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.11.0",
@@ -122,26 +122,6 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
-	"techstack": {
-		"@atlassian/frontend": {
-			"import-structure": "atlassian-conventions"
-		},
-		"@repo/internal": {
-			"dom-events": "use-bind-event-listener",
-			"design-tokens": [
-				"color",
-				"spacing",
-				"motion"
-			],
-			"deprecation": "no-deprecated-imports",
-			"imports": [
-				"import-no-extraneous-disable-for-examples-and-docs"
-			],
-			"styling": [
-				"emotion"
-			]
-		}
-	},
 	"platform-feature-flags": {
 		"platform-dst-top-layer": {
 			"type": "boolean",
@@ -166,7 +146,7 @@
 		"platform_dst_nav4_skip_link_a11y_1": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_side_nav_grid_area_fix": {
+		"platform-dst-motion-uplift-sidenav": {
 			"type": "boolean"
 		},
 		"platform-dst-motion-uplift-button": {