Merge pull request #120 from jeffreylauwers/fix/preview-frame-sb-unstyled

fix(storybook): sb-unstyled op PreviewFrame — font-size override opgelost

Author: jeffreylauwers

docs/05-storybook-configuration.md

@@ -287,6 +287,7 @@ Custom React components voor Storybook documentation, gelocaliseerd in `packages
 **Features:**
 
 - `dsn-body` class op de wrapper div — zorgt voor correcte typography tokens (`font-size`, `font-family`, `line-height`, `font-weight`) en achtergrondkleur (`--dsn-color-neutral-bg-document`); gedrag identiek aan de afzonderlijke story-canvassen
+- `sb-unstyled` class op de wrapper div — sluit de PreviewFrame en al zijn kind-elementen uit van Storybook's docs-pagina CSS-reset (`.css-qa4clq :where(div:not(.sb-unstyled, ...))`), die anders `font-size: 16px` zou opleggen en de token-waarde overschrijven
 - Subtiele border (`--dsn-color-neutral-border-subtle`) en border-radius bovenaan
 - Geen onderkant border — verbindt visueel met de CodeTabs eronder als één geheel
 

docs/changelog.md

@@ -6,6 +6,16 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 5.14.2 (March 25, 2026)
+
+### Storybook: PreviewFrame font-size override opgelost (sb-unstyled)
+
+#### Fixed
+
+- **PreviewFrame** — `sb-unstyled` class toegevoegd aan de wrapper div. Storybook's docs-pagina CSS bevat een regel `.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div))` die `font-size: 16px` instelde op alle `div`-elementen in de docs-pagina. Doordat deze selector dezelfde specificiteit had als `.dsn-body` en later geladen werd, overschreef die de token-waarde `var(--dsn-text-font-size-md)`. Componenten als Card en Details lieten daardoor een verkeerde font-size zien in het visuele voorbeeld op Docs-pagina's — ondanks dat losse stories wél correct werkten. De `sb-unstyled` class sluit de wrapper én al zijn kind-divs expliciet uit van die Storybook-reset.
+
+---
+
 ## Version 5.14.1 (March 25, 2026)
 
 ### Storybook: dsn-body op PreviewFrame visuele voorbeelden (PR #119)

packages/storybook/src/components/PreviewFrame.tsx

@@ -12,7 +12,7 @@ interface PreviewFrameProps {
 export function PreviewFrame({ children }: PreviewFrameProps) {
   return (
     <div
-      className="dsn-body"
+      className="dsn-body sb-unstyled"
       style={{
         border: '1px solid var(--dsn-color-neutral-border-subtle, #C4C4C4)',
         borderRadius: '4px 4px 0 0',