diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 2e02214db54..0998dad6911 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [
diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index d75dceb7bf8..a72cc923635 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -1108,7 +1108,7 @@ describe("calcite-dialog", () => {
         },
         "--calcite-dialog-footer-space": {
           shadowSelector: `.${CSS.panel}`,
-          targetProp: "--calcite-panel-footer-padding",
+          targetProp: "--calcite-panel-footer-space",
         },
         "--calcite-dialog-offset-x": {
           shadowSelector: `.${CSS.dialog}`,
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 0700e9981a2..470b45d3cf7 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -116,8 +116,8 @@
 
 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);
+  --calcite-panel-footer-space: var(--calcite-dialog-footer-space);
+  --calcite-panel-border-color: var(--calcite-dialog-border-color);
   --calcite-panel-background-color: var(--calcite-dialog-background-color);
 }
 
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index 6141e2ec462..87ac66f12de 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -667,15 +667,118 @@ describe("calcite-panel", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
-      "--calcite-panel-content-space": {
-        shadowSelector: `.${CSS.contentWrapper}`,
-        targetProp: "padding",
+    themed(
+      html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
+        <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+        <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+        <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+        <div slot="content-top">To continue, you must agree to the terms</div>
+        <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+          <calcite-checkbox></calcite-checkbox>I agree to the terms
+        </calcite-label>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <p>
+          Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec malesuada
+          velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae, sollicitudin
+          mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl varius eu.
+          Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo. Donec eget
+          pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus maximus lacus
+          nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor accumsan justo,
+          at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        </p>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <calcite-button slot="footer-end"> I'm done </calcite-button>
+      </calcite-panel>`,
+      {
+        "--calcite-panel-corner-radius": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-panel-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          targetProp: "color",
+        },
+        "--calcite-panel-description-text-color": {
+          shadowSelector: `.${CSS.description}`,
+          targetProp: "color",
+        },
+        "--calcite-panel-background-color": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-header-background-color": {
+          shadowSelector: `.${CSS.header}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-footer-background-color": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-panel-border-color": [
+          {
+            shadowSelector: `.${CSS.header}`,
+            targetProp: "borderBlockEndColor",
+          },
+          {
+            shadowSelector: `.${CSS.contentTop}`,
+            targetProp: "borderBlockStartColor",
+          },
+          {
+            shadowSelector: `.${CSS.contentBottom}`,
+            targetProp: "borderBlockStartColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderBlockStartColor",
+          },
+        ],
+        "--calcite-panel-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-footer-space": {
+          shadowSelector: `.${CSS.footer}`,
+          targetProp: "padding",
+        },
+        "--calcite-panel-content-space": {
+          shadowSelector: `.${CSS.contentWrapper}`,
+          targetProp: "padding",
+        },
       },
-      "--calcite-panel-background-color": {
-        shadowSelector: `.${CSS.contentWrapper}`,
-        targetProp: "backgroundColor",
+    );
+    themed(
+      html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
+        <div slot="header-content">Custom header content</div>
+        <p>
+          Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+          fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
+          sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
+          vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
+          iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
+          vestibulum risus. Integer non erat libero.
+        </p>
+        <calcite-button slot="footer-end"> I'm done </calcite-button>
+      </calcite-panel>`,
+      {
+        "--calcite-panel-header-content-space": {
+          shadowSelector: `.${CSS.headerSlottedContent}`,
+          targetProp: "padding",
+        },
       },
-    });
+    );
   });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 4d40f90da8c..c24ab3ba4aa 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -2,16 +2,34 @@
  * CSS Custom Properties
  *
  * 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.
+
+ * @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
+ * @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
+ * @prop --calcite-panel-border-color: Specifies the border color of the component.
+
  * @prop --calcite-panel-background-color: Specifies the background color of the component.
+ * @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
+ * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
+
+ * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
+ * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
+ * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
+
+ * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components. Will apply to any slotted Calcite Action components.
+ * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
+ * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
+ * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
+ * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
+ * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Calcite Popover component, which is rendered within a Calcite Action Menu when slotted Calcite Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components.
+
+ * @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
+ * @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
+ * @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
  */
 
 :host {
-  @extend %component-host;
-  @apply relative flex w-full h-full flex-auto overflow-hidden;
+  @apply relative flex w-full h-full flex-auto overflow-hidden box-border;
 
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
 }
@@ -21,7 +39,7 @@
 @import "../../assets/styles/header";
 
 :host([scale="s"]) {
-  --calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
+  --calcite-internal-panel-default-space: var(--calcite-spacing-sm);
   --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available
 
   .header-content {
@@ -36,7 +54,7 @@
 }
 
 :host([scale="m"]) {
-  --calcite-internal-panel-default-padding: var(--calcite-spacing-md);
+  --calcite-internal-panel-default-space: var(--calcite-spacing-md);
   --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);
 
   .header-content {
@@ -51,7 +69,7 @@
 }
 
 :host([scale="l"]) {
-  --calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
+  --calcite-internal-panel-default-space: var(--calcite-spacing-xl);
   --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);
 
   .header-content {
@@ -68,17 +86,23 @@
 .content-top,
 .content-bottom {
   @apply flex items-start self-stretch;
-
-  border-block-start: 1px solid var(--calcite-color-border-3);
-  background-color: var(--calcite-color-foreground-1);
+  padding: var(--calcite-internal-panel-default-space);
+  border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
+  background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1));
 }
 
 .container {
-  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
-
+  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border text-n1 text-color-2;
   transition:
     max-block-size var(--calcite-animation-timing),
     inline-size var(--calcite-animation-timing);
+  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
+  box-sizing: border-box;
+  font-size: var(--calcite-font-size--1);
+}
+
+.container * {
+  @apply box-border;
 }
 
 .container[hidden] {
@@ -86,8 +110,12 @@
 }
 
 .header {
-  @apply bg-foreground-1 flex flex-col z-header;
-  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
+  @apply flex flex-col z-header;
+  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
+    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;
+  background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));
+  border-block-end: 1px solid
+    var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)));
 }
 
 .header-container {
@@ -98,7 +126,7 @@
 }
 
 .header-container--border-end {
-  border-block-end: 1px solid var(--calcite-color-border-3);
+  border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
 }
 
 .action-bar-container {
@@ -126,7 +154,8 @@
   }
 
   .heading {
-    @apply mx-0 mt-0 mb-1 font-medium text-color-1;
+    @apply mx-0 mt-0 mb-1 font-medium;
+    color: var(--calcite-panel-heading-text-color, var(--calcite-color-text-1));
 
     &:only-child {
       @apply mb-0;
@@ -134,15 +163,15 @@
   }
 
   .description {
-    @apply text-color-2;
+    color: var(--calcite-panel-description-text-color, var(--calcite-color-text-2));
   }
 }
 
 .back-button {
-  @apply border-color-3
-  border-0
+  @apply border-0
   border-solid;
   border-inline-end-width: theme("borderWidth.DEFAULT");
+  border-color: var(--calcite-panel-border-color, var(--calcite-color-border-3));
 }
 
 .header-actions {
@@ -156,6 +185,24 @@
   margin-inline-start: theme("margin.auto");
 }
 
+#close,
+#collapse,
+.back-button,
+calcite-action-menu {
+}
+
+#close,
+#collapse,
+calcite-action-menu {
+  &:last-child {
+    --calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
+  }
+}
+
+.back-button {
+  --calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
+}
+
 .content-wrapper {
   @apply flex
   flex-auto
@@ -165,8 +212,9 @@
   overflow-auto
   h-full
   focus-base
+  text-color-2
   relative;
-  padding: var(--calcite-panel-content-space, 0);
+  padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0));
   background: var(--calcite-panel-background-color, var(--calcite-color-background));
 }
 
@@ -174,21 +222,29 @@
   @apply focus-inset;
 }
 
-.content-top,
-.content-bottom {
-  padding: var(--calcite-internal-panel-default-padding);
-}
-
 .header-content {
   flex: 1 1 auto;
+  justify-content: center;
   padding-block: var(--calcite-internal-panel-header-vertical-padding);
-  padding-inline: var(--calcite-internal-panel-default-padding);
-}
+  padding-inline: var(--calcite-internal-panel-default-space);
 
+  &.header-slotted-content {
+    padding: var(
+      --calcite-panel-header-content-space,
+      var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space)
+    );
+  }
+}
 .footer {
-  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
-  border-block-start: 1px solid var(--calcite-color-border-3);
-  padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
+  @apply flex mt-auto flex-row content-between justify-center items-center text-n2-wrap;
+  border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
+  padding: var(
+    --calcite-panel-footer-space,
+    var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space))
+  );
+  background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));
+  border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
+    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
 }
 
 .footer-content {
@@ -197,19 +253,19 @@
 
 .footer-actions {
   @apply flex flex-row items-center justify-evenly flex-1;
-  gap: var(--calcite-internal-panel-default-padding);
+  gap: var(--calcite-internal-panel-default-space);
 }
 
 .footer-start {
   @apply flex flex-row items-center justify-start flex-1;
   margin-inline-end: auto;
-  gap: var(--calcite-internal-panel-default-padding);
+  gap: var(--calcite-internal-panel-default-space);
 }
 
 .footer-end {
   @apply flex flex-row items-center justify-end flex-1;
   margin-inline-start: auto;
-  gap: var(--calcite-internal-panel-default-padding);
+  gap: var(--calcite-internal-panel-default-space);
 }
 
 .fab-container {
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 73d710a27ed..7058ffc7b9e 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -424,7 +424,11 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC
 
   private renderHeaderSlottedContent(): JsxNode {
     return (
-      <div class={CSS.headerContent} hidden={!this.hasHeaderContent} key="slotted-header-content">
+      <div
+        class={{ [CSS.headerContent]: true, [CSS.headerSlottedContent]: true }}
+        hidden={!this.hasHeaderContent}
+        key="slotted-header-content"
+      >
         <slot name={SLOTS.headerContent} onSlotChange={this.handleHeaderContentSlotChange} />
       </div>
     );
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index 428b13c5901..31948c9b428 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -21,6 +21,7 @@ export const CSS = {
   footerActions: "footer-actions",
   footerStart: "footer-start",
   footerEnd: "footer-end",
+  headerSlottedContent: "header-slotted-content",
 };
 
 export const IDS = {
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index 8258349fd02..91511c727af 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -32,9 +32,31 @@
         margin: 60px 0;
         border-top: 1px solid var(--calcite-color-border-2);
       }
+
+      .themed-panel {
+        --calcite-panel-corner-radius: 12px;
+        --calcite-panel-heading-text-color: darkgreen;
+        --calcite-panel-description-text-color: lightgreen;
+        --calcite-panel-background-color: yellow;
+        --calcite-panel-header-background-color: orange;
+        --calcite-panel-footer-background-color: red;
+
+        --calcite-panel-border-color: lime;
+
+        --calcite-panel-space: 2rem;
+        --calcite-panel-header-content-space: 0;
+        --calcite-panel-footer-space: 0;
+
+        --calcite-action-background-color: lime;
+        --calcite-action-background-color-hover: lime;
+        --calcite-action-background-color-pressed: lime;
+        --calcite-action-text-color: blue;
+        --calcite-action-text-color-pressed: blue;
+        --calcite-popover-border-color: blue;
+      }
     </style>
 
-    <script src="./_assets/head.ts"></script>
+    <script src="./_assets/head.js"></script>
   </head>
 
   <body>
@@ -61,6 +83,16 @@
         </div>
       </div>
 
+      <!-- no content -->
+      <div class="parent">
+        <div class="child right-aligned-text">no content</div>
+        <div class="child">
+          <calcite-panel height-scale="s" heading="Header!">
+            <p slot="footer">Footer!</p>
+          </calcite-panel>
+        </div>
+      </div>
+
       <!-- with action bar and content top-->
       <div class="parent">
         <div class="child right-aligned-text">Slotted Action Bar + Slotted Content Top</div>
@@ -283,6 +315,193 @@
           </div>
         </div>
       </div>
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">themed inactive theme collapsed</div>
+        <div class="child">
+          <calcite-panel
+            heading="Terms and conditions"
+            description="Something great about this"
+            closable
+            collapsible
+            collapsed
+          >
+            <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+            <div slot="content-top">To continue, you must agree to the terms</div>
+            <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+              <calcite-checkbox></calcite-checkbox>I agree to the terms
+            </calcite-label>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <p>
+              Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
+              malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
+              sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
+              varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
+              Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
+              maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
+              accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
+              faucibus.
+            </p>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <calcite-button slot="footer-end"> I'm done </calcite-button>
+          </calcite-panel>
+        </div>
+      </div>
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">themed inactive theme</div>
+        <div class="child">
+          <calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
+            <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+            <div slot="content-top">To continue, you must agree to the terms</div>
+            <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+              <calcite-checkbox></calcite-checkbox>I agree to the terms
+            </calcite-label>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <p>
+              Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
+              malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
+              sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
+              varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
+              Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
+              maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
+              accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
+              faucibus.
+            </p>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <calcite-button slot="footer-end"> I'm done </calcite-button>
+          </calcite-panel>
+        </div>
+      </div>
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">themed</div>
+        <div class="child">
+          <calcite-panel
+            class="themed-panel"
+            heading="Terms and conditions"
+            description="Something great about this"
+            closable
+            collapsible
+          >
+            <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+            <div slot="content-top">To continue, you must agree to the terms</div>
+            <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+              <calcite-checkbox></calcite-checkbox>I agree to the terms
+            </calcite-label>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <p>
+              Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
+              malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
+              sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
+              varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
+              Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
+              maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
+              accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
+              faucibus.
+            </p>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <calcite-button slot="footer-end"> I'm done </calcite-button>
+          </calcite-panel>
+        </div>
+      </div>
+      <!-- themed -->
+      <div class="parent">
+        <div class="child right-aligned-text">themed with header-content slotted</div>
+        <div class="child">
+          <calcite-panel
+            class="themed-panel"
+            heading="Terms and conditions"
+            description="Something great about this"
+            closable
+            collapsible
+          >
+            <div slot="header-content" placeholder="Example" style="height: 100%; background: pink">Custom Div</div>
+            <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+            <div slot="content-top">To continue, you must agree to the terms</div>
+            <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+              <calcite-checkbox></calcite-checkbox>I agree to the terms
+            </calcite-label>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <p>
+              Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
+              malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
+              sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
+              varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
+              Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
+              maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
+              accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
+              faucibus.
+            </p>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
+              tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
+              tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
+              porttitor est sed, vestibulum risus. Integer non erat libero.
+            </p>
+            <calcite-button slot="footer-end"> I'm done </calcite-button>
+          </calcite-panel>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>