@atlaskit/navigation-system 2.19.0 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlassian/navigation-system
 
+## 2.20.0
+
+### Minor Changes
+
+- [`bfed073f1849d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfed073f1849d) -
+  Animations have been added to the `TopNavStart` component, as part of the full height sidebar
+  animations. The reorder of `TopNavStart`'s children elements (toggle button, app switcher, app
+  logo) when the side nav is toggled (on desktop) will have slide animations.
+
+  These changes are behind the feature gate `navx-full-height-sidebar`.
+
+## 2.19.1
+
+### Patch Changes
+
+- [`8622b99ec3d36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8622b99ec3d36) -
+  Internal refactors to the full height sidebar animations to workaround some Compiled style
+  ordering issues. These changes are behind the feature gate `navx-full-height-sidear`.
+
 ## 2.19.0
 
 ### Minor Changes

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

@@ -14,6 +14,9 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}
+@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)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
+@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}}}

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

@@ -49,23 +49,30 @@ var widthResizeBounds = {
 function getResizeBounds() {
   return widthResizeBounds;
 }
+
+/**
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
-  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
-  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
+  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
-  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
-  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
-  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
-  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
-  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
+  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
+  expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
+  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
+  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -592,6 +599,31 @@ function SideNavInternal(_ref) {
       isFirstRenderRef.current = false;
     }
   }, []);
+
+  // This is only used for the regular expand and collapse animations, not the flyout animations.
+  var shouldShowSidebarToggleAnimation =
+  // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
+  // slide in initially.
+  !isFirstRenderRef.current &&
+  // We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
+  // If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
+  // flyout animation being disabled.
+  !isFlyoutVisible &&
+  /**
+   * Disabling animations for Firefox, as it doesn't support animating the `display` property:
+   * https://caniuse.com/mdn-css_properties_display_is_transitionable
+   *
+   * As of October 2025, Firefox supports the expand animation, but not the collapse animation (it instantly changes to `display: none`).
+   * Because of this, we are disabling all sidebar animations for Firefox so it doesn't look like a bug.
+   *
+   * Unfortunately we cannot use `@supports` to target the support of `transition-behavior: allow-discrete` specifically
+   * for the `display` property. And `@supports at-rule(@starting-style)` is also not ready for browser use yet.
+   *
+   * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+   * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+   * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+   */
+  !isFirefox;
   return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
     id: id
   }, devTimeOnlyAttributes, {
@@ -600,7 +632,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && 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 && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavToggleButtonSlotContext = exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
+exports.SideNavToggleButtonElement = exports.SideNavToggleButtonAttachRef = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 /**
@@ -23,9 +23,4 @@ var SideNavToggleButtonElement = exports.SideNavToggleButtonElement = /*#__PURE_
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
-
-/**
- * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
- */
-var SideNavToggleButtonSlotContext = exports.SideNavToggleButtonSlotContext = /*#__PURE__*/(0, _react.createContext)(false);
+var SideNavToggleButtonAttachRef = exports.SideNavToggleButtonAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideNavToggleButtonSlotProvider = exports.SideNavToggleButtonProvider = void 0;
+exports.SideNavToggleButtonProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _toggleButtonContext = require("./toggle-button-context");
@@ -34,16 +34,4 @@ var SideNavToggleButtonProvider = exports.SideNavToggleButtonProvider = function
   }, /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonAttachRef.Provider, {
     value: setElement
   }, children));
-};
-
-/**
- * Provider for the side nav toggle button slot.
- *
- * This allows us to determine if the toggle button is rendered inside or outside of its slot.
- */
-var SideNavToggleButtonSlotProvider = exports.SideNavToggleButtonSlotProvider = function SideNavToggleButtonSlotProvider(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(_toggleButtonContext.SideNavToggleButtonSlotContext.Provider, {
-    value: true
-  }, children);
 };

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

@@ -1,3 +1,2 @@
 ._1e0c1bgi{display:contents}
-._lcxvglyw{pointer-events:none}
-@media (min-width:64rem){._3l1a1wug{margin-inline-start:auto}}
+._lcxvglyw{pointer-events:none}

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

