Add support to panel components' `action-bar` slot for element containing an action-bar

Check existing issues

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

Description

The panel and shell-panel components' action-bar slot currently hides slotted elements that are not a <calcite-action-bar>. However, in apps where it is beneficial to have the action-bar as a reusable component, it may not be possible to slot the action-bar element directly (e.g. Stencil).

The requested functionality is to add support to this slot for a nested action-bar.

Acceptance Criteria

Any Calcite component that supports the action-bar slot should supports both:

[x] A slotted <calcite-action-bar> element (no regression).
[ ] A slotted element that contains a descendent <calcite-action-bar> element.
- [ ] If multiple action bar descendants are found, stack them vertically the same as if multiple <calcite-action-bar> elements were slotted.
- [ ] Optionally opinionated on what display the slotted element has (i.e. contents).

Relevant Info

No response

Which Component

The panel and shell-panel components with impact to:

dialog
flow-item

Example Use Case

<calcite-panel>
  <my-shared-action-bar slot="action-bar"></my-shared-action-bar>
</calcite-panel>

@Component()
class MySharedActionBar {
  render() {
    return (
      <Host style="display: contents;">
        <calcite-action-bar>
          <calcite-action-group>
            <calcite-action … />
            …
          </calcite-action-group>
          …
        </calcite-action-bar>
      </Host>
    )
  }
}

Priority impact

impact - p1 - need for current milestone

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 Field Apps

Esri / calcite-design-system