From 9168a3660e9e7aa413ca5f71c94202fe9b2b5193 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Wed, 10 Jun 2026 08:54:46 +0000
Subject: [PATCH] fix(configurator): render WCAG color swatches, sync to
 0.5.29, show display type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three issues reported after #297 merged:

- WCAG panel showed NO color swatches. The configurator never loads the
  framework stylesheet, so the visible panel's `var(--sf-color-*)` had no
  values — only the hidden probe roots carried them. Apply the same
  declaration block (declStr) to the visible .wcag container so the matrix
  swatches, checker result, on-color usage chips and locked-role swatches
  actually render (and follow the light/dark preview toggle).
- Version stamp stuck at 0.5.28. The v0.5.29 'version-sync' commit bumped
  package.json but didn't re-run the configurator sync. Re-synced
  api-index.generated.json -> frameworkVersion 0.5.29 (819 tokens).
- Live preview didn't showcase the display font sizes. Added a 'Display
  type' block (--sf-text-display-l/m/s with --sf-font-display) and a
  'Type scale' block (--sf-text-2xl..xs).

svelte-check clean, build OK, 42/42 tests.
---
 configurator/src/components/Preview.svelte    | 50 +++++++++++++++++++
 configurator/src/components/WcagPanel.svelte  |  9 +++-
 .../src/data/api-index.generated.json         |  2 +-
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/configurator/src/components/Preview.svelte b/configurator/src/components/Preview.svelte
index c18435ee..8a0a65c5 100644
--- a/configurator/src/components/Preview.svelte
+++ b/configurator/src/components/Preview.svelte
@@ -19,6 +19,7 @@
     { var: 'raised', label: 'Raised' },
   ];
   const spaceSteps = ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'];
+  const typeScale = ['2xl', 'xl', 'l', 'm', 's', 'xs'];
 </script>
 
 <section class="preview">
@@ -52,6 +53,27 @@
         <p class="pv__muted">Muted caption · secondary hierarchy · auto-contrasting.</p>
       </section>
 
+      <!-- Display type — the framework's display font sizes -->
+      <section class="pv__block">
+        <p class="pv__eyebrow">Display type</p>
+        <p class="pv__display pv__display--l">Display L</p>
+        <p class="pv__display pv__display--m">Display M</p>
+        <p class="pv__display pv__display--s">Display S</p>
+      </section>
+
+      <!-- Type scale -->
+      <section class="pv__block">
+        <p class="pv__eyebrow">Type scale</p>
+        <div class="pv__scale">
+          {#each typeScale as s (s)}
+            <div class="pv__scale-row">
+              <span class="pv__scale-sample" style="font-size: var(--sf-text-{s});">Aa</span>
+              <code>--sf-text-{s}</code>
+            </div>
+          {/each}
+        </div>
+      </section>
+
       <!-- Surfaces / elevation -->
       <section class="pv__block">
         <p class="pv__eyebrow">Surfaces</p>
@@ -239,6 +261,34 @@
     font-size: var(--sf-text-s, 0.85rem);
     color: var(--sf-color-text--muted, inherit);
   }
+
+  /* Display type + type scale */
+  .pv__display {
+    margin: 0;
+    font-family: var(--sf-font-display, var(--sf-font-heading, inherit));
+    font-weight: var(--sf-font-weight-display, 800);
+    color: var(--sf-color-heading, inherit);
+    line-height: 1.05;
+    overflow-wrap: anywhere;
+    max-width: 100%;
+  }
+  .pv__display--l { font-size: var(--sf-text-display-l, 3rem); line-height: var(--sf-display-l-line-height, 1.05); }
+  .pv__display--m { font-size: var(--sf-text-display-m, 2.4rem); line-height: var(--sf-display-m-line-height, 1.1); }
+  .pv__display--s { font-size: var(--sf-text-display-s, 1.9rem); line-height: var(--sf-display-s-line-height, 1.15); }
+
+  .pv__scale { display: flex; flex-direction: column; gap: 6px; }
+  .pv__scale-row { display: flex; align-items: baseline; gap: 10px; }
+  .pv__scale-sample {
+    font-family: var(--sf-font-heading, inherit);
+    color: var(--sf-color-text, inherit);
+    line-height: 1.1;
+    min-width: 2.2em;
+  }
+  .pv__scale-row code {
+    font-family: var(--sf-font-mono, monospace);
+    font-size: 11px;
+    color: var(--sf-color-text--muted, inherit);
+  }
   .pv__a {
     color: var(--sf-color-link, #4f8cff);
   }
diff --git a/configurator/src/components/WcagPanel.svelte b/configurator/src/components/WcagPanel.svelte
index d0f92c94..966eb201 100644
--- a/configurator/src/components/WcagPanel.svelte
+++ b/configurator/src/components/WcagPanel.svelte
@@ -218,7 +218,14 @@
   {/each}
 </div>
 
-<div class="wcag">
+<!--
+  declStr (all framework tokens + overrides, current theme) is applied to the
+  VISIBLE panel too — not just the hidden probes — so every `var(--sf-color-*)`
+  swatch, the checker result, the usage chips and the locked-role swatches
+  actually render their color. The configurator never loads the framework
+  stylesheet, so without this the panel showed blank/inherited swatches.
+-->
+<div class="wcag" style={declStr}>
   <header class="wcag__head">
     <h2 class="wcag__title">Accessibility</h2>
     <p class="wcag__lead">
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json
index 12eda948..a3da51e5 100644
--- a/configurator/src/data/api-index.generated.json
+++ b/configurator/src/data/api-index.generated.json
@@ -2,7 +2,7 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "frameworkVersion": "0.5.28",
+    "frameworkVersion": "0.5.29",
     "tokensHash": "e3312bd5fde6",
     "bundles": [
       "essential",