Refresh UI components and showcase; release updated framework packages

packages/ui/components/Card.wrn

@@ -16,6 +16,8 @@ component Card {
     subtitleKey: string = ""
     description: string = ""
     descriptionKey: string = ""
+    showHeader: boolean = true
+    showFooter: boolean = true
     header: string = ""
     footer: string = ""
     imageSrc: string = ""
@@ -170,8 +172,8 @@ component Card {
           {/if}
 
           <div class="wrn-next__card-content">
-            {#if header || title || subtitle || headerActions.length > 0 || dismissible}
-              <header class="wrn-next__card-header">
+            {#if showHeader}
+              <header class="wrn-next__card-header"><slot name="header" />
                 <div class="wrn-next__card-heading">
                   {#if header}
                     <p class="wrn-next__card-eyebrow">{header}</p>
@@ -284,8 +286,8 @@ component Card {
               {/if}
             </div>
 
-            {#if footer || actionLabel}
-              <footer class="wrn-next__card-footer">
+            {#if showFooter}
+              <footer class="wrn-next__card-footer"><div class="wrn-next__card-custom-footer"><slot name="footer" /></div>
                 {#if footer}
                   <span>{footer}</span>
                 {/if}
@@ -321,6 +323,8 @@ component Card {
   }
 
   style {
+    .wrn-next__card-custom-footer:empty { display:none; }
+    .wrn-next__card-header:not(:has(strong,h1,h2,h3,h4,p,button,[data-slot])), .wrn-next__card-footer:not(:has(> span, > a, > .wrn-next__card-custom-footer:not(:empty))) { display:none; }
     .wrn-next__card-media--overlay {
       aspect-ratio: 16 / 9;
       min-height: 18rem;
@@ -340,7 +344,7 @@ component Card {
 
     .wrn-next--card {
       --wrn-card-color: var(--wrn-component-color, var(--wrn-color-primary));
-      --wrn-card-padding: 1.25rem;
+      --wrn-card-padding: var(--wrn-space-panel, 1.25rem);
       display: block;
       width: 100%;
       color: var(--wrn-color-text);
@@ -354,10 +358,15 @@ component Card {
     .wrn-next--card[data-shadow="none"] > .wrn-next__card-panel { box-shadow: none; }
     .wrn-next--card[data-equal-height="true"], .wrn-next--card[data-equal-height="true"] > .wrn-next__card-panel { height: 100%; }
     .wrn-next--card[data-layout="horizontal"] .wrn-next__card-body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; }
-    .wrn-next__card-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 0.7rem; color: var(--wrn-color-primary); background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent); font-size: 1.15rem; }
+    .wrn-next__card-icon { display: inline-block; width: 2rem; height: 2rem; color: var(--wrn-card-icon-color, var(--wrn-color-primary-text)); background-color: currentColor; }
+    .wrn-next--card.wrn-component--color-secondary { --wrn-card-icon-color: var(--wrn-color-secondary-text); }
+    .wrn-next--card.wrn-component--color-success { --wrn-card-icon-color: var(--wrn-color-success-text); }
+    .wrn-next--card.wrn-component--color-warning { --wrn-card-icon-color: var(--wrn-color-warning-text); }
+    .wrn-next--card.wrn-component--color-danger { --wrn-card-icon-color: var(--wrn-color-danger-text); }
+    .wrn-next--card.wrn-component--color-info { --wrn-card-icon-color: var(--wrn-color-info-text); }
 
     .wrn-next--card[data-size="lg"] {
-      --wrn-card-padding: 1.75rem;
+      --wrn-card-padding: 1.5rem;
     }
 
     .wrn-next__card-panel {
@@ -370,7 +379,7 @@ component Card {
       border: 1px solid var(--wrn-color-border);
       border-radius: var(--wrn-radius-md);
       background: var(--wrn-color-surface);
-      box-shadow: var(--wrn-shadow-1);
+      box-shadow: none;
       transition:
         transform var(--wrn-motion-base) var(--wrn-ease-emphasized),
         border-color var(--wrn-motion-base) ease,
@@ -384,8 +393,8 @@ component Card {
 
     .wrn-next--card[data-hover="raise"] > .wrn-next__card-panel:hover {
       border-color: color-mix(in srgb, var(--wrn-card-color) 38%, var(--wrn-color-border));
-      box-shadow: var(--wrn-shadow-3);
-      transform: translateY(-4px);
+      box-shadow: var(--wrn-shadow-2);
+      transform: translateY(-2px);
     }
 
     .wrn-next__card-header,
@@ -531,7 +540,7 @@ component Card {
     .wrn-next__card-subtitle {
       color: var(--wrn-color-muted);
       font-size: 0.72rem;
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: 0.06em;
       text-transform: uppercase;
     }
@@ -626,9 +635,12 @@ component Card {
       min-height: 100%;
     }
 
+    .wrn-next__card-group .wrn-next__card-content { padding: var(--wrn-card-padding, 1.25rem); display: grid; gap: 0.65rem; }
+    .wrn-next__card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; }
     .wrn-next__card-group {
       display: grid;
-      grid-template-columns: repeat(var(--wrn-card-columns, 3), minmax(0, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+      width: 100%;
     }
 
     .wrn-next__card-group > .wrn-next__card-panel {