feat(panel): add content-top slot (#9293)

**Related Issue:** #8980

## Summary
Add a new `content-top` slot to the `panel` component.

packages/calcite-components/src/components.d.ts

@@ -5255,7 +5255,7 @@ export namespace Components {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment": Exclude<Alignment, "end">;
         /**
@@ -13155,7 +13155,7 @@ declare namespace LocalJSX {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment"?: Exclude<Alignment, "end">;
         /**

packages/calcite-components/src/components/panel/panel.scss

@@ -18,6 +18,25 @@
 
 @import "../../assets/styles/header";
 
+:host([scale="s"]) .content-top {
+  padding: var(--calcite-spacing-sm);
+}
+
+:host([scale="m"]) .content-top {
+  padding: var(--calcite-spacing-md);
+}
+
+:host([scale="l"]) .content-top {
+  padding: var(--calcite-spacing-xl);
+}
+
+.content-top {
+  @apply flex items-start self-stretch;
+
+  padding: var(--calcite-spacing-md);
+  border-block-start: 1px solid var(--calcite-color-border-3);
+}
+
 .container {
   @apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
 
@@ -31,8 +50,7 @@
 }
 
 .header {
-  @apply bg-foreground-1 flex flex-col
-    z-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));
 }
 

packages/calcite-components/src/components/panel/panel.stories.ts

@@ -440,3 +440,22 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
   html`<calcite-panel style="--calcite-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-panel
   >`;
+
+export const contentTopSlot = (): string => html`
+  <div style="height: 300px; width: 400px; display: flex">
+    <calcite-panel height-scale="s">
+      <calcite-action-bar slot="action-bar">
+        <calcite-action-group>
+          <calcite-action text="Add" icon="plus"> </calcite-action>
+        </calcite-action-group>
+      </calcite-action-bar>
+      <div slot="content-top">Slot for a content-top.</div>
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <p>Hello world!</p>
+      <p>Hello world!</p>
+      <p style="height: 400px">Hello world!</p>
+      <p slot="footer">Slotted content!</p>
+    </calcite-panel>
+  </div>
+`;

packages/calcite-components/src/components/panel/panel.tsx

@@ -48,6 +48,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
+ * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
  * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
  * @slot header-content - A slot for adding custom content to the header.
@@ -207,6 +208,8 @@ export class Panel
 
   @State() hasActionBar = false;
 
+  @State() hasContentTop = false;
+
   @State() hasFooterContent = false;
 
   @State() hasFooterActions = false;
@@ -328,6 +331,10 @@ export class Panel
     this.hasFab = slotChangeHasAssignedElement(event);
   };
 
+  private contentTopSlotChangeHandler = (event: Event): void => {
+    this.hasContentTop = slotChangeHasAssignedElement(event);
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -540,6 +547,7 @@ export class Panel
           {this.renderHeaderActionsEnd()}
         </div>
         {this.renderActionBar()}
+        {this.renderContentTop()}
       </header>
     );
   }
@@ -585,6 +593,14 @@ export class Panel
     );
   }
 
+  renderContentTop(): VNode {
+    return (
+      <div class={CSS.contentTop} hidden={!this.hasContentTop}>
+        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />
+      </div>
+    );
+  }
+
   renderFab(): VNode {
     return (
       <div class={CSS.fabContainer} hidden={!this.hasFab}>

packages/calcite-components/src/components/panel/resources.ts

@@ -2,6 +2,7 @@ export const CSS = {
   actionBarContainer: "action-bar-container",
   backButton: "back-button",
   container: "container",
+  contentTop: "content-top",
   header: "header",
   headerContainer: "header-container",
   headerContainerBorderEnd: "header-container--border-end",
@@ -28,6 +29,7 @@ export const ICONS = {
 
 export const SLOTS = {
   actionBar: "action-bar",
+  contentTop: "content-top",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
   headerMenuActions: "header-menu-actions",

packages/calcite-components/src/demos/panel.html

@@ -61,11 +61,11 @@
         </div>
       </div>
 
-      <!-- with action bar -->
+      <!-- with action bar and content top-->
       <div class="parent">
-        <div class="child right-aligned-text">Slotted Action Bar</div>
+        <div class="child right-aligned-text">Slotted Action Bar + Slotted Content Top</div>
         <div class="child">
-          <div style="height: 200px; display: flex">
+          <div style="height: 300px; width: 400px; display: flex">
             <calcite-panel height-scale="s">
               <calcite-action-bar slot="action-bar">
                 <calcite-action-group>
@@ -74,6 +74,7 @@
                   <calcite-action text="Layers" icon="layers"> </calcite-action>
                 </calcite-action-group>
               </calcite-action-bar>
+              <div slot="content-top">Slot for a content-top.</div>
               <div slot="header-content">Header!</div>
               <p>Slotted content!</p>
               <p style="height: 400px">Hello world!</p>