Refresh UI components and showcase; release updated framework packages

packages/ui/components/SectionHeader.wrn

@@ -50,7 +50,7 @@ component SectionHeader {
   style {
     .wrn-section-header {
       --section-header-accent: var(--wrn-color-primary);
-      --section-header-title: 1.875rem;
+      --section-header-title: 1.25rem;
       display: flex;
       flex-direction: column;
       gap: 1.25rem;
@@ -131,7 +131,7 @@ component SectionHeader {
       color: var(--section-header-accent);
       font-size: 0.75rem;
       font-weight: 700;
-      letter-spacing: 0.18em;
+      letter-spacing: 0.06em;
       text-transform: uppercase;
     }
 
@@ -149,9 +149,9 @@ component SectionHeader {
     }
 
     .wrn-section-header__description {
-      margin: 1rem 0 0;
+      margin: 0.5rem 0 0;
       color: var(--wrn-color-text-muted);
-      font-size: 1rem;
+      font-size: 0.875rem;
       line-height: 1.7;
     }
 
@@ -185,24 +185,24 @@ component SectionHeader {
      * split only becomes a row once there is width for two columns.
      */
     .wrn-section-header[data-size="sm"] {
-      --section-header-title: 1.5rem;
+      --section-header-title: 1.125rem;
     }
 
     .wrn-section-header[data-size="lg"] {
-      --section-header-title: 2.25rem;
+      --section-header-title: 1.5rem;
     }
 
     @media (min-width: 640px) {
       .wrn-section-header {
-        --section-header-title: 2.25rem;
+        --section-header-title: 1.25rem;
       }
 
       .wrn-section-header[data-size="sm"] {
-        --section-header-title: 1.75rem;
+        --section-header-title: 1.125rem;
       }
 
       .wrn-section-header[data-size="lg"] {
-        --section-header-title: 3rem;
+        --section-header-title: 1.75rem;
       }
     }