fix(ui): align stats surface within max width

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.49",
+      "version": "0.8.50",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/ui/components/StatsBar.wrn

@@ -152,20 +152,26 @@ component StatsBar {
     }
 
     .wrn-stats-bar__inner {
-      width: min(100%, 80rem);
+      --stats-max-width: 80rem;
+      --stats-gutter-width: 0rem;
+
+      width: min(
+        calc(100% - var(--stats-gutter-width)),
+        calc(var(--stats-max-width) - var(--stats-gutter-width))
+      );
       margin-inline: auto;
     }
 
     .wrn-stats-bar[data-gutter="sm"] .wrn-stats-bar__inner {
-      width: min(calc(100% - 2rem), 80rem);
+      --stats-gutter-width: 2rem;
     }
 
     .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner {
-      width: min(calc(100% - 4rem), 80rem);
+      --stats-gutter-width: 4rem;
     }
 
     .wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner {
-      width: min(calc(100% - 6rem), 80rem);
+      --stats-gutter-width: 6rem;
     }
     .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; }
@@ -173,16 +179,16 @@ component StatsBar {
     .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);
+      --stats-max-width: 64rem;
     }
 
     .wrn-stats-bar[data-max-width="lg"] .wrn-stats-bar__inner {
-      width: min(calc(100% - 2rem), 72rem);
+      --stats-max-width: 72rem;
     }
 
     .wrn-stats-bar[data-max-width="wide"] .wrn-stats-bar__inner,
     .wrn-stats-bar[data-max-width="2xl"] .wrn-stats-bar__inner {
-      width: min(calc(100% - 2rem), 90rem);
+      --stats-max-width: 90rem;
     }
 
     .wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__inner {
@@ -504,8 +510,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="sm"] .wrn-stats-bar__inner,
-      .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { width: calc(100% - 2rem); }
+      .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { --stats-gutter-width: 2rem; }
-      .wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner { width: calc(100% - 3rem); }
+      .wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner { --stats-gutter-width: 3rem; }
       .wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
         border-inline: 0;
         border-radius: 0;

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.49",
+  "version": "0.8.50",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -3196,12 +3196,9 @@ test("breadcrumb default separators remain visible without generated icon CSS",
 
 test("stats bar desktop gutters align its surface with container content", () => {
   const source = readFileSync(uiComponentPath("StatsBar"), "utf8");
-  expect(source).toMatch(
+  expect(source).toContain("--stats-max-width: 80rem");
-    /data-gutter="md"[^}]+width: min\(calc\(100% - 4rem\), 80rem\)/s,
+  expect(source).toContain("--stats-gutter-width: 4rem");
-  );
+  expect(source).toContain("calc(var(--stats-max-width) - var(--stats-gutter-width))");
-  expect(source).toMatch(
-    /data-gutter="lg"[^}]+width: min\(calc\(100% - 6rem\), 80rem\)/s,
-  );
 });
 
 test("mega menu bridges the gap between its trigger and panel", async () => {