@atlaskit/navigation-system 5.35.0 → 5.37.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 5.37.0
+
+### Minor Changes
+
+- [`accbbfe68dc49`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/accbbfe68dc49) -
+  Decreases the padding to the right of the toggle button when the full height sidebar is enabled,
+  so that it aligns with the other `elemAfter` items in the side navigation. This change is behind
+  the `platform_dst_nav4_fhs_feedback_1` feature gate.
+
+## 5.36.0
+
+### Minor Changes
+
+- [`621d85336693f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/621d85336693f) -
+  Adds a ribbon grid area to the page layout, and introduces an experimental Ribbon slot component
+  through the `/experimental/ribbon` entrypoint. This change is behind the
+  `platform_dst_nav4_ribbon_slot` feature gate.
+
 ## 5.35.0
 
 ### Minor Changes

package/dist/cjs/entry-points/experimental/ribbon.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_Ribbon", {
+  enumerable: true,
+  get: function get() {
+    return _ribbon.UNSAFE_Ribbon;
+  }
+});
+var _ribbon = require("../../ui/page-layout/ribbon");

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.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_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.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;
 /**
  * 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).
@@ -16,6 +16,7 @@ var asideVar = exports.asideVar = '--n_asDw';
 var panelVar = exports.panelVar = '--n_pnlW';
 var bannerMountedVar = exports.bannerMountedVar = '--n_bnrM';
 var topNavMountedVar = exports.topNavMountedVar = '--n_tNvM';
+var ribbonVar = exports.ribbonVar = '--n_rbnW';
 
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
@@ -39,13 +40,14 @@ var contentInsetBlockStart = exports.contentInsetBlockStart = "calc(var(--n_bnrM
 var UNSAFE_topNavVar = exports.UNSAFE_topNavVar = '--topNavigationHeight';
 var UNSAFE_bannerVar = exports.UNSAFE_bannerVar = '--bannerHeight';
 var UNSAFE_sideNavLayoutVar = exports.UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
+var UNSAFE_ribbonVar = exports.UNSAFE_ribbonVar = '--leftPanelWidth';
 var UNSAFE_asideLayoutVar = exports.UNSAFE_asideLayoutVar = '--rightSidebarWidth';
 var UNSAFE_panelLayoutVar = exports.UNSAFE_panelLayoutVar = '--rightPanelWidth';
 
 // The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
 // Known use cases: Legacy pages rendered inside Confluence and Jira.
 var UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_bannerVar, ", 0px) + var(").concat(UNSAFE_topNavVar, ", 0px))");
-var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "var(".concat(UNSAFE_sideNavLayoutVar, ", 0px)");
+var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_ribbonVar, ", 0px) + var(").concat(UNSAFE_sideNavLayoutVar, ", 0px))");
 var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_asideLayoutVar, ", 0px) + var(").concat(UNSAFE_panelLayoutVar, ", 0px))");
 
 /**
@@ -54,6 +56,7 @@ var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = exports.UNSAFE_MAIN_INLINE_EN
  * rely on accessing them through global means.
  */
 var localSlotLayers = exports.localSlotLayers = {
+  ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS and 'platform-dst-side-nav-layering-fixes' is enabled.
   // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
   sideNavPanelSplitterFHS: 4,

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

@@ -0,0 +1,10 @@
+
+._nd5l1c99{grid-area:ribbon}._152tidpf{inset-block-start:0}
+._18m915vq{overflow-y:hidden}
+._1e0cglyw{display:none}
+._1pbyegat{z-index:4}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._dm2518uv{display:initial}}

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

@@ -0,0 +1,57 @@
+/* ribbon.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_Ribbon = UNSAFE_Ribbon;
+require("./ribbon.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _responsive = require("@atlaskit/primitives/responsive");
+var _constants = require("./constants");
+var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
+var _hoistUtils = require("./hoist-utils");
+var _idUtils = require("./id-utils");
+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: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
+};
+function UNSAFE_Ribbon(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '0px' : _ref$width;
+  var id = (0, _idUtils.useLayoutId)({
+    providedId: providedId
+  });
+  var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
+  if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot')) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-layout-slot": true,
+    style: {
+      width: width
+    },
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.root])
+  }, dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are needed for the UNSAFE legacy use case for Jira + Confluence.
+  // But also for the panel resizing constraint to work correctly.
+  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: _constants.UNSAFE_ribbonVar,
+    mediaQuery: _responsive.media.above.md,
+    value: "0px",
+    responsiveValue: width
+  })
+  // ------ END UNSAFE STYLES ------
+  , children);
+}

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

@@ -5,5 +5,5 @@
 ._1tke1kxc{min-height:100vh}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:64rem){._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
-@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -26,7 +26,8 @@ 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"
+  sideNavScrollTimeline: "_10iwgc9s",
+  ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
 /**
@@ -70,7 +71,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-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, xcss]),
+    className: (0, _runtime.ax)([styles.root, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, (0, _platformFeatureFlags.fg)('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -13,6 +13,6 @@
 ._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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
+@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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
 @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}}

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

@@ -63,7 +63,8 @@ var wrapperStyles = {
   fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
   fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
 };
 
 /**
@@ -149,7 +150,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, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
+    className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/es2019/entry-points/experimental/ribbon.js

@@ -0,0 +1 @@
+export { UNSAFE_Ribbon } from '../../ui/page-layout/ribbon';

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

@@ -10,6 +10,7 @@ export const asideVar = '--n_asDw';
 export const panelVar = '--n_pnlW';
 export const bannerMountedVar = '--n_bnrM';
 export const topNavMountedVar = '--n_tNvM';
+export const ribbonVar = '--n_rbnW';
 
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
@@ -33,13 +34,14 @@ export const contentInsetBlockStart = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0
 export const UNSAFE_topNavVar = '--topNavigationHeight';
 export const UNSAFE_bannerVar = '--bannerHeight';
 export const UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
+export const UNSAFE_ribbonVar = '--leftPanelWidth';
 export const UNSAFE_asideLayoutVar = '--rightSidebarWidth';
 export const UNSAFE_panelLayoutVar = '--rightPanelWidth';
 
 // The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
 // Known use cases: Legacy pages rendered inside Confluence and Jira.
 export const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_bannerVar}, 0px) + var(${UNSAFE_topNavVar}, 0px))`;
-export const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = `var(${UNSAFE_sideNavLayoutVar}, 0px)`;
+export const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_ribbonVar}, 0px) + var(${UNSAFE_sideNavLayoutVar}, 0px))`;
 export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_asideLayoutVar}, 0px) + var(${UNSAFE_panelLayoutVar}, 0px))`;
 
 /**
@@ -48,6 +50,7 @@ export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_a
  * rely on accessing them through global means.
  */
 export const localSlotLayers = {
+  ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS and 'platform-dst-side-nav-layering-fixes' is enabled.
   // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
   sideNavPanelSplitterFHS: 4,

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

@@ -0,0 +1,10 @@
+
+._nd5l1c99{grid-area:ribbon}._152tidpf{inset-block-start:0}
+._18m915vq{overflow-y:hidden}
+._1e0cglyw{display:none}
+._1pbyegat{z-index:4}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._dm2518uv{display:initial}}

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

