fix(dialog): allow shell to be slotted inside (#10118)

**Related Issue:** #10095

## Summary

- sets the `--calcite-panel-content-space` on panel
- maps `--calcite-dialog-content-space` to
`--calcite-panel-content-space`
- adds screenshot test
- removes use of content div internally

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

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}"

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>

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