@atlaskit/navigation-system 10.11.1 → 10.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +7 -3
  3. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +28 -2
  4. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -2
  5. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js +1 -1
  6. package/dist/cjs/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -2
  7. package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js +1 -1
  8. package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +7 -3
  9. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +28 -2
  10. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -2
  11. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js +1 -1
  12. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -2
  13. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js +1 -1
  14. package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +7 -3
  15. package/dist/esm/ui/page-layout/side-nav/side-nav.js +28 -2
  16. package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -2
  17. package/dist/esm/ui/top-nav-items/themed/themed-anchor.js +1 -1
  18. package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -2
  19. package/dist/esm/ui/top-nav-items/themed/themed-pressable.js +1 -1
  20. package/navigation-system.docs.tsx +1 -1
  21. package/package.json +8 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`5bca82622e866`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5bca82622e866) -
8
+ [ux] `@atlaskit/navigation-system`: the side nav expand, collapse and flyout animations now use
9
+ the new Side Nav motion tokens (CSS keyframe animations) instead of `transform` transitions with
10
+ `@starting-style`, behind the `platform-dst-motion-uplift-sidenav` feature gate. When the gate is
11
+ off, the animations are unchanged.
12
+
3
13
  ## 10.11.1
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -6,22 +6,26 @@
6
6
  ._1bsb1ego{width:min(90%,20pc)}
7
7
  ._1e0c1txw{display:flex}
8
8
  ._1e0cglyw{display:none}
9
+ ._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
9
10
  ._1pbycs5v{z-index:2}
10
11
  ._1pbyegat{z-index:4}
11
12
  ._2lx21bp4{flex-direction:column}
12
13
  ._4t3i1osq{height:100%}
13
14
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
+ ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
15
17
  ._kqsw1if8{position:sticky}
16
18
  ._kqsw1n9t{position:fixed}
17
19
  ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
18
20
  ._u7coidpf{inset-block-end:0}
19
21
  ._vchhusvi{box-sizing:border-box}