@@ -32,12 +32,6 @@ var toggleButtonTooltipOptions = {
 // For duplicate "mouseenter" issue when changing icons (see below)
 var silentIconStyles = null;
 
-/**
- * Wrapper styles to align the toggle button to the end of `TopNavStart`
- * when FHS is expanded.
- */
-var fullHeightSidebarExpandedWrapperStyles = null;
-
 /**
  * __SideNavToggleButton__
  *
@@ -144,7 +138,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }
     return toggleButtonTooltipOptions;
   }, [shortcut]);
-  var iconButton = /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
@@ -155,15 +149,4 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
     tooltip: tooltipProps
   });
-  var isInsideSlot = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonSlotContext);
-
-  // Checking `isInsideSlot` in case an app isn't using the slot
-  // We don't want to break existing non-slot usage with the left margin
-  // This check can be removed in the future, after slot is required for a while.
-  if (isInsideSlot && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _runtime.ax)([isSideNavExpandedOnDesktop && "_3l1a1wug"])
-    }, iconButton);
-  }
-  return iconButton;
 };

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

@@ -1,9 +1,14 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
+._zulp1kw7{gap:inherit}
+._yyhykb7n{grid-column:1}._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1ul9idpf{min-width:0}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._ahbq1wug{margin-inline-start:auto}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc162w{transform:translateX(calc(-2rem + var(--ds-space-050, 4px)*-1))}._mjvcjq3t{transform:translateX(-100%)}._bgpzidpf{opacity:0}._mjvcsws1{transform:translateX(calc(2rem + var(--ds-space-050, 4px)))}._mjvcxwn4{transform:translateX(100%)}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
 @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js

@@ -11,12 +11,24 @@ require("./top-nav-start.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
-var _toggleButtonProvider = require("../side-nav/toggle-button-provider");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
 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); }
+/**
+ * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
+ *
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+// Placed in a variable, as the value is used in the translateX value for the children wrapper animation.
+var flexGap = "var(--ds-space-050, 4px)";
+
 /**
  * Styles for the TopNavStart element.
  *
@@ -39,10 +51,48 @@ var innerStyles = {
 var wrapperStyles = {
   root: "_vchhusvi",
   fullHeightSidebar: "_bozgutpp",
-  fullHeightSidebarCollapsed: "_15rip2n4",
   fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
+/**
+ * We use a fixed translateX offset for the slide animation (used when the TopNavStart children elements are reordered).
+ * This fixed offset makes the elements appear to animate smoothly from the old to the new position.
+ * This offset is calculated based on:
+ * - 32px (2rem) width of the side nav toggle button (IconButton)
+ * - 4px gap ('space.050' token) of the flex container
+ *
+ * The benefit of hardcoding this offset is that we don't need to calculate it using JS each time the sidebar is toggled.
+ * However, it could become out of sync if the width of IconButton changes.
+ *
+ * The alternative is using JS to store the previous position of the children wrapper element, and calculate the offset based on
+ * the new position, and then transforming using that offset. This would prevent the animation from going out of sync.
+ */
+var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
+var childrenWrapperStyles = {
+  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf",
+  animationBaseStyles: "_10t81e03",
+  finalPosition: "_mjvcz12g _xrrp188d",
+  expandAnimationStartPosition: "_mjvcsws1",
+  collapseAnimationStartPosition: "_mjvc162w"
+};
+
+/**
+ * We use a fixed translateX offset for the toggle button slide animation (used when the TopNavStart children elements are reordered).
+ * The specific value doesn't matter too much for the toggle button animation, so we are using `100%`, which will match the toggle button width.
+ *
+ * By combining the `translateX` animation with an `opacity` fade, the feel and experience is actually quite similar to animating the
+ * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
+ */
+var toggleButtonWrapperStyles = {
+  root: "_10t81rjc",
+  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
+  expandAnimationStartPosition: "_mjvcjq3t _bgpzidpf",
+  collapseAnimationStartPosition: "_mjvcxwn4 _bgpzidpf",
+  expandAnimationTimingFunction: "_1xq51ytf",
+  collapseAnimationTimingFunction: "_1xq55ucs",
+  alignEnd: "_ahbq1wug"
+};
+
 /**
  * The consistent key used for the side nav toggle button to ensure it does not get remounted
  * when it is reordered.
@@ -122,15 +172,77 @@ function TopNavStart(_ref3) {
   (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
     setIsDesktop(event.matches);
   });
+  var _useState3 = (0, _react.useState)({
+      type: 'idle'
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    animationState = _useState4[0],
+    setAnimationState = _useState4[1];
+
+  // Used to prevent the reorder animations from running on the initial render.
+  var isFirstRenderRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
+
+  // Using a stable ref to avoid re-running the animation layout effect when the toggle button prop value changes, which
+  // can happen a lot (e.g. if the parent re-renders)
+  var sideNavToggleButtonStableRef = (0, _useStableRef.default)(sideNavToggleButton);
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+
+    /**
+     * This layout effect is used to animate the TopNavStart children elements to their new position after being reordered.
+     * It is called when the sidebar's desktop expansion state changes.
+     *
+     * It works by first setting a translateX offset on the elements, used as the start position of the slide animation.
+     * - For the toggle button, it's a fixed offset. It's combined with an opacity, so the exact offset doesn't matter too much.
+     * - For the children wrapper (wrapping everything except the toggle button), an offset was chosen to make the animation
+     * start position the exact same as the element's old position. See comments for `childrenWrapperStyles` for more details.
+     *
+     * On the next frame, the translateX offset is cleared, triggering the animation to the new position.
+     */
+
+    if (isFirstRenderRef.current) {
+      // No animations on initial render.
+      return;
+    }
+    if (!sideNavToggleButtonStableRef.current) {
+      // If there is no toggle button, there should be no re-order animations.
+      return;
+    }
+
+    // Set the translateX offsets so elements are ready to animate to their actual new position after being reordered
+    setAnimationState({
+      type: isExpandedOnDesktop ? 'expand' : 'collapse'
+    });
+    requestAnimationFrame(function () {
+      // Clear translateX offsets on next frame to trigger animation to new position in a re-render
+      setAnimationState({
+        type: 'idle'
+      });
+    });
+
+    // This layout effect is called when the sidebar's desktop expansion state changes.
+  }, [isExpandedOnDesktop, sideNavToggleButtonStableRef]);
   var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
   return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
     ref: elementRef,
     testId: testId
