From 9cf4764a051e4fb738937e085e6bb4ca405856e9 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 20 Aug 2024 10:49:21 -0700
Subject: [PATCH 1/3] feat(panel): add '--calcite-panel-content-space' style.

---
 packages/calcite-components/src/components/panel/panel.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 0b7e786cd4c..e8c0367c885 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/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 {

From 6ef131fca308777a3d797a86cc638592ac237895 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 20 Aug 2024 10:51:54 -0700
Subject: [PATCH 2/3] screenshot test

---
 .../src/components/panel/panel.stories.ts        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index d6a48a5ecc3..af38e53f407 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -253,6 +253,22 @@ export const footerPadding_TestOnly = (): string =>
     </calcite-panel>
   </div>`;
 
+export const contentSpace = (): string =>
+  html`<div style="width: 300px;">
+    <calcite-panel height-scale="s" style="--calcite-panel-content-space: 20px;">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button type="button" slot="footer">1</calcite-button>
+      <calcite-button type="button" slot="footer">2</calcite-button>
+      <calcite-button type="button" slot="footer-start">3</calcite-button>
+      <calcite-button type="button" slot="footer-start">4</calcite-button>
+      <calcite-button type="button" slot="footer-end">5</calcite-button>
+      <calcite-button type="button" slot="footer-end">6</calcite-button>
+      <calcite-button type="button" slot="footer-actions">7</calcite-button>
+      <calcite-button type="button" slot="footer-actions">8</calcite-button>
+    </calcite-panel>
+  </div>`;
+
 export const footerActions = (): string =>
   html`<h2>footer-actions (Deprecated): Auto width</h2>
     <div style="width: 300px;">

From e6801a732562b6c38c8fefb5e930381d384c8e70 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 21 Aug 2024 13:46:14 -0700
Subject: [PATCH 3/3] review fixes

---
 .../src/components/panel/panel.e2e.ts            | 10 ++++++++++
 .../src/components/panel/panel.stories.ts        | 16 ----------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index 03896e1bad0..90309326579 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/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",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index af38e53f407..d6a48a5ecc3 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -253,22 +253,6 @@ export const footerPadding_TestOnly = (): string =>
     </calcite-panel>
   </div>`;
 
-export const contentSpace = (): string =>
-  html`<div style="width: 300px;">
-    <calcite-panel height-scale="s" style="--calcite-panel-content-space: 20px;">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button type="button" slot="footer">1</calcite-button>
-      <calcite-button type="button" slot="footer">2</calcite-button>
-      <calcite-button type="button" slot="footer-start">3</calcite-button>
-      <calcite-button type="button" slot="footer-start">4</calcite-button>
-      <calcite-button type="button" slot="footer-end">5</calcite-button>
-      <calcite-button type="button" slot="footer-end">6</calcite-button>
-      <calcite-button type="button" slot="footer-actions">7</calcite-button>
-      <calcite-button type="button" slot="footer-actions">8</calcite-button>
-    </calcite-panel>
-  </div>`;
-
 export const footerActions = (): string =>
   html`<h2>footer-actions (Deprecated): Auto width</h2>
     <div style="width: 300px;">