calcite-flow-item close button not setting closed when wrapped in custom element

[AdelheidF]

Check existing issues

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

Actual Behavior

I found a calcite issue with the flow-items wrapped in custom elements.

.../mapviewer/index.html?url=https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2 Ask me for a R1 link.

Open the labels panel on the right. Then go to the DOM and find the flow-item and panel and watch these. Now click the close button on the panel. Calcite sets the panel to closed but doens't change the flow-item element.

Now do the same on the left side with the legend panel. In this case calcite sets closed on both the panel and flow-item.

The difference between the 2 cases is that on the right is uses custom elements around the flow-item and on the left it does not.

The problem is now how would I un-close the panel inside the shadow DOM.

This is not a new problem, at least 6 months old, we only discovered it now.

cc @driskull

Expected Behavior

close prop gets set on both the flow-item and panel when hitting the Close button, even for flow-items wrapped in custom elements.

Reproduction Sample

https://codepen.io/driskull/pen/xxNNLqv?editors=1000

Reproduction Steps

1. open sample
2. inspect flow-item element in DOM
3. close the flow-item
4. notice flow-item element in the DOM does not have the closed attribute

Reproduction Version

2.8.6

Relevant Info

No response

Regression?

no

Priority impact

impact - p2 - want for an upcoming milestone

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 Map Viewer

[driskull]

@geospatialem @DitwanP triaged this and assigned to me for this upcoming milestone.

[github-actions[bot]]

Installed and assigned for verification.