fix(configurator): size-scale preview flattened button label font (card backdrop)

configurator/src/lib/preview/sections.ts

@@ -3,7 +3,7 @@
 // configurable token/class is visible and reacts live to the configurator.
 // Foundations enumerate the real API via ./catalog; components are curated.
 
-import { page, section, specimen, tag, cluster, grid, stack, well, esc } from "./specimen";
+import { page, section, specimen, tag, cluster, grid, stack, well, frame, esc } from "./specimen";
 import { familySteps, classesOfKind, tokensMatching, tokensByGroup, classesByKind } from "./catalog";
 
 const RAMP_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -331,8 +331,13 @@ const BTN_SIZES: [string, string][] = [["xs", "XS"], ["s", "S"], ["", "M"], ["l"
 export function components(): string {
   const btn = (mods: string, label: string) => `<button class="sf-btn ${mods}">${esc(label)}</button>`;
 
+  // Button rows use frame() (a non-card backdrop), NOT well(): the framework's
+  // `.sf-card .sf-btn` rule pins a nested button's label to --sf-text-s, which
+  // would flatten the per-rung font ladder in the Size-scale demo (padding and
+  // min-height still grow, but the label wouldn't). Cards below keep .sf-card.
+
   // Families — every shipped colour family as a fill button.
-  const families = well(cluster(
+  const families = frame(cluster(
     ...BTN_FAMILIES.map((f) => btn(`sf-btn--${f}`, f[0].toUpperCase() + f.slice(1))),
   ));
 
@@ -343,11 +348,11 @@ export function components(): string {
     btn(`sf-btn--${family} sf-btn--outline`, "Outline"),
     ...(withGradient ? [btn(`sf-btn--${family} sf-btn--gradient`, "Gradient")] : []),
   );
-  const styles = well(stack("s", styleRow("primary", true), styleRow("neutral", false)));
+  const styles = frame(stack("s", styleRow("primary", true), styleRow("neutral", false)));
 
   // Size scale — the hero. Aligned to a common baseline so the per-rung
   // font-size / padding / min-height ladder reads as a clear staircase.
-  const sizes = well(
+  const sizes = frame(
     `<div class="sf-cluster sf-cluster--s" style="align-items:flex-end">${BTN_SIZES.map(
       ([s, label]) => btn(`sf-btn--primary${s ? ` sf-btn--${s}` : ""}`, label),
     ).join("")}</div>`,
@@ -358,7 +363,7 @@ export function components(): string {
   // (dashed) where it actually fills its width.
   // align-items:flex-start so buttons size to content — only --block (explicit
   // 100%) and the block-cq inside the 16rem query container actually stretch.
-  const widths = well(`<div class="sf-stack sf-stack--s" style="align-items:flex-start">
+  const widths = frame(`<div class="sf-stack sf-stack--s" style="align-items:flex-start">
     <button class="sf-btn sf-btn--primary sf-btn--block">Block — full width</button>
     <button class="sf-btn sf-btn--neutral sf-btn--outline sf-btn--block">Block — outline</button>
     <button class="sf-btn sf-btn--primary sf-btn--block-cq">Block-cq — auto here (wide container)</button>
@@ -368,7 +373,7 @@ export function components(): string {
   </div>`);
 
   // States — default, disabled, loading.
-  const states = well(cluster(
+  const states = frame(cluster(
     btn("sf-btn--primary", "Default"),
     `<button class="sf-btn sf-btn--primary" disabled>Disabled</button>`,
     `<button class="sf-btn sf-btn--primary sf-is-loading">Loading</button>`,

configurator/src/lib/preview/specimen.ts

@@ -63,3 +63,11 @@ export function grid(min: number, ...items: string[]): string {
 export function well(content: string): string {
   return `<div class="sf-card sf-card--bordered">${content}</div>`;
 }
+
+/** A plain bordered surface backdrop — like `well`, but NOT a `.sf-card`.
+ *  Use for rows of `.sf-btn`: the framework's `.sf-card .sf-btn` rule pins a
+ *  nested button's label to `--sf-text-s`, which would flatten a per-size
+ *  button font ladder; a non-card frame lets each button render its true size. */
+export function frame(content: string): string {
+  return `<div style="padding:var(--sf-space-l);background:var(--sf-color-surface);border:var(--sf-border-width-1) solid var(--sf-color-border);border-radius:var(--sf-radius-l)">${content}</div>`;
+}

demos/full-api-demo-with-overrides.html

@@ -122,7 +122,7 @@
   </nav>
   <main id="main">
     <h1>SLASHED Full API Demo</h1>
-    <p style="color:var(--sf-color-text--muted)">v0.7.14 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
+    <p style="color:var(--sf-color-text--muted)">v0.7.15 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
     <div class="notice"><strong>ultimate-override.css is ACTIVE.</strong> Every value below is recomputed from perturbed knob tokens — toggle it off in the toolbar, or compare against <a href="full-api-demo.html">the un-overridden page</a>.</div>
 
     <section id="tokens">

demos/full-api-demo.html

@@ -121,7 +121,7 @@
   </nav>
   <main id="main">
     <h1>SLASHED Full API Demo</h1>
-    <p style="color:var(--sf-color-text--muted)">v0.7.14 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
+    <p style="color:var(--sf-color-text--muted)">v0.7.15 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)</p>
     <div class="notice">Baseline render with default tokens. Use the toolbar to switch theme, toggle the ultimate override live, or replay motion. The always-on override variant is <a href="full-api-demo-with-overrides.html">full-api-demo-with-overrides.html</a>.</div>
 
     <section id="tokens">

demos/ultimate-override.css

@@ -1,6 +1,6 @@
 /* ============================================================================
    ULTIMATE OVERRIDE — generated by demos/generate.mjs (do not edit by hand)
-   SLASHED v0.7.14
+   SLASHED v0.7.15
 
    Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct
    value so full-api-demo.html can prove each one is wired end to end.