feat(ui): own responsive marketing layout APIs

packages/ui/components/StatsBar.wrn

@@ -9,6 +9,11 @@ component StatsBar {
     color: string = "primary"
     variant: string = "raised"
     maxWidth: string = "xl"
+    radius: string = "default"
+    shadow: string = "default"
+    gutter: string = "md"
+    outerSpacing: string = "none"
+    mobileColumns: number = 1
     class: string = ""
   }
 
@@ -24,6 +29,7 @@ component StatsBar {
       data-color='{color}'
       data-variant='{variant}'
       data-max-width='{maxWidth}'
+      data-radius='{radius}' data-shadow='{shadow}' data-gutter='{gutter}' data-outer-spacing='{outerSpacing}' data-mobile-columns='{mobileColumns}'
       class='wrn-stats-bar {class}'
       aria-label="Key statistics"
     >
@@ -149,6 +155,10 @@ component StatsBar {
       width: min(calc(100% - 2rem), 80rem);
       margin-inline: auto;
     }
+    .wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
+    .wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
+    .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
+    .wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
 
     .wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
       width: min(calc(100% - 2rem), 64rem);
@@ -480,6 +490,8 @@ component StatsBar {
     }
 
     @media (max-width: 639px) {
+      .wrn-stats-bar[data-mobile-columns="1"] .wrn-stats-bar__surface { grid-template-columns: 1fr; }
+      .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { width: calc(100% - 2rem); }
       .wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
         border-inline: 0;
         border-radius: 0;