fix(shell-panel): click events correctly pass through the host element (

#3607)

* fix(shell-panel): click events correctly  pass through the shell-panel host

* add test

src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts

@@ -386,4 +386,20 @@ describe("calcite-shell-panel", () => {
     expect(separator.getAttribute("aria-valuenow")).toBe("330");
     expect((await content.getComputedStyle()).width).toBe("330px");
   });
+
+  it("click event should pass through host element", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-shell content-behind>
+        <calcite-shell-panel slot="primary-panel" position="start" detached></calcite-shell-panel>
+        <calcite-action text="test" style="height: 100%; width: 100%;" text-enabled></calcite-action>
+      </calcite-shell>`
+    );
+
+    await page.waitForChanges();
+    const shellPanel = await page.find("calcite-shell-panel");
+    await shellPanel.click();
+    await page.waitForChanges();
+    expect(await page.evaluate((selector) => document.activeElement.matches(selector), "calcite-action")).toBe(true);
+  });
 });

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

@@ -1,7 +1,8 @@
 :host {
   @apply flex
     items-stretch
-    flex-initial;
+    flex-initial
+    pointer-events-none;
   --calcite-shell-panel-detached-max-height: unset;
 }