-  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
-  }, sideNavToggleButton), children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
-    key: sideNavToggleButtonKey
+  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
+  }, sideNavToggleButton), (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
+  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
+    key: sideNavToggleButtonKey,
+    className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
   }, sideNavToggleButton));
 }

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

@@ -14,6 +14,9 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}
+@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)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
+@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
+@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}}}

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

@@ -36,23 +36,30 @@ const widthResizeBounds = {
 function getResizeBounds() {
   return widthResizeBounds;
 }
+
+/**
+ * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+ * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+ * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+ */
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 const openLayerObserverSideNavNamespace = 'side-nav';
 const styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
-  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
-  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
+  flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
-  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
-  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
-  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
-  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
-  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
+  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
+  expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
+  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
+  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
+  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
@@ -581,6 +588,31 @@ function SideNavInternal({
       isFirstRenderRef.current = false;
     }
   }, []);
+
+  // This is only used for the regular expand and collapse animations, not the flyout animations.
+  const shouldShowSidebarToggleAnimation =
+  // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
+  // slide in initially.
+  !isFirstRenderRef.current &&
+  // We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
+  // If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
+  // flyout animation being disabled.
+  !isFlyoutVisible &&
+  /**
+   * Disabling animations for Firefox, as it doesn't support animating the `display` property:
+   * https://caniuse.com/mdn-css_properties_display_is_transitionable
+   *
+   * As of October 2025, Firefox supports the expand animation, but not the collapse animation (it instantly changes to `display: none`).
+   * Because of this, we are disabling all sidebar animations for Firefox so it doesn't look like a bug.
+   *
+   * Unfortunately we cannot use `@supports` to target the support of `transition-behavior: allow-discrete` specifically
+   * for the `display` property. And `@supports at-rule(@starting-style)` is also not ready for browser use yet.
+   *
+   * We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
+   * CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
+   * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
+   */
+  !isFirefox;
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -592,7 +624,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && 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 && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -16,9 +16,4 @@ export const SideNavToggleButtonElement = /*#__PURE__*/createContext(null);
  * A callback ref is needed because the side nav can be mounted before the elements in the top bar (e.g. if the element
  *  is lazy loaded, which happens in Jira and Confluence), which would prevent the event listeners from being set up.
  */
