docs: Logo component documenteren (v5.20.0)

Logo toegevoegd aan docs/03-components.md (Branding Components sectie),
changelog bijgewerkt, testtellingen bijgewerkt naar 1248 tests / 62 suites.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Jeffrey Lauwers

README.md

@@ -382,7 +382,7 @@ Comprehensive documentation is available in the `/docs` folder:
 
 - **Pre-commit hooks** via Husky + lint-staged (ESLint + Prettier)
 - **Type checking** across all packages (`pnpm type-check`)
-- **1225 tests** covering React components, Web Components, and utilities
+- **1248 tests** covering React components, Web Components, and utilities
 - **CI/CD** via GitHub Actions (lint, type-check, test, build)
 
 ## Tech Stack

docs/03-components.md

@@ -1,6 +1,6 @@
 # Components
 
-**Last Updated:** April 4, 2026
+**Last Updated:** April 5, 2026
 
 Complete component specifications and guidelines for the Design System Starter Kit.
 
@@ -13,8 +13,9 @@ Complete component specifications and guidelines for the Design System Starter K
 3. [Content Components](#content-components)
 4. [Display & Feedback Components](#display--feedback-components)
 5. [Navigation Components](#navigation-components)
-6. [Form Components](#form-components)
-7. [Web Components Registration](#web-components-registration)
+6. [Branding Components](#branding-components)
+7. [Form Components](#form-components)
+8. [Web Components Registration](#web-components-registration)
 
 ---
 
@@ -1824,6 +1825,90 @@ const [isOpen, setIsOpen] = React.useState(false);
 
 ---
 
+## Branding Components
+
+**Status:** Complete (HTML/CSS, React) — 1 component total
+
+### Logo
+
+**Status:** Complete (HTML/CSS, React)
+
+**Location:** `packages/components-{html|react}/src/logo/` / `Logo/`
+
+**Tokens:** `tokens/components/logo.json`
+
+**Props:** `title`, `aria-hidden`, `className` + alle `React.SVGProps<SVGSVGElement>` attributen
+
+**Features:**
+
+- Rendert het Starter Kit-logo als inline SVG — CSS-klassen op paden werken hierdoor correct
+- Twee kleurlagen via design tokens: `dsn-logo__primary` (achtergrond + letterpaden) en `dsn-logo__label` (binnenste rechthoek)
+- Tokens refereren naar thema-kleuren → past automatisch mee bij thema- en moduswisseling
+- Standalone gebruik: `role="img"` + `<title id>` + `aria-labelledby` koppeling
+- Decoratief gebruik: `aria-hidden={true}` → geen `<title>`, geen `role`, geen `aria-labelledby`
+- `useId()` (React 18+) garandeert unieke title-ids bij meerdere instanties op één pagina
+- `React.forwardRef<SVGSVGElement>`
+
+**CSS-klassen:**
+
+| Klasse              | Element  | Beschrijving                                                                    |
+| ------------------- | -------- | ------------------------------------------------------------------------------- |
+| `dsn-logo`          | `<svg>`  | Basisklasse voor het logocomponent                                              |
+| `dsn-logo__primary` | `<path>` | Achtergrondrechthoek + alle letterpaden — `fill: var(--dsn-logo-color-primary)` |
+| `dsn-logo__label`   | `<path>` | Binnenste rechthoek — `fill: var(--dsn-logo-color-label)`                       |
+
+**Design Tokens:**
+
+| Token                      | Waarde                                    | Beschrijving                                  |
+| -------------------------- | ----------------------------------------- | --------------------------------------------- |
+| `--dsn-logo-color-primary` | `{dsn.color.accent-1-inverse.bg-default}` | Merkkleur — blauw (Start) / zwart (Wireframe) |
+| `--dsn-logo-color-label`   | `{dsn.color.neutral.bg-document}`         | Documentachtergrond — doorkijkje-effect       |
+
+**Usage:**
+
+```html
+<!-- HTML/CSS — standalone -->
+<svg
+  class="dsn-logo"
+  xmlns="http://www.w3.org/2000/svg"
+  width="186"
+  height="48"
+  viewBox="0 0 186 48"
+  fill="none"
+  role="img"
+  aria-labelledby="logo-title"
+>
+  <title id="logo-title">Starter Kit</title>
+  <path class="dsn-logo__primary" d="M0 0h185.491v48H0z" />
+  <path class="dsn-logo__label" d="M8 8h169.491v32H8z" />
+  <!-- letterpaden met dsn-logo__primary -->
+</svg>
+
+<!-- HTML/CSS — decoratief (in een link) -->
+<a href="/">
+  <svg class="dsn-logo" aria-hidden="true" ...><!-- paden --></svg>
+  <span class="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+</a>
+```
+
+```tsx
+// React — standalone
+<Logo />
+
+// React — decoratief
+<a href="/">
+  <Logo aria-hidden={true} />
+  <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+</a>
+
+// React — custom title
+<Logo title="Mijn Organisatie" />
+```
+
+**Tests:** React (14 tests)
+
+---
+
 ## Form Components
 
 **Status:** Complete (HTML/CSS, React) — 25 components total
@@ -2135,15 +2220,15 @@ defineButton('my-custom-button');
 
 ## Component Statistics
 
-**Total Components:** 47
+**Total Components:** 48
 
 **Implementations:**
 
-- **HTML/CSS:** 47 components
-- **React:** 47 components (1149 tests total, 56 test suites)
+- **HTML/CSS:** 48 components
+- **React:** 48 components (1248 tests total, 62 test suites)
 - **Web Component:** 7 components (Button, Heading, Icon, Link, OrderedList, Paragraph, UnorderedList)
 
-**Test Coverage:** 1149 tests across 56 test suites
+**Test Coverage:** 1248 tests across 62 test suites
 
 ---
 

docs/README.md

@@ -91,8 +91,8 @@ Complete documentation voor het Design System Starter Kit.
 
 - **Tokens per configuration:** ~1100 (400 semantic + 700 component)
 - **Configurations:** 8 (2 themes × 2 modes × 2 project types)
-- **Components:** 49 (5 layout + 10 content + 9 display/feedback + 3 navigation + 25 form; HTML/CSS + React)
-- **Tests:** 1225 across 60 test suites
+- **Components:** 48 (5 layout + 10 content + 9 display/feedback + 1 branding + 3 navigation + 25 form; HTML/CSS + React)
+- **Tests:** 1248 across 62 test suites
 - **Storybook stories:** 130+
 
 ---

docs/changelog.md

@@ -6,6 +6,23 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 5.20.0 (April 5, 2026)
+
+### Logo component (issue #126)
+
+#### Added
+
+- **Logo** component — theme-aware inline SVG logo met twee kleurlagen gekoppeld aan design tokens (PR #139)
+- `--dsn-logo-color-primary` token → `{dsn.color.accent-1-inverse.bg-default}` (merkkleur per actief thema)
+- `--dsn-logo-color-label` token → `{dsn.color.neutral.bg-document}` (documentachtergrond, doorkijkje-effect)
+- Standalone gebruik: `role="img"` + `<title>` + `aria-labelledby`; decoratief gebruik: `aria-hidden={true}`
+- `useId()` voor unieke title-ids bij meerdere instanties op één pagina
+- `title` prop (default: `"Starter Kit"`) en volledige spread van `React.SVGProps<SVGSVGElement>`
+- 14 React tests
+- Referentie-SVG (`logo_starter-kit.svg`) verplaatst van project root naar `packages/components-html/src/logo/`
+
+---
+
 ## Version 5.18.0 (April 4, 2026)
 
 ### MenuButton component + gedeelde menu-item tokens