Update documentation to reflect current state (v4.3.0)

README changes:
- Test count: 628 → 613 (tests removed for deleted API surface)
- Component count: 21 → 22 form components
- Fixed component composition examples to use new FormFieldset API
  instead of removed FormField isGroup / CheckboxGroup legend props

Changelog v4.3.0:
- Documents CI/CD test fixes for FormField, CheckboxGroup, RadioGroup
- Explains architecture clarification (FormField vs FormFieldset)
- Documents new interactive TokenControls component with Theme/Mode/Project Type selectors
- Corrects v4.0.0 descriptions of CheckboxGroup/RadioGroup/FormField/FormFieldset

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

Author: Jeffrey Lauwers

README.md

@@ -65,7 +65,7 @@ pnpm --filter @dsn/design-tokens watch
 # Start Storybook in development mode
 pnpm dev
 
-# Run tests (628 tests across 35 test suites)
+# Run tests (613 tests across 35 test suites)
 pnpm test
 
 # Run tests in watch mode
@@ -174,7 +174,7 @@ All components are fully typed with TypeScript and include comprehensive JSDoc d
 | **Paragraph**     | Yes      | Yes   | Yes           |
 | **UnorderedList** | Yes      | Yes   | Yes           |
 
-**Form Components (21 total)**
+**Form Components (22 total)**
 
 | Component                 | HTML/CSS | React | Web Component |
 | ------------------------- | -------- | ----- | ------------- |
@@ -253,25 +253,24 @@ Components are designed to compose together:
 </FormField>
 
 // React — Checkbox group with fieldset/legend
-<FormField
-  label="Notification preferences"
-  isGroup
+<FormFieldset
+  legend="Notification preferences"
   description="Choose how you want to be notified"
 >
-  <CheckboxGroup legend="Notification preferences">
-    <CheckboxOption label="Email notifications" />
-    <CheckboxOption label="SMS notifications" />
-    <CheckboxOption label="Push notifications" />
+  <CheckboxGroup>
+    <CheckboxOption label="Email notifications" value="email" />
+    <CheckboxOption label="SMS notifications" value="sms" />
+    <CheckboxOption label="Push notifications" value="push" />
   </CheckboxGroup>
-</FormField>
+</FormFieldset>
 
 // React — Radio group
-<FormField label="Delivery method" isGroup>
-  <RadioGroup legend="Delivery method">
-    <RadioOption label="Standard shipping" name="delivery" />
-    <RadioOption label="Express shipping" name="delivery" />
+<FormFieldset legend="Delivery method">
+  <RadioGroup>
+    <RadioOption label="Standard shipping" name="delivery" value="standard" />
+    <RadioOption label="Express shipping" name="delivery" value="express" />
   </RadioGroup>
-</FormField>
+</FormFieldset>
 ```
 
 ## Accessibility
@@ -324,7 +323,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`)
-- **396 tests** covering React components, Web Components, and utilities
+- **613 tests** covering React components, Web Components, and utilities
 - **CI/CD** via GitHub Actions (lint, type-check, test, build)
 
 ## Tech Stack

docs/changelog.md

@@ -6,6 +6,44 @@ All notable changes to this project are documented in this file.
 
 ---
 
+## Version 4.3.0 (February 17, 2025)
+
+### CI/CD Fixes & Interactive Design Token Explorer
+
+**CI/CD Test Fixes**
+
+- **FormField tests rewritten** — Tests updated to match refactored architecture: `FormField` always renders div/label, removed all `isGroup` test cases
+- **CheckboxGroup tests rewritten** — Tests updated to match refactored component: renders div container (not fieldset), removed `legend`/`hideLegend` prop tests
+- **RadioGroup tests rewritten** — Tests updated to match refactored component: renders div container (not fieldset), removed `legend`/`hideLegend` prop tests
+- **All 613 tests passing** across 35 test suites (down from 628 due to removed tests for deleted API surface)
+
+**Architecture Clarification (documented in tests)**
+
+The component architecture was refactored in v4.2.0 but tests weren't updated:
+
+| Component       | Old API (removed)            | New API                                         |
+| --------------- | ---------------------------- | ----------------------------------------------- |
+| `FormField`     | `isGroup`, `hideLabel` props | Always div/label; use `FormFieldset` for groups |
+| `CheckboxGroup` | `legend`, `hideLegend` props | Simple div container only                       |
+| `RadioGroup`    | `legend`, `hideLegend` props | Simple div container only                       |
+
+**Interactive Design Token Explorer**
+
+- **TokenControls component** added to Design Tokens documentation page
+- **Three selectors** for live token exploration: Theme, Mode, and Project Type
+- **Theme options**: Start, Wireframe (matches actual available token files)
+- **Mode options**: Light, Dark
+- **Project Type options**: Default, Information Dense (from `project-types/` folder)
+- **Live updates**: Selecting a configuration dynamically loads the corresponding CSS file and refreshes all TokenTable values on the page
+- All 8 configurations available: 2 themes × 2 modes × 2 project types
+
+**Documentation Updates**
+
+- README component composition examples updated to use new `FormFieldset` API
+- Test counts updated to 613
+
+---
+
 ## Version 4.2.0 (February 16, 2025)
 
 ### GitHub Pages Deployment & Storybook Improvements
@@ -125,9 +163,10 @@ import './Button.css';
 - **Radio component** — Complete (HTML/CSS, React) with checked, disabled states
 - **CheckboxOption component** — Complete (HTML/CSS, React) combines Checkbox + Label with accessible touch targets
 - **RadioOption component** — Complete (HTML/CSS, React) combines Radio + Label with accessible touch targets
-- **CheckboxGroup component** — Complete (HTML/CSS, React) uses fieldset/legend for accessible grouping
-- **RadioGroup component** — Complete (HTML/CSS, React) uses fieldset/legend for accessible grouping
-- **FormField component** — Complete (HTML/CSS, React) intelligent container with automatic fieldset/legend vs div/label rendering
+- **CheckboxGroup component** — Complete (HTML/CSS, React) div container for CheckboxOption items; pair with FormFieldset for accessible grouping
+- **RadioGroup component** — Complete (HTML/CSS, React) div container for RadioOption items; pair with FormFieldset for accessible grouping
+- **FormField component** — Complete (HTML/CSS, React) div/label container for single-value inputs (TextInput, TextArea, etc.)
+- **FormFieldset component** — Complete (HTML/CSS, React) fieldset/legend container for group controls (CheckboxGroup, RadioGroup)
 - **FormFieldLabel component** — Complete (HTML/CSS, React) with required indicator and suffix support
 - **FormFieldDescription component** — Complete (HTML/CSS, React) for help text
 - **FormFieldErrorMessage component** — Complete (HTML/CSS, React) for validation errors