feat(panel): add '--calcite-panel-content-space' style (#10117)

**Related Issue:** #10119

## Summary

- add `--calcite-panel-content-space` style.
- adds `relative` positioning to content so that absolutely positioned
elements are contained within the panel content. (shell use case)
- add e2e test

This will allow the dialog component to set padding on the content of
the internal panel without having to surround the content with a div
which messes up the placement of the FAB within panel.

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

@@ -11,6 +11,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
@@ -501,4 +502,13 @@ describe("calcite-panel", () => {
     expect(await container.isVisible()).toBe(true);
     expect(calcitePanelClose).toHaveReceivedEventTimes(0);
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
+      "--calcite-panel-content-space": {
+        shadowSelector: `.${CSS.contentWrapper}`,
+        targetProp: "padding",
+      },
+    });
+  });
 });

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

@@ -3,6 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-panel-content-space: Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
  */
@@ -167,7 +168,9 @@
   bg-background
   overflow-auto
   h-full
-  focus-base;
+  focus-base
+  relative;
+  padding: var(--calcite-panel-content-space, 0);
 }
 
 .content-wrapper:focus {