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/4] 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/4] 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 5ca3bf9eb7c24a85c6130deb624131675087e6b4 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 20 Aug 2024 10:53:49 -0700
Subject: [PATCH 3/4] fix(dialog): allow shell to be slotted inside #10095

---
 .../src/components/dialog/dialog.scss         |  5 +----
 .../src/components/dialog/dialog.stories.ts   | 21 +++++++++++++++++++
 .../src/components/dialog/dialog.tsx          |  4 +---
 .../src/components/dialog/resources.ts        |  1 -
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 6d23836d51f..1d5d4fa9339 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -115,14 +115,11 @@
 }
 
 calcite-panel {
+  --calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
   --calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
 }
 
-.content {
-  padding: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
-}
-
 .dialog {
   @apply pointer-events-none
     float-none
diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts
index d89822b27da..97670089cc0 100644
--- a/packages/calcite-components/src/components/dialog/dialog.stories.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts
@@ -360,6 +360,27 @@ const themedStyle = html`--calcite-dialog-scrim-background-color: purple; --calc
 --calcite-dialog-size-y: 400px; --calcite-dialog-footer-space: 50px; --calcite-dialog-border-color: pink;
 --calcite-dialog-content-space: 50px; --calcite-dialog-offset-x: 50px; --calcite-dialog-offset-y: -30px;`;
 
+export const withShellInside = (): string =>
+  html`<calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="l">
+    <calcite-shell>
+      <calcite-shell-panel slot="panel-start">
+        <calcite-action-bar slot="action-bar" expanded>
+          <calcite-action-group>
+            <calcite-action text-enabled text="Action 1"></calcite-action>
+            <calcite-action text-enabled text="Action 2"></calcite-action>
+            <calcite-action text-enabled text="Action 3"></calcite-action>
+            <calcite-action text-enabled text="Action 4"></calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+      </calcite-shell-panel>
+      <calcite-shell-center-row>
+        <calcite-button>button</calcite-button>
+      </calcite-shell-center-row>
+    </calcite-shell>
+    <calcite-button slot="footer-end" appearance="outline"> Cancel </calcite-button>
+    <calcite-button slot="footer-end"> Save </calcite-button>
+  </calcite-dialog>`;
+
 export const themed = (): string =>
   html`<calcite-dialog
     style="${themedStyle}"
diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
index 94760d6b5ba..991f3b66d18 100644
--- a/packages/calcite-components/src/components/dialog/dialog.tsx
+++ b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -275,9 +275,7 @@ export class Dialog
                 <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
                 <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
                 <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
-                <div class={CSS.content}>
-                  <slot />
-                </div>
+                <slot />
               </calcite-panel>
             </slot>
           </div>
diff --git a/packages/calcite-components/src/components/dialog/resources.ts b/packages/calcite-components/src/components/dialog/resources.ts
index 7265d7e5a75..db9ab305dcc 100644
--- a/packages/calcite-components/src/components/dialog/resources.ts
+++ b/packages/calcite-components/src/components/dialog/resources.ts
@@ -7,7 +7,6 @@ export const CSS = {
   container: "container",
   containerOpen: "container--open",
   containerEmbedded: "container--embedded",
-  content: "content",
 
   // these classes help apply the animation in phases to only set transform on open/close
   // this helps avoid a positioning issue for any floating-ui-owning children

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 4/4] 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;">