From e0a87bf235ce05de8f7b44c0a363d3dbebb9462a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 14:39:32 -0700
Subject: [PATCH 1/8] fix(panel): add footer slot gaps settings #9858

---
 .../src/components/panel/panel.scss           | 21 +++++++++-------
 .../src/components/panel/panel.tsx            | 24 ++++++++++++-------
 .../src/components/panel/resources.ts         |  4 ++++
 .../calcite-components/src/demos/panel.html   | 13 ++++++++++
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 0b49bf01950..dfa1de927a1 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -169,24 +169,27 @@
 }
 
 .footer {
-  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1;
-
+  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
+  gap: var(--calcite-spacing-md);
   border-block-start: 1px solid var(--calcite-color-border-3);
   padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
-  column-gap: 0;
-  row-gap: var(--calcite-spacing-md);
 }
 
-@include slotted("footer-start", "*") {
-  @apply flex text-n2-wrap self-center;
+.footer-content,
+.footer-actions {
+  @apply flex flex-row items-center justify-center;
+  gap: var(--calcite-spacing-md);
+}
 
+.footer-start {
+  @apply flex flex-row items-center justify-start;
   margin-inline-end: auto;
   gap: var(--calcite-spacing-md);
 }
 
-@include slotted("footer-end", "*") {
-  @apply flex text-n2-wrap self-center;
-
+.footer-end {
+  @apply flex flex-row items-center justify-end;
+  margin-inline-start: auto;
   gap: var(--calcite-spacing-md);
 }
 
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 17d95d36b8e..4459f80cf41 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -620,14 +620,22 @@ export class Panel
 
     return (
       <footer class={CSS.footer} hidden={!showFooter}>
-        <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
-        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
-        <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
-        <slot
-          key="footer-actions-slot"
-          name={SLOTS.footerActions}
-          onSlotchange={this.handleFooterActionsSlotChange}
-        />
+        <div class={CSS.footerContent} hidden={!hasFooterContent}>
+          <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
+        </div>
+        <div class={CSS.footerStart} hidden={hasFooterContent || !hasFooterStartContent}>
+          <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
+        </div>
+        <div class={CSS.footerEnd} hidden={hasFooterContent || !hasFooterEndContent}>
+          <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
+        </div>
+        <div class={CSS.footerActions} hidden={hasFooterContent || !hasFooterActions}>
+          <slot
+            key="footer-actions-slot"
+            name={SLOTS.footerActions}
+            onSlotchange={this.handleFooterActionsSlotChange}
+          />
+        </div>
       </footer>
     );
   }
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index 6fd7f4d449d..f7704b36582 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -17,6 +17,10 @@ export const CSS = {
   contentWrapper: "content-wrapper",
   fabContainer: "fab-container",
   footer: "footer",
+  footerContent: "footer-content",
+  footerActions: "footer-actions",
+  footerStart: "footer-start",
+  footerEnd: "footer-end",
 };
 
 export const ICONS = {
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index e0fd9209bdc..2f9330a4a73 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -178,10 +178,23 @@
                 icon-start="check"
                 width="full"
               ></calcite-button>
+              <calcite-button
+                type="button"
+                slot="footer"
+                kind="neutral"
+                scale="s"
+                id="card-icon-test-1"
+                icon-start="check"
+                width="full"
+              ></calcite-button>
+              <calcite-button type="button" slot="footer-start"></calcite-button>
               <calcite-button type="button" slot="footer-start"></calcite-button>
               <div slot="footer-end">
                 <calcite-button type="button" slot="footer-end"></calcite-button>
               </div>
+              <div slot="footer-end">
+                <calcite-button type="button" slot="footer-end"></calcite-button>
+              </div>
             </calcite-panel>
           </div>
         </div>

From d08e7dc15baf153a4204f377cb0931ab947d997c Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:03:19 -0700
Subject: [PATCH 2/8] cleanup

---
 .../.storybook/preview-head.html              |   5 +
 .../components/flow-item/flow-item.stories.ts |   2 +-
 .../src/components/panel/panel.scss           |  18 ++-
 .../src/components/panel/panel.stories.ts     | 115 ++++++++++++++----
 4 files changed, 110 insertions(+), 30 deletions(-)

diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
index e10d36db2f4..46b8971ec63 100644
--- a/packages/calcite-components/.storybook/preview-head.html
+++ b/packages/calcite-components/.storybook/preview-head.html
@@ -10,6 +10,11 @@
     background-color: var(--calcite-color-background);
   }
 
+  hr {
+    border: var(--calcite-border-width-sm) dashed var(--calcite-color-status-danger);
+    margin-block: 2rem;
+  }
+
   calcite-slider {
     width: 250px;
     max-width: 100%;
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index f80d1efc45d..e0ce6fb4e88 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerSlotCoexistence = (): string =>
+export const footerSlot = (): string =>
   html`<div style="width: 300px;">
     <calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index dfa1de927a1..bc4c9c63ba9 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -170,27 +170,33 @@
 
 .footer {
   @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
-  gap: var(--calcite-spacing-md);
   border-block-start: 1px solid var(--calcite-color-border-3);
   padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
 }
 
-.footer-content,
+.footer-content {
+  @apply flex flex-col items-center justify-center;
+  gap: var(--calcite-internal-panel-default-padding);
+}
+
 .footer-actions {
-  @apply flex flex-row items-center justify-center;
-  gap: var(--calcite-spacing-md);
+  @apply flex flex-row items-center justify-evenly;
+  gap: var(--calcite-internal-panel-default-padding);
+  flex: 1;
 }
 
 .footer-start {
   @apply flex flex-row items-center justify-start;
   margin-inline-end: auto;
-  gap: var(--calcite-spacing-md);
+  gap: var(--calcite-internal-panel-default-padding);
+  flex: 1;
 }
 
 .footer-end {
   @apply flex flex-row items-center justify-end;
   margin-inline-start: auto;
-  gap: var(--calcite-spacing-md);
+  gap: var(--calcite-internal-panel-default-padding);
+  flex: 1;
 }
 
 .fab-container {
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 49f721bb0fd..98a3bf880c1 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -113,21 +113,21 @@ export const onlyProps = (): string => html`
   </div>
 `;
 
-export const disabledWithStyledSlot_TestOnly = (): string => html`
+export const disabledWithStyledSlot = (): string => html`
   <calcite-panel style="height: 100%;" heading="Heading" disabled>
     <div id="content" style="height: 100%;">${contentHTML}</div>
   </calcite-panel>
 `;
 
-export const darkModeRTL_TestOnly = (): string => html`
+export const darkModeRTL = (): string => html`
   <calcite-panel collapse-direction="down" height-scale="m" dir="rtl" class="calcite-mode-dark">
     ${panelContent}
   </calcite-panel>
 `;
 
-darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+darkModeRTL.parameters = { themes: modesDarkDefault };
 
-export const closableWithActions_TestOnly = (): string => html`
+export const closableWithActions = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -142,7 +142,7 @@ export const closableWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsibleWithoutActions_TestOnly = (): string => html`
+export const collapsibleWithoutActions = (): string => html`
   <calcite-panel
     style="height: 100%;"
     collapsible
@@ -154,7 +154,7 @@ export const collapsibleWithoutActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsibleWithActions_TestOnly = (): string => html`
+export const collapsibleWithActions = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -170,7 +170,7 @@ export const collapsibleWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const collapseDirectionUp_TestOnly = (): string => html`
+export const collapseDirectionUp = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -187,7 +187,7 @@ export const collapseDirectionUp_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const collapseDirectionUpCollapsed_TestOnly = (): string => html`
+export const collapseDirectionUpCollapsed = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -205,7 +205,7 @@ export const collapseDirectionUpCollapsed_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsedWithActions_TestOnly = (): string => html`
+export const collapsedWithActions = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -222,7 +222,7 @@ export const collapsedWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-export const withActionBar_TestOnly = (): string =>
+export const withActionBar = (): string =>
   html`<div style="width: 300px;">
     <calcite-panel height-scale="s">
       <calcite-action-bar slot="action-bar">
@@ -237,16 +237,85 @@ export const withActionBar_TestOnly = (): string =>
     </calcite-panel>
   </div>`;
 
-export const footerPadding_TestOnly = (): string =>
+export const footerPadding = (): string =>
   html`<div style="width: 300px;">
     <calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
       <p>Slotted content!</p>
-      <div slot="footer">Footer!</div>
+      <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 actionBarBackgroundColor_TestOnly = (): string =>
+export const footerStartOnly = (): string =>
+  html`<div style="width: 300px;">
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button type="button" slot="footer-start">1</calcite-button>
+      <calcite-button type="button" slot="footer-start">2</calcite-button>
+    </calcite-panel>
+  </div>`;
+
+export const footerActions = (): string =>
+  html`<div style="width: 300px;">
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button type="button" slot="footer-actions">1</calcite-button>
+      <calcite-button type="button" slot="footer-actions">2</calcite-button>
+    </calcite-panel>
+    <hr />
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
+      <calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
+    </calcite-panel>
+  </div>`;
+
+export const footerVariations = (): string =>
+  html`<div style="width: 300px;">
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button type="button" slot="footer-end">1</calcite-button>
+      <calcite-button type="button" slot="footer-end">2</calcite-button>
+    </calcite-panel>
+    <hr />
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button type="button" slot="footer-start">1</calcite-button>
+      <calcite-button type="button" slot="footer-start">2</calcite-button>
+      <calcite-button type="button" slot="footer-end">3</calcite-button>
+      <calcite-button type="button" slot="footer-end">4</calcite-button>
+    </calcite-panel>
+    <hr />
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+      <calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
+      <calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
+      <calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
+    </calcite-panel>
+    <hr />
+    <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
+      <p>Slotted content!</p>
+      <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+      <calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
+    </calcite-panel>
+  </div>`;
+
+export const actionBarBackgroundColor = (): string =>
   html`<calcite-panel height-scale="s" style="width: 300px;">
     <calcite-action-bar slot="action-bar" expand-disabled>
       <calcite-action-group>
@@ -263,7 +332,7 @@ export const actionBarBackgroundColor_TestOnly = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const footerWithoutContent_TestOnly = (): string =>
+export const footerWithoutContent = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -272,7 +341,7 @@ export const footerWithoutContent_TestOnly = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const actionBarWithoutContent_TestOnly = (): string =>
+export const actionBarWithoutContent = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -287,7 +356,7 @@ export const actionBarWithoutContent_TestOnly = (): string =>
     </calcite-action-bar>
   </calcite-panel>`;
 
-export const actionBarZIndex_TestOnly = (): string =>
+export const actionBarZIndex = (): string =>
   html`<calcite-panel style="width: 400px;" height-scale="s" menu-open>
     <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>
@@ -303,7 +372,7 @@ export const actionBarZIndex_TestOnly = (): string =>
     <p>Some content</p></calcite-panel
   >`;
 
-export const footerAndActionBarWithoutContent_TestOnly = (): string =>
+export const footerAndActionBarWithoutContent = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -319,7 +388,7 @@ export const footerAndActionBarWithoutContent_TestOnly = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const flexContent_TestOnly = (): string =>
+export const flexContent = (): string =>
   html`<calcite-panel style="height: 300px; width: 500px" heading="My Panel"
     ><div
       style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
@@ -330,7 +399,7 @@ export const flexContent_TestOnly = (): string =>
     ></div
   ></calcite-panel>`;
 
-export const flexContentWithFAB_TestOnly = (): string =>
+export const flexContentWithFAB = (): string =>
   html`<calcite-panel style="height: 300px; width: 500px" heading="My Panel"
     ><div
       style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
@@ -342,7 +411,7 @@ export const flexContentWithFAB_TestOnly = (): string =>
     <calcite-fab slot="fab"></calcite-fab
   ></calcite-panel>`;
 
-export const overflowContent_TestOnly = (): string =>
+export const overflowContent = (): string =>
   html` <style>
       .container {
         max-height: 300px;
@@ -367,13 +436,13 @@ export const overflowContent_TestOnly = (): string =>
       </calcite-panel>
     </div>`;
 
-export const overflowContentWithFab_TestOnly = (): string =>
+export const overflowContentWithFab = (): string =>
   html` <calcite-panel style="max-height: 300px; height: 300px; width: 500px" heading="My Panel"
     ><div style="min-height: 500px">My Content</div>
     <calcite-fab slot="fab"></calcite-fab
   ></calcite-panel>`;
 
-export const noOverflowContentWithFab_TestOnly = (): string =>
+export const noOverflowContentWithFab = (): string =>
   html` <calcite-panel style="max-height: 300px; height: 300px; width: 500px" heading="My Panel"
     ><div>My Content</div>
     <calcite-fab slot="fab"></calcite-fab
@@ -382,7 +451,7 @@ export const noOverflowContentWithFab_TestOnly = (): string =>
 export const withTextContentOnly = (): string =>
   html`<calcite-panel height-scale="s" heading="My Panel">Slotted content!</calcite-panel>`;
 
-export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
+export const withNoHeaderBorderBlockEnd = (): string =>
   html`<calcite-panel style="--calcite-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-panel
   >`;

From 6c11936bd97cd6f86538c62a6a9f806765faa8d3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:12:34 -0700
Subject: [PATCH 3/8] cleanup

---
 .../.storybook/preview-head.html              |   5 -
 .../src/components/panel/panel.stories.ts     | 127 ++++++++++--------
 2 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/calcite-components/.storybook/preview-head.html b/packages/calcite-components/.storybook/preview-head.html
index 46b8971ec63..e10d36db2f4 100644
--- a/packages/calcite-components/.storybook/preview-head.html
+++ b/packages/calcite-components/.storybook/preview-head.html
@@ -10,11 +10,6 @@
     background-color: var(--calcite-color-background);
   }
 
-  hr {
-    border: var(--calcite-border-width-sm) dashed var(--calcite-color-status-danger);
-    margin-block: 2rem;
-  }
-
   calcite-slider {
     width: 250px;
     max-width: 100%;
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 98a3bf880c1..72fa284d225 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -253,67 +253,76 @@ export const footerPadding = (): string =>
     </calcite-panel>
   </div>`;
 
-export const footerStartOnly = (): string =>
-  html`<div style="width: 300px;">
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button type="button" slot="footer-start">1</calcite-button>
-      <calcite-button type="button" slot="footer-start">2</calcite-button>
-    </calcite-panel>
-  </div>`;
-
-export const footerActions = (): string =>
-  html`<div style="width: 300px;">
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button type="button" slot="footer-actions">1</calcite-button>
-      <calcite-button type="button" slot="footer-actions">2</calcite-button>
-    </calcite-panel>
-    <hr />
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
-      <calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
-    </calcite-panel>
-  </div>`;
+export const footerActionsDeprecated = (): string =>
+  html`<h2>Auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>Full width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>`;
 
 export const footerVariations = (): string =>
-  html`<div style="width: 300px;">
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button type="button" slot="footer-end">1</calcite-button>
-      <calcite-button type="button" slot="footer-end">2</calcite-button>
-    </calcite-panel>
-    <hr />
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button type="button" slot="footer-start">1</calcite-button>
-      <calcite-button type="button" slot="footer-start">2</calcite-button>
-      <calcite-button type="button" slot="footer-end">3</calcite-button>
-      <calcite-button type="button" slot="footer-end">4</calcite-button>
-    </calcite-panel>
-    <hr />
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
-      <calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
-      <calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
-      <calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
-    </calcite-panel>
-    <hr />
-    <calcite-panel height-scale="s">
-      <div slot="header-content">Header!</div>
-      <p>Slotted content!</p>
-      <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
-      <calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
-    </calcite-panel>
-  </div>`;
+  html` <h2>footer-start only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-end only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-end">1</calcite-button>
+        <calcite-button type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+        <calcite-button type="button" slot="footer-end">3</calcite-button>
+        <calcite-button type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width single</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width multiple</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>`;
 
 export const actionBarBackgroundColor = (): string =>
   html`<calcite-panel height-scale="s" style="width: 300px;">

From 193249797a2268ab5c43a32e58221d8ba45d3b83 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:18:50 -0700
Subject: [PATCH 4/8] cleanup

---
 .../src/components/panel/panel.scss                   |  1 +
 .../src/components/panel/panel.stories.ts             | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index bc4c9c63ba9..53801431d5a 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -177,6 +177,7 @@
 .footer-content {
   @apply flex flex-col items-center justify-center;
   gap: var(--calcite-internal-panel-default-padding);
+  flex: 1;
 }
 
 .footer-actions {
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 72fa284d225..e4360309414 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -274,7 +274,16 @@ export const footerActionsDeprecated = (): string =>
     </div>`;
 
 export const footerVariations = (): string =>
-  html` <h2>footer-start only</h2>
+  html`<h2>footer</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start only</h2>
     <div style="width: 300px;">
       <calcite-panel height-scale="s">
         <div slot="header-content">Header!</div>

From 67acb0563d7effc574832455ed142dcad089e497 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:20:14 -0700
Subject: [PATCH 5/8] cleanup

---
 .../src/components/panel/panel.stories.ts                 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index e4360309414..d05fddbe083 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -237,7 +237,7 @@ export const withActionBar = (): string =>
     </calcite-panel>
   </div>`;
 
-export const footerPadding = (): string =>
+export const footerCustomPadding = (): string =>
   html`<div style="width: 300px;">
     <calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
@@ -253,8 +253,8 @@ export const footerPadding = (): string =>
     </calcite-panel>
   </div>`;
 
-export const footerActionsDeprecated = (): string =>
-  html`<h2>Auto width</h2>
+export const footerActions = (): string =>
+  html`<h2>footer-actions (Deprecated): Auto width</h2>
     <div style="width: 300px;">
       <calcite-panel height-scale="s">
         <div slot="header-content">Header!</div>
@@ -263,7 +263,7 @@ export const footerActionsDeprecated = (): string =>
         <calcite-button type="button" slot="footer-actions">2</calcite-button>
       </calcite-panel>
     </div>
-    <h2>Full width</h2>
+    <h2>footer-actions (Deprecated): Full width</h2>
     <div style="width: 300px;">
       <calcite-panel height-scale="s">
         <div slot="header-content">Header!</div>

From 456b6b96a5525ac0f0c8e97b01bc8e27d0600c7b Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:29:13 -0700
Subject: [PATCH 6/8] cleanup

---
 .../src/components/panel/panel.scss                  | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 53801431d5a..9a469c18286 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -175,29 +175,25 @@
 }
 
 .footer-content {
-  @apply flex flex-col items-center justify-center;
+  @apply flex flex-col items-center justify-center flex-1;
   gap: var(--calcite-internal-panel-default-padding);
-  flex: 1;
 }
 
 .footer-actions {
-  @apply flex flex-row items-center justify-evenly;
+  @apply flex flex-row items-center justify-evenly flex-1;
   gap: var(--calcite-internal-panel-default-padding);
-  flex: 1;
 }
 
 .footer-start {
-  @apply flex flex-row items-center justify-start;
+  @apply flex flex-row items-center justify-start flex-1;
   margin-inline-end: auto;
   gap: var(--calcite-internal-panel-default-padding);
-  flex: 1;
 }
 
 .footer-end {
-  @apply flex flex-row items-center justify-end;
+  @apply flex flex-row items-center justify-end flex-1;
   margin-inline-start: auto;
   gap: var(--calcite-internal-panel-default-padding);
-  flex: 1;
 }
 
 .fab-container {

From ae013b61063ca97b4f81ce60c47512a14b7cc8b3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 26 Jul 2024 16:54:05 -0700
Subject: [PATCH 7/8] cleanup

---
 .../src/components/panel/panel.stories.ts     | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index d05fddbe083..d6a48a5ecc3 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -113,21 +113,21 @@ export const onlyProps = (): string => html`
   </div>
 `;
 
-export const disabledWithStyledSlot = (): string => html`
+export const disabledWithStyledSlot_TestOnly = (): string => html`
   <calcite-panel style="height: 100%;" heading="Heading" disabled>
     <div id="content" style="height: 100%;">${contentHTML}</div>
   </calcite-panel>
 `;
 
-export const darkModeRTL = (): string => html`
+export const darkModeRTL_TestOnly = (): string => html`
   <calcite-panel collapse-direction="down" height-scale="m" dir="rtl" class="calcite-mode-dark">
     ${panelContent}
   </calcite-panel>
 `;
 
-darkModeRTL.parameters = { themes: modesDarkDefault };
+darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
 
-export const closableWithActions = (): string => html`
+export const closableWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -142,7 +142,7 @@ export const closableWithActions = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsibleWithoutActions = (): string => html`
+export const collapsibleWithoutActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     collapsible
@@ -154,7 +154,7 @@ export const collapsibleWithoutActions = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsibleWithActions = (): string => html`
+export const collapsibleWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -170,7 +170,7 @@ export const collapsibleWithActions = (): string => html`
   </calcite-panel>
 `;
 
-export const collapseDirectionUp = (): string => html`
+export const collapseDirectionUp_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -187,7 +187,7 @@ export const collapseDirectionUp = (): string => html`
   </calcite-panel>
 `;
 
-export const collapseDirectionUpCollapsed = (): string => html`
+export const collapseDirectionUpCollapsed_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -205,7 +205,7 @@ export const collapseDirectionUpCollapsed = (): string => html`
   </calcite-panel>
 `;
 
-export const collapsedWithActions = (): string => html`
+export const collapsedWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
     closable
@@ -222,7 +222,7 @@ export const collapsedWithActions = (): string => html`
   </calcite-panel>
 `;
 
-export const withActionBar = (): string =>
+export const withActionBar_TestOnly = (): string =>
   html`<div style="width: 300px;">
     <calcite-panel height-scale="s">
       <calcite-action-bar slot="action-bar">
@@ -237,7 +237,7 @@ export const withActionBar = (): string =>
     </calcite-panel>
   </div>`;
 
-export const footerCustomPadding = (): string =>
+export const footerPadding_TestOnly = (): string =>
   html`<div style="width: 300px;">
     <calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
@@ -333,7 +333,7 @@ export const footerVariations = (): string =>
       </calcite-panel>
     </div>`;
 
-export const actionBarBackgroundColor = (): string =>
+export const actionBarBackgroundColor_TestOnly = (): string =>
   html`<calcite-panel height-scale="s" style="width: 300px;">
     <calcite-action-bar slot="action-bar" expand-disabled>
       <calcite-action-group>
@@ -350,7 +350,7 @@ export const actionBarBackgroundColor = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const footerWithoutContent = (): string =>
+export const footerWithoutContent_TestOnly = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -359,7 +359,7 @@ export const footerWithoutContent = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const actionBarWithoutContent = (): string =>
+export const actionBarWithoutContent_TestOnly = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -374,7 +374,7 @@ export const actionBarWithoutContent = (): string =>
     </calcite-action-bar>
   </calcite-panel>`;
 
-export const actionBarZIndex = (): string =>
+export const actionBarZIndex_TestOnly = (): string =>
   html`<calcite-panel style="width: 400px;" height-scale="s" menu-open>
     <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>
@@ -390,7 +390,7 @@ export const actionBarZIndex = (): string =>
     <p>Some content</p></calcite-panel
   >`;
 
-export const footerAndActionBarWithoutContent = (): string =>
+export const footerAndActionBarWithoutContent_TestOnly = (): string =>
   html`<calcite-panel
     height-scale="s"
     heading="Header!"
@@ -406,7 +406,7 @@ export const footerAndActionBarWithoutContent = (): string =>
     <p slot="footer">Footer!</p>
   </calcite-panel>`;
 
-export const flexContent = (): string =>
+export const flexContent_TestOnly = (): string =>
   html`<calcite-panel style="height: 300px; width: 500px" heading="My Panel"
     ><div
       style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
@@ -417,7 +417,7 @@ export const flexContent = (): string =>
     ></div
   ></calcite-panel>`;
 
-export const flexContentWithFAB = (): string =>
+export const flexContentWithFAB_TestOnly = (): string =>
   html`<calcite-panel style="height: 300px; width: 500px" heading="My Panel"
     ><div
       style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
@@ -429,7 +429,7 @@ export const flexContentWithFAB = (): string =>
     <calcite-fab slot="fab"></calcite-fab
   ></calcite-panel>`;
 
-export const overflowContent = (): string =>
+export const overflowContent_TestOnly = (): string =>
   html` <style>
       .container {
         max-height: 300px;
@@ -454,13 +454,13 @@ export const overflowContent = (): string =>
       </calcite-panel>
     </div>`;
 
-export const overflowContentWithFab = (): string =>
+export const overflowContentWithFab_TestOnly = (): string =>
   html` <calcite-panel style="max-height: 300px; height: 300px; width: 500px" heading="My Panel"
     ><div style="min-height: 500px">My Content</div>
     <calcite-fab slot="fab"></calcite-fab
   ></calcite-panel>`;
 
-export const noOverflowContentWithFab = (): string =>
+export const noOverflowContentWithFab_TestOnly = (): string =>
   html` <calcite-panel style="max-height: 300px; height: 300px; width: 500px" heading="My Panel"
     ><div>My Content</div>
     <calcite-fab slot="fab"></calcite-fab
@@ -469,7 +469,7 @@ export const noOverflowContentWithFab = (): string =>
 export const withTextContentOnly = (): string =>
   html`<calcite-panel height-scale="s" heading="My Panel">Slotted content!</calcite-panel>`;
 
-export const withNoHeaderBorderBlockEnd = (): string =>
+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
   >`;

From ceae510f44736b8d75629c7a3521f2ec2fba887e Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 29 Jul 2024 13:31:52 -0700
Subject: [PATCH 8/8] review fixes

---
 packages/calcite-components/src/components/panel/panel.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 9a469c18286..8ef2ffad730 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -175,8 +175,7 @@
 }
 
 .footer-content {
-  @apply flex flex-col items-center justify-center flex-1;
-  gap: var(--calcite-internal-panel-default-padding);
+  @apply flex flex-row items-center justify-center flex-1;
 }
 
 .footer-actions {