Refresh UI components and showcase; release updated framework packages

packages/ui/components/MetricCard.wrn

@@ -31,7 +31,7 @@ component MetricCard {
     size: string = "default"
     color: string = "primary"
     variant: string = "default"
-    hover: string = "lift"
+    hover: string = "none"
     align: string = "left"
     class: string = ""
   }
@@ -211,7 +211,7 @@ component MetricCard {
       --metric-accent-soft: var(--wrn-color-primary-soft);
       --metric-accent-muted: var(--wrn-color-primary-muted);
       --metric-contrast: var(--wrn-color-primary-contrast);
-      --metric-border: color-mix(in srgb, var(--metric-accent) 16%, var(--wrn-color-border));
+      --metric-border: var(--wrn-color-border);
 
       position: relative;
       isolation: isolate;
@@ -220,20 +220,12 @@ component MetricCard {
       width: 100%;
       min-width: 0;
       height: 100%;
-      padding: 1.5rem;
+      padding: var(--wrn-space-panel, 1.25rem);
       color: var(--wrn-color-text);
-      background:
-        radial-gradient(
-          circle at 100% 0%,
-          color-mix(in srgb, var(--metric-accent) 8%, transparent),
-          transparent 36%
-        ),
-        var(--wrn-color-surface-raised);
+      background: var(--wrn-color-surface);
       border: 1px solid var(--metric-border);
-      border-radius: 1.25rem;
-      box-shadow:
-        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
-        0 14px 36px color-mix(in srgb, black 10%, transparent);
+      border-radius: var(--wrn-radius-md);
+      box-shadow: none;
       overflow: hidden;
       transition:
         transform 180ms ease,
@@ -288,8 +280,8 @@ component MetricCard {
     }
 
     .wrn-metric-card[data-size="lg"] {
-      padding: 1.9rem;
-      border-radius: 1.5rem;
+      padding: 1.5rem;
+      border-radius: var(--wrn-radius-lg);
     }
 
     .wrn-metric-card[data-variant="soft"] {
@@ -464,7 +456,7 @@ component MetricCard {
       align-items: baseline;
       gap: 0.2rem;
       width: 100%;
-      margin-top: 1.15rem;
+      margin-top: 0.75rem;
     }
 
     .wrn-metric-card[data-align="center"] .wrn-metric-card__value-row {
@@ -477,7 +469,7 @@ component MetricCard {
 
     .wrn-metric-card__value {
       color: var(--wrn-color-text);
-      font-size: clamp(2rem, 5vw, 2.8rem);
+      font-size: clamp(1.75rem, 3vw, 2rem);
       font-weight: 700;
       line-height: 0.98;
       letter-spacing: -0.045em;
@@ -486,11 +478,11 @@ component MetricCard {
     }
 
     .wrn-metric-card[data-size="sm"] .wrn-metric-card__value {
-      font-size: clamp(1.65rem, 4vw, 2.15rem);
+      font-size: 1.5rem;
     }
 
     .wrn-metric-card[data-size="lg"] .wrn-metric-card__value {
-      font-size: clamp(2.45rem, 6vw, 3.5rem);
+      font-size: clamp(2rem, 4vw, 2.5rem);
     }
 
     .wrn-metric-card[data-variant="solid"] .wrn-metric-card__value {
@@ -513,8 +505,8 @@ component MetricCard {
       max-width: 38rem;
       margin: 0.8rem 0 0;
       color: var(--wrn-color-text-muted);
-      font-size: 0.86rem;
-      line-height: 1.7;
+      font-size: 0.8125rem;
+      line-height: 1.5;
     }
 
     .wrn-metric-card__progress-block {