-export const SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);
-
-/**
- * Used to check if the SideNavToggleButton is rendered inside of its slot in `TopNavStart`.
- */
-export const SideNavToggleButtonSlotContext = /*#__PURE__*/createContext(false);
+export const SideNavToggleButtonAttachRef = /*#__PURE__*/createContext(__noop);

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement, SideNavToggleButtonSlotContext } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef, SideNavToggleButtonElement } from './toggle-button-context';
 
 /**
  * Provider for the side nav toggle button contexts.
@@ -23,17 +23,4 @@ export const SideNavToggleButtonProvider = ({
   }, /*#__PURE__*/React.createElement(SideNavToggleButtonAttachRef.Provider, {
     value: setElement
   }, children));
-};
-
-/**
- * Provider for the side nav toggle button slot.
- *
- * This allows us to determine if the toggle button is rendered inside or outside of its slot.
- */
-export const SideNavToggleButtonSlotProvider = ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(SideNavToggleButtonSlotContext.Provider, {
-    value: true
-  }, children);
 };

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

@@ -1,3 +1,2 @@
 ._1e0c1bgi{display:contents}
-._lcxvglyw{pointer-events:none}
-@media (min-width:64rem){._3l1a1wug{margin-inline-start:auto}}
+._lcxvglyw{pointer-events:none}

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

@@ -7,7 +7,7 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { IconButton } from '../../top-nav-items/themed/migration';
-import { SideNavToggleButtonAttachRef, SideNavToggleButtonSlotContext } from './toggle-button-context';
+import { SideNavToggleButtonAttachRef } from './toggle-button-context';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
 const toggleButtonTooltipOptions = {
@@ -19,12 +19,6 @@ const toggleButtonTooltipOptions = {
 // For duplicate "mouseenter" issue when changing icons (see below)
 const silentIconStyles = null;
 
-/**
- * Wrapper styles to align the toggle button to the end of `TopNavStart`
- * when FHS is expanded.
- */
-const fullHeightSidebarExpandedWrapperStyles = null;
-
 /**
  * __SideNavToggleButton__
  *
@@ -125,7 +119,7 @@ export const SideNavToggleButton = ({
     }
     return toggleButtonTooltipOptions;
   }, [shortcut]);
-  const iconButton = /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,
@@ -136,15 +130,4 @@ export const SideNavToggleButton = ({
     ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
     tooltip: tooltipProps
   });
-  const isInsideSlot = useContext(SideNavToggleButtonSlotContext);
-
-  // Checking `isInsideSlot` in case an app isn't using the slot
-  // We don't want to break existing non-slot usage with the left margin
-  // This check can be removed in the future, after slot is required for a while.
-  if (isInsideSlot && fg('navx-full-height-sidebar')) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: ax([isSideNavExpandedOnDesktop && "_3l1a1wug"])
-    }, iconButton);
-  }
-  return iconButton;
 };

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

@@ -1,9 +1,14 @@
 
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
+._zulp1kw7{gap:inherit}
+._yyhykb7n{grid-column:1}._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1ul9idpf{min-width:0}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
+._ahbq1wug{margin-inline-start:auto}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc162w{transform:translateX(calc(-2rem + var(--ds-space-050, 4px)*-1))}._mjvcjq3t{transform:translateX(-100%)}._bgpzidpf{opacity:0}._mjvcsws1{transform:translateX(calc(2rem + var(--ds-space-050, 4px)))}._mjvcxwn4{transform:translateX(100%)}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
 @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}