feat(panel): improve panel header layout (#10446)

**Related Issue:** #10385

## Summary

Slotted content will now adjust its size and position to allow more
flexible layouts, similar to how content behaves in `modal`.

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

@@ -210,8 +210,17 @@ withTooltips.parameters = {
 };
 
 export const withCustomHeader = (): string => html`
+  <style>
+    #three-quarters-width-header-content {
+      width: 75%;
+    }
+  </style>
   <calcite-dialog open scale="m" width-scale="s">
-    <div slot="${SLOTS.headerContent}">Header!</div>
+    <div id="three-quarters-width-header-content" slot="${SLOTS.headerContent}">
+      <calcite-inline-editable scale="l" editingEnabled="true">
+        <calcite-input alignment="start" placeholder="Enter text..." scale="l" type="text" value="Editable header" />
+      </calcite-inline-editable>
+    </div>
     <p>Slotted content!</p>
   </calcite-dialog>
 `;

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

@@ -180,6 +180,7 @@
 }
 
 .header-content {
+  flex: 1 1 auto;
   padding-block: var(--calcite-internal-panel-header-vertical-padding);
   padding-inline: var(--calcite-internal-panel-default-padding);
 }