@@ -0,0 +1,49 @@
+/* ribbon.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ribbon.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives/responsive';
+import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
+import { useLayoutId } from './id-utils';
+const styles = {
+  root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
+};
+export function UNSAFE_Ribbon({
+  children,
+  testId,
+  id: providedId,
+  width = '0px'
+}) {
+  const id = useLayoutId({
+    providedId
+  });
+  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  if (!fg('platform_dst_nav4_ribbon_slot')) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-layout-slot": true,
+    style: {
+      width
+    },
+    "data-testid": testId,
+    className: ax([styles.root])
+  }, dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are needed for the UNSAFE legacy use case for Jira + Confluence.
+  // But also for the panel resizing constraint to work correctly.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_ribbonVar,
+    mediaQuery: media.above.md,
+    value: "0px",
+    responsiveValue: width
+  })
+  // ------ END UNSAFE STYLES ------
+  , children);
+}

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

@@ -5,5 +5,5 @@
 ._1tke1kxc{min-height:100vh}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:64rem){._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
-@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -18,7 +18,8 @@ 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"
+  sideNavScrollTimeline: "_10iwgc9s",
+  ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
 /**
@@ -69,7 +70,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-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, xcss]),
+    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -13,6 +13,6 @@
 ._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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
+@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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
 @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}}

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

@@ -54,7 +54,8 @@ const wrapperStyles = {
   fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
   fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53frsjnm _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
 };
 
 /**
@@ -143,7 +144,7 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/esm/entry-points/experimental/ribbon.js

@@ -0,0 +1 @@
+export { UNSAFE_Ribbon } from '../../ui/page-layout/ribbon';

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

@@ -10,6 +10,7 @@ export var asideVar = '--n_asDw';
 export var panelVar = '--n_pnlW';
 export var bannerMountedVar = '--n_bnrM';
 export var topNavMountedVar = '--n_tNvM';
+export var ribbonVar = '--n_rbnW';
 
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
@@ -33,13 +34,14 @@ export var contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px
 export var UNSAFE_topNavVar = '--topNavigationHeight';
 export var UNSAFE_bannerVar = '--bannerHeight';
 export var UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
+export var UNSAFE_ribbonVar = '--leftPanelWidth';
 export var UNSAFE_asideLayoutVar = '--rightSidebarWidth';
 export var UNSAFE_panelLayoutVar = '--rightPanelWidth';
 
 // The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
 // Known use cases: Legacy pages rendered inside Confluence and Jira.
 export var UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_bannerVar, ", 0px) + var(").concat(UNSAFE_topNavVar, ", 0px))");
-export var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "var(".concat(UNSAFE_sideNavLayoutVar, ", 0px)");
+export var UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_ribbonVar, ", 0px) + var(").concat(UNSAFE_sideNavLayoutVar, ", 0px))");
 export var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNSAFE_asideLayoutVar, ", 0px) + var(").concat(UNSAFE_panelLayoutVar, ", 0px))");
 
 /**
@@ -48,6 +50,7 @@ export var UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(".concat(UNS
  * rely on accessing them through global means.
  */
 export var localSlotLayers = {
+  ribbon: 4,
   // The side nav panel splitter is layered above the top nav when FHS and 'platform-dst-side-nav-layering-fixes' is enabled.
   // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
   sideNavPanelSplitterFHS: 4,

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

@@ -0,0 +1,10 @@
+
+._nd5l1c99{grid-area:ribbon}._152tidpf{inset-block-start:0}
+._18m915vq{overflow-y:hidden}
+._1e0cglyw{display:none}
+._1pbyegat{z-index:4}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._dm2518uv{display:initial}}

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

