@@ -6,6 +6,89 @@ All notable changes to this project are documented in this file.
66
77---
88
9+ ## Version 4.9.0 (March 5, 2026)
10+
11+ ### Component-level tokens: kleur-tokens Alert en Note gepubliceerd (PR #68 , issue #67 )
12+
13+ - ** Alert:** 16 nieuwe component-level kleur-tokens toegevoegd aan ` alert.json ` — 4 varianten (info, negative, positive, warning) × 4 eigenschappen (background-color, border-color, color, icon-color)
14+ - ** Note:** 20 nieuwe component-level kleur-tokens toegevoegd aan ` note.json ` — 5 varianten (info, negative, neutral, positive, warning) × 4 eigenschappen (background-color, border-inline-start-color, color, icon-color)
15+ - ` alert.css ` en ` note.css ` : intermediate lokale CSS properties verwijzen nu naar de gepubliceerde JSON token variabelen in plaats van rechtstreeks naar semantische tokens
16+ - ` Alert.docs.md ` en ` Note.docs.md ` : twee tabellen (layout + kleur) samengevoegd tot één uniforme tokentabel conform StatusBadge patroon; disclaimer "lokale CSS custom properties" verwijderd
17+ - Variant kleur-tokens zijn nu overschrijfbaar per thema via CSS custom properties
18+
19+ ---
20+
21+ ## Version 4.8.0 (March 4, 2026)
22+
23+ ### Component-level tokens: Button, FormFieldStatus, Alert, Note, StatusBadge (PR #66 , issue #65 )
24+
25+ ** Toegevoegde tokens Button**
26+
27+ - ` dsn.button.border-radius ` → ` {dsn.border.radius.md} `
28+ - ` dsn.button.border-width ` → ` {dsn.border.width.thin} `
29+ - ` dsn.button.font-family ` → ` {dsn.text.font-family.default} `
30+ - ` dsn.button.font-weight ` → ` {dsn.text.font-weight.bold} `
31+ - ` dsn.button.line-height ` → ` {dsn.text.line-height.md} `
32+ - ` dsn.button.min-block-size ` → ` {dsn.pointer-target.min-block-size} `
33+ - ` dsn.button.min-inline-size ` → ` {dsn.pointer-target.min-inline-size} `
34+ - ` dsn.button.size.small.min-block-size ` → ` 2.5rem ` (kleinere touch target voor small variant)
35+ - ` button.css ` : 7 semantische tokens + 1 hardcoded waarde vervangen door component-level tokens
36+
37+ ** Toegevoegde tokens FormFieldStatus**
38+
39+ - ` dsn.form-field-status.gap ` → ` {dsn.space.text.sm} `
40+ - ` dsn.form-field-status.icon-size ` → ` {dsn.icon.size.md} `
41+ - ` dsn.form-field-status.positive-color ` → ` {dsn.color.positive.color-default} `
42+ - ` dsn.form-field-status.warning-color ` → ` {dsn.color.warning.color-default} `
43+
44+ ** Toegevoegde icon-size tokens (Alert, Note, StatusBadge)**
45+
46+ - ` dsn.alert.icon-size ` → ` {dsn.icon.size.xl} ` (ook breedte eerste grid-kolom)
47+ - ` dsn.note.icon-size ` → ` {dsn.icon.size.xl} ` (ook breedte eerste grid-kolom)
48+ - ` dsn.status-badge.icon-size ` → ` {dsn.icon.size.sm} `
49+
50+ ** Docs**
51+
52+ - ` Button.docs.md ` : 7 verouderde semantische token-rijen vervangen door 8 component-level token-rijen
53+ - ` Button.docs.md ` : 9 verouderde ` --dsn-button-link-* ` tokens verwijderd (link-variant bestaat niet meer; vervangen door LinkButton component)
54+ - ` FormFieldStatus.docs.md ` , ` Alert.docs.md ` , ` Note.docs.md ` , ` StatusBadge.docs.md ` : tokentabellen bijgewerkt
55+
56+ ---
57+
58+ ** Session 8 werk (PR's #43 –#64 )**
59+
60+ ### LinkButton en ButtonLink componenten (PR #43 , issue #41 / PR #44 , issue #42 )
61+
62+ ** LinkButton**
63+
64+ - ** LinkButton component** — semantisch ` <button> ` , visueel als een Link — voor JS-acties met lage attentiewaarde
65+ - CSS: erft ` dsn-link ` en ` dsn-link-button ` klassen
66+ - ` disabled ` : native ` <button disabled> ` + CSS ` .dsn-link.dsn-link-button:disabled `
67+ - ` font: inherit ` bewust weggelaten uit ` dsn-link-button ` — ` dsn-link ` zet dit al; herhalen overschrijft ` font-size ` van size-klassen
68+ - Storybook: Default, Disabled, All states, alle size-varianten, Long text, RTL
69+
70+ ** ButtonLink**
71+
72+ - ** ButtonLink component** — semantisch ` <a> ` , visueel als een Button — voor navigatieacties met hoge attentiewaarde
73+ - CSS: ` dsn-button dsn-button--{variant} dsn-button--size-{size} dsn-button-link `
74+ - ` disabled ` : ` aria-disabled="true" ` + ` tabIndex={-1} ` + ` pointer-events: none ` (` :disabled ` pseudo-class werkt niet op ` <a> ` )
75+ - ` external ` : auto ` target="_blank" ` + ` rel="noopener noreferrer" ` + zichtbare "(opent nieuw tabblad)" tekst
76+ - ` children ` altijd gewrapt in ` <span class="dsn-button__label"> ` — zelfde patroon als Button
77+ - Storybook: Default, alle varianten, Disabled, External, Long text, RTL
78+
79+ ### Storybook TypeScript fixes (PR's #51 , #52 , #53 )
80+
81+ - ` #51 ` — Ambient module declaration toegevoegd voor ` *.mdx ` imports (TypeScript kende het type niet)
82+ - ` #52 ` — Subpath export geconfigureerd voor ` icon-registry.generated ` in ` components-react `
83+ - ` #53 ` — ` TS7053 ` opgelost voor ` globalThis ` string-index in ` preview.ts `
84+
85+ ### Token key ordering (PR #57 , issue #56 / PR #64 , issue #63 )
86+
87+ - ` #56 ` — Consistente sleutelvolgorde doorgevoerd in alle token JSON bestanden: depth-first, alphabetisch, states → variants → sub-componenten
88+ - ` #63 ` — Follow-up: tokenvolgorde ook doorgevoerd in alle ` .docs.md ` tabellen in Storybook
89+
90+ ---
91+
992## Version 4.7.0 (March 3, 2026)
1093
1194### Note component + Alert/Note polish
0 commit comments