@atlaskit/navigation-system 7.0.0 → 7.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlassian/navigation-system
 
+## 7.1.1
+
+### Patch Changes
+
+- [`3088f1c2a117a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3088f1c2a117a) -
+  Cleanup platform_editor_topnavstart_delay_browser_check flag
+
+## 7.1.0
+
+### Minor Changes
+
+- [`15acec25cc47f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/15acec25cc47f) -
+  Cleans up the `platform_dst_nav4_fhs_feedback_1` feature gate. Scroll lines are now removed, as
+  well as other minor visual changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.0.0
 
 ### Major Changes

package/constellation/layout/examples.mdx

@@ -27,17 +27,16 @@ When composing your page layout ensure that:
 These are the distinct areas in the layout. These components are designed to contain other
 components and content.
 
-For examples see
-[ready-made navigation experiences (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
+[View ready-made navigation experiences](https://hello.atlassian.net/wiki/x/rBE7MAE)
 
 ### Banner
 
-Use the `Banner` area to render a [banner](/components/banner) component. It will always display at
+Use the banner area to render a [banner](/components/banner) component. It will always display at
 the top of the screen.
 
 ### Top nav
 
-Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav-items).
+Use the top nav area to render [top nav items](/components/navigation-system/top-nav-items).
 
 - It will display at the top of the screen, below the banner if one is present. It has a fixed
   height of 48px.
@@ -47,12 +46,12 @@ Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav
 
 #### Top nav slots
 
-The TopNav has three layout components that you must use to position
+The top nav has three layout components that you must use to position
 [top nav items](/components/navigation-system/top-nav-items) within the top nav flexbox.
 
-- `TopNavStart`. Area for left-aligned items.
-- `TopNavMiddle`. Area for centre-aligned items.
-- `TopNavEnd`. Area for right-aligned items.
+- `TopNavStart`: Area for left-aligned items.
+- `TopNavMiddle`: Area for centre-aligned items.
+- `TopNavEnd`: Area for right-aligned items.
 
 #### Top nav custom theming
 
@@ -60,7 +59,7 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 
 ### Side nav
 
-- Use the `SideNav` to
+- Use the side nav area to
   render [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). It
   will show on the left of the screen. The default width of the side nav is 320px.
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
@@ -68,13 +67,13 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 
 #### Side nav slots
 
-The `SideNav` has three layout components that you can use to position components within the side
-nav flexbox.
+The side nav has three layout components that you can use to position components within the side nav
+flexbox.
 
-- `SideNavHeader`. The top part of the side nav.
-- `SideNavBody`. The middle part of the side nav. It acts as a scroll container. It will grow to
+- `SideNavHeader`: The top part of the side nav.
+- `SideNavBody`: The middle part of the side nav. It acts as a scroll container. It will grow to
   take up the available space — this is used to push the footer to the bottom of the side nav.
-- `SideNavFooter`. The bottom part of the side nav.
+- `SideNavFooter`: The bottom part of the side nav.
 
 Note: make sure to render `SideNavBody` to ensure that the footer is positioned at the bottom of the
 side nav, simulating a sticky footer.
@@ -116,13 +115,13 @@ This is useful for toggling the side nav based on a keyboard shortcut.
 - In the collapsed state, hovering over the `SideNavToggleButton` from
   [top nav items](/components/navigation-system/top-nav-items/examples#start-items) will trigger the
   side nav to open as an overlay. Moving the curser away will close it. If there are any open
-  supported ADS layering components (e.g. Popups, Dropdown menus) within the side nav, the flyout
+  supported ADS layering components (e.g. popups, dropdown menus) within the side nav, the flyout
   will stay locked open, until the layering components are closed.
 
 - The expansion and collapse of the side nav flyout is animated on **supported browsers**.
   Currently, Firefox does not support the animation. Instead, it will instantly expand and collapse.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Side nav resizing
 
@@ -135,7 +134,7 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
   tooltips) will be closed.
 - The side nav panel splitter can be also double clicked to collapse the side nav.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Side nav responsive
 
@@ -146,14 +145,14 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
 - At `xs` and `xxs` breakpoints (i.e. viewports smaller than 768px), the max width of the overlay
   side nav is either 320px or 90% of the screen width - whichever value is smaller.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ### Main
 
-Use `Main` for the [page header](/components/page-header) and main page content. It will expand to
-fill available space.
+Use the main area for the [page header](/components/page-header) and main page content. It will
+expand to fill available space.
 
-- On large viewports `Main` can be fixed, meaning it will have its own scroll container and not use
+- On large viewports main can be fixed, meaning it will have its own scroll container and not use
   the body scroll.
 - On small viewports, the element will always use body scroll, to make it easier to scroll the page
   when the content is tall.
@@ -161,43 +160,43 @@ fill available space.
 ### Aside
 
 <SectionMessage appearance="warning" title="Caution">
-	We are planning on deprecating the Aside component. Please use Panel instead.
+	We are planning on deprecating the aside component. Please use panel instead.
 </SectionMessage>
 
-`Aside` is rendered to the right of the `Main` area.
+The aside area is rendered to the right of the main area.
 
-- The default width of the Aside is 330px, and it is
+- The default width of the aside is 330px, and it is
   [resizable](/components/navigation-system/layout/examples#aside-resizing) and
   [responsive](/components/navigation-system/layout/examples#aside-responsive).
-- On large viewports the Aside can be fixed, meaning it will have its own scroll container and not
+- On large viewports the aside can be fixed, meaning it will have its own scroll container and not
   use the body scroll.
 - On small viewports, the element will always use body scroll, to make it easier to scroll the page
   when the content is tall.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Aside resizing
 
-You can optionally render a [panel splitter](#resizable-areas) as a child to make the `Aside`
+You can optionally render a [panel splitter](#resizable-areas) as a child to make the aside
 resizable.
 
 - It is resized using the drag handle. When hovering on the drag handle the mouse pointer changes to
   a resize pointer.
-- The `Aside` can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
+- The aside can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
   total viewport width. It retains this resized width even after refreshing the page.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Aside responsive
 
-At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the `Aside` moves below
-the `Main` area, and conforms to `Main` width and behaviour.
+At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the
+main area, and conforms to main width and behaviour.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ### Panel
 
-The `Panel` is rendered to the right of the `Main` and `Aside` areas.
+The panel area is rendered to the right of the main and aside areas.
 
 - The default width of the panel is 365px, which can be modified using the `defaultWidth` prop.
 - The panel is
@@ -206,13 +205,13 @@ The `Panel` is rendered to the right of the `Main` and `Aside` areas.
   [responsive](/components/navigation-system/layout/examples#panel-responsive).
 
 Common usage is to house
-[Preview panel (Atlassians only)](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
+[Preview panel](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
 
 #### Panel collapse/expand
 
 The panel can be collapsed and expanded using a trigger of your choosing.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Panel resizing
 
@@ -221,18 +220,18 @@ resizable. It can be resized using the drag handle. When hovering on the drag ha
 pointer changes to a resize pointer.
 
 - The panel can be resized larger than the `defaultWidth` to a maximum of 50% of content area
-  (viewport minus `SideNav`).
+  (viewport minus the side nav area).
 - It retains this resized width even after collapsing, reopening, or refreshing the page.
 - It has no ability to resize smaller than `defaultWidth`.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Panel responsive
 
-At `m` breakpoints (between 1024-1440px), the `Panel` will overlay `Aside`. At `s` breakpoints and
-below (less than 1024px) it will start to overlay the `Main` area.
+At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints
+and below (less than 1024px) it will start to overlay the main area.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ## Resizable areas
 
@@ -240,31 +239,31 @@ Render a `PanelSplitter` in a layout area to make it resizable.
 
 Resizing is supported for the following areas:
 
-- [SideNav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
+- [Side nav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
 - [Aside](/components/navigation-system/layout/examples#aside) - use `PanelSplitter`
 - [Panel](/components/navigation-system/layout/examples#panel) - use `PanelSplitter`
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
-| Area      | Default width      | Min width             | Max width                                    |
-| --------- | ------------------ | --------------------- | -------------------------------------------- |
-| `SideNav` | 320px              | 240px                 | 50% of viewport width                        |
-| `Aside`   | 330px (modifiable) | 120px                 | 50% of viewport width                        |
-| `Panel`   | 365px (modifiable) | Same as default width | 50% of content area (viewport minus SideNav) |
+| Area      | Default width      | Min width             | Max width                                              |
+| --------- | ------------------ | --------------------- | ------------------------------------------------------ |
+| `SideNav` | 320px              | 240px                 | 50% of viewport width                                  |
+| `Aside`   | 330px (modifiable) | 120px                 | 50% of viewport width                                  |
+| `Panel`   | 365px (modifiable) | Same as default width | 50% of content area (viewport minus the side nav area) |
 
 ## Responsive
 
 Layout areas respond to the viewport size. See default behaviour below, or the
-[interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
-
-| Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                       |
-| ---------- | ------------- | --------------------------- | ------------ | ----------------------------------------------------------- |
-| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `m`        | 1024 - 1439px | Expanded (inline)           | Next to Main | Collapsed; opens inline (or as overlay if Aside is present) |
-| `l`        | 1440 - 1767px | Expanded (inline)           | Next to Main | Collapsed; Opens inline                                     |
-| `xl`       | 1768+px       | Expanded (inline)           | Next to Main | Collapsed; Opens inline                                     |
+[interactive example](https://go.atlassian.com/nav4-interactive-example).
+
+| Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                                |
+| ---------- | ------------- | --------------------------- | ------------ | -------------------------------------------------------------------- |
+| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `m`        | 1024 - 1439px | Expanded (inline)           | Next to main | Collapsed; opens inline (or as overlay if the aside area is present) |
+| `l`        | 1440 - 1767px | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
+| `xl`       | 1768+px       | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
 
 ## Custom skip links
 

package/constellation/layout/usage.mdx

@@ -39,9 +39,9 @@ When applying components to the navigational areas,
 		</ol>
 	</li>
 	<li>
-		<strong>Side nav:</strong> Use to display [side nav
-		items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). Is resizable and
-		collapsible.
+		<strong>Side nav:</strong> Use to display{' '}
+		<a href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items">side nav items</a>.
+		Is resizable and collapsible.
 		<ol type="a" start="4">
 			<li>
 				<strong>Side nav header:</strong> Optional. Top part of the side nav (fixed).
@@ -60,7 +60,7 @@ When applying components to the navigational areas,
 	</li>
 	<li>
 		<strong>Aside:</strong> Optional. Use to display supporting or supplementary content. Is
-		resizable. <em>We plan to deprecate this component, please use Panel instead.</em>
+		resizable. <em>We plan to deprecate this component, please use panel instead.</em>
 	</li>
 	<li>
 		<strong>Panel:</strong> Optional. Use to display supporting or supplementary content. Is
@@ -68,33 +68,33 @@ When applying components to the navigational areas,
 	</li>
 </ol>
 
-### The difference between Aside, Panel and Modal dialog
+### The difference between aside, panel and modal dialog
 
 <SectionMessage appearance="warning" title="Caution">
-	We are planning on deprecating the Aside component. Please use Panel instead.
+	We are planning on deprecating the aside component. Please use panel instead.
 </SectionMessage>
 
-The main difference between Aside, Panel and Modal dialog is their behaviours:
+The main difference between aside, panel and modal dialog is their behaviours:
 
-- **Aside** is not collapsible, while **Panel** can be collapsible.
-- **Panel** and **Aside** present content alongside the **Main** area, while **Modal dialog** exists
+- **Aside** is not collapsible, while **panel** can be collapsible.
+- **Panel** and **aside** present content alongside the **main** area, while **modal dialog** exists
   in a layer above the page.
-- On small viewports (1024px and below), the **Panel** becomes an overlay, while the **Aside** moves
-  below **Main**.
+- On small viewports (1024px and below), the **panel** becomes an overlay, while the **aside** moves
+  below **main**.
 
 #### Usage guidance:
 
-- Use **Aside** for content that needs to be constantly visible and accessible without requiring the
+- Use **aside** for content that needs to be constantly visible and accessible without requiring the
   user to open it, or have the ability to close it.
-- Use **Panel** for contextual information or tertiary actions that complement the user's workflow.
+- Use **panel** for contextual information or tertiary actions that complement the user's workflow.
   Panels enable greater multitasking by functioning as an additional work space, while keeping users
   connected to their primary task.
-- Use **Modal dialog** when you need your user to focus their attention on a single or specific
+- Use **modal dialog** when you need your user to focus their attention on a single or specific
   task, like requiring a decision or action before they can return to their primary task.
 
 ## Best practices
 
-### Design using grid in the Main area
+### Design using grid in the main area
 
 <DoDontGrid>
 	<DoDont
@@ -105,8 +105,8 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 		}}
 		isFullWidth
 	>
-		When designing, use <a href="/foundations/grid-beta">Grid</a> to position content within the
-		Main area only.
+		When designing, use <a href="/foundations/grid-beta">grid</a> to position content within the
+		main area only.
 	</DoDont>
 	<DoDont
 		type="dont"
@@ -116,7 +116,7 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 		}}
 		isFullWidth
 	>
-		Don't include Side nav, Aside or Panel areas as part of your Grid.
+		Don't include side nav, aside or panel areas as part of your grid.
 	</DoDont>
 </DoDontGrid>
 

package/dist/cjs/ui/page-layout/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.sideNavContentScrollTimelineVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
+exports.topNavMountedVar = exports.sideNavVar = exports.sideNavPanelSplitterId = exports.sideNavLiveWidthVar = exports.ribbonVar = exports.panelVar = exports.panelPanelSplitterId = exports.openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavEndNamespace = exports.openLayerObserverSideNavNamespace = exports.localSlotLayers = exports.contentInsetBlockStart = exports.contentHeightWhenFixed = exports.bannerMountedVar = exports.asideVar = exports.asidePanelSplitterId = exports.UNSAFE_topNavVar = exports.UNSAFE_sideNavLayoutVar = exports.UNSAFE_ribbonVar = exports.UNSAFE_panelLayoutVar = exports.UNSAFE_bannerVar = exports.UNSAFE_asideLayoutVar = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = void 0;
 /**
  * These variables are shared across the different page layout slots.
  * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
@@ -76,10 +76,4 @@ var openLayerObserverSideNavNamespace = exports.openLayerObserverSideNavNamespac
 // namespaces.
 var openLayerObserverTopNavStartNamespace = exports.openLayerObserverTopNavStartNamespace = 'top-nav-start';
 var openLayerObserverTopNavMiddleNamespace = exports.openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
- */
-var sideNavContentScrollTimelineVar = exports.sideNavContentScrollTimelineVar = '--sNcst';
+var openLayerObserverTopNavEndNamespace = exports.openLayerObserverTopNavEndNamespace = 'top-nav-end';

package/dist/cjs/ui/page-layout/root.compiled.css

@@ -1,4 +1,3 @@
-._10iwgc9s{timeline-scope:--sNcst}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}

package/dist/cjs/ui/page-layout/root.js

@@ -14,8 +14,6 @@ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-obs
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksProvider = require("../../context/skip-links/skip-links-provider");
 var _topNavStartContextProvider = require("../../context/top-nav-start/top-nav-start-context-provider");
-var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
-var _constants = require("./constants");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _elementContext = require("./side-nav/element-context");
 var _isSideNavShortcutEnabledContext = require("./side-nav/is-side-nav-shortcut-enabled-context");
@@ -26,7 +24,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -46,7 +43,6 @@ function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = (0, _react.useRef)(null);
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -71,7 +67,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@media (min-width:64rem){@supports (scroll-timeline-axis:block){._1sfqgc9s{scroll-timeline-name:--sNcst}._1q1x1ule{scroll-timeline-axis:block}html:has([data-private-side-nav-header]) ._8pm2gc9s{animation-timeline:--sNcst}html:has([data-private-side-nav-header]) ._1gd94n8p{animation-name:k1gwhnxc}}@supports (scroll-timeline-axis:block){@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -11,10 +11,7 @@ require("./side-nav-content.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
-var _constants = require("../constants");
-var _useSideNavVisibility2 = require("./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); }
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -29,20 +26,6 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-var scrolledBorder = null;
-var fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
-};
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
@@ -51,12 +34,10 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = (0, _react.useMemo)(function () {
     return (0, _mergeRefs.default)([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)(),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: (0, _runtime.ax)([styles.scrollContainer])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([styles.paddingContainer])
   }, children));

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

@@ -9,7 +9,6 @@ exports.SideNavHeader = void 0;
 require("./side-nav-header.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
@@ -21,22 +20,6 @@ var styles = {
 var SideNavHeader = exports.SideNavHeader = function SideNavHeader(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    /**
-     * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
-     * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
-     * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
-     *
-     * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
-     *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
-     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
-     * will not intersect with the top nav.
-     *
-     * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures
-     * the scroll indicator line is visible even when the top nav has a z-index higher than the side nav.
-     */
-    "data-private-side-nav-header": (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') ? undefined : 'true',
     className: (0, _runtime.ax)([styles.root])
   }, children);
 };

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

@@ -12,6 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @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}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
-@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

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

@@ -13,7 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
-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 _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
@@ -44,12 +43,6 @@ var innerStyles = {
   fullHeightSidebarExpanded: "_15rin7od _glte1osq"
 };
 
-/**
- * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
- * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
- */
-var scrolledShadow = null;
-
 /**
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
@@ -58,10 +51,8 @@ var scrolledShadow = null;
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -143,7 +134,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
     }
   }, [sideNavState]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     "data-testid": testId,
@@ -162,9 +153,6 @@ function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);

package/dist/es2019/ui/page-layout/constants.js

@@ -70,10 +70,4 @@ export const openLayerObserverSideNavNamespace = 'side-nav';
 // namespaces.
 export const openLayerObserverTopNavStartNamespace = 'top-nav-start';
 export const openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-export const openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
- */
-export const sideNavContentScrollTimelineVar = '--sNcst';
+export const openLayerObserverTopNavEndNamespace = 'top-nav-end';

package/dist/es2019/ui/page-layout/root.compiled.css

@@ -1,4 +1,3 @@
-._10iwgc9s{timeline-scope:--sNcst}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}

package/dist/es2019/ui/page-layout/root.js

@@ -6,8 +6,6 @@ import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-ob
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
-import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { SideNavElementProvider } from './side-nav/element-context';
 import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
@@ -18,7 +16,6 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 export const gridRootId = 'unsafe-design-system-page-layout-root';
 const styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -36,7 +33,6 @@ export function Root({
   isSideNavShortcutEnabled = false
 }) {
   const ref = useRef(null);
-  const isFhsEnabled = useIsFhsEnabled();
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
       const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -70,7 +66,7 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, isFhsEnabled && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: ax([styles.root, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@media (min-width:64rem){@supports (scroll-timeline-axis:block){._1sfqgc9s{scroll-timeline-name:--sNcst}._1q1x1ule{scroll-timeline-axis:block}html:has([data-private-side-nav-header]) ._8pm2gc9s{animation-timeline:--sNcst}html:has([data-private-side-nav-header]) ._1gd913ly{animation-name:k1ywrstg}}@supports (scroll-timeline-axis:block){@keyframes k1ywrstg{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -3,10 +3,7 @@ import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from '../constants';
-import { useSideNavVisibility } from './use-side-nav-visibility';
 
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -21,20 +18,6 @@ const styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-const scrolledBorder = null;
-const fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd913ly"
-};
 function _SideNavContent({
   children,
   testId
@@ -42,13 +25,10 @@ function _SideNavContent({
   const isFhsEnabled = useIsFhsEnabled();
   const internalRef = useRef(null);
   const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
-  const {
-    isExpandedOnDesktop
-  } = useSideNavVisibility();
   return /*#__PURE__*/React.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

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

@@ -2,7 +2,6 @@
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
 };
@@ -14,22 +13,6 @@ export const SideNavHeader = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    /**
-     * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
-     * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
-     * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
-     *
-     * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
-     *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
-     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
-     * will not intersect with the top nav.
-     *
-     * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures
-     * the scroll indicator line is visible even when the top nav has a z-index higher than the side nav.
-     */
-    "data-private-side-nav-header": fg('platform_dst_nav4_fhs_feedback_1') ? undefined : 'true',
     className: ax([styles.root])
   }, children);
 };

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

@@ -12,6 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @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}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
-@supports (scroll-timeline-axis:block){@keyframes k1rswljm{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53frsjnm{animation-name:k1rswljm}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

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

@@ -4,11 +4,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -35,12 +34,6 @@ const innerStyles = {
   fullHeightSidebarExpanded: "_15rin7od _glte1osq"
 };
 
-/**
- * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
- * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
- */
-const scrolledShadow = null;
-
 /**
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
@@ -49,10 +42,8 @@ const scrolledShadow = null;
  */
 const wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53frsjnm _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -137,7 +128,7 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,
@@ -157,9 +148,6 @@ export function TopNavStart({
   testId,
   sideNavToggleButton
 }) {
-  if (fg('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   const isFhsEnabled = useIsFhsEnabled();
   const ref = useContext(TopNavStartAttachRef);
   const elementRef = useRef(null);

package/dist/esm/ui/page-layout/constants.js

@@ -70,10 +70,4 @@ export var openLayerObserverSideNavNamespace = 'side-nav';
 // namespaces.
 export var openLayerObserverTopNavStartNamespace = 'top-nav-start';
 export var openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
-export var openLayerObserverTopNavEndNamespace = 'top-nav-end';
-
-/**
- * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
- */
-export var sideNavContentScrollTimelineVar = '--sNcst';
+export var openLayerObserverTopNavEndNamespace = 'top-nav-end';

package/dist/esm/ui/page-layout/root.compiled.css

@@ -1,4 +1,3 @@
-._10iwgc9s{timeline-scope:--sNcst}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}

package/dist/esm/ui/page-layout/root.js

@@ -6,8 +6,6 @@ import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-ob
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
 import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
-import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { SideNavElementProvider } from './side-nav/element-context';
 import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
@@ -18,7 +16,6 @@ import { SideNavVisibilityProvider } from './side-nav/visibility-provider';
 export var gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
-  sideNavScrollTimeline: "_10iwgc9s",
   ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
@@ -38,7 +35,6 @@ export function Root(_ref) {
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
   var ref = useRef(null);
-  var isFhsEnabled = useIsFhsEnabled();
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
       var IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
@@ -63,7 +59,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, isFhsEnabled && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
+    className: ax([styles.root, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -6,5 +6,4 @@
 ._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._i0dlf1ug{flex-basis:0%}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
-@media (min-width:64rem){@supports (scroll-timeline-axis:block){._1sfqgc9s{scroll-timeline-name:--sNcst}._1q1x1ule{scroll-timeline-axis:block}html:has([data-private-side-nav-header]) ._8pm2gc9s{animation-timeline:--sNcst}html:has([data-private-side-nav-header]) ._1gd94n8p{animation-name:k1gwhnxc}}@supports (scroll-timeline-axis:block){@keyframes k1gwhnxc{0%{box-shadow:none}0.1%{box-shadow:0 -1px var(--ds-border,#0b120e24)}to{box-shadow:0 -1px var(--ds-border,#0b120e24)}}}}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

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

@@ -3,10 +3,7 @@ import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useMemo, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { sideNavContentScrollTimelineVar } from '../constants';
-import { useSideNavVisibility } from './use-side-nav-visibility';
 
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
@@ -21,20 +18,6 @@ var styles = {
   scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
   paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
 };
-
-/**
- * Using CSS scroll-driven animations to apply a scrolled indicator border.
- *
- * This approach is better for SSR, as some apps like Confluence will apply the
- * initial scroll position of the side nav content using JS before hydration.
- *
- * If we applied the border through React state it would only appear after hydration,
- * whereas this CSS approach should show even before hydration.
- */
-var scrolledBorder = null;
-var fullHeightSidebarStyles = {
-  scrollContainer: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
-};
 function _SideNavContent(_ref, forwardedRef) {
   var children = _ref.children,
     testId = _ref.testId;
@@ -43,12 +26,10 @@ function _SideNavContent(_ref, forwardedRef) {
   var mergedRef = useMemo(function () {
     return mergeRefs([internalRef, forwardedRef]);
   }, [forwardedRef]);
-  var _useSideNavVisibility = useSideNavVisibility(),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement("div", {
     ref: isFhsEnabled ? mergedRef : forwardedRef,
     "data-testid": testId,
-    className: ax([styles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && fullHeightSidebarStyles.scrollContainer])
+    className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.paddingContainer])
   }, children));

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

@@ -2,7 +2,6 @@
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   root: "_18zrutpp _1q51utpp _85i51b66"
 };
@@ -13,22 +12,6 @@ var styles = {
 export var SideNavHeader = function SideNavHeader(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    /**
-     * This attribute is used to identify whether the SideNavHeader is mounted, to determine where the
-     * SideNavBody's scroll indicator line should be applied. This is for layering reasons -
-     * if the scroll indicator line intersects with the top nav, it could incorrectly be hidden beneath
-     * the top nav (depending on if a layer is open, which raises the top nav'z z-index).
-     *
-     * We are using a data attribute and CSS for this logic to ensure it is SSR safe.
-     *
-     * - If SideNavHeader exists, the scroll indicator line is applied to the SideNavBody. This is safe
-     * because the SideNavHeader is between the SideNavBody and TopNavStart, so the scroll indicator line
-     * will not intersect with the top nav.
-     *
-     * - If SideNavHeader does not exist, the scroll indicator line is applied to TopNavStart. This ensures
-     * the scroll indicator line is visible even when the top nav has a z-index higher than the side nav.
-     */
-    "data-private-side-nav-header": fg('platform_dst_nav4_fhs_feedback_1') ? undefined : 'true',
     className: ax([styles.root])
   }, children);
 };

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

@@ -12,6 +12,5 @@
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @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}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
-@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
+@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}

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

@@ -5,11 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { openLayerObserverTopNavStartNamespace, sideNavContentScrollTimelineVar } from '../constants';
+import { openLayerObserverTopNavStartNamespace } from '../constants';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
@@ -36,12 +35,6 @@ var innerStyles = {
   fullHeightSidebarExpanded: "_15rin7od _glte1osq"
 };
 
-/**
- * The scroll indicator is usually applied in SideNavBody, but if there is no SideNavHeader it is
- * applied in TopNavStart instead for layering reasons. See the comment in SideNavHeader for more details.
- */
-var scrolledShadow = null;
-
 /**
  * Styles for the outer element, that does not have re-enabled pointer events and spans the entire
  * width of the TopNavStart area.
@@ -50,10 +43,8 @@ var scrolledShadow = null;
  */
 var wrapperStyles = {
   root: "_vchhusvi _bozgutpp _4t3i1osq _13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
-  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi _4ap3vuon _m7c3kb7n",
-  fullHeightSidebarExpandedScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
-  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
+  fullHeightSidebarExpanded: "_glte93mn _exxmutpp _4ap3vuon _m7c3kb7n",
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
 };
 
 /**
@@ -135,7 +126,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, !isFirstRenderRef.current && isExpandedOnDesktop && wrapperStyles.fullHeightSidebarBorderTransition])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,
@@ -154,9 +145,6 @@ export function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
-  if (fg('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   var isFhsEnabled = useIsFhsEnabled();
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);

package/dist/types/ui/page-layout/constants.d.ts

@@ -48,8 +48,3 @@ export declare const openLayerObserverSideNavNamespace = "side-nav";
 export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
 export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
-/**
- * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
- */
-export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/dist/types-ts4.5/ui/page-layout/constants.d.ts

@@ -48,8 +48,3 @@ export declare const openLayerObserverSideNavNamespace = "side-nav";
 export declare const openLayerObserverTopNavStartNamespace = "top-nav-start";
 export declare const openLayerObserverTopNavMiddleNamespace = "top-nav-middle";
 export declare const openLayerObserverTopNavEndNamespace = "top-nav-end";
-/**
- * CSS scroll timeline variable for the side nav content scroll indicator.
- * The scroll timeline is created in SideNavBody, and then used by TopNavStart to apply the scroll indicator line.
- */
-export declare const sideNavContentScrollTimelineVar = "--sNcst";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "7.0.0",
+	"version": "7.1.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -63,20 +63,20 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.10.0",
+		"@atlaskit/analytics-next": "^11.2.0",
+		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/side-nav-items": "^1.12.0",
-		"@atlaskit/tokens": "^11.2.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -96,14 +96,14 @@
 		"@atlaskit/app-provider": "^4.1.0",
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/dropdown-menu": "^16.7.0",
-		"@atlaskit/form": "^15.4.0",
+		"@atlaskit/breadcrumbs": "^16.0.0",
+		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
+		"@atlaskit/modal-dialog": "^14.13.0",
 		"@atlaskit/onboarding": "^14.5.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
@@ -114,11 +114,11 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.38.0",
-		"@atlassian/search-dialog": "^9.16.0",
+		"@atlassian/search-dialog": "^9.18.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
-		"@axe-core/playwright": "^4.8.0",
+		"@axe-core/playwright": "^4.11.1",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
@@ -147,9 +147,6 @@
 		"platform_dst_nav4_ribbon_slot": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_fhs_feedback_1": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_top_nav_increase_height": {
 			"type": "boolean"
 		},
@@ -177,9 +174,6 @@
 		},
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
-		},
-		"platform_editor_topnavstart_delay_browser_check": {
-			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"