@@ -0,0 +1,49 @@
+/* ribbon.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ribbon.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives/responsive';
+import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
+import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
+import { useLayoutId } from './id-utils';
+var styles = {
+  root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
+};
+export function UNSAFE_Ribbon(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    providedId = _ref.id,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '0px' : _ref$width;
+  var id = useLayoutId({
+    providedId: providedId
+  });
+  var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  if (!fg('platform_dst_nav4_ribbon_slot')) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-layout-slot": true,
+    style: {
+      width: width
+    },
+    "data-testid": testId,
+    className: ax([styles.root])
+  }, dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ START UNSAFE STYLES ------
+  // These styles are needed for the UNSAFE legacy use case for Jira + Confluence.
+  // But also for the panel resizing constraint to work correctly.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_ribbonVar,
+    mediaQuery: media.above.md,
+    value: "0px",
+    responsiveValue: width
+  })
+  // ------ END UNSAFE STYLES ------
+  , children);
+}

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

@@ -5,5 +5,5 @@
 ._1tke1kxc{min-height:100vh}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (min-width:64rem){._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
-@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}}
+@media (min-width:64rem){._12fk1aio{grid-template-areas:"banner banner banner banner" "ribbon top-bar top-bar top-bar" "ribbon side-nav main aside"}._12qzrxre{grid-template-rows:auto auto 3fr}._1rqteala{grid-template-columns:auto auto minmax(0,1fr) auto}._12fkuz0r{grid-template-areas:"banner banner banner" "top-bar top-bar top-bar" "side-nav main aside"}._1rqt70if{grid-template-columns:auto minmax(0,1fr) auto}}
+@media (min-width:90rem){._xkmgbaui{grid-template-areas:"banner banner banner banner" "top-bar top-bar top-bar top-bar" "side-nav main aside panel"}._jbc7rxre{grid-template-rows:auto auto 3fr}._tyve1jg8{grid-template-columns:auto minmax(0,1fr) auto auto}._xkmgks3h{grid-template-areas:"banner banner banner banner banner" "ribbon top-bar top-bar top-bar top-bar" "ribbon side-nav main aside panel"}._tyve1nco{grid-template-columns:auto auto minmax(0,1fr) auto auto}}

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

@@ -18,7 +18,8 @@ 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"
+  sideNavScrollTimeline: "_10iwgc9s",
+  ribbon: "_12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco"
 };
 
 /**
@@ -62,7 +63,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, xcss]),
+    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && styles.sideNavScrollTimeline, fg('platform_dst_nav4_ribbon_slot') && styles.ribbon, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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

@@ -13,6 +13,6 @@
 ._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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
+@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%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._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)}}
 @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}}

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

@@ -55,7 +55,8 @@ var wrapperStyles = {
   fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
   fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
   fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
-  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
+  fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
+  fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
 };
 
 /**
@@ -141,7 +142,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
     }
   }, [sideNavState]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
+    className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-testid": testId,

package/dist/types/entry-points/experimental/ribbon.d.ts

@@ -0,0 +1 @@
+export { UNSAFE_Ribbon } from '../../ui/page-layout/ribbon';

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

@@ -8,6 +8,7 @@ export declare const asideVar = "--n_asDw";
 export declare const panelVar = "--n_pnlW";
 export declare const bannerMountedVar = "--n_bnrM";
 export declare const topNavMountedVar = "--n_tNvM";
+export declare const ribbonVar = "--n_rbnW";
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *
@@ -22,10 +23,11 @@ export declare const contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n
 export declare const UNSAFE_topNavVar = "--topNavigationHeight";
 export declare const UNSAFE_bannerVar = "--bannerHeight";
 export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
+export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
 export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
 export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
 export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))";
-export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "var(--leftSidebarWidth, 0px)";
+export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))";
 export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))";
 /**
  * We define the z-indexes here so each page slot can be locally layered against each other.
@@ -33,6 +35,7 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
  * rely on accessing them through global means.
  */
 export declare const localSlotLayers: {
+    ribbon: number;
     sideNavPanelSplitterFHS: number;
     topBar: number;
     banner: number;

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

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { CommonSlotProps } from './types';
+type RibbonProps = CommonSlotProps & {
+    width: string | number;
+    children: React.ReactNode;
+};
+export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width }: RibbonProps): JSX.Element | null;
+export {};

