fix(panel): add correct heading and description line height and align…

…ment (#10944)

**Related Issue:**
[#9862](#9862)

## Summary

Update `panel` to:

- Use `calcite-font-line-height-relative-snug` as `heading` and
`description`'s line height.
- Vertically center the header's content when only `heading` or
`description` are used.

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

@@ -44,11 +44,11 @@
 
   .header-content {
     .heading {
-      @apply text-n1h;
+      font-size: var(--calcite-font-size--1);
     }
 
     .description {
-      @apply text-n2h;
+      font-size: var(--calcite-font-size--2);
     }
   }
 }
@@ -59,11 +59,11 @@
 
   .header-content {
     .heading {
-      @apply text-0h;
+      font-size: var(--calcite-font-size-0);
     }
 
     .description {
-      @apply text-n1h;
+      font-size: var(--calcite-font-size--1);
     }
   }
 }
@@ -74,11 +74,11 @@
 
   .header-content {
     .heading {
-      @apply text-1h;
+      font-size: var(--calcite-font-size-1);
     }
 
     .description {
-      @apply text-0h;
+      font-size: var(--calcite-font-size-0);
     }
   }
 }
@@ -145,16 +145,19 @@
     py-3.5;
 
   margin-inline-end: auto;
+  justify-content: center;
 
   .heading,
   .description {
     @apply block
-      break-words
-      p-0;
+    flex-none
+    break-words
+    p-0;
+    line-height: var(--calcite-font-line-height-relative-snug);
   }
 
   .heading {
-    @apply mx-0 mt-0 mb-1 font-medium;
+    @apply font-medium;
     color: var(--calcite-panel-heading-text-color, var(--calcite-color-text-1));
 
     &:only-child {