Calcite Sheet `calciteSheetBeforeOpen` happens after the animation is done

[hcampos-professional]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

When the <calcite-sheet> is opened, its calciteSheetBeforeOpen event is fired only after the transition/animation has happened.

Expected Behavior

As per the documentation the event should be fired before the transition starts, and calciteSheetOpen should be called after it finishes.

Reproduction Sample

https://codepen.io/hccampos/pen/pomLvZo

Reproduction Steps

1. Open https://codepen.io/hccampos/pen/pomLvZo
2. Click "Open sheet"
3. Notice that when the alert is displayed, the transition is already completed.

Reproduction Version

2.9.x

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[geospatialem]

Related consistency issue for events: https://github.com/Esri/calcite-design-system/issues/9315

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.12.0-next.18 https://codepen.io/Ditwan-Price/pen/OJezmaw