package/dist/types-ts4.5/entry-points/experimental/ribbon.d.ts

@@ -0,0 +1 @@
+export { UNSAFE_Ribbon } from '../../ui/page-layout/ribbon';

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

@@ -8,6 +8,7 @@ export declare const asideVar = "--n_asDw";
 export declare const panelVar = "--n_pnlW";
 export declare const bannerMountedVar = "--n_bnrM";
 export declare const topNavMountedVar = "--n_tNvM";
+export declare const ribbonVar = "--n_rbnW";
 /**
  * Captures the current width of the side navigation, at all times, including during resizing.
  *
@@ -22,10 +23,11 @@ export declare const contentInsetBlockStart = "calc(var(--n_bnrM, 0px) + var(--n
 export declare const UNSAFE_topNavVar = "--topNavigationHeight";
 export declare const UNSAFE_bannerVar = "--bannerHeight";
 export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
+export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
 export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
 export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
 export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))";
-export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "var(--leftSidebarWidth, 0px)";
+export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))";
 export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))";
 /**
  * We define the z-indexes here so each page slot can be locally layered against each other.
@@ -33,6 +35,7 @@ export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--
  * rely on accessing them through global means.
  */
 export declare const localSlotLayers: {
+    ribbon: number;
     sideNavPanelSplitterFHS: number;
     topBar: number;
     banner: number;

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

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { CommonSlotProps } from './types';
+type RibbonProps = CommonSlotProps & {
+    width: string | number;
+    children: React.ReactNode;
+};
+export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width }: RibbonProps): JSX.Element | null;
+export {};

package/experimental/ribbon/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/navigation-system/experimental/ribbon",
+  "main": "../../dist/cjs/entry-points/experimental/ribbon.js",
+  "module": "../../dist/esm/entry-points/experimental/ribbon.js",
+  "module:es2019": "../../dist/es2019/entry-points/experimental/ribbon.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/experimental/ribbon.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/experimental/ribbon.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "5.35.0",
+	"version": "5.37.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -147,6 +147,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_dst_nav4_ribbon_slot": {
+			"type": "boolean"
+		},
 		"platform_dst_nav4_fhs_feedback_1": {
 			"type": "boolean"
 		},