22
+ [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
23
+ [dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
20
24
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
21
- @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
25
+ @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
22
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
23
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
24
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
25
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
26
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
27
- @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
31
+ @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/cjs/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -88,6 +88,31 @@ var styles = {
88
88
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
89
89
  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
90
90
  };
91
+
92
+ /**
93
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
94
+ *
95
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
96
+ * with `@starting-style` used by `styles`.
97
+ *
98
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
99
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
100
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
101
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
102
+ * never runs.
103
+ */
104
+ var motionUpliftStyles = {
105
+ animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
106
+ animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
107
+ expandAnimationMobile: "_k1af10ed",
108
+ collapseAnimationMobile: "_1lh81gzg _k1affm5y",
109
+ flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
110
+ flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
111
+ flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
112
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
113
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
114
+ collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
115
+ };
91
116
  var fallbackDefaultWidth = 320;
92
117
  var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
93
118
 
@@ -728,9 +753,10 @@ function SideNavInternal(_ref) {
728
753
  * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
729
754
  */
730
755
  var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
756
+ var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-sidenav');
731
757
 
732
758
  // This is only used for the regular expand and collapse animations, not the flyout animations.
733
- var shouldShowSidebarToggleAnimation = isFhsEnabled &&
759
+ var shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
734
760
  // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
735
761
  // slide in initially.
736
762
  hasExpandedStateChanged &&
@@ -761,7 +787,7 @@ function SideNavInternal(_ref) {
761
787
  style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
762
788
  ref: mergedRef,
763
789
  "data-testid": testId,
764
- className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
790
+ className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
765
791
  }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
766
792
  variableName: _constants.sideNavLiveWidthVar,
767
793
  value: "0px",
package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -20,7 +20,7 @@ var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
20
20
  var styles = {
21
21
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
22
22
  rootT26Shape: "_2rko1qi0",
23
- interactiveMotion: "_v564o1g2 _1gglat8s",
23
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
24
24
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
25
25
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
26
26
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/dist/cjs/ui/top-nav-items/themed/themed-pressable.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js CHANGED
@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
21
21
  var styles = {
22
22
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
23
23
  rootT26Shape: "_2rko1qi0",
24
- interactiveMotion: "_v564o1g2 _1gglat8s",
24
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
25
25
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
26
26
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
27
27
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -6,22 +6,26 @@
6
6
  ._1bsb1ego{width:min(90%,20pc)}
7
7
  ._1e0c1txw{display:flex}
8
8
  ._1e0cglyw{display:none}
9
+ ._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
9
10
  ._1pbycs5v{z-index:2}
10
11
  ._1pbyegat{z-index:4}
11
12
  ._2lx21bp4{flex-direction:column}
12
13
  ._4t3i1osq{height:100%}
13
14
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
+ ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
15
17
  ._kqsw1if8{position:sticky}
16
18
  ._kqsw1n9t{position:fixed}
17
19
  ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
18
20
  ._u7coidpf{inset-block-end:0}
19
21
  ._vchhusvi{box-sizing:border-box}
22
+ [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
23
+ [dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
20
24
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
21
- @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
25
+ @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
22
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
23
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
24
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
25
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
26
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
27
- @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
31
+ @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/es2019/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -75,6 +75,31 @@ const styles = {
75
75
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
76
76
  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
77
77
  };
78
+
79
+ /**
80
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
81
+ *
82
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
83
+ * with `@starting-style` used by `styles`.
84
+ *
85
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
86
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
87
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
88
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
89
+ * never runs.
90
+ */
91
+ const motionUpliftStyles = {
92
+ animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
93
+ animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
94
+ expandAnimationMobile: "_k1af10ed",
95
+ collapseAnimationMobile: "_1lh81gzg _k1affm5y",
96
+ flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
97
+ flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
98
+ flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
99
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
100
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
101
+ collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
102
+ };
78
103
  const fallbackDefaultWidth = 320;
79
104
  export const onPeekStartDelayMs = 500;
80
105
 
@@ -716,9 +741,10 @@ function SideNavInternal({
716
741
  * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
717
742
  */
718
743
  const hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
744
+ const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
719
745
 
720
746
  // This is only used for the regular expand and collapse animations, not the flyout animations.
721
- const shouldShowSidebarToggleAnimation = isFhsEnabled &&
747
+ const shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
722
748
  // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
723
749
  // slide in initially.
724
750
  hasExpandedStateChanged &&
@@ -752,7 +778,7 @@ function SideNavInternal({
752
778
  },
753
779
  ref: mergedRef,
754
780
  "data-testid": testId,
755
- className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
781
+ className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
756
782
  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
757
783
  variableName: sideNavLiveWidthVar,
758
784
  value: "0px",
package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -11,7 +11,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
11
11
  const styles = {
12
12
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
13
13
  rootT26Shape: "_2rko1qi0",
14
- interactiveMotion: "_v564o1g2 _1gglat8s",
14
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
15
15
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
16
16
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
17
17
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js CHANGED
@@ -10,7 +10,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
10
10
  const styles = {
11
11
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
12
12
  rootT26Shape: "_2rko1qi0",
13
- interactiveMotion: "_v564o1g2 _1gglat8s",
13
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
14
14
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
15
15
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
16
16
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -6,22 +6,26 @@
6
6
  ._1bsb1ego{width:min(90%,20pc)}
7
7
  ._1e0c1txw{display:flex}
8
8
  ._1e0cglyw{display:none}
9
+ ._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
9
10
  ._1pbycs5v{z-index:2}
10
11
  ._1pbyegat{z-index:4}
11
12
  ._2lx21bp4{flex-direction:column}
12
13
  ._4t3i1osq{height:100%}
13
14
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
+ ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
15
17
  ._kqsw1if8{position:sticky}
16
18
  ._kqsw1n9t{position:fixed}
17
19
  ._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
18
20
  ._u7coidpf{inset-block-end:0}
19
21
  ._vchhusvi{box-sizing:border-box}
22
+ [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
23
+ [dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
20
24
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
21
- @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
25
+ @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
22
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
23
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
24
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
25
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
26
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
27
- @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
31
+ @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/esm/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -79,6 +79,31 @@ var styles = {
79
79
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
80
80
  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
81
81
  };
82
+
83
+ /**
84
+ * Styles for the side nav enter/exit animations when `platform-dst-motion-uplift-sidenav` is enabled.
85
+ *
86
+ * These use the `motion.sidenav.*` tokens (keyframe animations) instead of the `transform` transitions
87
+ * with `@starting-style` used by `styles`.
88
+ *
89
+ * ⚠️ The `transition-duration` values below need to stay in sync with the duration baked into the tokens
90
+ * (`motion.sidenav.enter.*` is 250ms, `motion.sidenav.exit.*` is 200ms). The `display` property is
91
+ * transitioned (with `allow-discrete`) so the element stays rendered for the length of the exit animation —
92
+ * if the transition is shorter than the animation, `display: none` applies early and the exit animation
93
+ * never runs.
94
+ */
95
+ var motionUpliftStyles = {
96
+ animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
97
+ animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
98
+ expandAnimationMobile: "_k1af10ed",
99
+ collapseAnimationMobile: "_1lh81gzg _k1affm5y",
100
+ flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
101
+ flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
102
+ flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
103
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
104
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
105
+ collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
106
+ };
82
107
  var fallbackDefaultWidth = 320;
83
108
  export var onPeekStartDelayMs = 500;
84
109
 
@@ -719,9 +744,10 @@ function SideNavInternal(_ref) {
719
744
  * Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
720
745
  */
721
746
  var hasExpandedStateChanged = isExpandedStateDifferentFromInitial || hasExpandedStateChangedRef.current;
747
+ var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
722
748
 
723
749
  // This is only used for the regular expand and collapse animations, not the flyout animations.
724
- var shouldShowSidebarToggleAnimation = isFhsEnabled &&
750
+ var shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
725
751
  // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
726
752
  // slide in initially.
727
753
  hasExpandedStateChanged &&
@@ -752,7 +778,7 @@ function SideNavInternal(_ref) {
752
778
  style: _defineProperty({}, sideNavVar, clampedWidth),
753
779
  ref: mergedRef,
754
780
  "data-testid": testId,
755
- className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
781
+ className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
756
782
  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
757
783
  variableName: sideNavLiveWidthVar,
758
784
  value: "0px",
package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/esm/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -13,7 +13,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
13
13
  var styles = {
14
14
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
15
15
  rootT26Shape: "_2rko1qi0",
16
- interactiveMotion: "_v564o1g2 _1gglat8s",
16
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
17
17
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
18
18
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
19
19
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css CHANGED
@@ -8,7 +8,7 @@
8
8
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
9
9
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
10
10
  ._v5649dqc{transition:background .1s ease-out}
11
- ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
11
+ ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
12
12
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
13
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
14
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,7 +55,7 @@
55
55
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
56
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
57
  ._jf4cnqa1:hover{text-decoration-style:solid}
58
- ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
+ ._1ggl5xtf:active{transition:var(--ds-button-pressed,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
59
59
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
60
60
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
61
61
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/esm/ui/top-nav-items/themed/themed-pressable.js CHANGED
@@ -12,7 +12,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
12
12
  var styles = {
13
13
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
14
14
  rootT26Shape: "_2rko1qi0",
15
- interactiveMotion: "_v564o1g2 _1gglat8s",
15
+ interactiveMotion: "_v564k6bl _1ggl5xtf",
16
16
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
17
17
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
18
18
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
package/navigation-system.docs.tsx CHANGED
@@ -39,7 +39,7 @@ const documentation: StructuredContentSource = {
39
39
  {
40
40
  name: 'Top navigation',
41
41
  description: 'Basic usage of the top navigation bar.',
42
- source: path.resolve(packagePath, './examples/top-navigation.tsx'),
42
+ source: path.resolve(packagePath, './examples/top-navigation.vr.ap.tsx'),
43
43
  },
44
44
  ],
45
45
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.11.1",
3
+ "version": "10.12.0",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -70,7 +70,7 @@
70
70
  "@atlaskit/primitives": "^22.2.0",
71
71
  "@atlaskit/react-compiler-gating": "^0.2.0",
72
72
  "@atlaskit/side-nav-items": "^2.3.0",
73
- "@atlaskit/tokens": "^16.4.0",
73
+ "@atlaskit/tokens": "^16.6.0",
74
74
  "@atlaskit/tooltip": "^24.0.0",
75
75
  "@atlaskit/visually-hidden": "^4.2.0",
76
76
  "@babel/runtime": "^7.0.0",
@@ -92,7 +92,7 @@
92
92
  "@atlaskit/breadcrumbs": "^17.5.0",
93
93
  "@atlaskit/dropdown-menu": "^18.0.0",
94
94
  "@atlaskit/flag": "^18.2.0",
95
- "@atlaskit/form": "^16.1.0",
95
+ "@atlaskit/form": "^17.0.0",
96
96
  "@atlaskit/heading": "^7.0.0",
97
97
  "@atlaskit/inline-dialog": "^20.0.0",
98
98
  "@atlaskit/link": "^5.0.0",
@@ -106,12 +106,12 @@
106
106
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
107
107
  "@atlaskit/select": "^22.6.0",
108
108
  "@atlaskit/skeleton": "^4.2.0",
109
- "@atlaskit/spotlight": "^3.0.0",
109
+ "@atlaskit/spotlight": "^4.0.0",
110
110
  "@atlaskit/textfield": "^10.0.0",
111
111
  "@atlaskit/top-layer": "^3.2.0",
112
112
  "@atlassian/feature-flags-test-utils": "^1.2.0",
113
113
  "@atlassian/gemini": "^1.51.0",
114
- "@atlassian/search-dialog": "^10.8.0",
114
+ "@atlassian/search-dialog": "^10.9.0",
115
115
  "@atlassian/ssr-tests": "workspace:^",
116
116
  "@atlassian/test-utils": "^1.1.0",
117
117
  "@atlassian/testing-library": "^0.11.0",
@@ -122,26 +122,6 @@
122
122
  "react": "^18.2.0",
123
123
  "react-dom": "^18.2.0"
124
124
  },
125
- "techstack": {
126
- "@atlassian/frontend": {
127
- "import-structure": "atlassian-conventions"
128
- },
129
- "@repo/internal": {
130
- "dom-events": "use-bind-event-listener",
131
- "design-tokens": [
132
- "color",
133
- "spacing",
134
- "motion"
135
- ],
136
- "deprecation": "no-deprecated-imports",
137
- "imports": [
138
- "import-no-extraneous-disable-for-examples-and-docs"
139
- ],
140
- "styling": [
141
- "emotion"
142
- ]
143
- }
144
- },
145
125
  "platform-feature-flags": {
146
126
  "platform-dst-top-layer": {
147
127
  "type": "boolean",
@@ -166,6 +146,9 @@
166
146
  "platform_dst_nav4_skip_link_a11y_1": {
167
147
  "type": "boolean"
168
148
  },
149
+ "platform-dst-motion-uplift-sidenav": {
150
+ "type": "boolean"
151
+ },
169
152
  "platform-dst-motion-uplift-button": {
170
153
  "type": "boolean",
171
154
  "referenceOnly": true