test(shell-panel): Fix token story set up (#11635)

**Related Issue:** #11628 

## Summary
Fixes the incorrect definitions and adds Shell Panel to the custom theme
file.

packages/calcite-components/src/custom-theme.stories.ts

@@ -55,6 +55,7 @@ import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 import { menuItem, menuItemTokens } from "./custom-theme/menu-item";
 import { panel, panelTokens } from "./custom-theme/panel";
+import { shellPanel, shellPanelTokens } from "./custom-theme/shell-panel";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -147,7 +148,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip} ${comboboxItem}
       </div>
       <div class="demo-column">
-        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel}
+        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating} ${panel} ${shellPanel}
       </div>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
       <div class="demo-column">${menuItem}</div>
@@ -206,6 +207,7 @@ const componentTokens = {
   ...tileTokens,
   ...tooltipTokens,
   ...menuItemTokens,
+  ...shellPanelTokens,
 };
 
 export default {

packages/calcite-components/src/custom-theme/shell-panel.ts

@@ -0,0 +1,31 @@
+import { html } from "../../support/formatting";
+
+export const shellPanelTokens = {
+  calciteShellPanelWidth: "",
+  calciteShellPanelMaxWidth: "",
+  calciteShellPanelMinWidth: "",
+  calciteShellPanelHeight: "",
+  calciteShellPanelMaxHeight: "",
+  calciteShellPanelMinHeight: "",
+  calciteShellPanelZIndex: "",
+  calciteShellPanelBorderColor: "",
+  calciteShellPanelCornerRadius: "",
+  calciteShellPanelShadow: "",
+};
+
+export const shellPanel = html`<calcite-shell-panel
+  ><calcite-panel heading="Panel Heading" description="Panel description" closable collapsible>
+    <calcite-action text="Action 1" text-enabled icon="icon1" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 2" text-enabled icon="icon2" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="Action 3" icon="icon3" slot="header-actions-end"></calcite-action>
+    <div slot="content-top">Content at the top</div>
+    <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+      <calcite-checkbox></calcite-checkbox>Agree to terms
+    </calcite-label>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
+      dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
+    </p>
+    <calcite-button slot="footer-end">Done</calcite-button>
+  </calcite-panel>
+</calcite-shell-panel>`;