fix(shell): fix z-index of slotted popover elements (#10325)

**Related Issue:** #10214

## Summary

- fix css for z-index
  - should only set `z-index` on slotted `calcite-shell-panel`s
- add screenshot test
- regression from here:
#9912

packages/calcite-components/src/components/shell/shell.scss

@@ -39,11 +39,6 @@
   justify-content: space-between;
 }
 
-.content ::slotted(:not(calcite-tip-manager)) {
-  @apply relative
-    z-default;
-}
-
 .content ::slotted(calcite-shell-center-row),
 .content ::slotted(calcite-panel),
 .content ::slotted(calcite-flow) {

packages/calcite-components/src/components/shell/shell.stories.ts

@@ -1851,3 +1851,33 @@ export const panelWithPopoverZIndex = (): string =>
     ><calcite-popover open reference-element="button" offset-distance="-50" offset-skidding="15" style="z-index: 100">
       <calcite-panel height-scale="m" heading="popover panel header" style="height: 400px;"> </calcite-panel>
     </calcite-popover>`;
+
+export const popoverZIndex = (): string =>
+  html`<calcite-shell>
+    <calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">
+      <calcite-action-bar slot="action-bar">
+        <calcite-action id="target-element" text="Save" icon="save" indicator></calcite-action>
+        <calcite-action active icon="map" text="Map"></calcite-action>
+        <calcite-action icon="layer" text="Layer"></calcite-action>
+      </calcite-action-bar>
+      <calcite-panel heading="Map" id="panel-start">
+        <calcite-block heading="Block 1" collapsible></calcite-block>
+      </calcite-panel>
+    </calcite-shell-panel>
+
+    <!--  Popover here  -->
+    <calcite-popover reference-element="target-element" open><p>This is a popover</p></calcite-popover>
+
+    <calcite-shell-panel slot="panel-end" position="end" id="shell-panel-end" collapsed>
+      <calcite-action-bar slot="action-bar">
+        <calcite-action text="Layer" icon="sliders-horizontal"></calcite-action>
+        <calcite-action text="Styles" icon="shapes"></calcite-action>
+        <calcite-action text="Filter" icon="layer-filter"></calcite-action>
+        <calcite-action text="Configure" icon="popup"></calcite-action>
+      </calcite-action-bar>
+      <calcite-panel heading id="panel-end" closable closed>
+        <calcite-block heading="Block 1" collapsible></calcite-block>
+      </calcite-panel>
+    </calcite-shell-panel>
+    <calcite-panel heading="Content"></calcite-panel>
+  </calcite-shell>`;