@atlaskit/navigation-system 8.0.0 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlassian/navigation-system
 
+## 8.2.0
+
+### Minor Changes
+
+- [`0535fe6d19c87`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0535fe6d19c87) -
+  Cleans up the `platform_dst_nav4_side_nav_resize_tooltip_feedback` feature gate. The
+  `SideNavPanelSplitter` tooltip now has improved visuals.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.1.0
+
+### Minor Changes
+
+- [`6a19433e19f86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a19433e19f86) -
+  Changes to skip links behind the `platform_dst_nav4_skip_link_a11y_1` feature gate:
+  - Visual improvements
+  - Removes skip links for `Banner`, `TopNav`, `Aside` and `Panel` slots
+  - Renames default skip link label for `Main` to 'Main content' (from 'Main Content')
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.0.0
 
 ### Major Changes

package/dist/cjs/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/cjs/components/skip-links/skip-link.js

@@ -10,11 +10,13 @@ require("./skip-link.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -107,7 +109,7 @@ var SkipLink = exports.SkipLink = function SkipLink(_ref) {
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: (0, _runtime.ax)([styles.skipLinkListItem])
+    className: (0, _runtime.ax)([styles.skipLinkListItem, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/_react.default.createElement(_compiled.Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/cjs/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/cjs/components/skip-links/skip-links-container.js

@@ -13,14 +13,19 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _skipLink = require("./skip-link");
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -107,12 +112,15 @@ function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: (0, _runtime.ax)([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(_compiled.Text, {
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && ((0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+    className: (0, _runtime.ax)([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(_compiled.Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: (0, _runtime.ax)([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: (0, _runtime.ax)([styles.skipLinkList, !(0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

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

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
@@ -89,11 +90,13 @@ function Aside(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),

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

@@ -10,6 +10,7 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _constants = require("./constants");
@@ -45,11 +46,13 @@ function Banner(_ref) {
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

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

@@ -10,6 +10,7 @@ require("./main.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
 var _constants = require("../constants");
 var _useLayoutId = require("../use-layout-id");
@@ -25,7 +26,7 @@ function Main(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
   var id = (0, _useLayoutId.useLayoutId)({

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -9,8 +9,6 @@
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
 ._1lww188d{transition-delay:.3s}
-._1lww5cps{transition-delay:0ms}
-._1oec1yx9{transition-duration:.1s}
 ._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
@@ -29,15 +27,10 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within{transition-duration:.2s}
-._1dr21ylx:focus-within{transition-property:color}
 ._vp7g6x5g:focus-within{color:var(--ds-text-selected,#1868db)}
-._1gavfnf5:hover{transition-delay:.2s}
-._1s5z1ylx:hover{transition-property:color}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
-._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}
 @media (min-width:48rem){._181n1ule{display:block}}

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -21,7 +21,6 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 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 _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
@@ -54,10 +53,8 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm",
-  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
-  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _1oec6ebc _1lww188d _6fl41ytf _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm"
 };
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -124,12 +121,12 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
       testId: testId,
       content: tooltipContent,
       shortcut: shortcut,
-      position: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
+      position: "mouse-y",
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
-      UNSAFE_shouldAlwaysFadeIn: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback'),
-      UNSAFE_shouldRenderToParent: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')
+      component: PanelSplitterTooltip,
+      UNSAFE_shouldAlwaysFadeIn: true,
+      UNSAFE_shouldRenderToParent: true
     }, children);
   }
   return children;
@@ -402,12 +399,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
   }, /*#__PURE__*/React.createElement(MaybeTooltip, {
     tooltipContent: tooltipContent,
     shortcut: shortcut,
-    testId: testId && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? "".concat(testId, "-tooltip") : undefined
+    testId: testId ? "".concat(testId, "-tooltip") : undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
+    className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
@@ -75,11 +76,13 @@ function Panel(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),

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

@@ -11,6 +11,7 @@ require("./root.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+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 _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
@@ -34,12 +35,12 @@ function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    skipLinksLabel = _ref.skipLinksLabel,
     testId = _ref.testId,
     defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
+  var resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -61,7 +62,7 @@ function Root(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_topNavStartContextProvider.TopNavStartProvider, null, /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserver, null, /*#__PURE__*/_react.default.createElement(_hoistSlotSizesContext.DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/_react.default.createElement(_skipLinksProvider.SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,

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

@@ -227,7 +227,7 @@ function SideNavInternal(_ref) {
       if (openLayerObserver && openLayerObserver.getCount({
         namespace: _constants.openLayerObserverTopNavStartNamespace,
         type: 'popup'
-      }) > 0 && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      }) > 0) {
         return;
       }
       var prevFlyoutState = flyoutStateRef.current;

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

@@ -12,7 +12,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _useSkipLink = require("../../../context/skip-links/use-skip-link");
+var _useSkipLinkInternal = require("../../../context/skip-links/use-skip-link-internal");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
@@ -56,7 +56,11 @@ function TopNavOld(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = (0, _useCustomTheme.useCustomTheme)(customThemeConfig);
@@ -105,7 +109,11 @@ function TopNavNew(_ref2) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLinkInternal.useSkipLinkInternal)({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = (0, _useCustomThemeNew.useCustomThemeNew)(customThemeConfig);

package/dist/es2019/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/es2019/components/skip-links/skip-link.js

@@ -3,10 +3,12 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 const styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -100,7 +102,7 @@ export const SkipLink = ({
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/React.createElement("li", {
-    className: ax([styles.skipLinkListItem])
+    className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/es2019/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/es2019/components/skip-links/skip-links-container.js

@@ -3,11 +3,16 @@ import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 const styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -88,12 +93,15 @@ export function SkipLinksContainer({
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? `${testId}--skip-links-container` : undefined,
-    className: ax([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? `${testId}--skip-links-container--label` : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? `${testId}--skip-links-container--label` : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(({
     id,
     label,

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
@@ -76,11 +77,13 @@ export function Aside({
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

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

@@ -3,6 +3,7 @@ import "./banner.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 { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
@@ -37,11 +38,13 @@ export function Banner({
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

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

@@ -3,6 +3,7 @@ import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
@@ -16,7 +17,7 @@ const mainElementStyles = {
 export function Main({
   children,
   xcss,
-  skipLinkLabel = 'Main Content',
+  skipLinkLabel = fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content',
   testId,
   id: providedId
 }) {

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -9,8 +9,6 @@
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
 ._1lww188d{transition-delay:.3s}
-._1lww5cps{transition-delay:0ms}
-._1oec1yx9{transition-duration:.1s}
 ._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
@@ -29,15 +27,10 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within{transition-duration:.2s}
-._1dr21ylx:focus-within{transition-property:color}
 ._vp7g6x5g:focus-within{color:var(--ds-text-selected,#1868db)}
-._1gavfnf5:hover{transition-delay:.2s}
-._1s5z1ylx:hover{transition-property:color}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
-._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}
 @media (min-width:48rem){._181n1ule{display:block}}

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -10,7 +10,6 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -42,10 +41,8 @@ const containerStyles = {
   positionStart: "_1e02zeo2"
 };
 const grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm",
-  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
-  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _1oec6ebc _1lww188d _6fl41ytf _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm"
 };
 const lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -112,12 +109,12 @@ const MaybeTooltip = ({
       testId: testId,
       content: tooltipContent,
       shortcut: shortcut,
-      position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
+      position: "mouse-y",
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
-      UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback'),
-      UNSAFE_shouldRenderToParent: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
+      component: PanelSplitterTooltip,
+      UNSAFE_shouldAlwaysFadeIn: true,
+      UNSAFE_shouldRenderToParent: true
     }, children);
   }
   return children;
@@ -379,12 +376,12 @@ const PortaledPanelSplitter = ({
   }, /*#__PURE__*/React.createElement(MaybeTooltip, {
     tooltipContent: tooltipContent,
     shortcut: shortcut,
-    testId: testId && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? `${testId}-tooltip` : undefined
+    testId: testId ? `${testId}-tooltip` : undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
+    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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

@@ -3,6 +3,7 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
@@ -61,11 +62,13 @@ export function Panel({
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   const ref = useRef(null);
   const [width, setWidth] = useState(defaultWidth);

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

@@ -3,6 +3,7 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+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 { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -25,11 +26,12 @@ export function Root({
   children,
   xcss,
   UNSAFE_dangerouslyHoistSlotSizes = false,
-  skipLinksLabel = 'Skip to:',
+  skipLinksLabel,
   testId,
   defaultSideNavCollapsed,
   isSideNavShortcutEnabled = false
 }) {
+  const resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   const ref = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production') {
@@ -60,7 +62,7 @@ This message will not be displayed in production.
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

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

@@ -206,7 +206,7 @@ function SideNavInternal({
       if (openLayerObserver && openLayerObserver.getCount({
         namespace: openLayerObserverTopNavStartNamespace,
         type: 'popup'
-      }) > 0 && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      }) > 0) {
         return;
       }
       const prevFlyoutState = flyoutStateRef.current;

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } from '../../../context/skip-links/use-skip-link';
+import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
@@ -49,7 +49,11 @@ function TopNavOld({
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   const customTheme = useCustomTheme(customThemeConfig);
@@ -99,7 +103,11 @@ function TopNavNew({
   const id = useLayoutId({
     providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   const customTheme = useCustomThemeNew(customThemeConfig);

package/dist/esm/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/esm/components/skip-links/skip-link.js

@@ -3,10 +3,12 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -99,7 +101,7 @@ export var SkipLink = function SkipLink(_ref) {
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/React.createElement("li", {
-    className: ax([styles.skipLinkListItem])
+    className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/esm/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/esm/components/skip-links/skip-links-container.js

@@ -7,11 +7,16 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 var styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -98,12 +103,15 @@ export function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(testId, "--skip-links-container") : undefined,
-    className: ax([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? "".concat(testId, "--skip-links-container--label") : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? "".concat(testId, "--skip-links-container--label") : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

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

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
@@ -80,11 +81,13 @@ export function Aside(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

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

@@ -3,6 +3,7 @@ import "./banner.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 { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
@@ -37,11 +38,13 @@ export function Banner(_ref) {
 
   /**
    * Don't show the skip link if the slot has 0 height.
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: height === 0
+    isHidden: height === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,

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

@@ -3,6 +3,7 @@ import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
@@ -17,7 +18,7 @@ export function Main(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
-    skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
+    skipLinkLabel = _ref$skipLinkLabel === void 0 ? fg('platform_dst_nav4_skip_link_a11y_1') ? 'Main content' : 'Main Content' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id;
   var id = useLayoutId({

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -9,8 +9,6 @@
 ._1e0c1ule{display:block}
 ._1e0cglyw{display:none}
 ._1lww188d{transition-delay:.3s}
-._1lww5cps{transition-delay:0ms}
-._1oec1yx9{transition-duration:.1s}
 ._1oec6ebc{transition-duration:.15s}
 ._1pbykb7n{z-index:1}
 ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
@@ -29,15 +27,10 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within{transition-duration:.2s}
-._1dr21ylx:focus-within{transition-property:color}
 ._vp7g6x5g:focus-within{color:var(--ds-text-selected,#1868db)}
-._1gavfnf5:hover{transition-delay:.2s}
-._1s5z1ylx:hover{transition-property:color}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
-._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}
 @media (min-width:48rem){._181n1ule{display:block}}

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -16,7 +16,6 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -45,10 +44,8 @@ var containerStyles = {
   positionStart: "_1e02zeo2"
 };
 var grabAreaStyles = {
-  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
-  fullHeightSidebar: "_d0al11mm",
-  oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
-  newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _1oec6ebc _1lww188d _6fl41ytf _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
+  fullHeightSidebar: "_d0al11mm"
 };
 var lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -115,12 +112,12 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
       testId: testId,
       content: tooltipContent,
       shortcut: shortcut,
-      position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
+      position: "mouse-y",
       mousePosition: "right",
       isScreenReaderAnnouncementDisabled: true,
-      component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
-      UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback'),
-      UNSAFE_shouldRenderToParent: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
+      component: PanelSplitterTooltip,
+      UNSAFE_shouldAlwaysFadeIn: true,
+      UNSAFE_shouldRenderToParent: true
     }, children);
   }
   return children;
@@ -393,12 +390,12 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
   }, /*#__PURE__*/React.createElement(MaybeTooltip, {
     tooltipContent: tooltipContent,
     shortcut: shortcut,
-    testId: testId && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? "".concat(testId, "-tooltip") : undefined
+    testId: testId ? "".concat(testId, "-tooltip") : undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
+    className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

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

@@ -5,6 +5,7 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
@@ -66,11 +67,13 @@ export function Panel(_ref) {
    * Don't show the skip link if the slot has 0 width.
    *
    * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
+   *
+   * TODO: when cleaning up 'platform_dst_nav4_skip_link_a11y_1' remove this call entirely
    */
   useSkipLinkInternal({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0
+    isHidden: defaultWidth === 0 || fg('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = useRef(null);
   var _useState = useState(defaultWidth),

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

@@ -3,6 +3,7 @@ import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+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 { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -26,12 +27,12 @@ export function Root(_ref) {
     xcss = _ref.xcss,
     _ref$UNSAFE_dangerous = _ref.UNSAFE_dangerouslyHoistSlotSizes,
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
-    _ref$skipLinksLabel = _ref.skipLinksLabel,
-    skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
+    skipLinksLabel = _ref.skipLinksLabel,
     testId = _ref.testId,
     defaultSideNavCollapsed = _ref.defaultSideNavCollapsed,
     _ref$isSideNavShortcu = _ref.isSideNavShortcutEnabled,
     isSideNavShortcutEnabled = _ref$isSideNavShortcu === void 0 ? false : _ref$isSideNavShortcu;
+  var resolvedSkipLinksLabel = skipLinksLabel !== null && skipLinksLabel !== void 0 ? skipLinksLabel : fg('platform_dst_nav4_skip_link_a11y_1') ? 'Skip to' : 'Skip to:';
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -53,7 +54,7 @@ export function Root(_ref) {
   }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
-    label: skipLinksLabel,
+    label: resolvedSkipLinksLabel,
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,

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

@@ -217,7 +217,7 @@ function SideNavInternal(_ref) {
       if (openLayerObserver && openLayerObserver.getCount({
         namespace: openLayerObserverTopNavStartNamespace,
         type: 'popup'
-      }) > 0 && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      }) > 0) {
         return;
       }
       var prevFlyoutState = flyoutStateRef.current;

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } from '../../../context/skip-links/use-skip-link';
+import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
@@ -49,7 +49,11 @@ function TopNavOld(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = useCustomTheme(customThemeConfig);
@@ -98,7 +102,11 @@ function TopNavNew(_ref2) {
   var id = useLayoutId({
     providedId: providedId
   });
-  useSkipLink(id, skipLinkLabel);
+  useSkipLinkInternal({
+    id: id,
+    label: skipLinkLabel,
+    isHidden: fg('platform_dst_nav4_skip_link_a11y_1')
+  });
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = useCustomThemeNew(customThemeConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "8.0.0",
+	"version": "8.2.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -72,12 +72,12 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/app-provider": "^4.3.0",
-		"@atlaskit/avatar": "^25.11.0",
+		"@atlaskit/avatar": "^25.13.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.2.0",
-		"@atlaskit/layering": "^3.6.0",
+		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/logo": "^20.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
@@ -86,7 +86,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^21.1.0",
+		"@atlaskit/tooltip": "^21.2.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/lozenge": "^13.7.0",
 		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/modal-dialog": "^14.15.0",
+		"@atlaskit/modal-dialog": "^14.18.0",
 		"@atlaskit/onboarding": "^14.6.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.3.0",
@@ -156,9 +156,6 @@
 		"platform_dst_nav4_top_nav_increase_height": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_side_nav_resize_tooltip_feedback": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -183,6 +180,9 @@
 		},
 		"platform_dst_nav4_custom_theming_fhs_1": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_skip_link_a11y_1": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"